feat: 파일 로드 기능 구현

 .my-editor.tui-image-editor-container {
 .my-editor.tui-image-editor-container {
   .tui-image-editor-header {
   .tui-image-editor-header {
-    min-width: initial !important;
+    display: none;
   }
   }
 
 
   .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button {
   .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button {

+.my-header {
+  position: fixed;
+  width: 100%;
+  height: 50px;
+  //background: white;
+  z-index: 10;
+
+  button {
+    float: right;
+    height: 35px;
+    margin-top: 20px;
+    font-size: 14px;
+    border: none;
+    border-radius: 5px;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+
+  .file-box {
+    .file-box-button {
+      //background: white;
+    }
+
+    #input-image-file {
+      display: none;
+    }
+  }
+}
\ No newline at end of file

+import React, { ChangeEvent } from "react";
+import ToastEditor from "tui-image-editor";
+
+import "./EditorHeader.scss";
+
+// TODO: 버튼 노출 규칙 정리하기
+// TODO: 다크모드/라이트모드에 따른 버튼 스타일 수정하기
+// TODO: 다크모드 토글 버튼을 input 타입 checked로 변경하기
+
+interface EditorHeaderProps {
+  editor: ToastEditor;
+  imageLoad: boolean
+}
+
+function EditorHeader({ editor, imageLoad }: EditorHeaderProps) {
+  function onLoadImage(e: ChangeEvent<HTMLInputElement>): void {
+    const { files }  = e.target;
+    if (files) {
+      editor.loadImageFromFile(files[0])
+        .then((result: any) => console.log(result));
+    }
+  }
+
+  return (
+    <div className="my-header">
+      <button>다크모드</button>
+      {imageLoad ? (
+        <>
+          <button>다운로드</button>
+          <button>저장하기</button>
+          <button>새 작업</button>
+        </>
+      ) : (
+        <>
+          <span className="file-box">
+            <button><label htmlFor="input-image-file" className="file-box-button">파일 로드</label></button>
+            <input type="file" accept="image/*" id="input-image-file" onChange={(e: ChangeEvent<HTMLInputElement>) => onLoadImage(e)}/>
+          </span>
+
+          <button>URL 불러오기</button>
+        </>
+      )}
+
+    </div>
+  );
+}
+
+export default EditorHeader;
\ No newline at end of file

+export { default } from "./EditorHeader";
\ No newline at end of file

 import React, { useRef, useEffect, useState } from "react";
 import React, { useRef, useEffect, useState } from "react";
 import ToastEditor from "tui-image-editor";
 import ToastEditor from "tui-image-editor";
 
 
+import EditorHeader from "./EditorHeader";
+
 import { editorOptions } from "utils/editorOptions";
 import { editorOptions } from "utils/editorOptions";
 
 
 import "tui-image-editor/dist/tui-image-editor.css";
 import "tui-image-editor/dist/tui-image-editor.css";
@@ -24,7 +26,10 @@ function EditorPage() {
   }, []);
   }, []);
 
 
   return (
   return (
+    <>
+      <EditorHeader editor={editor} imageLoad={false} />
       <div className="my-editor" ref={imageEditorRef} />
       <div className="my-editor" ref={imageEditorRef} />
+    </>
   );
   );
 }
 }
 
 

+import React from "react";
+
+function ImageResizer() {
+  return (
+    <div>이미지 크기 변경</div>
+  );
+}
+
+export default ImageResizer;
\ No newline at end of file

+export { default } from "./ImageResizer";
\ No newline at end of file