ui 수정

@@ -74,8 +74,7 @@ const GifEditor = ({ previewURL }) => {
     const res = await postGif(formData);
     const res = await postGif(formData);
 
 
     setIsUploadLoading(false);
     setIsUploadLoading(false);
-    // https://gif-generator.bu.to
-    setViewLink(`http://localhost:3000/${res.id}`);
+    setViewLink(`https://gif-generator.bu.to/${res.id}`);
   };
   };
 
 
   return (
   return (
@@ -84,7 +83,9 @@ const GifEditor = ({ previewURL }) => {
         {((isMakeStarted && !download) || isUploadLoading) && (
         {((isMakeStarted && !download) || isUploadLoading) && (
           <>
           <>
             <div className="background" />
             <div className="background" />
-            <div className="download">loading... {percent}%</div>
+            <div className="download">
+              loading... {!isUploadLoading && percent}%
+            </div>
           </>
           </>
         )}
         )}
         {!isUploadLoading && viewLink && (
         {!isUploadLoading && viewLink && (
@@ -132,7 +133,7 @@ const Wrapper = styled.div`
   .make {
   .make {
     font: 800 11.5px Arial;
     font: 800 11.5px Arial;
     position: absolute;
     position: absolute;
-    right: 0;
+    left: 0;
     top: 0;
     top: 0;
     width: 120px;
     width: 120px;
     height: 40px;
     height: 40px;
@@ -145,6 +146,9 @@ const Wrapper = styled.div`
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     cursor: pointer;
     cursor: pointer;
+    :hover {
+      text-decoration: underline;
+    }
   }
   }
   .background {
   .background {
     position: fixed;
     position: fixed;
@@ -169,6 +173,9 @@ const Wrapper = styled.div`
       :last-child {
       :last-child {
         margin-left: 1rem;
         margin-left: 1rem;
       }
       }
+      :hover {
+        text-decoration: underline;
+      }
     }
     }
   }
   }
   .tui-image-editor-container {
   .tui-image-editor-container {
@@ -184,6 +191,9 @@ const Wrapper = styled.div`
   .tui-image-editor-header-buttons {
   .tui-image-editor-header-buttons {
     display: none;
     display: none;
   }
   }
+  .tui-image-editor-help-menu {
+    display: none;
+  }
 `;
 `;
 
 
 export default GifEditor;
 export default GifEditor;

@@ -2,6 +2,7 @@
 import ImageEditor from "@toast-ui/react-image-editor";
 import ImageEditor from "@toast-ui/react-image-editor";
 import { useState } from "react";
 import { useState } from "react";
 import styled from "styled-components";
 import styled from "styled-components";
+import { media } from "styles/theme";
 import "tui-image-editor/dist/tui-image-editor.css";
 import "tui-image-editor/dist/tui-image-editor.css";
 
 
 const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
 const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
@@ -69,11 +70,10 @@ const Container = styled.div`
   .move {
   .move {
     font: 800 11.5px Arial;
     font: 800 11.5px Arial;
     position: absolute;
     position: absolute;
-    right: 0;
     top: 0;
     top: 0;
+    left: 7.8rem;
     width: 120px;
     width: 120px;
     height: 40px;
     height: 40px;
-    background: red;
     z-index: 10;
     z-index: 10;
     border-radius: 20px;
     border-radius: 20px;
     margin: 8px;
     margin: 8px;
@@ -82,6 +82,12 @@ const Container = styled.div`
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     cursor: pointer;
     cursor: pointer;
+    :hover {
+      text-decoration: underline;
+    }
+    ${media.tablet} {
+      left: 12.3rem;
+    }
   }
   }
   .alert {
   .alert {
     position: fixed;
     position: fixed;
@@ -99,6 +105,12 @@ const Container = styled.div`
   .tui-image-editor-header-logo {
   .tui-image-editor-header-logo {
     display: none;
     display: none;
   }
   }
+  .tui-image-editor-help-menu {
+    display: none;
+  }
+  .tui-image-editor-header-buttons {
+    position: absolute;
+  }
 `;
 `;
 
 
 export default ToastEditor;
 export default ToastEditor;

 import GIF from "@dhdbstjr98/gif.js";
 import GIF from "@dhdbstjr98/gif.js";
-import { fabric } from "fabric";
 import Component from "./components";
 import Component from "./components";
 
 
 export class GifGenerator {
 export class GifGenerator {