emotion diary : edit diary page

emotiondiary/src/App.js

@@ -99,7 +99,7 @@ function App() {
             <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/new" element={<New />} />
-              <Route path="/edit" element={<Edit />} />
+              <Route path="/edit/:id" element={<Edit />} />
               <Route path="/diary/:id" element={<Diary />} />
             </Routes>
           </div>

emotiondiary/src/components/DiaryEditor.js

@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { useContext, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 
 import MyHeader from "./MyHeader";
 import MyButton from "./MyButton";
@@ -55,14 +55,14 @@ const getStringDate = (date) => {
   return `${year}-${month}-${day}`;
 };
 
-const DiaryEditor = () => {
+const DiaryEditor = ({ isEdit, originData }) => {
   const [content, setContent] = useState("");
   const [emotion, setEmotion] = useState(3);
   const [date, setDate] = useState(getStringDate(new Date()));
 
   const contentRef = useRef();
 
-  const { onCreate } = useContext(DiaryDispatchContext);
+  const { onCreate, onEdit } = useContext(DiaryDispatchContext);
 
   const navigate = useNavigate();
 
@@ -76,14 +76,32 @@ const DiaryEditor = () => {
       return;
     }
 
-    onCreate(date, content, emotion);
+    if (
+      window.confirm(
+        isEdit ? "일기를 수정하시겠습니까?" : "새로운 일기를 작성하시겠습니까?"
+      )
+    ) {
+      if (!isEdit) {
+        onCreate(date, content, emotion);
+      } else {
+        onEdit(originData.id, date, content, emotion);
+      }
+    }
     navigate("/", { replace: true });
   };
 
+  useEffect(() => {
+    if (isEdit) {
+      setDate(getStringDate(new Date(parseInt(originData.date))));
+      setEmotion(originData.emotion);
+      setContent(originData.content);
+    }
+  }, [isEdit, originData]);
+
   return (
     <div className="DiaryEditor">
       <MyHeader
-        headText={"새 일기쓰기"}
+        headText={isEdit ? "일기 수정하기" : "새 일기쓰기"}
         leftChild={
           <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
         }

emotiondiary/src/components/EmotionItem.js

@@ -12,7 +12,7 @@ const EmotionItem = ({
       }`}
       onClick={() => onClick(emotion_id)}
     >
-      <img src={emotion_img} />
+      <img src={emotion_img} alt="emotion_img" />
       <span>{emotion_descript}</span>
     </div>
   );

emotiondiary/src/pages/Edit.js

@@ -1,22 +1,34 @@
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useContext, useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { DiaryStateContext } from "../App";
+import DiaryEditor from "../components/DiaryEditor";
 
 const Edit = () => {
+  const [originData, setOriginData] = useState();
+
   const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
+  const diaryList = useContext(DiaryStateContext);
 
-  const id = searchParams.get("id");
+  const { id } = useParams();
-  const mode = searchParams.get("mode");
-  console.log(id);
-  console.log(mode);
 
+  useEffect(() => {
+    if (diaryList.length >= 1) {
+      const targetDiary = diaryList.find(
+        (it) => parseInt(it.id) === parseInt(id)
+      );
+
+      if (targetDiary) {
+        setOriginData(targetDiary);
+      } else {
+        navigate("/", { replace: true });
+      }
+    }
+  }, [diaryList, id]);
   return (
     <div>
-      <h1>Edit</h1>
+      <h2>
-      <p>이곳은 일기 수정 페이지 입니다.</p>
+        {originData && <DiaryEditor isEdit={true} originData={originData} />}
-      <button onClick={() => setSearchParams({ who: "kkk" })}>바꾸기</button>
+      </h2>
-
-      <button onClick={() => navigate("/")}>홈으로</button>
-      <button onClick={() => navigate(-1)}>뒤로가기</button>
     </div>
   );
 };