[FIX] : Change 'MemoState&DispatchContext' level in comp trees

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useReducer, useRef, useState } from "react";
 import "./App.css";
 import {
   BrowserRouter as Router,
@@ -45,24 +45,95 @@ const memoData = [
   },
 ];
 
+const reducer = (state: any, action: any) => {
+  let newState = [];
+  switch (action.type) {
+    case "INIT": {
+      return action.data;
+    }
+    case "CREATE": {
+      newState = [...state, action.data];
+      break;
+    }
+    case "REMOVE": {
+      newState = state.filter((it) => it.id !== action.targetId);
+      break;
+    }
+    case "EDIT": {
+      newState = state.map((it) => {
+        return it.id === action.data.id ? { ...action.data } : it;
+      });
+      break;
+    }
+    default:
+      return state;
+  }
+  return newState;
+};
+
+export const MemoStateContext = React.createContext<[]>([]);
+export const MemoDispatchContext = React.createContext<{}>({});
+
 function App() {
+  const [data, dispatch] = useReducer(reducer, memoData);
+  const dataId = useRef(4);
+
+  useEffect(() => {
+    if (data) {
+      dispatch({ type: "INIT", data: data });
+    }
+  }, [data]);
+
+  const onCreate = () => {
+    dispatch({
+      type: "CREATE",
+      data: {
+        id: dataId.current,
+        title: "메모장 이름",
+        date: "지정 날짜",
+        description: "메모장 소개",
+        color: 0,
+      },
+    });
+    dataId.current += 1;
+  };
+
+  const onRemove = (targetId) => {
+    dispatch({ type: "REMOVE", targetId });
+  };
+
+  const onEdit = (targetId, title, date, description, color) => {
+    dispatch({
+      type: "EDIT",
+      data: {
+        id: targetId,
+        title,
+        date,
+        description,
+        color,
+      },
+    });
+  };
+
   return (
-    <>
-      <BrowserRouter>
-        <Routes>
-          {/* <Route path="/project_list" element={<ProjectList />}></Route> */}
-          <Route path="/" element={<Tutorial />}></Route>
-          <Route path="/start" element={<Start />}></Route>
-          <Route path="/login" element={<Login />}></Route>
-          <Route
-            path="/main"
-            element={<MainPage memoData={memoData} />}
-          ></Route>
-          <Route path="/detail/:id" element={<DetailPage />}></Route>
-          {/* <Route path="/todo" element={<TodoTemplete todoData={todoData} />}></Route> */}
-        </Routes>
-      </BrowserRouter>
-    </>
+    <MemoStateContext.Provider value={data}>
+      <MemoDispatchContext.Provider value={{ onCreate, onRemove, onEdit }}>
+        <BrowserRouter>
+          <Routes>
+            {/* <Route path="/project_list" element={<ProjectList />}></Route> */}
+            <Route path="/" element={<Tutorial />}></Route>
+            <Route path="/start" element={<Start />}></Route>
+            <Route path="/login" element={<Login />}></Route>
+            <Route
+              path="/main"
+              element={<MainPage memoData={memoData} />}
+            ></Route>
+            <Route path="/detail/:id" element={<DetailPage />}></Route>
+            {/* <Route path="/todo" element={<TodoTemplete todoData={todoData} />}></Route> */}
+          </Routes>
+        </BrowserRouter>
+      </MemoDispatchContext.Provider>
+    </MemoStateContext.Provider>
   );
 }
 

src/DetailPage/DetailPage.tsx

@@ -1,33 +1,51 @@
 import React, { useContext, useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { MemoStateContext } from "../MainPage/Main";
+import { MemoStateContext } from "../App";
+
+interface IMemoItem {
+  id: number;
+  title: string;
+  date: string;
+  description: string;
+  color: number;
+}
 
 const DetailPage = () => {
   const { id } = useParams();
   const memoList = useContext(MemoStateContext);
-  console.log(memoList);
-  const [data, setData] = useState();
+  const [data, setData] = useState<IMemoItem>(null);
   const navigate = useNavigate();
 
   useEffect(() => {
-    console.log(memoList);
     if (memoList.length >= 1) {
       const targetMemo = memoList.find(
         (it: any) => parseInt(it.id) === parseInt(id)
       );
-      console.log(targetMemo);
-      if (memoList) {
+      if (targetMemo) {
         setData(targetMemo);
       } else {
-        alert("메모장이 없습니다.");
+        alert("존재하지 않는 메모입니다");
         navigate("/", { replace: true });
       }
     } else {
-      alert("XX");
+      alert("존재하지 않는 메모입니다");
+      navigate("/", { replace: true });
     }
   }, [id, memoList]);
 
-  return <div></div>;
+  if (!data) {
+    return <div>Loading Now...</div>;
+  } else {
+    return (
+      <div>
+        {Object.keys(data).map((key) => (
+          <div key={key}>
+            {key} : {data[key]}
+          </div>
+        ))}
+      </div>
+    );
+  }
 };
 
 export default DetailPage;

src/MainPage/Main.tsx

@@ -1,108 +1,35 @@
 import React, { useEffect, useReducer, useRef, useState } from "react";
-import { memo } from "../App";
 import SideBar from "../CommonPage/SideBar/SideBar";
 import "./Main.css";
 import MemoList from "./MemoList";
 import TodoTemplete from "./TodoList/TodoTemplete";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClipboardList } from "@fortawesome/free-solid-svg-icons";
 import { faCalendarDays } from "@fortawesome/free-solid-svg-icons";
-import DetailPage from "../DetailPage/DetailPage";
-
-const reducer = (state: any, action: any) => {
-  let newState = [];
-  switch (action.type) {
-    case "INIT": {
-      return action.data;
-    }
-    case "CREATE": {
-      newState = [...state, action.data];
-      break;
-    }
-    case "REMOVE": {
-      newState = state.filter((it) => it.id !== action.targetId);
-      break;
-    }
-    case "EDIT": {
-      newState = state.map((it) => {
-        return it.id === action.data.id ? { ...action.data } : it;
-      });
-      break;
-    }
-    default:
-      return state;
-  }
-  return newState;
-};
-
-export const MemoStateContext = React.createContext<[]>([]);
-export const MemoDispatchContext = React.createContext<{}>({});
 
 const MainPage = ({ memoData }) => {
   const [addTodo, setAddTodo] = useState(false);
-  const [data, dispatch] = useReducer(reducer, memoData);
-  const dataId = useRef(4);
-
-  useEffect(() => {
-    if (data) {
-      dispatch({ type: "INIT", data: data });
-    }
-  }, [data]);
-
-  const onCreate = () => {
-    dispatch({
-      type: "CREATE",
-      data: {
-        id: dataId.current,
-        title: "메모장 이름",
-        date: "지정 날짜",
-        description: "메모장 소개",
-        color: 0,
-      },
-    });
-    dataId.current += 1;
-  };
-
-  const onRemove = (targetId) => {
-    dispatch({ type: "REMOVE", targetId });
-  };
-
-  const onEdit = (targetId, title, date, description, color) => {
-    dispatch({
-      type: "EDIT",
-      data: {
-        id: targetId,
-        title,
-        date,
-        description,
-        color,
-      },
-    });
-  };
 
   return (
     <div className="main">
       <SideBar />
-      <MemoStateContext.Provider value={data}>
-        <MemoDispatchContext.Provider value={{ onCreate, onRemove, onEdit }}>
-          <div className="main-container">
-            <h1 className="main-title">DA : HAENG</h1>
-            <MemoList />
-          </div>
-          <div className="RightSide">
-            <div className="openTodo">
-              <FontAwesomeIcon
-                icon={faClipboardList}
-                onClick={() => setAddTodo(!addTodo)}
-              />
-            </div>
-            {addTodo && <TodoTemplete />}
-            <div className="openTodo">
-              <FontAwesomeIcon icon={faCalendarDays} onClick={() => {}} />
-            </div>
-          </div>
-        </MemoDispatchContext.Provider>
-      </MemoStateContext.Provider>
+
+      <div className="main-container">
+        <h1 className="main-title">DA : HAENG</h1>
+        <MemoList />
+      </div>
+      <div className="RightSide">
+        <div className="openTodo">
+          <FontAwesomeIcon
+            icon={faClipboardList}
+            onClick={() => setAddTodo(!addTodo)}
+          />
+        </div>
+        {addTodo && <TodoTemplete />}
+        <div className="openTodo">
+          <FontAwesomeIcon icon={faCalendarDays} onClick={() => {}} />
+        </div>
+      </div>
     </div>
   );
 };

src/MainPage/MemoItem.tsx

@@ -1,8 +1,8 @@
 import { faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useContext, useState } from "react";
-import { MemoDispatchContext } from "./Main";
 import { useNavigate } from "react-router-dom";
+import { MemoDispatchContext } from "../App";
 import "./Main.css";
 
 const MemoItem = ({ id, title, date, description, color }: any) => {

src/MainPage/MemoList.tsx

@@ -1,10 +1,10 @@
 import { useContext } from "react";
-import { MemoDispatchContext, MemoStateContext } from "./Main";
 import MemoItem from "./MemoItem";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import "./Main.css";
 import { useEffect } from "react";
+import { MemoDispatchContext, MemoStateContext } from "../App";
 
 const MemoList = () => {
   const memoData = useContext(MemoStateContext);