emotion diary : localStorage

emotiondiary/src/App.js

@@ -5,7 +5,7 @@ import Home from "./pages/Home";
 import New from "./pages/New";
 import Edit from "./pages/Edit";
 import Diary from "./pages/Diary";
-import React, { useReducer, useRef } from "react";
+import React, { useEffect, useReducer, useRef } from "react";
 
 const reducer = (state, action) => {
   let newState = [];
@@ -32,24 +32,29 @@ const reducer = (state, action) => {
       return state;
   }
 
+  localStorage.setItem("diary", JSON.stringify(newState));
   return newState;
 };
 
 export const DiaryStateContext = React.createContext();
 export const DiaryDispatchContext = React.createContext();
 
-const dummyData = [
-  { id: 1, emotion: 5, content: "오늘의일기 1번", date: 1650270903935 },
-  { id: 2, emotion: 4, content: "오늘의일기 2번", date: 1650270903936 },
-  { id: 3, emotion: 3, content: "오늘의일기 3번", date: 1650270903937 },
-  { id: 4, emotion: 2, content: "오늘의일기 4번", date: 1650270903938 },
-  { id: 5, emotion: 1, content: "오늘의일기 5번", date: 1650270903939 },
-];
-
 function App() {
-  const [data, dispatch] = useReducer(reducer, dummyData);
+  const [data, dispatch] = useReducer(reducer, []);
   const dataId = useRef(0);
 
+  useEffect(() => {
+    const localData = localStorage.getItem("diary");
+    if (localData) {
+      const diaryList = JSON.parse(localData).sort(
+        (a, b) => parseInt(b.id) - parseInt(a.id)
+      );
+      dataId.current = parseInt(diaryList[0].id) + 1;
+
+      dispatch({ type: "INIT", data: diaryList });
+    }
+  });
+
   // CREATE
   const onCreate = (date, content, emotion) => {
     dispatch({

emotiondiary/src/components/DiaryEditor.js

@@ -19,7 +19,7 @@ const DiaryEditor = ({ isEdit, originData }) => {
 
   const contentRef = useRef();
 
-  const { onCreate, onEdit } = useContext(DiaryDispatchContext);
+  const { onCreate, onEdit, onRemove } = useContext(DiaryDispatchContext);
 
   const navigate = useNavigate();
 
@@ -47,6 +47,13 @@ const DiaryEditor = ({ isEdit, originData }) => {
     navigate("/", { replace: true });
   };
 
+  const handleRemove = () => {
+    if (window.confirm("삭제 하시겠습니까?")) {
+      onRemove(originData.id);
+      navigate("/", { replace: true });
+    }
+  };
+
   useEffect(() => {
     if (isEdit) {
       setDate(getStringDate(new Date(parseInt(originData.date))));
@@ -62,6 +69,15 @@ const DiaryEditor = ({ isEdit, originData }) => {
         leftChild={
           <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
         }
+        rightChild={
+          isEdit && (
+            <MyButton
+              text={"삭제하기"}
+              type="negative"
+              onClick={handleRemove}
+            />
+          )
+        }
       />
       <div>
         <section>

emotiondiary/src/components/DiaryList.js

@@ -4,7 +4,7 @@ import DiaryItem from "./DiaryItem";
 import MyButton from "./MyButton";
 
 const sortOptionList = [
-  { value: "lastest", name: "최신순" },
+  { value: "latest", name: "최신순" },
   { value: "oldest", name: "오래된 순" },
 ];
 
@@ -32,7 +32,7 @@ const ControlMenu = ({ value, onChange, optionList }) => {
 
 const DiaryList = ({ diaryList }) => {
   const navigate = useNavigate();
-  const [sortType, setSortType] = useState("lastest");
+  const [sortType, setSortType] = useState("latest");
   const [filter, setFilter] = useState("all");
 
   const getProcessedDiaryList = () => {
@@ -45,7 +45,7 @@ const DiaryList = ({ diaryList }) => {
     };
 
     const compare = (a, b) => {
-      if (sortType === "lastest") {
+      if (sortType === "latest") {
         return parseInt(b.date) - parseInt(a.date);
       } else {
         return parseInt(a.date) - parseInt(b.date);

emotiondiary/src/pages/Diary.js

@@ -31,12 +31,11 @@ const Diary = () => {
   if (!data) {
     return <div className="DiaryPage">로딩중입니다...</div>;
   } else {
+    console.log(data);
     const curEmotion = emotionList.find(
       (it) => parseInt(it.emotion_id) === parseInt(data.emotion)
     );
 
-    console.log(curEmotion);
-
     return (
       <div className="DiaryPage">
         <MyHeader

emotiondiary/src/pages/Home.js

@@ -23,7 +23,10 @@ const Home = () => {
       const lastDay = new Date(
         curDate.getFullYear(),
         curDate.getMonth() + 1,
-        0
+        0,
+        23,
+        59,
+        59
       ).getTime();
 
       setData(