UI 수정

@@ -18,6 +18,10 @@ const GifEditor = ({ previewURL }) => {
   const [download, setDownload] = useState(null);
   const [download, setDownload] = useState(null);
   const [blob, setBlob] = useState(null);
   const [blob, setBlob] = useState(null);
 
 
+  const [isMakeStarted, setIsMakeStarted] = useState(false);
+  const [isUploadLoading, setIsUploadLoading] = useState(false);
+  const [viewLink, setViewLink] = useState(null);
+
   useEffect(() => {
   useEffect(() => {
     if (window) {
     if (window) {
       setImageEditor(
       setImageEditor(
@@ -31,7 +35,7 @@ const GifEditor = ({ previewURL }) => {
               width: "100%",
               width: "100%",
               height: "600px",
               height: "600px",
             },
             },
-            initMenu: "filter",
+            menu: ["draw", "text"],
             menuBarPosition: "bottom",
             menuBarPosition: "bottom",
           },
           },
           cssMaxWidth: 500,
           cssMaxWidth: 500,
@@ -48,16 +52,14 @@ const GifEditor = ({ previewURL }) => {
     }
     }
   }, [imageEditor]);
   }, [imageEditor]);
 
 
-  const render = () => {
-    console.log("aaa", imageEditor._graphics.getCanvas().getObjects());
+  const makeGif = () => {
+    setIsMakeStarted(true);
     const gifGenerator = new window.GifGenerator(
     const gifGenerator = new window.GifGenerator(
       imageEditor._graphics.getCanvas()
       imageEditor._graphics.getCanvas()
     );
     );
     gifGenerator.make().then(
     gifGenerator.make().then(
       (blob) => {
       (blob) => {
         setBlob(blob);
         setBlob(blob);
-        console.log("blobaaa", blob);
-        // console.log(window.URL.createObjectURL(blob));
         setDownload(window.URL.createObjectURL(blob));
         setDownload(window.URL.createObjectURL(blob));
       },
       },
       (error) => {
       (error) => {
@@ -67,29 +69,51 @@ const GifEditor = ({ previewURL }) => {
   };
   };
 
 
   const handleUpload = async () => {
   const handleUpload = async () => {
-    const file = new File([blob], "file.gif");
+    setIsUploadLoading(true);
+    const file = new File([blob], "new_gif.gif");
     const formData = new FormData();
     const formData = new FormData();
     formData.append("gif", file);
     formData.append("gif", file);
     const res = await postGif(formData);
     const res = await postGif(formData);
     console.log(res);
     console.log(res);
+    setIsUploadLoading(false);
+    setViewLink(
+      `https://gif-generator.s3.ap-northeast-2.amazonaws.com//gif/${res.id}.gif`
+    );
   };
   };
 
 
   return (
   return (
     <>
     <>
       <Wrapper>
       <Wrapper>
-        {download && (
-          <div style={{ display: "flex" }}>
-            <a href={download} download="new_file_name.gif">
-              download
-            </a>
-            <div onClick={handleUpload}>server upload</div>
+        {((isMakeStarted && !download) || isUploadLoading) && (
+          <>
+            <div className="background" />
+            <div className="download">loading...</div>
+          </>
+        )}
+        {!isUploadLoading && viewLink && (
+          <div className="download" style={{ zIndex: 200 }}>
+            <a href={viewLink}>{viewLink}</a>
           </div>
           </div>
         )}
         )}
-        <div onClick={render} className="upload">
-          Save
+        {download && !isUploadLoading && (
+          <>
+            <div className="background" />
+            <div className="download">
+              <div className="download__btn">
+                <a href={download} download="new_gif.gif">
+                  Download a File
+                </a>
+              </div>
+              <div className="download__btn">
+                <div onClick={handleUpload}>Upload to Server</div>
+              </div>
+            </div>
+          </>
+        )}
+        <div onClick={makeGif} className="make">
+          Make a Gif
         </div>
         </div>
         <div ref={rootEl} />
         <div ref={rootEl} />
-        <div className="alert">Please select a photo.</div>
       </Wrapper>
       </Wrapper>
     </>
     </>
   );
   );
@@ -98,13 +122,17 @@ const GifEditor = ({ previewURL }) => {
 const Wrapper = styled.div`
 const Wrapper = styled.div`
   position: fixed;
   position: fixed;
   width: 90%;
   width: 90%;
-  top: 15rem;
+  top: 10rem;
   border-radius: 1.5rem;
   border-radius: 1.5rem;
   box-shadow: ${({ theme }) => theme.boxShadow.normal};
   box-shadow: ${({ theme }) => theme.boxShadow.normal};
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   align-items: center;
   align-items: center;
-  .upload {
+  a {
+    color: black;
+    text-decoration: none;
+  }
+  .make {
     font: 800 11.5px Arial;
     font: 800 11.5px Arial;
     position: absolute;
     position: absolute;
     right: 0;
     right: 0;
@@ -121,11 +149,30 @@ const Wrapper = styled.div`
     justify-content: center;
     justify-content: center;
     cursor: pointer;
     cursor: pointer;
   }
   }
-  .alert {
+  .background {
     position: fixed;
     position: fixed;
-    border-radius: 0.5rem;
-    transition: 1s;
-    top: 7rem;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: black;
+    opacity: 0.7;
+    z-index: 100;
+  }
+  .download {
+    position: absolute;
+    top: 15rem;
+    z-index: 100;
+    display: flex;
+    background-color: white;
+    padding: 1.5rem 2rem;
+    border-radius: 2rem;
+    &__btn {
+      cursor: pointer;
+      :last-child {
+        margin-left: 1rem;
+      }
+    }
   }
   }
   .tui-image-editor-container {
   .tui-image-editor-container {
     border-radius: 1.5rem;
     border-radius: 1.5rem;
@@ -137,6 +184,9 @@ const Wrapper = styled.div`
   .tui-image-editor-header-logo {
   .tui-image-editor-header-logo {
     display: none;
     display: none;
   }
   }
+  .tui-image-editor-header-buttons {
+    display: none;
+  }
 `;
 `;
 
 
 export default GifEditor;
 export default GifEditor;

@@ -28,15 +28,14 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
 
 
   return (
   return (
     <Container>
     <Container>
-      <div onClick={handleEnd} className="upload">
-        Upload
+      <div onClick={handleEnd} className="move">
+        Move to Gif
       </div>
       </div>
       <ImageEditor
       <ImageEditor
         includeUI={{
         includeUI={{
           loadImage: {
           loadImage: {
             name: "SampleImage",
             name: "SampleImage",
           },
           },
-          initMenu: "filter",
           uiSize: {
           uiSize: {
             width: "100%",
             width: "100%",
             height: "600px",
             height: "600px",
@@ -67,7 +66,7 @@ const Container = styled.div`
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   align-items: center;
   align-items: center;
-  .upload {
+  .move {
     font: 800 11.5px Arial;
     font: 800 11.5px Arial;
     position: absolute;
     position: absolute;
     right: 0;
     right: 0;