cutelee

refactor: Context 분리

1 +import { Context, createContext } from "react";
2 +
3 +export interface ImageLoadContextType {
4 + imageLoad: boolean,
5 + setImageLoad: Function
6 +}
7 +
8 +export const ImageLoadContext: Context<ImageLoadContextType> = createContext<ImageLoadContextType>({
9 + imageLoad: false,
10 + setImageLoad: () => {}
11 +});
...\ No newline at end of file ...\ No newline at end of file
1 +import { Context, createContext } from "react";
2 +
3 +export interface SubmenuContextType {
4 + visible: boolean,
5 + onChange: Function
6 +}
7 +
8 +export const SubmenuContext: Context<SubmenuContextType> = createContext<SubmenuContextType>({
9 + visible: true,
10 + onChange: () => {}
11 +});
...\ No newline at end of file ...\ No newline at end of file
1 import React, { ChangeEvent } from "react"; 1 import React, { ChangeEvent } from "react";
2 import ToastEditor from "tui-image-editor"; 2 import ToastEditor from "tui-image-editor";
3 -import { SubmenuContext } from "../EditorPage"; 3 +
4 +import { SubmenuContext } from "context/Submenu";
4 5
5 import "./EditorHeader.scss"; 6 import "./EditorHeader.scss";
6 7
......
1 -import React, { useRef, useEffect, useState, Context } from "react"; 1 +import React, { useRef, useEffect, useState } from "react";
2 import ToastEditor from "tui-image-editor"; 2 import ToastEditor from "tui-image-editor";
3 3
4 import EditorHeader from "./EditorHeader"; 4 import EditorHeader from "./EditorHeader";
5 5
6 import { editorOptions } from "utils/editorOptions"; 6 import { editorOptions } from "utils/editorOptions";
7 +import { ImageLoadContext } from "context/ImageLoad";
8 +import { SubmenuContext } from "context/Submenu";
7 9
8 import "tui-image-editor/dist/tui-image-editor.css"; 10 import "tui-image-editor/dist/tui-image-editor.css";
9 import "./Editor.scss"; 11 import "./Editor.scss";
...@@ -12,19 +14,10 @@ import "./EditorPage.scss"; ...@@ -12,19 +14,10 @@ import "./EditorPage.scss";
12 // @ts-ignore 14 // @ts-ignore
13 const initialEditor:ToastEditor = new ToastEditor(document.querySelector("#hidden-editor"), editorOptions); 15 const initialEditor:ToastEditor = new ToastEditor(document.querySelector("#hidden-editor"), editorOptions);
14 16
15 -interface SubmenuContextType {
16 - visible: boolean,
17 - onChange: Function
18 -}
19 -
20 -export const SubmenuContext: Context<SubmenuContextType> = React.createContext<SubmenuContextType>({
21 - visible: true,
22 - onChange: () => {}
23 -});
24 -
25 function EditorPage() { 17 function EditorPage() {
26 const imageEditorRef = useRef<HTMLDivElement>(null); 18 const imageEditorRef = useRef<HTMLDivElement>(null);
27 const [editor, setEditor] = useState(initialEditor); 19 const [editor, setEditor] = useState(initialEditor);
20 + const [imageLoad, setImageLoad]: [boolean, Function] = useState(false);
28 const [submenuVisible, setSubmenuVisible] = useState(true); 21 const [submenuVisible, setSubmenuVisible] = useState(true);
29 22
30 useEffect(() => { 23 useEffect(() => {
...@@ -43,8 +36,10 @@ function EditorPage() { ...@@ -43,8 +36,10 @@ function EditorPage() {
43 return ( 36 return (
44 <> 37 <>
45 <SubmenuContext.Provider value={{ visible: submenuVisible, onChange: onChangeSubmenuVisible }}> 38 <SubmenuContext.Provider value={{ visible: submenuVisible, onChange: onChangeSubmenuVisible }}>
39 + <ImageLoadContext.Provider value={{ imageLoad, setImageLoad }}>
46 <EditorHeader editor={editor} imageLoad={false} /> 40 <EditorHeader editor={editor} imageLoad={false} />
47 <div className={`my-editor tui-image-editor-container left ${!submenuVisible && "submenu-hidden"}`} ref={imageEditorRef} /> 41 <div className={`my-editor tui-image-editor-container left ${!submenuVisible && "submenu-hidden"}`} ref={imageEditorRef} />
42 + </ImageLoadContext.Provider>
48 </SubmenuContext.Provider> 43 </SubmenuContext.Provider>
49 </> 44 </>
50 ); 45 );
......
1 import React from "react"; 1 import React from "react";
2 2
3 +
3 function ImageResizer() { 4 function ImageResizer() {
4 return ( 5 return (
5 <div>이미지 크기 변경</div> 6 <div>이미지 크기 변경</div>
......