수정된 img 띄우기

+import dynamic from "next/dynamic";
 import { useState } from "react";
 import styled from "styled-components";
 
+const ToastEditor = dynamic(() => import("components/ToastEditor"), {
+  ssr: false,
+});
 const Image = () => {
   const [file, setFile] = useState(undefined);
   const [previewURL, setPreviewURL] = useState<string | ArrayBuffer>("");
@@ -24,9 +28,16 @@ const Image = () => {
     reader.readAsDataURL(targetFile);
   };
 
+  const [isEditorOpened, setIsEditorOpened] = useState(false);
+  const handleEditor = () => {
+    setIsEditorOpened(true);
+  };
+
   return (
+    <>
       <Container>
         <ImgBox>
+          <div onClick={handleEditor}>asdf</div>
           {file === undefined ? (
             <>
               <div className="sub-flex">
@@ -52,12 +63,13 @@ const Image = () => {
             </>
           ) : (
             <img
+              id="image"
               alt={""}
               style={{
                 objectFit: "cover",
                 display: "flex",
                 margin: "0 auto",
-              width: "50rem",
+                width: "30rem",
               }}
               src={previewURL as string}
             />
@@ -65,6 +77,8 @@ const Image = () => {
         </ImgBox>
         {/* <Menu /> */}
       </Container>
+      {isEditorOpened && <ToastEditor {...{ setPreviewURL }} />}
+    </>
   );
 };
 

@@ -3,12 +3,13 @@ import ImageEditor from "@toast-ui/react-image-editor";
 import { useEffect, useState } from "react";
 import "tui-image-editor/dist/tui-image-editor.css";
 
-const ToastEditor = () => {
+const ToastEditor = ({ setPreviewURL }) => {
   const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>();
+  const [upperCanvas, setUpperCanvas] = useState<HTMLCanvasElement>();
   // console.log(
   //   document.getElementsByClassName("lower-canvas")[0]?.toDataURL("image/png")
   // );
-  console.log("c");
+  console.log("s");
 
   // const [upperCanvas, setUpperCanvas] = useState(
   //   document.getElementsByClassName("upper-canvas ")[0]
@@ -19,21 +20,46 @@ const ToastEditor = () => {
       setLowerCanvas(
         document.getElementsByClassName("lower-canvas")[0] as HTMLCanvasElement
       );
+      setUpperCanvas(
+        document.getElementsByClassName("upper-canvas")[0] as HTMLCanvasElement
+      );
     });
   }, []);
 
-  useEffect(() => {
-    const img = lowerCanvas?.toDataURL("image/png");
-    let w = window.open();
-    if (w?.window) w.document.body.innerHTML = "<img src='" + img + "'>";
+  // 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("b");
+  //   if (lowerCanvas?.getContext&&upperCanvas?.getContext) {
+  //     image.onload = function () {
+
+  //       lowerCanvas.width = 1000;
+  //       lowerCanvas.height = 572;
+  //       upperCanvas.width = 1000;
+  //       upperCanvas.height = 572;
+  //       lowerCanvas?.getContext("2d").drawImage(image, 0, 0);
+  //     };
+  //     console.log(lowerCanvas.getContext("2d"));
+  //   }
+  // }, [lowerCanvas?.toDataURL("image/png")]);
 
-    console.log("b");
-    if (lowerCanvas?.getContext) {
-      console.log(lowerCanvas.getContext("2d"));
-    }
-  }, [lowerCanvas?.toDataURL("image/png")]);
+  const handleEnd = () => {
+    setPreviewURL(lowerCanvas.toDataURL("image/png"));
+  };
 
   return (
+    <>
+      <div onClick={handleEnd}>asdf</div>
       <ImageEditor
         includeUI={{
           loadImage: {
@@ -57,6 +83,7 @@ const ToastEditor = () => {
         }}
         usageStatistics={true}
       />
+    </>
   );
 };
 

@@ -11,7 +11,7 @@ const Index = () => (
   <Container>
     <Header />
     <Image />
-    <ToastEditor />
+    {/* <ToastEditor /> */}
   </Container>
 );