From 29afae3a999fe340fb321d82c91b33e83f44ddec Mon Sep 17 00:00:00 2001 From: haerong22 Date: Wed, 20 Apr 2022 21:52:43 +0900 Subject: [PATCH] emotion diary : detail page --- emotiondiary/src/App.css | 73 ++++++++++++++++++++ emotiondiary/src/components/DiaryEditor.js | 49 +------------- emotiondiary/src/pages/Diary.js | 79 +++++++++++++++++++--- emotiondiary/src/pages/Edit.js | 1 + emotiondiary/src/util/date.js | 17 +++++ emotiondiary/src/util/emotion.js | 27 ++++++++ 6 files changed, 192 insertions(+), 54 deletions(-) create mode 100644 emotiondiary/src/util/date.js create mode 100644 emotiondiary/src/util/emotion.js diff --git a/emotiondiary/src/App.css b/emotiondiary/src/App.css index 0f5ac5c3..18a1b5e9 100644 --- a/emotiondiary/src/App.css +++ b/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; +} diff --git a/emotiondiary/src/components/DiaryEditor.js b/emotiondiary/src/components/DiaryEditor.js index e24d21d5..7cda565d 100644 --- a/emotiondiary/src/components/DiaryEditor.js +++ b/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); diff --git a/emotiondiary/src/pages/Diary.js b/emotiondiary/src/pages/Diary.js index 907f6b27..62fabda4 100644 --- a/emotiondiary/src/pages/Diary.js +++ b/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(); - return ( -
-

Diary

-

이곳은 일기 상세 페이지 입니다.

-
- ); + 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
로딩중입니다...
; + } else { + const curEmotion = emotionList.find( + (it) => parseInt(it.emotion_id) === parseInt(data.emotion) + ); + + console.log(curEmotion); + + return ( +
+ navigate(-1)} /> + } + rightChild={ + navigate(`/edit/${data.id}`)} + /> + } + /> +
+
+

오늘의 감정

+
+ +
+ {curEmotion.emotion_descript} +
+
+
+
+

오늘의 일기

+
+

{data.content}

+
+
+
+
+ ); + } }; export default Diary; diff --git a/emotiondiary/src/pages/Edit.js b/emotiondiary/src/pages/Edit.js index c5650e94..5481785c 100644 --- a/emotiondiary/src/pages/Edit.js +++ b/emotiondiary/src/pages/Edit.js @@ -20,6 +20,7 @@ const Edit = () => { if (targetDiary) { setOriginData(targetDiary); } else { + alert("없는 일기입니다."); navigate("/", { replace: true }); } } diff --git a/emotiondiary/src/util/date.js b/emotiondiary/src/util/date.js new file mode 100644 index 00000000..fd2d8b10 --- /dev/null +++ b/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}`; +}; diff --git a/emotiondiary/src/util/emotion.js b/emotiondiary/src/util/emotion.js new file mode 100644 index 00000000..72bd5f0e --- /dev/null +++ b/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: "끔찍함", + }, +];