emotion diary : home page

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;
+}

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

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 (
+    <div className="DiaryItem">
+      <div
+        onClick={goDetail}
+        className={`emotion_img_wrapper emotion_img_wrapper_${emotion}`}
+      >
+        <img src={process.env.PUBLIC_URL + `assets/emotion${emotion}.png`} />
+      </div>
+      <div onClick={goDetail} className="info_wrapper">
+        <div className="diary_date">{strDate}</div>
+        <div className="diary_content_preview">{content.slice(0, 25)}</div>
+      </div>
+      <div className="btn_wrapper">
+        <MyButton text={"수정하기"} onClick={goEdit} />
+      </div>
+    </div>
+  );
+};
+
+export default DiaryItem;

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 (
+    <select
+      className="ControlMenu"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    >
+      {optionList.map((it, idx) => (
+        <option key={idx} value={it.value}>
+          {it.name}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+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 (
+    <div className="DiaryList">
+      <div className="menu_wrapper">
+        <div className="left_col">
+          <ControlMenu
+            value={sortType}
+            onChange={setSortType}
+            optionList={sortOptionList}
+          />
+          <ControlMenu
+            value={filter}
+            onChange={setFilter}
+            optionList={filterOptionList}
+          />
+        </div>
+        <div className="right_col">
+          <MyButton
+            type={"positive"}
+            text={"새 일기쓰기"}
+            onClick={() => navigate("/new")}
+          />
+        </div>
+      </div>
+
+      {getProcessedDiaryList().map((it) => (
+        <DiaryItem key={it.id} {...it} />
+      ))}
+    </div>
+  );
+};
+
+DiaryList.defaultProps = {
+  diaryList: [],
+};
+
+export default DiaryList;

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 (
     <div>
-      <h1>Home</h1>
-      <p>이곳은 홈 입니다.</p>
+      <MyHeader
+        headText={headText}
+        leftChild={<MyButton text={"<"} onClick={decreaseMonth} />}
+        rightChild={<MyButton text={">"} onClick={increaseMonth} />}
+      />
+      <DiaryList diaryList={data} />
     </div>
   );
 };