CSS 변경

@@ -5,6 +5,9 @@ const Header = () => {
 };
 };
 
 
 const Container = styled.div`
 const Container = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
   width: 100%;
   padding: 1.5rem;
   padding: 1.5rem;
   background-color: white;
   background-color: white;

@@ -7,7 +7,7 @@ const ToastEditor = dynamic(() => import("components/ToastEditor"), {
 });
 });
 const Image = ({ previewURL, setPreviewURL }) => {
 const Image = ({ previewURL, setPreviewURL }) => {
   const [file, setFile] = useState(undefined);
   const [file, setFile] = useState(undefined);
-  console.log('previewURL',previewURL)
+  console.log("previewURL", previewURL);
 
 
   //   const uploadImage = (file) => {
   //   const uploadImage = (file) => {
   //     if (!file) {
   //     if (!file) {
@@ -68,8 +68,8 @@ const Image = ({ previewURL, setPreviewURL }) => {
             style={{
             style={{
               objectFit: "cover",
               objectFit: "cover",
               display: "flex",
               display: "flex",
-                margin: "0 auto",
-                width: "50rem",
+              maxHeight: "90%",
+              maxWidth: "90%",
             }}
             }}
             src={previewURL as string}
             src={previewURL as string}
           />
           />
@@ -97,10 +97,12 @@ const Container = styled.div`
   width: 100%;
   width: 100%;
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;
+  margin-top: 10rem;
 `;
 `;
 const ImgBox = styled.div`
 const ImgBox = styled.div`
   position: relative;
   position: relative;
-  height: 30rem;
+  width: 90%;
+  /* height: 30rem; */
   background-color: white;
   background-color: white;
   box-shadow: ${({ theme }) => theme.boxShadow.normal};
   box-shadow: ${({ theme }) => theme.boxShadow.normal};
   border-radius: 2rem;
   border-radius: 2rem;
@@ -110,9 +112,9 @@ const ImgBox = styled.div`
   justify-content: center;
   justify-content: center;
   font-size: 1rem;
   font-size: 1rem;
   display: flex;
   display: flex;
-  flex: 0.6;
+  /* flex: 0.6; */
   padding: 1rem 0;
   padding: 1rem 0;
-  .sub-flex {
+  /* .sub-flex {
     position: relative;
     position: relative;
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
@@ -122,7 +124,7 @@ const ImgBox = styled.div`
     :first-child {
     :first-child {
       border-right: 1px solid ${({ theme }) => theme.color.gray};
       border-right: 1px solid ${({ theme }) => theme.color.gray};
     }
     }
-  }
+  } */
 `;
 `;
 
 
 const Box = styled.div`
 const Box = styled.div`

 /// <reference path="react-image-editor.d.ts" />
 /// <reference path="react-image-editor.d.ts" />
 import ImageEditor from "@toast-ui/react-image-editor";
 import ImageEditor from "@toast-ui/react-image-editor";
 import { useEffect, useState } from "react";
 import { useEffect, useState } from "react";
+import styled from "styled-components";
 import "tui-image-editor/dist/tui-image-editor.css";
 import "tui-image-editor/dist/tui-image-editor.css";
 
 
-const ToastEditor = ({ setPreviewURL, setIsImgAdded }) => {
+const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
   // const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>();
   // const [lowerCanvas, setLowerCanvas] = useState<HTMLCanvasElement>();
   // const [upperCanvas, setUpperCanvas] = useState<HTMLCanvasElement>();
   // const [upperCanvas, setUpperCanvas] = useState<HTMLCanvasElement>();
   // // console.log(
   // // console.log(
@@ -54,15 +55,20 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded }) => {
   // }, [lowerCanvas?.toDataURL("image/png")]);
   // }, [lowerCanvas?.toDataURL("image/png")]);
 
 
   const handleEnd = () => {
   const handleEnd = () => {
-    const lowerCanvas = document.getElementsByClassName("lower-canvas")[0] as HTMLCanvasElement;
+    const lowerCanvas = document.getElementsByClassName(
+      "lower-canvas"
+    )[0] as HTMLCanvasElement;
     setPreviewURL(lowerCanvas.toDataURL("image/png"));
     setPreviewURL(lowerCanvas.toDataURL("image/png"));
-    console.log('asdf')
+    console.log("asdf");
     setIsImgAdded(true);
     setIsImgAdded(true);
+    setIsEditorOpened(false);
   };
   };
 
 
   return (
   return (
-    <>
-      <div onClick={handleEnd}>asdf</div>
+    <Container>
+      <div onClick={handleEnd} className="upload">
+        Upload
+      </div>
       <ImageEditor
       <ImageEditor
         includeUI={{
         includeUI={{
           loadImage: {
           loadImage: {
@@ -73,7 +79,7 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded }) => {
           menu: ["shape", "filter"],
           menu: ["shape", "filter"],
           initMenu: "filter",
           initMenu: "filter",
           uiSize: {
           uiSize: {
-            width: "1000px",
+            width: "100%",
             height: "700px",
             height: "700px",
           },
           },
           menuBarPosition: "bottom",
           menuBarPosition: "bottom",
@@ -86,8 +92,42 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded }) => {
         }}
         }}
         usageStatistics={true}
         usageStatistics={true}
       />
       />
-    </>
+    </Container>
   );
   );
 };
 };
 
 
+const Container = styled.div`
+  position: fixed;
+  width: 90%;
+  top: 10rem;
+  border-radius: 1.5rem;
+  box-shadow: ${({ theme }) => theme.boxShadow.normal};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .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;
+  }
+  .tui-image-editor-container {
+    border-radius: 1.5rem;
+  }
+  .tui-image-editor-container .tui-image-editor-help-menu.top {
+    top: 2rem;
+  }
+`;
+
 export default ToastEditor;
 export default ToastEditor;

@@ -18,14 +18,39 @@ const Index = () => {
       <Header />
       <Header />
 
 
       {!isImgAdded ? (
       {!isImgAdded ? (
-        <button className="open-button" onClick={() => setIsEditorOpened(true)}>
-          asdf
+        <div
+          style={{
+            height: "80vh",
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <button
+            className="open-button"
+            onClick={() => setIsEditorOpened(true)}
+          >
+            Open Image Editor
           </button>
           </button>
+        </div>
       ) : (
       ) : (
+        !isEditorOpened && (
+          <>
+            <div style={{ position: "fixed", top: "5rem" }}>
+              <button
+                className="open-button"
+                onClick={() => setIsEditorOpened(true)}
+              >
+                Change Image
+              </button>
+            </div>
             <Image {...{ previewURL, setPreviewURL }} />
             <Image {...{ previewURL, setPreviewURL }} />
+          </>
+        )
       )}
       )}
-      {isEditorOpened && !isImgAdded && (
-        <ToastEditor {...{ setPreviewURL, setIsImgAdded }} />
+      {isEditorOpened && (
+        <ToastEditor {...{ setPreviewURL, setIsImgAdded, setIsEditorOpened }} />
       )}
       )}
     </Container>
     </Container>
   );
   );
@@ -36,6 +61,23 @@ const Container = styled.div`
   flex-direction: column;
   flex-direction: column;
   align-items: center;
   align-items: center;
   .open-button {
   .open-button {
+    margin-top: 3rem;
+    padding: 0.5rem 2rem;
+    display: flex;
+    align-items: center;
+    transition: 0.3s;
+    :hover {
+      font-size: 1.1rem;
+      transition: 0.3s;
+    }
+    ::before {
+      width: 2.315rem;
+      content: "+";
+      font-size: 2rem;
+      margin-right: 1rem;
+      box-shadow: ${({ theme }) => theme.boxShadow.normal};
+      border-radius: 50%;
+    }
   }
   }
 `;
 `;