From 5a53f6d118c34db1e6e5d893a9e7b1104202ab07 Mon Sep 17 00:00:00 2001
From: dbwhdtjr0457 <dbwhdtjr0457@gmail.com>
Date: Tue, 5 Dec 2023 11:42:00 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=95=84=ED=84=B0=EB=A7=81=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DiaryModal/DiaryListModal.js   | 80 ++++++++++++++++++-
 1 file changed, 79 insertions(+), 1 deletion(-)

diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js
index d4f01f0..78127b1 100644
--- a/FE/src/components/DiaryModal/DiaryListModal.js
+++ b/FE/src/components/DiaryModal/DiaryListModal.js
@@ -28,10 +28,12 @@ function DiaryListModal() {
     shape: [],
     tag: [],
   });
+  const [filteredDiaryList, setFilteredDiaryList] = React.useState([]);
 
   useLayoutEffect(() => {
     if (diaryState.diaryList) {
       setSelectedDiary(diaryState.diaryList[0]);
+      setFilteredDiaryList(diaryState.diaryList);
     }
   }, [diaryState.diaryList]);
 
@@ -45,6 +47,82 @@ function DiaryListModal() {
     }
   }, [selectedDiary]);
 
+  useEffect(() => {
+    if (diaryState.diaryList) {
+      const filteredList = diaryState.diaryList
+        .filter((diary) => {
+          if (filterState.date.start && filterState.date.end) {
+            if (
+              new Date(diary.date) >= filterState.date.start &&
+              new Date(diary.date) <= filterState.date.end
+            ) {
+              return true;
+            }
+          } else if (filterState.date.start) {
+            if (new Date(diary.date) >= filterState.date.start) {
+              return true;
+            }
+          } else if (filterState.date.end) {
+            if (new Date(diary.date) <= filterState.date.end) {
+              return true;
+            }
+          } else {
+            return true;
+          }
+          return false;
+        })
+        .filter((diary) => {
+          if (
+            !filterState.emotion.positive &&
+            !filterState.emotion.neutral &&
+            !filterState.emotion.negative
+          ) {
+            return true;
+          }
+          if (filterState.emotion.positive) {
+            if (diary.emotion.sentiment === "positive") {
+              return true;
+            }
+          }
+          if (filterState.emotion.neutral) {
+            if (diary.emotion.sentiment === "neutral") {
+              return true;
+            }
+          }
+          if (filterState.emotion.negative) {
+            if (diary.emotion.sentiment === "negative") {
+              return true;
+            }
+          }
+          return false;
+        })
+        .filter((diary) => {
+          if (filterState.shape.length > 0) {
+            if (filterState.shape.includes(diary.shapeUuid)) {
+              return true;
+            }
+            return false;
+          }
+          return true;
+        })
+        .filter((diary) => {
+          if (filterState.tag.length > 0) {
+            if (filterState.tag.every((tag) => diary.tags.includes(tag))) {
+              return true;
+            }
+            return false;
+          }
+          return true;
+        });
+      setFilteredDiaryList([...filteredList]);
+    }
+  }, [
+    filterState.date,
+    filterState.emotion,
+    filterState.shape,
+    filterState.tag,
+  ]);
+
   return (
     <DiaryListModalWrapper>
       <DiaryListModalItem justifyContent='center'>
@@ -223,7 +301,7 @@ function DiaryListModal() {
             e.target.focus();
           }}
         >
-          {diaryState.diaryList?.map((diary) => (
+          {filteredDiaryList.map((diary) => (
             <DiaryTitleListItem
               key={diary.uuid}
               onClick={() => {