Merge pull request #218 from boostcampwm2023/feat/214-icon-preview

[Feat] 별 미리보기 색상 구현 + 리스트 보기 타이틀 꾸미기
boostcampwm2023 · Dec 6, 2023 · a5c431b · a5c431b
2 parents 24da4cd + e339244
commit a5c431b
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 72 deletions.
diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js
@@ -51,68 +51,42 @@ function DiaryListModal() {
     if (diaryState.diaryList) {
       const filteredList = diaryState.diaryList
         .filter((diary) => {
-          if (filterState.date.start && filterState.date.end) {
-            if (
+          return (
+            (!filterState.date.start && !filterState.date.end) ||
+            (filterState.date.start &&
+              filterState.date.end &&
               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;
+              new Date(diary.date) <= filterState.date.end) ||
+            (filterState.date.start &&
+              new Date(diary.date) >= filterState.date.start) ||
+            (filterState.date.end &&
+              new Date(diary.date) <= filterState.date.end)
+          );
         })
         .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;
+          return (
+            (!filterState.emotion.positive &&
+              !filterState.emotion.neutral &&
+              !filterState.emotion.negative) ||
+            (filterState.emotion.positive &&
+              diary.emotion.sentiment === "positive") ||
+            (filterState.emotion.neutral &&
+              diary.emotion.sentiment === "neutral") ||
+            (filterState.emotion.negative &&
+              diary.emotion.sentiment === "negative")
+          );
         })
         .filter((diary) => {
-          if (filterState.shape.length > 0) {
-            if (filterState.shape.includes(diary.shapeUuid)) {
-              return true;
-            }
-            return false;
-          }
-          return true;
+          return (
+            filterState.shape.length === 0 ||
+            filterState.shape.includes(diary.shapeUuid)
+          );
         })
         .filter((diary) => {
-          if (filterState.tag.length > 0) {
-            if (filterState.tag.every((tag) => diary.tags.includes(tag))) {
-              return true;
-            }
-            return false;
-          }
-          return true;
+          return (
+            filterState.tag.length === 0 ||
+            filterState.tag.every((tag) => diary.tags.includes(tag))
+          );
         });
       setFilteredDiaryList([...filteredList]);
     }
@@ -301,16 +275,51 @@ function DiaryListModal() {
             e.target.focus();
           }}
         >
-          {filteredDiaryList.map((diary) => (
-            <DiaryTitleListItem
-              key={diary.uuid}
-              onClick={() => {
-                setSelectedDiary(diary);
-              }}
-            >
-              {diary.title}
-            </DiaryTitleListItem>
-          ))}
+          {filteredDiaryList.map((diary) => {
+            const shapeColor = {
+              positive: "#618CF7",
+              neutral: "#A848F6",
+              negative: "#E5575B",
+            };
+
+            const shapeHTML = shapeState
+              .find((shape) => shape.uuid === diary.shapeUuid)
+              ?.data.replace(
+                /fill="#fff"/g,
+                `fill="${shapeColor[diary.emotion.sentiment]}"`,
+              );
+
+            return (
+              <DiaryTitleListItem
+                key={diary.uuid}
+                onClick={() => {
+                  setSelectedDiary(diary);
+                }}
+              >
+                <DiaryTitleListItemShape>
+                  <div
+                    id={diary.uuid}
+                    style={{
+                      width: "6rem",
+                      height: "6rem",
+                      marginRight: "1rem",
+                    }}
+                    dangerouslySetInnerHTML={{
+                      __html: shapeHTML,
+                    }}
+                  />
+                </DiaryTitleListItemShape>
+                <DiarytitleListContent>
+                  {diary.title}
+                  <DiaryTitleTagList>
+                    {diary.tags.map((tag) => (
+                      <DiaryTitleTagItem key={tag}>#{tag}</DiaryTitleTagItem>
+                    ))}
+                  </DiaryTitleTagList>
+                </DiarytitleListContent>
+              </DiaryTitleListItem>
+            );
+          })}
         </DiaryTitleListItemWrapper>
       </DiaryListModalItem>
       <DiaryListModalItem width='50%'>
@@ -589,12 +598,12 @@ const DiaryTitleListItemWrapper = styled.div`
 
 const DiaryTitleListItem = styled.div`
   width: 100%;
-  height: 4.5rem;
+  height: 7rem;
   border-top: 0.5px solid #ffffff;
 
-  display: block;
-  text-align: center;
-  line-height: 4.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   padding: 0 1rem;
   box-sizing: border-box;
@@ -612,6 +621,42 @@ const DiaryTitleListItem = styled.div`
   }
 `;
 
+const DiaryTitleListItemShape = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const DiarytitleListContent = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0.5rem;
+
+  font-size: 1.5rem;
+
+  overflow: hidden;
+`;
+
+const DiaryTitleTagList = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+
+const DiaryTitleTagItem = styled.div`
+  height: 1.5rem;
+
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const DiaryTitle = styled.div`
   width: 85%;
   height: 10rem;

diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -100,7 +100,18 @@ function DiaryReadModal(props) {
           (item) => item.uuid === loadedData.shapeUuid,
         );
         if (foundShapeData) {
-          setShapeData(foundShapeData.data);
+          // 긍정 - 00ccff, 부정 - d1180b, 중립 - ba55d3
+          const shapeColor = {
+            positive: "#618CF7",
+            neutral: "#A848F6",
+            negative: "#E5575B",
+          };
+          setShapeData(
+            foundShapeData.data.replace(
+              /fill="#fff"/g,
+              `fill="${shapeColor[loadedData.emotion.sentiment]}"`,
+            ),
+          );
         }
       },
     },
@@ -294,7 +305,7 @@ const DiaryModalEmotionBar = styled.div`
 `;
 
 const DiaryModalIcon = styled.div`
-  width: 20%;
+  width: 8rem;
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/FE/src/pages/MainPage.js b/FE/src/pages/MainPage.js
@@ -107,7 +107,7 @@ function MainPage() {
           setShapeState(() => {
             const shapeList = Object.keys(data).map((key) => ({
               uuid: data[key].uuid,
-              data: data[key].svg.replace(/<\?xml.*?\?>/, ""),
+              data: data[key].svg,
             }));
             return shapeList;
           });