emotion diary : detail page

emotiondiary/src/App.css

@@ -300,3 +300,76 @@ header button {
   background-color: #fd565f;
   color: white;
 }
+
+/* Diary */
+
+.DiaryPage {
+}
+
+.DiaryPage section {
+  width: 100%;
+  margin-bottom: 100px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.DiaryPage h4 {
+  font-size: 22px;
+  font-weight: bold;
+}
+
+.DiaryPage .diary_img_wrapper {
+  background-color: #ececec;
+  width: 250px;
+  height: 250px;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.DiaryPage .diary_img_wrapper_1 {
+  background-color: #64c964;
+}
+
+.DiaryPage .diary_img_wrapper_2 {
+  background-color: #9dd772;
+}
+
+.DiaryPage .diary_img_wrapper_3 {
+  background-color: #fdce17;
+}
+
+.DiaryPage .diary_img_wrapper_4 {
+  background-color: #fd8446;
+}
+
+.DiaryPage .diary_img_wrapper_5 {
+  background-color: #fd565f;
+}
+
+.DiaryPage .emotion_descript {
+  font-size: 25px;
+  color: white;
+}
+
+.DiaryPage .diary_content_wrapper {
+  width: 100%;
+  background-color: #ececec;
+  border-radius: 5px;
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+
+.DiaryPage .diary_content_wrapper p {
+  padding: 20px;
+  text-align: left;
+  font-size: 20px;
+  font-family: "Yeon Sung";
+  font-weight: 400;
+  line-height: 2.5;
+}

emotiondiary/src/components/DiaryEditor.js

@@ -6,55 +6,12 @@ import MyButton from "./MyButton";
 import EmotionItem from "./EmotionItem";
 import { DiaryDispatchContext } from "../App";
 
+import { getStringDate } from "../util/date";
+import { emotionList } from "../util/emotion";
+
 const env = process.env;
 env.PUBLIC_URL = env.PUBLIC_URL || "";
 
-const emotionList = [
-  {
-    emotion_id: 1,
-    emotion_img: process.env.PUBLIC_URL + `/assets/emotion1.png`,
-    emotion_descript: "행복함",
-  },
-  {
-    emotion_id: 2,
-    emotion_img: process.env.PUBLIC_URL + `/assets/emotion2.png`,
-    emotion_descript: "좋음",
-  },
-  {
-    emotion_id: 3,
-    emotion_img: process.env.PUBLIC_URL + `/assets/emotion3.png`,
-    emotion_descript: "그럭저럭",
-  },
-  {
-    emotion_id: 4,
-    emotion_img: process.env.PUBLIC_URL + `/assets/emotion4.png`,
-    emotion_descript: "나쁨",
-  },
-  {
-    emotion_id: 5,
-    emotion_img: process.env.PUBLIC_URL + `/assets/emotion5.png`,
-    emotion_descript: "끔찍함",
-  },
-];
-
-const getStringDate = (date) => {
-  let year = date.getFullYear();
-
-  let month = date.getMonth() + 1;
-
-  let day = date.getDate();
-
-  if (month < 10) {
-    month = `0${month}`;
-  }
-
-  if (day < 10) {
-    day = `0${day}`;
-  }
-
-  return `${year}-${month}-${day}`;
-};
-
 const DiaryEditor = ({ isEdit, originData }) => {
   const [content, setContent] = useState("");
   const [emotion, setEmotion] = useState(3);

emotiondiary/src/pages/Diary.js

@@ -1,15 +1,78 @@
-import { useParams } from "react-router-dom";
+import { useContext, useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { DiaryStateContext } from "../App";
+import MyButton from "../components/MyButton";
+import MyHeader from "../components/MyHeader";
+import { getStringDate } from "../util/date";
+import { emotionList } from "../util/emotion";
 
 const Diary = () => {
   const { id } = useParams();
-  console.log(id);
+  const diaryList = useContext(DiaryStateContext);
+  const navigate = useNavigate();
+
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    if (diaryList.length >= 1) {
+      const targetDiary = diaryList.find(
+        (it) => parseInt(it.id) === parseInt(id)
+      );
+
+      if (targetDiary) {
+        setData(targetDiary);
+      } else {
+        alert("없는 일기입니다.");
+        navigate("/", { replace: true });
+      }
+    }
+  }, [id, diaryList]);
+
+  if (!data) {
+    return <div className="DiaryPage">로딩중입니다...</div>;
+  } else {
+    const curEmotion = emotionList.find(
+      (it) => parseInt(it.emotion_id) === parseInt(data.emotion)
+    );
+
+    console.log(curEmotion);
 
     return (
-    <div>
-      <h1>Diary</h1>
-      <p>이곳은 일기 상세 페이지 입니다.</p>
+      <div className="DiaryPage">
+        <MyHeader
+          headText={`${getStringDate(new Date(data.date))} 기록`}
+          leftChild={
+            <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
+          }
+          rightChild={
+            <MyButton
+              text={"수정하기"}
+              onClick={() => navigate(`/edit/${data.id}`)}
+            />
+          }
+        />
+        <article>
+          <section>
+            <h4>오늘의 감정</h4>
+            <div
+              className={`diary_img_wrapper diary_img_wrapper_${data.emotion}`}
+            >
+              <img src={curEmotion.emotion_img} />
+              <div className="emotion_descript">
+                {curEmotion.emotion_descript}
+              </div>
+            </div>
+          </section>
+          <section>
+            <h4>오늘의 일기</h4>
+            <div className="diary_content_wrapper">
+              <p>{data.content}</p>
+            </div>
+          </section>
+        </article>
       </div>
     );
+  }
 };
 
 export default Diary;

emotiondiary/src/pages/Edit.js

@@ -20,6 +20,7 @@ const Edit = () => {
       if (targetDiary) {
         setOriginData(targetDiary);
       } else {
+        alert("없는 일기입니다.");
         navigate("/", { replace: true });
       }
     }

emotiondiary/src/util/date.js

@@ -0,0 +1,17 @@
+export const getStringDate = (date) => {
+  let year = date.getFullYear();
+
+  let month = date.getMonth() + 1;
+
+  let day = date.getDate();
+
+  if (month < 10) {
+    month = `0${month}`;
+  }
+
+  if (day < 10) {
+    day = `0${day}`;
+  }
+
+  return `${year}-${month}-${day}`;
+};

emotiondiary/src/util/emotion.js

@@ -0,0 +1,27 @@
+export const emotionList = [
+  {
+    emotion_id: 1,
+    emotion_img: process.env.PUBLIC_URL + `/assets/emotion1.png`,
+    emotion_descript: "행복함",
+  },
+  {
+    emotion_id: 2,
+    emotion_img: process.env.PUBLIC_URL + `/assets/emotion2.png`,
+    emotion_descript: "좋음",
+  },
+  {
+    emotion_id: 3,
+    emotion_img: process.env.PUBLIC_URL + `/assets/emotion3.png`,
+    emotion_descript: "그럭저럭",
+  },
+  {
+    emotion_id: 4,
+    emotion_img: process.env.PUBLIC_URL + `/assets/emotion4.png`,
+    emotion_descript: "나쁨",
+  },
+  {
+    emotion_id: 5,
+    emotion_img: process.env.PUBLIC_URL + `/assets/emotion5.png`,
+    emotion_descript: "끔찍함",
+  },
+];