gif editor 세팅

@@ -7,13 +7,15 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@toast-ui/react-image-editor": "3.14.2",
+    "@types/fabric": "^4.2.5",
+    "fabric": "^4.4.0",
     "next": "^10.0.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "styled-components": "^5.2.3",
     "styled-reset": "^4.3.4",
     "tui-image-editor": "3.14.2",
-    "@toast-ui/react-image-editor": "3.14.2",
     "web-vitals": "^1.0.1"
   },
   "devDependencies": {

+import { useEffect, useState } from "react";
+import styled from "styled-components";
+
+const GifEditor = ({ previewURL }) => {
+  const [canvas, setCanvas] = useState<HTMLCanvasElement>();
+
+  useEffect(() => {
+    if (window) {
+      setCanvas(document.getElementById("gif-canvas") as HTMLCanvasElement);
+    }
+  }, []);
+
+  useEffect(() => {
+    // const img = lowerCanvas?.toDataURL("image/png");
+    // const uploaded = document.getElementById("image");
+    // console.log(uploaded);
+    // let w = window.open();
+    // if (w?.window) w.document.body.innerHTML = "<img src='" + img + "'>";
+    const image = new Image();
+    // image.onload = function () {
+    //   lowerCanvas.width = uploaded.clientWidth;
+    //   lowerCanvas.height = uploaded.clientHeight;
+    //   lowerCanvas?.getContext("2d").drawImage(image, 0, 0);
+    // };
+    console.log("fdasdafs", previewURL);
+    image.src = previewURL;
+    console.log("canvas", canvas);
+    if (canvas?.getContext) {
+      image.onload = function () {
+        canvas.width = 1000;
+        canvas.height = 572;
+        canvas?.getContext("2d").drawImage(image, 0, 0);
+      };
+      console.log(canvas.getContext("2d"));
+    }
+  }, [canvas]);
+
+  return (
+    <Container>
+      <ImgBox>
+        <canvas id="gif-canvas" />
+      </ImgBox>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 10rem;
+`;
+const ImgBox = styled.div`
+  position: relative;
+  width: 90%;
+  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: 1rem 0;
+`;
+
+export default GifEditor;

@@ -7,7 +7,7 @@ const ToastEditor = dynamic(() => import("components/ToastEditor"), {
 });
 const Image = ({ previewURL, setPreviewURL }) => {
   const [file, setFile] = useState(undefined);
-  console.log("previewURL", previewURL);
+  // console.log("previewURL", previewURL);
 
   //   const uploadImage = (file) => {
   //     if (!file) {

@@ -59,7 +59,7 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
       "lower-canvas"
     )[0] as HTMLCanvasElement;
     setPreviewURL(lowerCanvas.toDataURL("image/png"));
-    console.log("asdf");
+    // console.log("asdf");
     setIsImgAdded(true);
     setIsEditorOpened(false);
   };
@@ -126,7 +126,11 @@ const Container = styled.div`
     border-radius: 1.5rem;
   }
   .tui-image-editor-container .tui-image-editor-help-menu.top {
-    top: 2rem;
+    left: 19rem;
+    top: 1rem;
+  }
+  .tui-image-editor-header-logo {
+    display: none;
   }
 `;
 

@@ -3,6 +3,7 @@ import Image from "components/Image";
 import styled from "styled-components";
 import dynamic from "next/dynamic";
 import { useState } from "react";
+import GifEditor from "components/GifEditor";
 
 const ToastEditor = dynamic(() => import("components/ToastEditor"), {
   ssr: false,
@@ -46,6 +47,7 @@ const Index = () => {
               </button>
             </div>
             <Image {...{ previewURL, setPreviewURL }} />
+            <GifEditor {...{ previewURL }} />
           </>
         )
       )}

@@ -1367,6 +1367,11 @@
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.1.tgz#78b5433344e2f92e8b306c06a5622c50c245bf6b"
   integrity sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==
 
+"@types/fabric@^4.2.5":
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/@types/fabric/-/fabric-4.2.5.tgz#095e412b49c896e2fa0d441bd2fceb6690074c4d"
+  integrity sha512-nifrrxvgsYRoxNJB+xZUBe6pLWoqGbZdfwJ0y9zzdt3uU89SzP+8L9Whwrxbvu7eIXjPArSZOyuQmbD4zewdZA==
+
 "@types/hoist-non-react-statics@*":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -3086,7 +3091,7 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
-fabric@^4.2.0:
+fabric@^4.2.0, fabric@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/fabric/-/fabric-4.4.0.tgz#2b73454008b8082f2d234c4637bdf645876c490c"
   integrity sha512-mX6BZqssJjrT6LN1B4Wcmgm93NIlmKfPN5qTqon9wdDJgRAxPfrhfz2iT+QmDso9P8+s0qyLXFhuVpxOBBMHEw==