Feat: Chat-318-태그-화면-최초에-태그-랜덤-선택 (#86)

* Fix: ListDiaryItem image 크기 고정 * Fix: 최신순 정렬로 초기화 * Feat: 태그화면 최초에 랜덤으로 태그 선택 * Fix: 일기 리스트 tag 최대 5개 보여주도록 수정 * Feat: 일기 리스트에서 선택된 태그가 먼저 보여지도록 함
Chat-Diary · Feb 19, 2024 · 99c2cf3 · 99c2cf3
1 parent c14a3d4
commit 99c2cf3
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 30 deletions.
diff --git a/src/components/Home/List/DiaryItem.module.scss b/src/components/Home/List/DiaryItem.module.scss
@@ -6,11 +6,25 @@
   display: flex;
   text-decoration: none;
 
-  .DiaryImg {
-    width: 80px;
-    height: 80px;
-    background-color: $WH;
-    margin-right: 12px;
+  .imgWrapper {
+    position: relative;
+    z-index: -1;
+    .DiaryImg {
+      width: 80px;
+      height: 80px;
+      border-radius: 8px;
+      background-color: $WH;
+      margin-right: 12px;
+    }
+  }
+
+  .imgWrapper::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     border-radius: 8px;
   }
 
@@ -35,15 +49,23 @@
     margin: 6px 0px 14px 0px;
   }
 
-  .DiaryTags {
+  .TagsWrapper {
+    width: 236px;
     display: flex;
-    column-gap: 8px;
     color: $BK70;
-    @include body14;
-    flex-wrap: wrap;
+    .DiaryTags {
+      display: flex;
+      column-gap: 8px;
+      color: $BK70;
+      @include body14;
 
-    .DiaryTagItems {
-      flex-shrink: 0;
+      .DiaryTagItems {
+        flex-shrink: 0;
+      }
+    }
+    .Ellipsis {
+      margin-left: 2px;
+      padding-top: 3.5px;
     }
   }
 }
diff --git a/src/components/Home/List/DiaryItem.tsx b/src/components/Home/List/DiaryItem.tsx
@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom';
 import { Diary } from '../../../utils/diary';
 import styles from './DiaryItem.module.scss';
+import React from 'react';
 
 interface DiaryItemProps {
   diary: Diary;
@@ -11,30 +12,38 @@ const DiaryItem = ({ diary }: DiaryItemProps) => {
     'https://chatdiary-bucket.s3.ap-northeast-2.amazonaws.com/img_list_null.jpg';
 
   const modifiedTagList = diary.tagList.map((tag) => `#${tag.tagName}`);
+  const sliceList = modifiedTagList.slice(0, 5);
 
   return (
     <Link
       to={`/detail?diary_date=${diary.diaryDate}`}
       className={styles.DiaryItem}
     >
       {diary.photoUrls.length > 0 ? (
-        <img className={styles.DiaryImg} src={diary.photoUrls[0]} />
+        <div className={styles.imgWrapper}>
+          <img className={styles.DiaryImg} src={diary.photoUrls[0]} />
+        </div>
       ) : (
-        <img className={styles.DiaryImg} src={defaltImgUrl} />
+        <div className={styles.imgWrapper}>
+          <img className={styles.DiaryImg} src={defaltImgUrl} />
+        </div>
       )}
       <div>
         <div className={styles.DiaryTitleContainer}>
           <div className={styles.DiaryTitle}>{diary.title}</div>
         </div>
         <div className={styles.DiaryDate}>{diary.diaryDate}</div>
-        <div className={styles.DiaryTags}>
-          {modifiedTagList.map((tagText) => {
-            return (
-              <div key={1} className={styles.DiaryTagItems}>
-                {tagText}
-              </div>
-            );
-          })}
+        <div className={styles.TagsWrapper}>
+          <div className={styles.DiaryTags}>
+            {sliceList.map((tagText) => {
+              return (
+                <div key={1} className={styles.DiaryTagItems}>
+                  {tagText}
+                </div>
+              );
+            })}
+          </div>
+          <div className={styles.Ellipsis}>{'...'}</div>
         </div>
       </div>
     </Link>

diff --git a/src/components/Tag/AllTags/AllTags.tsx b/src/components/Tag/AllTags/AllTags.tsx
@@ -6,7 +6,7 @@ import { DiaryDetailType } from '../../../apis/diaryDetailApi';
 import { useQuery } from 'react-query';
 import { getTagPool } from '../../../apis/tagApi';
 
-interface TagType {
+export interface TagType {
   tagId: number;
   category: string;
   tagName: string;

diff --git a/src/pages/Tag/Tag.tsx b/src/pages/Tag/Tag.tsx
@@ -18,6 +18,9 @@ import { useQuery } from 'react-query';
 import { getDiaryListByTag } from '../../apis/tagApi';
 import useTagStore from '../../stores/tagStore';
 import usePageStore from '../../stores/pageStore';
+import { getTagPool } from '../../apis/tagApi';
+import { TagType } from '../../components/Tag/AllTags/AllTags';
+import { Diary } from '../../utils/diary';
 
 const Tag = () => {
   // 현재 페이지 경로 및 list 여부 저장
@@ -27,7 +30,8 @@ const Tag = () => {
 
   const { tags, diaryList, setTags, setDiaryList } = useTagStore();
   const [isList, setIsList] = useState<boolean>(prevTagType);
-  const [currentSort, setCurrentSort] = useState<number>(1);
+  const [currentSort, setCurrentSort] = useState<number>(2);
+  const [tagPool, setTagPool] = useState<TagType[]>([]);
 
   const toggleMode = () => {
     setIsList((prev) => !prev);
@@ -54,6 +58,35 @@ const Tag = () => {
     },
   });
 
+  const { data: tagPoolData } = useQuery({
+    queryKey: ['tag_pool'],
+    queryFn: () => getTagPool(),
+  });
+
+  const randomSelectedTag = (sampleTags: TagType[]) => {
+    const count = Math.floor(Math.random() * 3) + 1;
+    const selectedItems = [];
+    for (let i = 0; i < count; i++) {
+      const randomIndex = Math.floor(Math.random() * sampleTags.length);
+      selectedItems.push(...sampleTags.splice(randomIndex, 1));
+    }
+    return selectedItems;
+  };
+
+  useEffect(() => {
+    if (tagPoolData) {
+      setTagPool(tagPoolData);
+    }
+  }, [tagPoolData]);
+
+  useEffect(() => {
+    if (tags.length === 0) {
+      const randomTags: TagType[] = randomSelectedTag(tagPool);
+      const tagNameList: string[] = randomTags.map((tag) => tag.tagName);
+      setTags(tagNameList);
+    }
+  }, [tagPool]);
+
   useEffect(() => {
     setPage(location.pathname, false, isList);
   }, [isList]);
@@ -80,15 +113,24 @@ const Tag = () => {
     }
   }, [currentSort]);
 
-  useEffect(() => {
-    if (tags.length === 0) {
-      setTags(['화남']);
-    }
-  }, []);
-
   useEffect(() => {
     if (diaryListData) {
-      setDiaryList(diaryListData);
+      let sortedByLatest: Diary[] = [...diaryListData].sort((a, b) => {
+        const dateA = new Date(a.diaryDate);
+        const dateB = new Date(b.diaryDate);
+        return +dateB - +dateA;
+      });
+
+      tags.forEach((selectedTag) => {
+        sortedByLatest = sortedByLatest.map((diary) => ({
+          ...diary,
+          tagList: [
+            ...diary.tagList.filter((tag) => tag.tagName === selectedTag),
+            ...diary.tagList.filter((tag) => tag.tagName !== selectedTag),
+          ],
+        }));
+      });
+      setDiaryList(sortedByLatest);
     }
   }, [diaryListData]);