이미지 수정 플로우 변경

@@ -5,9 +5,9 @@ import styled from "styled-components";
 const ToastEditor = dynamic(() => import("components/ToastEditor"), {
 const ToastEditor = dynamic(() => import("components/ToastEditor"), {
   ssr: false,
   ssr: false,
 });
 });
-const Image = () => {
+const Image = ({ previewURL, setPreviewURL }) => {
   const [file, setFile] = useState(undefined);
   const [file, setFile] = useState(undefined);
-  const [previewURL, setPreviewURL] = useState<string | ArrayBuffer>("");
+  console.log('previewURL',previewURL)
 
 
   //   const uploadImage = (file) => {
   //   const uploadImage = (file) => {
   //     if (!file) {
   //     if (!file) {
@@ -15,32 +15,32 @@ const Image = () => {
   //     }
   //     }
   //   };
   //   };
 
 
-  const selectImg = (e) => {
-    const reader = new FileReader();
-    const targetFile = e.target.files[0];
-    setFile(targetFile);
-    // uploadImage(targetFile);
+  // const selectImg = (e) => {
+  //   const reader = new FileReader();
+  //   const targetFile = e.target.files[0];
+  //   setFile(targetFile);
+  //   // uploadImage(targetFile);
 
 
-    reader.onloadend = () => {
-      setPreviewURL(reader.result);
-    };
+  //   reader.onloadend = () => {
+  //     setPreviewURL(reader.result);
+  //   };
 
 
-    reader.readAsDataURL(targetFile);
-  };
+  //   reader.readAsDataURL(targetFile);
+  // };
 
 
-  const [isEditorOpened, setIsEditorOpened] = useState(false);
-  const handleEditor = () => {
-    setIsEditorOpened(true);
-  };
+  // const [isEditorOpened, setIsEditorOpened] = useState(false);
+  // const handleEditor = () => {
+  //   setIsEditorOpened(true);
+  // };
 
 
   return (
   return (
     <>
     <>
       <Container>
       <Container>
         <ImgBox>
         <ImgBox>
-          <div onClick={handleEditor}>asdf</div>
-          {file === undefined ? (
+          {/* <div onClick={handleEditor}>asdf</div> */}
+          {/* {file === undefined ? ( */}
             <>
             <>
-              <div className="sub-flex">
+              {/* <div className="sub-flex">
                 <BlankBox />
                 <BlankBox />
                 <div>Click to add a photo</div>
                 <div>Click to add a photo</div>
                 <input
                 <input
@@ -59,9 +59,9 @@ const Image = () => {
                   onChange={selectImg}
                   onChange={selectImg}
                 />
                 />
               </div>
               </div>
-              <div className="sub-flex">Open Image Editor</div>
+              <div className="sub-flex">Open Image Editor</div> */}
             </>
             </>
-          ) : (
+          {/* ) : ( */}
             <img
             <img
               id="image"
               id="image"
               alt={""}
               alt={""}
@@ -69,15 +69,15 @@ const Image = () => {
                 objectFit: "cover",
                 objectFit: "cover",
                 display: "flex",
                 display: "flex",
                 margin: "0 auto",
                 margin: "0 auto",
-                width: "30rem",
+                width: "50rem",
               }}
               }}
               src={previewURL as string}
               src={previewURL as string}
             />
             />
-          )}
+          {/* )} */}
         </ImgBox>
         </ImgBox>
         {/* <Menu /> */}
         {/* <Menu /> */}
       </Container>
       </Container>
-      {isEditorOpened && <ToastEditor {...{ setPreviewURL }} />}
+      {/* {isEditorOpened && <ToastEditor {...{ setPreviewURL, setIsImgAdded }} />} */}
     </>
     </>
   );
   );
 };
 };

@@ -3,28 +3,28 @@ 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 = ({ setPreviewURL }) => {
-  const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>();
-  const [upperCanvas, setUpperCanvas] = useState<HTMLCanvasElement>();
-  // console.log(
-  //   document.getElementsByClassName("lower-canvas")[0]?.toDataURL("image/png")
-  // );
-  console.log("s");
+const ToastEditor = ({ setPreviewURL, setIsImgAdded }) => {
+  // const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>();
+  // const [upperCanvas, setUpperCanvas] = useState<HTMLCanvasElement>();
+  // // console.log(
+  // //   document.getElementsByClassName("lower-canvas")[0]?.toDataURL("image/png")
+  // // );
+  // console.log("s");
 
 
-  // const [upperCanvas, setUpperCanvas] = useState(
-  //   document.getElementsByClassName("upper-canvas ")[0]
-  // );
+  // // const [upperCanvas, setUpperCanvas] = useState(
+  // //   document.getElementsByClassName("upper-canvas ")[0]
+  // // );
 
 
-  useEffect(() => {
-    window?.addEventListener("click", () => {
-      setLowerCanvas(
-        document.getElementsByClassName("lower-canvas")[0] as HTMLCanvasElement
-      );
-      setUpperCanvas(
-        document.getElementsByClassName("upper-canvas")[0] as HTMLCanvasElement
-      );
-    });
-  }, []);
+  // useEffect(() => {
+  //   window?.addEventListener("click", () => {
+  //     setLowerCanvas(
+  //       document.getElementsByClassName("lower-canvas")[0] as HTMLCanvasElement
+  //     );
+  //     setUpperCanvas(
+  //       document.getElementsByClassName("upper-canvas")[0] as HTMLCanvasElement
+  //     );
+  //   });
+  // }, []);
 
 
   // useEffect(() => {
   // useEffect(() => {
   //   const img = lowerCanvas?.toDataURL("image/png");
   //   const img = lowerCanvas?.toDataURL("image/png");
@@ -54,7 +54,10 @@ const ToastEditor = ({ setPreviewURL }) => {
   // }, [lowerCanvas?.toDataURL("image/png")]);
   // }, [lowerCanvas?.toDataURL("image/png")]);
 
 
   const handleEnd = () => {
   const handleEnd = () => {
+    const lowerCanvas = document.getElementsByClassName("lower-canvas")[0] as HTMLCanvasElement;
     setPreviewURL(lowerCanvas.toDataURL("image/png"));
     setPreviewURL(lowerCanvas.toDataURL("image/png"));
+    console.log('asdf')
+    setIsImgAdded(true);
   };
   };
 
 
   return (
   return (

@@ -2,23 +2,41 @@ import Header from "components/Header";
 import Image from "components/Image";
 import Image from "components/Image";
 import styled from "styled-components";
 import styled from "styled-components";
 import dynamic from "next/dynamic";
 import dynamic from "next/dynamic";
+import { useState } from "react";
 
 
 const ToastEditor = dynamic(() => import("components/ToastEditor"), {
 const ToastEditor = dynamic(() => import("components/ToastEditor"), {
   ssr: false,
   ssr: false,
 });
 });
 
 
-const Index = () => (
-  <Container>
-    <Header />
-    <Image />
-    {/* <ToastEditor /> */}
-  </Container>
-);
+const Index = () => {
+  const [isEditorOpened, setIsEditorOpened] = useState(false);
+  const [previewURL, setPreviewURL] = useState<string | ArrayBuffer>("");
+  const [isImgAdded, setIsImgAdded] = useState(false);
+
+  return (
+    <Container>
+      <Header />
+
+      {!isImgAdded ? (
+        <button className="open-button" onClick={() => setIsEditorOpened(true)}>
+          asdf
+        </button>
+      ) : (
+        <Image {...{ previewURL, setPreviewURL }} />
+      )}
+      {isEditorOpened && !isImgAdded && (
+        <ToastEditor {...{ setPreviewURL, setIsImgAdded }} />
+      )}
+    </Container>
+  );
+};
 
 
 const Container = styled.div`
 const Container = styled.div`
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   align-items: center;
   align-items: center;
+  .open-button {
+  }
 `;
 `;
 
 
 export default Index;
 export default Index;