Toggle navigation
Toggle navigation
This project
Loading...
Sign in
2020-1-capstone-design2
/
2016104145
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
1
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
cutelee
2020-06-06 19:03:21 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
c86308da88e669acc3060e1ba43691a693b1d8aa
c86308da
1 parent
92d257fc
refactor: Context 분리
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
33 additions
and
14 deletions
project/src/context/ImageLoad.ts
project/src/context/Submenu.ts
project/src/pages/Editor/EditorHeader/EditorHeader.tsx
project/src/pages/Editor/EditorPage.tsx
project/src/pages/Editor/ImageResizer/ImageResizer.tsx
project/src/context/ImageLoad.ts
0 → 100644
View file @
c86308d
import
{
Context
,
createContext
}
from
"react"
;
export
interface
ImageLoadContextType
{
imageLoad
:
boolean
,
setImageLoad
:
Function
}
export
const
ImageLoadContext
:
Context
<
ImageLoadContextType
>
=
createContext
<
ImageLoadContextType
>
({
imageLoad
:
false
,
setImageLoad
:
()
=>
{}
});
\ No newline at end of file
project/src/context/Submenu.ts
0 → 100644
View file @
c86308d
import
{
Context
,
createContext
}
from
"react"
;
export
interface
SubmenuContextType
{
visible
:
boolean
,
onChange
:
Function
}
export
const
SubmenuContext
:
Context
<
SubmenuContextType
>
=
createContext
<
SubmenuContextType
>
({
visible
:
true
,
onChange
:
()
=>
{}
});
\ No newline at end of file
project/src/pages/Editor/EditorHeader/EditorHeader.tsx
View file @
c86308d
import React, { ChangeEvent } from "react";
import ToastEditor from "tui-image-editor";
import { SubmenuContext } from "../EditorPage";
import { SubmenuContext } from "context/Submenu";
import "./EditorHeader.scss";
...
...
project/src/pages/Editor/EditorPage.tsx
View file @
c86308d
import React, { useRef, useEffect, useState
, Context
} from "react";
import React, { useRef, useEffect, useState } from "react";
import ToastEditor from "tui-image-editor";
import EditorHeader from "./EditorHeader";
import { editorOptions } from "utils/editorOptions";
import { ImageLoadContext } from "context/ImageLoad";
import { SubmenuContext } from "context/Submenu";
import "tui-image-editor/dist/tui-image-editor.css";
import "./Editor.scss";
...
...
@@ -12,19 +14,10 @@ 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 [imageLoad, setImageLoad]: [boolean, Function] = useState(false);
const [submenuVisible, setSubmenuVisible] = useState(true);
useEffect(() => {
...
...
@@ -43,8 +36,10 @@ function EditorPage() {
return (
<>
<SubmenuContext.Provider value={{ visible: submenuVisible, onChange: onChangeSubmenuVisible }}>
<EditorHeader editor={editor} imageLoad={false} />
<div className={`my-editor tui-image-editor-container left ${!submenuVisible && "submenu-hidden"}`} ref={imageEditorRef} />
<ImageLoadContext.Provider value={{ imageLoad, setImageLoad }}>
<EditorHeader editor={editor} imageLoad={false} />
<div className={`my-editor tui-image-editor-container left ${!submenuVisible && "submenu-hidden"}`} ref={imageEditorRef} />
</ImageLoadContext.Provider>
</SubmenuContext.Provider>
</>
);
...
...
project/src/pages/Editor/ImageResizer/ImageResizer.tsx
View file @
c86308d
import React from "react";
function ImageResizer() {
return (
<div>이미지 크기 변경</div>
...
...
Please
register
or
login
to post a comment