diff --git a/emotiondiary/public/assets/emotion1.png b/emotiondiary/public/assets/emotion1.png index a4dbd08e..047fcda9 100644 Binary files a/emotiondiary/public/assets/emotion1.png and b/emotiondiary/public/assets/emotion1.png differ diff --git a/emotiondiary/public/assets/emotion2.png b/emotiondiary/public/assets/emotion2.png index 52f61822..b152643e 100644 Binary files a/emotiondiary/public/assets/emotion2.png and b/emotiondiary/public/assets/emotion2.png differ diff --git a/emotiondiary/public/assets/emotion4.png b/emotiondiary/public/assets/emotion4.png index b152643e..52f61822 100644 Binary files a/emotiondiary/public/assets/emotion4.png and b/emotiondiary/public/assets/emotion4.png differ diff --git a/emotiondiary/public/assets/emotion5.png b/emotiondiary/public/assets/emotion5.png index 047fcda9..a4dbd08e 100644 Binary files a/emotiondiary/public/assets/emotion5.png and b/emotiondiary/public/assets/emotion5.png differ diff --git a/emotiondiary/src/App.css b/emotiondiary/src/App.css index bb82961f..086b635b 100644 --- a/emotiondiary/src/App.css +++ b/emotiondiary/src/App.css @@ -100,3 +100,97 @@ header .head_btn_right { header button { font-family: "Nanum Pen Script", cursive; } + +/* DiaryList */ +.DiaryList .menu_wrapper { + margin-top: 20px; + margin-bottom: 30px; + + display: flex; + justify-content: space-between; +} + +.DiaryList .menu_wrapper .right_col { + flex-grow: 1; +} + +.DiaryList .menu_wrapper .right_col button { + width: 100%; +} + +.DiaryList .ControlMenu { + margin-right: 10px; + border: none; + border-radius: 5px; + background-color: #ececec; + + padding-top: 10px; + padding-bottom: 10px; + padding-left: 20px; + padding-right: 20px; + + cursor: pointer; + font-family: "Nanum Pen Script", cursive; + font-size: 18px; +} + +/* DiaryItem */ + +.DiaryItem { + padding-top: 15px; + padding-bottom: 15px; + + border-bottom: 1px solid #e2e2e2; + + display: flex; + justify-content: space-between; +} + +.DiaryItem .emotion_img_wrapper { + cursor: pointer; + min-width: 120px; + height: 80px; + border-radius: 5px; + display: flex; + justify-content: center; +} + +.DiaryItem .emotion_img_wrapper_1 { + background-color: #fd565f; +} +.DiaryItem .emotion_img_wrapper_2 { + background-color: #fd8446; +} +.DiaryItem .emotion_img_wrapper_3 { + background-color: #fdce17; +} +.DiaryItem .emotion_img_wrapper_4 { + background-color: #9dd772; +} +.DiaryItem .emotion_img_wrapper_5 { + background-color: #64c964; +} + +.DiaryItem .emotion_img_wrapper img { + width: 50%; +} + +.DiaryItem .info_wrapper { + flex-grow: 1; + cursor: pointer; + margin-left: 20px; +} + +.DiaryItem .diary_date { + font-weight: bold; + font-size: 25px; + margin-bottom: 5px; +} + +.DiaryItem .diary_content_preview { + font-size: 18px; +} + +.DiaryItem .btn_wrapper { + min-width: 70px; +} diff --git a/emotiondiary/src/App.js b/emotiondiary/src/App.js index 578a6f1c..ecb5f8d4 100644 --- a/emotiondiary/src/App.js +++ b/emotiondiary/src/App.js @@ -38,9 +38,16 @@ const reducer = (state, action) => { export const DiaryStateContext = React.createContext(); export const DiaryDispatchContext = React.createContext(); -function App() { - const [data, dispatch] = useReducer(reducer, []); +const dummyData = [ + { id: 1, emotion: 1, content: "오늘의일기 1번", date: 1650270903935 }, + { id: 2, emotion: 2, content: "오늘의일기 2번", date: 1650270903936 }, + { id: 3, emotion: 3, content: "오늘의일기 3번", date: 1650270903937 }, + { id: 4, emotion: 4, content: "오늘의일기 4번", date: 1650270903938 }, + { id: 5, emotion: 5, content: "오늘의일기 5번", date: 1650270903939 }, +]; +function App() { + const [data, dispatch] = useReducer(reducer, dummyData); const dataId = useRef(0); // CREATE diff --git a/emotiondiary/src/components/DiaryItem.js b/emotiondiary/src/components/DiaryItem.js new file mode 100644 index 00000000..01c02e94 --- /dev/null +++ b/emotiondiary/src/components/DiaryItem.js @@ -0,0 +1,40 @@ +import { useNavigate } from "react-router-dom"; + +import MyButton from "./MyButton"; + +const DiaryItem = ({ id, emotion, content, date }) => { + const navigate = useNavigate(); + + const env = process.env; + env.PUBLIC_URL = env.PUBLIC_URL || ""; + + const strDate = new Date(parseInt(date)).toLocaleDateString(); + + const goDetail = () => { + navigate(`/diary/${id}`); + }; + + const goEdit = () => { + navigate(`/edit/${id}`); + }; + + return ( +
+
+ +
+
+
{strDate}
+
{content.slice(0, 25)}
+
+
+ +
+
+ ); +}; + +export default DiaryItem; diff --git a/emotiondiary/src/components/DiaryList.js b/emotiondiary/src/components/DiaryList.js new file mode 100644 index 00000000..805b1250 --- /dev/null +++ b/emotiondiary/src/components/DiaryList.js @@ -0,0 +1,97 @@ +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import DiaryItem from "./DiaryItem"; +import MyButton from "./MyButton"; + +const sortOptionList = [ + { value: "lastest", name: "최신순" }, + { value: "oldest", name: "오래된 순" }, +]; + +const filterOptionList = [ + { value: "all", name: "전부다" }, + { value: "good", name: "좋은 감정만" }, + { value: "bad", name: "안좋은 감정만" }, +]; + +const ControlMenu = ({ value, onChange, optionList }) => { + return ( + + ); +}; + +const DiaryList = ({ diaryList }) => { + const navigate = useNavigate(); + const [sortType, setSortType] = useState("lastest"); + const [filter, setFilter] = useState("all"); + + const getProcessedDiaryList = () => { + const filterCallback = (item) => { + if (filter === "good") { + return parseInt(item.emotion) <= 3; + } else { + return parseInt(item.emotion) > 3; + } + }; + + const compare = (a, b) => { + if (sortType === "lastest") { + return parseInt(b.date) - parseInt(a.date); + } else { + return parseInt(a.date) - parseInt(b.date); + } + }; + + const copyList = [...diaryList]; + const filteredList = + filter === "all" ? copyList : copyList.filter((it) => filterCallback(it)); + const sortedList = filteredList.sort(compare); + return sortedList; + }; + + return ( +
+
+
+ + +
+
+ navigate("/new")} + /> +
+
+ + {getProcessedDiaryList().map((it) => ( + + ))} +
+ ); +}; + +DiaryList.defaultProps = { + diaryList: [], +}; + +export default DiaryList; diff --git a/emotiondiary/src/pages/Home.js b/emotiondiary/src/pages/Home.js index 45d702eb..6f90fa98 100644 --- a/emotiondiary/src/pages/Home.js +++ b/emotiondiary/src/pages/Home.js @@ -1,8 +1,57 @@ +import { useContext, useEffect, useState } from "react"; +import MyHeader from "../components/MyHeader"; +import MyButton from "../components/MyButton"; +import DiaryList from "../components/DiaryList"; +import { DiaryStateContext } from "../App"; + const Home = () => { + const diaryList = useContext(DiaryStateContext); + + const [data, setData] = useState([]); + const [curDate, setCurDate] = useState(new Date()); + + const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; + + useEffect(() => { + if (diaryList.length >= 1) { + const firstDay = new Date( + curDate.getFullYear(), + curDate.getMonth(), + 1 + ).getTime(); + + const lastDay = new Date( + curDate.getFullYear(), + curDate.getMonth() + 1, + 0 + ).getTime(); + + setData( + diaryList.filter((it) => firstDay <= it.date && it.date <= lastDay) + ); + } + }, [diaryList, curDate]); + + const increaseMonth = () => { + setCurDate( + new Date(curDate.getFullYear(), curDate.getMonth() + 1, curDate.getDate()) + ); + }; + + const decreaseMonth = () => { + setCurDate( + new Date(curDate.getFullYear(), curDate.getMonth() - 1, curDate.getDate()) + ); + }; + return (
-

Home

-

이곳은 홈 입니다.

+ } + rightChild={"} onClick={increaseMonth} />} + /> +
); };