diff --git a/emotiondiary/src/App.js b/emotiondiary/src/App.js index 3ccef65f..d9e51892 100644 --- a/emotiondiary/src/App.js +++ b/emotiondiary/src/App.js @@ -99,7 +99,7 @@ function App() { } /> } /> - } /> + } /> } /> diff --git a/emotiondiary/src/components/DiaryEditor.js b/emotiondiary/src/components/DiaryEditor.js index 273b653e..e24d21d5 100644 --- a/emotiondiary/src/components/DiaryEditor.js +++ b/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 (
navigate(-1)} /> } diff --git a/emotiondiary/src/components/EmotionItem.js b/emotiondiary/src/components/EmotionItem.js index 3060ff4a..4d688271 100644 --- a/emotiondiary/src/components/EmotionItem.js +++ b/emotiondiary/src/components/EmotionItem.js @@ -12,7 +12,7 @@ const EmotionItem = ({ }`} onClick={() => onClick(emotion_id)} > - + emotion_img {emotion_descript}
); diff --git a/emotiondiary/src/pages/Edit.js b/emotiondiary/src/pages/Edit.js index af0b5390..c5650e94 100644 --- a/emotiondiary/src/pages/Edit.js +++ b/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 mode = searchParams.get("mode"); - console.log(id); - console.log(mode); + const { id } = useParams(); + 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 (
-

Edit

-

이곳은 일기 수정 페이지 입니다.

- - - - +

+ {originData && } +

); };