이미지 편집 후 generator로 이동 구현

-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { fabric } from "fabric";
 import styled from "styled-components";
+import { GifGenerator } from "gif-generator/src";
+import ImageEditor from "@toast-ui/react-image-editor";
 
 const GifEditor = ({ previewURL }) => {
   const [canvas, setCanvas] = useState<HTMLCanvasElement>();
+  const [gifGenerator, setGifGenerator] = useState(null);
 
   useEffect(() => {
     if (window) {
-      setCanvas(document.getElementById("gif-canvas") as HTMLCanvasElement);
+      setCanvas(
+        document.getElementsByClassName(
+          "tui-image-editor-container"
+        )[0] as HTMLCanvasElement
+      );
     }
   }, []);
+  console.log(
+    "asdf",
+    document.getElementsByClassName("tui-image-editor-container")
+  );
+  console.log("canvas", canvas);
+  console.log('useref',useRef.arguments)
 
-  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]);
+  useEffect(()=>{
+    if(canvas)setGifGenerator(new GifGenerator(canvas._graphics.getCanvas()));
+  }, [canvas])
+
+  // 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);
+  //   // };
+  //   image.src = previewURL;
+  //   console.log("canvascontext", canvas?.getContext);
+  //   if (canvas?.getContext) {
+  //     console.log('왜안돼')
+  //     image.onload = function () {
+  //       canvas.width = 1000;
+  //       canvas.height = 572;
+  //       canvas?.getContext("2d").drawImage(image, 0, 0);
+  //     };
+  //     // console.log(canvas.getContext("2d"));
+  //   }
+  // }, [canvas]);
+
+  const render = () => {
+    gifGenerator.make().then(
+      (blob) => {
+        window.open(window.URL.createObjectURL(blob));
+      },
+      (error) => {
+        alert(error);
+      }
+    );
+  };
 
   return (
     <Container>
-      <ImgBox>
-        <canvas id="gif-canvas" />
-      </ImgBox>
+      <div onClick={render} className="upload">
+        Save
+      </div>
+      <ImageEditor
+        includeUI={{
+          loadImage: {
+            path: previewURL,
+            name: "SampleImage",
+          },
+          menu: ["draw", "text"],
+          initMenu: "draw",
+          uiSize: {
+            width: "100%",
+            height: "600px",
+          },
+          menuBarPosition: "bottom",
+        }}
+        cssMaxHeight={500}
+        cssMaxWidth={700}
+        selectionStyle={{
+          cornerSize: 20,
+          rotatingPointOffset: 70,
+        }}
+        usageStatistics={true}
+      />
+      <div className="alert">Please select a photo.</div>
     </Container>
+    // <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;
+  position: fixed;
   width: 90%;
-  background-color: white;
+  top: 10rem;
+  border-radius: 1.5rem;
   box-shadow: ${({ theme }) => theme.boxShadow.normal};
-  border-radius: 2rem;
-  margin-top: 2rem;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: 1rem;
-  display: flex;
-  padding: 1rem 0;
+  .upload {
+    font: 800 11.5px Arial;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 120px;
+    height: 40px;
+    background: red;
+    z-index: 10;
+    border-radius: 20px;
+    margin: 8px;
+    background-color: #fdba3b;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+  .alert {
+    position: fixed;
+    border-radius: 0.5rem;
+    transition: 1s;
+    top: 7rem;
+  }
+  .tui-image-editor-container {
+    border-radius: 1.5rem;
+  }
+  .tui-image-editor-container .tui-image-editor-help-menu.top {
+    left: 19rem;
+    top: 1rem;
+  }
+  .tui-image-editor-header-logo {
+    display: none;
+  }
 `;
 
 export default GifEditor;

@@ -135,13 +135,6 @@ const Box = styled.div`
   background-color: white;
   box-shadow: ${({ theme }) => theme.boxShadow.normal};
 `;
-const BlankBox = styled.div`
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  width: 90%;
-  height: 50px;
-  background-color: white;
-`;
+
 
 export default Image;

@@ -3,6 +3,7 @@ import ImageEditor from "@toast-ui/react-image-editor";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import "tui-image-editor/dist/tui-image-editor.css";
+import { GifGenerator } from "gif-generator/src/index";
 
 const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
   // const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>();
@@ -75,6 +76,30 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
     }
   };
 
+  // console.log('asdf',document
+  // .getElementsByClassName("tui-image-editor-container"))
+
+  // window.GifGenerator = GifGenerator;
+
+  // let gifGenerator;
+  // setTimeout(function () {
+  //   gifGenerator = new GifGenerator(
+  //     document
+  //       .getElementsByClassName("tui-image-editor-container")
+  //       ._graphics.getCanvas()
+  //   );
+  // }, 1000);
+  // function render() {
+  //   gifGenerator.make().then(
+  //     (blob) => {
+  //       window.open(window.URL.createObjectURL(blob));
+  //     },
+  //     (error) => {
+  //       alert(error);
+  //     }
+  //   );
+  // }
+
   return (
     <Container>
       <div onClick={handleEnd} className="upload">
@@ -87,11 +112,10 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
             name: "SampleImage",
           },
           //   theme: myTheme,
-          menu: ["shape", "filter"],
           initMenu: "filter",
           uiSize: {
             width: "100%",
-            height: "700px",
+            height: "600px",
           },
           menuBarPosition: "bottom",
         }}

@@ -59,6 +59,8 @@
         imageEditor.ui.resizeEditor();
       };
 
+      console.log('imageeiasdfasdf', imageEditor)
+
       let gifGenerator;
       setTimeout(function () {
         gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());

@@ -36,20 +36,7 @@ const Index = () => {
           </button>
         </div>
       ) : (
-        !isEditorOpened && (
-          <>
-            <div style={{ position: "fixed", top: "5rem" }}>
-              <button
-                className="open-button"
-                onClick={() => setIsEditorOpened(true)}
-              >
-                Change Image
-              </button>
-            </div>
-            <Image {...{ previewURL, setPreviewURL }} />
-            <GifEditor {...{ previewURL }} />
-          </>
-        )
+        !isEditorOpened && <GifEditor {...{ previewURL }} />
       )}
       {isEditorOpened && (
         <ToastEditor {...{ setPreviewURL, setIsImgAdded, setIsEditorOpened }} />