From 3acf9cba12b9c5a601e21953cf04bc5feeec2f18 Mon Sep 17 00:00:00 2001 From: gs0428 Date: Thu, 15 Feb 2024 01:37:27 +0900 Subject: [PATCH] =?UTF-8?q?feature-065:=20=ED=95=98=EC=9C=84=20=EC=B9=B4?= =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20=ED=83=9C=EA=B7=B8=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=B9=84=EB=94=94?= =?UTF-8?q?=EC=98=A4=20=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useMoveCategory.ts | 1 - src/pages/CategoryPage.tsx | 67 ++++++++++++++---------------- src/styles/category/index.style.ts | 1 + src/utils/handleVideo.ts | 36 ++++++++++++++++ 4 files changed, 69 insertions(+), 36 deletions(-) create mode 100644 src/utils/handleVideo.ts diff --git a/src/hooks/useMoveCategory.ts b/src/hooks/useMoveCategory.ts index 3be900b..e1d61f2 100644 --- 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 index 221a35f..d115d1f 100644 --- 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 && ( - {sortedVideos.map((video) => ( - - ))} + {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 ( + + ); + })} )} diff --git a/src/styles/category/index.style.ts b/src/styles/category/index.style.ts index faef665..399d20f 100644 --- 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 new file mode 100644 index 0000000..ab90820 --- /dev/null +++ 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 + >, + setName: React.Dispatch>, + setVideos: React.Dispatch>, +) => { + 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;