수정된 img 띄우기

+import dynamic from "next/dynamic";
 import { useState } from "react";
 import { useState } from "react";
 import styled from "styled-components";
 import styled from "styled-components";
 
 
+const ToastEditor = dynamic(() => import("components/ToastEditor"), {
+  ssr: false,
+});
 const Image = () => {
 const Image = () => {
   const [file, setFile] = useState(undefined);
   const [file, setFile] = useState(undefined);
   const [previewURL, setPreviewURL] = useState<string | ArrayBuffer>("");
   const [previewURL, setPreviewURL] = useState<string | ArrayBuffer>("");
@@ -24,47 +28,57 @@ const Image = () => {
     reader.readAsDataURL(targetFile);
     reader.readAsDataURL(targetFile);
   };
   };
 
 
+  const [isEditorOpened, setIsEditorOpened] = useState(false);
+  const handleEditor = () => {
+    setIsEditorOpened(true);
+  };
+
   return (
   return (
-    <Container>
-      <ImgBox>
-        {file === undefined ? (
-          <>
-            <div className="sub-flex">
-              <BlankBox />
-              <div>Click to add a photo</div>
-              <input
-                type="file"
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  paddingLeft: 0,
-                  zIndex: 0,
-                  width: "90%",
-                  height: "100%",
-                  border: "none",
-                  cursor: "pointer",
-                  outline: "none",
-                }}
-                onChange={selectImg}
-              />
-            </div>
-            <div className="sub-flex">Open Image Editor</div>
-          </>
-        ) : (
-          <img
-            alt={""}
-            style={{
-              objectFit: "cover",
-              display: "flex",
-              margin: "0 auto",
-              width: "50rem",
-            }}
-            src={previewURL as string}
-          />
-        )}
-      </ImgBox>
-      {/* <Menu /> */}
-    </Container>
+    <>
+      <Container>
+        <ImgBox>
+          <div onClick={handleEditor}>asdf</div>
+          {file === undefined ? (
+            <>
+              <div className="sub-flex">
+                <BlankBox />
+                <div>Click to add a photo</div>
+                <input
+                  type="file"
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    paddingLeft: 0,
+                    zIndex: 0,
+                    width: "90%",
+                    height: "100%",
+                    border: "none",
+                    cursor: "pointer",
+                    outline: "none",
+                  }}
+                  onChange={selectImg}
+                />
+              </div>
+              <div className="sub-flex">Open Image Editor</div>
+            </>
+          ) : (
+            <img
+              id="image"
+              alt={""}
+              style={{
+                objectFit: "cover",
+                display: "flex",
+                margin: "0 auto",
+                width: "30rem",
+              }}
+              src={previewURL as string}
+            />
+          )}
+        </ImgBox>
+        {/* <Menu /> */}
+      </Container>
+      {isEditorOpened && <ToastEditor {...{ setPreviewURL }} />}
+    </>
   );
   );
 };
 };
 
 

@@ -3,12 +3,13 @@ import ImageEditor from "@toast-ui/react-image-editor";
 import { useEffect, useState } from "react";
 import { useEffect, useState } from "react";
 import "tui-image-editor/dist/tui-image-editor.css";
 import "tui-image-editor/dist/tui-image-editor.css";
 
 
-const ToastEditor = () => {
+const ToastEditor = ({ setPreviewURL }) => {
   const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>();
   const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>();
+  const [upperCanvas, setUpperCanvas] = useState<HTMLCanvasElement>();
   // console.log(
   // console.log(
   //   document.getElementsByClassName("lower-canvas")[0]?.toDataURL("image/png")
   //   document.getElementsByClassName("lower-canvas")[0]?.toDataURL("image/png")
   // );
   // );
-  console.log("c");
+  console.log("s");
 
 
   // const [upperCanvas, setUpperCanvas] = useState(
   // const [upperCanvas, setUpperCanvas] = useState(
   //   document.getElementsByClassName("upper-canvas ")[0]
   //   document.getElementsByClassName("upper-canvas ")[0]
@@ -19,44 +20,70 @@ const ToastEditor = () => {
       setLowerCanvas(
       setLowerCanvas(
         document.getElementsByClassName("lower-canvas")[0] as HTMLCanvasElement
         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 (
   return (
-    <ImageEditor
-      includeUI={{
-        loadImage: {
-          // path: 'img/sampleImage.jpg',
-          name: "SampleImage",
-        },
-        //   theme: myTheme,
-        menu: ["shape", "filter"],
-        initMenu: "filter",
-        uiSize: {
-          width: "1000px",
-          height: "700px",
-        },
-        menuBarPosition: "bottom",
-      }}
-      cssMaxHeight={500}
-      cssMaxWidth={700}
-      selectionStyle={{
-        cornerSize: 20,
-        rotatingPointOffset: 70,
-      }}
-      usageStatistics={true}
-    />
+    <>
+      <div onClick={handleEnd}>asdf</div>
+      <ImageEditor
+        includeUI={{
+          loadImage: {
+            // path: 'img/sampleImage.jpg',
+            name: "SampleImage",
+          },
+          //   theme: myTheme,
+          menu: ["shape", "filter"],
+          initMenu: "filter",
+          uiSize: {
+            width: "1000px",
+            height: "700px",
+          },
+          menuBarPosition: "bottom",
+        }}
+        cssMaxHeight={500}
+        cssMaxWidth={700}
+        selectionStyle={{
+          cornerSize: 20,
+          rotatingPointOffset: 70,
+        }}
+        usageStatistics={true}
+      />
+    </>
   );
   );
 };
 };
 
 

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