feature-065: 하위 카테고리 태그 선택에 따라 비디오 보이도록 구현

teamViNO · Feb 14, 2024 · 3acf9cb · 3acf9cb
1 parent 572926c
commit 3acf9cb
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 36 deletions.
diff --git a/src/hooks/useMoveCategory.ts b/src/hooks/useMoveCategory.ts
@@ -25,7 +25,6 @@ const useMoveCategory = () => {
       grabedCategory.current!.categoryId,
       topId,
     );
-    console.log(res);
     if (res.isSuccess) {
       await updateCategories();
       navigate(`/category/${grabedCategory.current?.topCategoryId}`);

diff --git a/src/pages/CategoryPage.tsx b/src/pages/CategoryPage.tsx
@@ -11,13 +11,13 @@ import { useRecoilValue } from 'recoil';
 import { categoryState } from '@/stores/category';
 import { ISubFolderProps, ITagProps } from 'types/category';
 import EmptyCard from '@/components/category/EmptyCard';
-import { deleteVideos, getRecentVideos, getVideoById } from '@/apis/videos';
+import { deleteVideos, getRecentVideos } from '@/apis/videos';
 import { IVideoProps } from 'types/videos';
 import { sortVideos } from '@/utils/sortVideos';
 import { CardContainer } from '@/styles/category/Card.style';
 import { CategorySelectBox } from '@/components/SummaryPage/SummaryDetailBox/CategorySelectBox';
 import Chip from '@/components/common/chip/Chip';
-import { getCategoryTags } from '@/apis/category';
+import handleVideo from '@/utils/handleVideo';
 
 const CategoryPage = () => {
   const params = useParams();
@@ -59,30 +59,15 @@ const CategoryPage = () => {
           setMenus([]);
         })
         .catch((err) => console.log(err));
-    } else if (!params.sub_folder) {
-      getVideoById(params.top_folder).then((res) => {
-        const index = categories.findIndex(
-          (category) => category.categoryId === Number(params.top_folder),
-        );
-        setName(categories[index].name);
-        setMenus(categories[index].subFolders);
-        setVideos(res.isSuccess ? res.result.videos : []);
-      });
     } else {
-      getVideoById(params.sub_folder).then((res) => {
-        const index = categories.findIndex(
-          (category) => category.categoryId === Number(params.top_folder),
-        );
-        const subIndex = categories[index].subFolders.findIndex(
-          (subFolder) => subFolder.categoryId === Number(params.sub_folder),
-        );
-        getCategoryTags(params.sub_folder!).then((res) =>
-          setMenus(res.result.tags),
-        );
-        setName(categories[index].subFolders[subIndex].name);
-
-        setVideos(res.isSuccess ? res.result.videos : []);
-      });
+      handleVideo(
+        categories,
+        params.top_folder,
+        params.sub_folder!,
+        setMenus,
+        setName,
+        setVideos,
+      );
     }
     setCheckedVideos([]);
   }, [categories, params.sub_folder, params.top_folder]);
@@ -104,7 +89,6 @@ const CategoryPage = () => {
     if (checkedVideos.length === videos.length) {
       handleDeleteVideos();
     } else {
-      console.log('모두 선택');
       setCheckedVideos(videos.map((video) => video.video_id));
     }
   };
@@ -198,15 +182,28 @@ const CategoryPage = () => {
       )}
       {sortedVideos.length > 0 && (
         <CardContainer>
-          {sortedVideos.map((video) => (
-            <Card
-              mode="category"
-              video={video}
-              checkedVideos={checkedVideos}
-              setCheckedVideos={setCheckedVideos}
-              key={video.category_id}
-            />
-          ))}
+          {sortedVideos.map((video) => {
+            const matchedTagCount = video.tag.reduce((acc, cur) => {
+              if (selectedTags.includes(cur.name)) return (acc += 1);
+              return acc;
+            }, 0);
+            if (
+              params.sub_folder &&
+              selectedTags.length &&
+              matchedTagCount !== selectedTags.length
+            )
+              return;
+
+            return (
+              <Card
+                mode="category"
+                video={video}
+                checkedVideos={checkedVideos}
+                setCheckedVideos={setCheckedVideos}
+                key={video.category_id}
+              />
+            );
+          })}
         </CardContainer>
       )}
     </CategoryPageStyles.Container>

diff --git a/src/styles/category/index.style.ts b/src/styles/category/index.style.ts
@@ -20,6 +20,7 @@ export const Container = styled.div`
 
 export const MenuWrap = styled.div`
   display: flex;
+  min-width: 'fit-content';
   justify-content: space-between;
   align-items: center;
   margin-bottom: 40px;

diff --git a/src/utils/handleVideo.ts b/src/utils/handleVideo.ts
@@ -0,0 +1,36 @@
+import { getCategoryTags } from '@/apis/category';
+import { getVideoById } from '@/apis/videos';
+import { IFolderProps, ISubFolderProps, ITagProps } from 'types/category';
+import { IVideoProps } from 'types/videos';
+
+const handleVideo = async (
+  categories: IFolderProps[],
+  topCategoryId: string,
+  subCategoryId: string,
+  setMenus: React.Dispatch<
+    React.SetStateAction<ISubFolderProps[] | ITagProps[]>
+  >,
+  setName: React.Dispatch<React.SetStateAction<string>>,
+  setVideos: React.Dispatch<React.SetStateAction<IVideoProps[]>>,
+) => {
+  await getVideoById(topCategoryId).then((res) => {
+    const topCategory = categories.find(
+      (category) => category.categoryId === Number(topCategoryId),
+    );
+    if (subCategoryId) {
+      const subName = topCategory?.subFolders.find(
+        (subFolder) => subFolder.categoryId === Number(subCategoryId),
+      );
+      setName(subName!.name);
+      getCategoryTags(subCategoryId!).then((res) => {
+        if (res.isSuccess) setMenus(res.result.tags);
+        else setMenus([]);
+      });
+    } else {
+      setName(topCategory!.name);
+      setMenus(topCategory!.subFolders);
+    }
+    setVideos(res.isSuccess ? res.result.videos : []);
+  });
+};
+export default handleVideo;