tui image editor 추가

@@ -3,16 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@next/bundle-analyzer": "^10.0.7",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "@next/bundle-analyzer": "^10.0.7",
+    "next": "^10.0.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "styled-components": "^5.2.3",
-    "web-vitals": "^1.0.1",
-    "next": "^10.0.5",
-    "styled-reset": "^4.3.4"
+    "styled-reset": "^4.3.4",
+    "tui-image-editor": "3.14.2",
+    "@toast-ui/react-image-editor": "3.14.2",
+    "web-vitals": "^1.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.13.10",

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 const Image = () => {
   const [file, setFile] = useState(undefined);
-  const [previewURL, setPreviewURL] = useState("");
+  const [previewURL, setPreviewURL] = useState<string | ArrayBuffer>("");
 
   //   const uploadImage = (file) => {
   //     if (!file) {
@@ -29,32 +29,41 @@ const Image = () => {
       <ImgBox>
         {file === undefined ? (
           <>
-            <BlankBox />
-            <div>Click to add a photo</div>
-            <input
-              type="file"
-              style={{
-                marginTop: "5px",
-                position: "absolute",
-                zIndex: 0,
-                width: "90%",
-                height: "100%",
-                border: "none",
-                cursor: "pointer",
-                outline: "none",
-              }}
-              onChange={selectImg}
-            />
+            <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" }}
-            src={previewURL}
+            style={{
+              objectFit: "cover",
+              display: "flex",
+              margin: "0 auto",
+              width: "50rem",
+            }}
+            src={previewURL as string}
           />
         )}
       </ImgBox>
-      <Menu />
+      {/* <Menu /> */}
     </Container>
   );
 };
@@ -77,7 +86,6 @@ const Container = styled.div`
 `;
 const ImgBox = styled.div`
   position: relative;
-  width: 40rem;
   height: 30rem;
   background-color: white;
   box-shadow: ${({ theme }) => theme.boxShadow.normal};
@@ -87,6 +95,20 @@ const ImgBox = styled.div`
   align-items: center;
   justify-content: center;
   font-size: 1rem;
+  display: flex;
+  flex: 0.6;
+  padding: 1rem 0;
+  .sub-flex {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    :first-child {
+      border-right: 1px solid ${({ theme }) => theme.color.gray};
+    }
+  }
 `;
 
 const Box = styled.div`

+/// <reference path="react-image-editor.d.ts" />
+import ImageEditor from "@toast-ui/react-image-editor";
+import "tui-image-editor/dist/tui-image-editor.css";
+
+const ToastEditor = () => {
+  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}
+    />
+  );
+};
+
+export default ToastEditor;

+declare module "@toast-ui/react-image-editor";

@@ -58,6 +58,13 @@ class MyDocument extends Document {
         <body>
           <Main />
           <NextScript />
+          <script src="libs/code-snippet.min.js"></script>
+          <script src="libs/jquery.min.js"></script>
+          <script src="libs/fabric.min.js"></script>
+          <script src="js/image-editor.js"></script>
+          <div id="my-image-editor">
+            <canvas></canvas>
+          </div>
         </body>
       </Html>
     );

 import Header from "components/Header";
 import Image from "components/Image";
 import styled from "styled-components";
+import dynamic from "next/dynamic";
+
+const ToastEditor = dynamic(() => import("components/ToastEditor"), {
+  ssr: false,
+});
 
 const Index = () => (
   <Container>
     <Header />
     <Image />
+    <ToastEditor />
   </Container>
 );