Merge branch 'feat/web' into develop

@@ -3,9 +3,7 @@ import axios from "axios";
 const baseURL = "https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com";
 
 export const postGif = async (formData) => {
-  console.log("file", formData);
   const { data } = await axios.post(baseURL, formData);
-
   return data;
 };
 

@@ -17,6 +17,7 @@ const GifEditor = ({ previewURL }) => {
 
   const [download, setDownload] = useState(null);
   const [blob, setBlob] = useState(null);
+  const [percent, setPercent] = useState(0);
 
   const [isMakeStarted, setIsMakeStarted] = useState(false);
   const [isUploadLoading, setIsUploadLoading] = useState(false);
@@ -46,19 +47,16 @@ const GifEditor = ({ previewURL }) => {
     }
   }, []);
 
-  useEffect(() => {
-    if (imageEditor) {
-      console.log(imageEditor._graphics.getCanvas().getObjects());
-    }
-  }, [imageEditor]);
-
   const makeGif = () => {
     setIsMakeStarted(true);
     const gifGenerator = new window.GifGenerator(
       imageEditor._graphics.getCanvas()
     );
+    gifGenerator.on("progress", (p: number) => {
+      setPercent(Math.round(p * 100));
+    });
     gifGenerator.make().then(
-      (blob) => {
+      (blob: Blob) => {
         setBlob(blob);
         setDownload(window.URL.createObjectURL(blob));
       },
@@ -74,11 +72,9 @@ const GifEditor = ({ previewURL }) => {
     const formData = new FormData();
     formData.append("gif", file);
     const res = await postGif(formData);
-    console.log(res);
+
     setIsUploadLoading(false);
-    setViewLink(
-      `https://gif-generator.s3.ap-northeast-2.amazonaws.com//gif/${res.id}.gif`
-    );
+    setViewLink(`https://gif-generator.bu.to/${res.id}`);
   };
 
   return (
@@ -87,7 +83,9 @@ const GifEditor = ({ previewURL }) => {
         {((isMakeStarted && !download) || isUploadLoading) && (
           <>
             <div className="background" />
-            <div className="download">loading...</div>
+            <div className="download">
+              loading... {!isUploadLoading && percent}%
+            </div>
           </>
         )}
         {!isUploadLoading && viewLink && (
@@ -135,7 +133,7 @@ const Wrapper = styled.div`
   .make {
     font: 800 11.5px Arial;
     position: absolute;
-    right: 0;
+    left: 0;
     top: 0;
     width: 120px;
     height: 40px;
@@ -148,6 +146,9 @@ const Wrapper = styled.div`
     align-items: center;
     justify-content: center;
     cursor: pointer;
+    :hover {
+      text-decoration: underline;
+    }
   }
   .background {
     position: fixed;
@@ -172,6 +173,9 @@ const Wrapper = styled.div`
       :last-child {
         margin-left: 1rem;
       }
+      :hover {
+        text-decoration: underline;
+      }
     }
   }
   .tui-image-editor-container {
@@ -187,6 +191,9 @@ const Wrapper = styled.div`
   .tui-image-editor-header-buttons {
     display: none;
   }
+  .tui-image-editor-help-menu {
+    display: none;
+  }
 `;
 
 export default GifEditor;

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

 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
   <meta charset="UTF-8" />
   <title>TUI Example</title>
-    <link
-      type="text/css"
-      href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css"
-      rel="stylesheet"
-    />
+  <link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet" />
   <link type="text/css" href="./tui-image-editor.css" rel="stylesheet" />
   <style>
     @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
+
     html,
     body {
       height: 100%;
       margin: 0;
     }
   </style>
-  </head>
-  <body>
+</head>
+
+<body>
   <div id="tui-image-editor-container"></div>
-    <script
-      type="text/javascript"
-      src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"
-    ></script>
+  <script type="text/javascript"
+    src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"></script>
+  <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
+  <script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>
+  <script type="text/javascript"
+    src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
   <script type="text/javascript" src="./tui-image-editor.js"></script>
   <script type="text/javascript" src="./black-theme.js"></script>
   <script type="text/javascript" src="../../dist/gif-generator.js"></script>
@@ -59,8 +48,6 @@
       imageEditor.ui.resizeEditor();
     };
 
-      console.log("imageeiasdfasdf", imageEditor);
-
     let gifGenerator;
     setTimeout(function () {
       gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
@@ -77,8 +64,7 @@
       );
     }
   </script>
-    <button
-      style="
+  <button style="
         position: absolute;
         top: 70px;
         right: 70px;
@@ -86,10 +72,9 @@
         background: rgba(0, 0, 0, 0);
         color: #fff;
         padding: 10px 20px;
-      "
-      onClick="render();"
-    >
+      " onClick="render();">
     GIF 생성
   </button>
-  </body>
+</body>
+
 </html>
\ No newline at end of file

 import GIF from "@dhdbstjr98/gif.js";
-import { fabric } from "fabric";
 import Component from "./components";
 
 export class GifGenerator {
@@ -52,10 +51,10 @@ export class GifGenerator {
     const objs = [];
 
     fabricObjs.map((fabricObj) => {
-      if (fabricObj.path !== undefined) {
+      if (fabricObj.path !== null) {
         objs.push(new Component.Brush(fabricObj));
         this.canvas.remove(fabricObj);
-      } else if (fabricObj.text !== undefined) {
+      } else if (fabricObj.text !== null) {
         objs.push(new Component.Text(fabricObj));
         this.canvas.remove(fabricObj);
       }

+import Header from "components/Header";
 import { useRouter } from "next/dist/client/router";
+import styled from "styled-components";
 
 const Detail = () => {
   const id = useRouter().query.id;
-
   return (
-    <div>
+    <Container>
+      <Header />
+      <ImgBox>
         <img
+          className="img"
           src={`https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com/?id=${id}`}
         />
-    </div>
+      </ImgBox>
+    </Container>
   );
 };
 
+const Container = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const ImgBox = styled.div`
+  position: relative;
+  max-width: 60%;
+  max-height: 60%;
+  background-color: white;
+  box-shadow: ${({ theme }) => theme.boxShadow.normal};
+  border-radius: 2rem;
+  margin-top: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  display: flex;
+  padding: 3rem;
+  /* flex: 0.6; */
+  /* .sub-flex {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    :first-child {
+      border-right: 1px solid ${({ theme }) => theme.color.gray};
+    }
+  } */
+  .img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+`;
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+  .box {
+    width: 90%;
+    border-radius: 1.5rem;
+    box-shadow: ${({ theme }) => theme.boxShadow.normal};
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .img {
+    max-width: 90%;
+    max-height: 90%;
+  }
+`;
+
 export default Detail;