feat: 서브메뉴 토글 기능 구현

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea/
\ No newline at end of file

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.13.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

@@ -4,6 +4,8 @@ import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
+import "@fortawesome/fontawesome-free/css/all.min.css";
+
 ReactDOM.render(
   <React.StrictMode>
     <App />

 .my-editor.tui-image-editor-container {
+  &.submenu-hidden {
+    .tui-image-editor-submenu {
+      left: -350px;
+      transition: 0.5s ease-in-out;
+    }
+  }
+
+  .tui-image-editor-controls {
+    z-index: 10;
+  }
+
+  .tui-image-editor-submenu {
+    left: 0;
+    transition: 0.5s ease-in;
+  }
+
   .tui-image-editor-header {
     display: none;
   }

@@ -14,6 +14,27 @@
     border-radius: 5px;
     margin-right: 10px;
     cursor: pointer;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .submenu-toggle {
+    position: absolute;
+    left: 90px;
+    background: none;
+    color: gray;
+    font-size: 20px;
+
+    &.activate {
+      color: white;
+    }
+
+    &:hover {
+      transform: scale(1.15);
+      transition: 0.2s;
+    }
   }
 
   .file-box {

 import React, { ChangeEvent } from "react";
 import ToastEditor from "tui-image-editor";
+import { SubmenuContext } from "../EditorPage";
 
 import "./EditorHeader.scss";
 
@@ -21,9 +22,24 @@ function EditorHeader({ editor, imageLoad }: EditorHeaderProps) {
     }
   }
 
+  function toggleSubmenu() {
+    console.log("toggle Submenu");
+  }
+
   return (
     <div className="my-header">
-      <button>다크모드</button>
+      <SubmenuContext.Consumer>
+        {({ visible, onChange }) => {
+          console.log(visible);
+          return (
+            <button className={`submenu-toggle ${visible && "activate"}`} onClick={() => onChange()}>
+              <i className="fas fa-list" />
+            </button>
+          );
+        }}
+      </SubmenuContext.Consumer>
+
+      {/*<button>다크모드</button>*/}
       {imageLoad ? (
         <>
           <button>다운로드</button>

-import React, { useRef, useEffect, useState } from "react";
+import React, { useRef, useEffect, useState, Context } from "react";
 import ToastEditor from "tui-image-editor";
 
 import EditorHeader from "./EditorHeader";
@@ -12,9 +12,20 @@ import "./EditorPage.scss";
 // @ts-ignore
 const initialEditor:ToastEditor = new ToastEditor(document.querySelector("#hidden-editor"), editorOptions);
 
+interface SubmenuContextType {
+  visible: boolean,
+  onChange: Function
+}
+
+export const SubmenuContext: Context<SubmenuContextType> = React.createContext<SubmenuContextType>({
+  visible: true,
+  onChange: () => {}
+});
+
 function EditorPage() {
   const imageEditorRef = useRef<HTMLDivElement>(null);
   const [editor, setEditor] = useState(initialEditor);
+  const [submenuVisible, setSubmenuVisible] = useState(true);
 
   useEffect(() => {
     // @ts-ignore
@@ -25,10 +36,16 @@ function EditorPage() {
     };
   }, []);
 
+  function onChangeSubmenuVisible() {
+    setSubmenuVisible(!submenuVisible);
+  }
+
   return (
     <>
+      <SubmenuContext.Provider value={{ visible: submenuVisible, onChange: onChangeSubmenuVisible }}>
         <EditorHeader editor={editor} imageLoad={false} />
-      <div className="my-editor" ref={imageEditorRef} />
+        <div className={`my-editor tui-image-editor-container left ${!submenuVisible && "submenu-hidden"}`} ref={imageEditorRef} />
+      </SubmenuContext.Provider>
     </>
   );
 }