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>
-    <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="./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>
-    <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="./tui-image-editor.js"></script>
-    <script type="text/javascript" src="./black-theme.js"></script>
-    <script type="text/javascript" src="../../dist/gif-generator.js"></script>
-    <script>
-      // Image editor
-      var imageEditor = new tui.ImageEditor("#tui-image-editor-container", {
-        includeUI: {
-          loadImage: {
-            path: "./sampleImage2.png",
-            name: "SampleImage",
-          },
-          theme: blackTheme, // or whiteTheme
-          initMenu: "filter",
-          menuBarPosition: "bottom",
-        },
-        cssMaxWidth: 700,
-        cssMaxHeight: 500,
-        usageStatistics: false,
-      });
-      window.onresize = function () {
-        imageEditor.ui.resizeEditor();
-      };
 
-      console.log("imageeiasdfasdf", imageEditor);
+<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="./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>
+  <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="./tui-image-editor.js"></script>
+  <script type="text/javascript" src="./black-theme.js"></script>
+  <script type="text/javascript" src="../../dist/gif-generator.js"></script>
+  <script>
+    // Image editor
+    var imageEditor = new tui.ImageEditor("#tui-image-editor-container", {
+      includeUI: {
+        loadImage: {
+          path: "./sampleImage2.png",
+          name: "SampleImage",
+        },
+        theme: blackTheme, // or whiteTheme
+        initMenu: "filter",
+        menuBarPosition: "bottom",
+      },
+      cssMaxWidth: 700,
+      cssMaxHeight: 500,
+      usageStatistics: false,
+    });
+    window.onresize = function () {
+      imageEditor.ui.resizeEditor();
+    };
 
-      let gifGenerator;
-      setTimeout(function () {
-        gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
-        gifGenerator.on("progress", (p) => console.log(p));
-      }, 1000);
-      function render() {
-        gifGenerator.make().then(
-          (blob) => {
-            window.open(window.URL.createObjectURL(blob));
-          },
-          (error) => {
-            alert(error);
-          }
-        );
-      }
-    </script>
-    <button
-      style="
+    let gifGenerator;
+    setTimeout(function () {
+      gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
+      gifGenerator.on("progress", (p) => console.log(p));
+    }, 1000);
+    function render() {
+      gifGenerator.make().then(
+        (blob) => {
+          window.open(window.URL.createObjectURL(blob));
+        },
+        (error) => {
+          alert(error);
+        }
+      );
+    }
+  </script>
+  <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();"
-    >
-      GIF 생성
-    </button>
-  </body>
-</html>
+      " onClick="render();">
+    GIF 생성
+  </button>
+</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>
-      <img
-        src={`https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com/?id=${id}`}
-      />
-    </div>
+    <Container>
+      <Header />
+      <ImgBox>
+        <img
+          className="img"
+          src={`https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com/?id=${id}`}
+        />
+      </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;