feature-065: 카테고리 페이지 드롭다운 구현

teamViNO · Feb 13, 2024 · c79ff43 · c79ff43
1 parent 43a6cd7
commit c79ff43
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 29 deletions.
diff --git a/src/pages/CategoryPage.tsx b/src/pages/CategoryPage.tsx
@@ -4,7 +4,6 @@ import { useParams } from 'react-router-dom';
 import ChangeBottomSvg from '@/assets/icons/change-bottom.svg?react';
 import ChangeTopSvg from '@/assets/icons/change-top.svg?react';
 import GarbageSvg from '@/assets/icons/garbage.svg?react';
-import FolderSvg from '@/assets/icons/open-file.svg?react';
 import CloseSvg from '@/assets/icons/close.svg?react';
 import * as CategoryPageStyles from '@/styles/category/index.style';
 import Card from '@/components/category/Card';
@@ -16,6 +15,7 @@ import { deleteVideos, getRecentVideos, getVideoById } 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';
 
 const CategoryPage = () => {
   const params = useParams();
@@ -26,6 +26,14 @@ const CategoryPage = () => {
   const [checkedVideos, setCheckedVideos] = useState<number[]>([]);
   const categories = useRecoilValue(categoryState);
 
+  const [selectedCategoryId, setSelectedCategoryId] = useState(
+    categories.length ? categories[0].categoryId : -1,
+  );
+
+  const handleSelectCategory = (categoryId: number) => {
+    setSelectedCategoryId(categoryId);
+  };
+
   const toggleRecentRegisterMode = () =>
     setRecentRegisterMode(!recentRegisterMode);
 
@@ -73,16 +81,17 @@ const CategoryPage = () => {
     }
   };
 
-  const dirMoveHanlder = () => {
-    console.log(checkedVideos);
+  const onFileClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    // 비디오 이동 API 호출 후 모든 비디오 받아오는 API 재호출로 최신화하기
   };
 
   return (
     <CategoryPageStyles.Container>
       <CategoryTitle name={name} totalVideos={sortedVideos.length} />
       <CategoryPageStyles.MenuWrap>
         {checkedVideos.length > 0 ? (
-          <>
+          <CategoryPageStyles.SelectModeWrap>
             <div>
               <CategoryPageStyles.AllSelectBtn onClick={allCheckBtnHandler}>
                 {checkedVideos.length === sortedVideos.length
@@ -94,14 +103,13 @@ const CategoryPage = () => {
               </CategoryPageStyles.SelectedCount>
             </div>
             <CategoryPageStyles.CardManagement>
-              <CategoryPageStyles.SelectManagement>
-                {menus.map((menu) => (
-                  <option key={menu.name}>{menu.name}</option>
-                ))}
-              </CategoryPageStyles.SelectManagement>
-              <CategoryPageStyles.ManagementBoxGray onClick={dirMoveHanlder}>
-                <FolderSvg width={28} height={28} />
-              </CategoryPageStyles.ManagementBoxGray>
+              <CategoryPageStyles.DropdownWrap>
+                <CategorySelectBox
+                  selectedCategoryId={selectedCategoryId}
+                  onSelect={handleSelectCategory}
+                  onFileClick={onFileClick}
+                />
+              </CategoryPageStyles.DropdownWrap>
               <CategoryPageStyles.ManagementBoxGray
                 onClick={handleDeleteVideos}
               >
@@ -117,7 +125,7 @@ const CategoryPage = () => {
                 />
               </CategoryPageStyles.ManagementBox>
             </CategoryPageStyles.CardManagement>
-          </>
+          </CategoryPageStyles.SelectModeWrap>
         ) : (
           <>
             <div>

diff --git a/src/styles/category/index.style.ts b/src/styles/category/index.style.ts
@@ -2,6 +2,17 @@ import styled from 'styled-components';
 import theme from '../theme';
 import { Link } from 'react-router-dom';
 
+const CommonIconBackground = styled.div`
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 export const Container = styled.div`
   padding: 60px 60px 0px 120px;
   width: 100%;
@@ -40,6 +51,13 @@ export const Mode = styled.span`
   color: ${theme.color.gray400};
 `;
 
+export const SelectModeWrap = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+`;
+
 export const CardManagement = styled.div`
   display: flex;
   flex-direction: row;
@@ -55,29 +73,16 @@ export const SelectManagement = styled.select`
   color: ${theme.color.gray400};
 `;
 
-export const ManagementBoxGray = styled.div`
-  width: 36px;
-  height: 34px;
-  border-radius: 8px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
+export const ManagementBoxGray = styled(CommonIconBackground)`
   background: ${theme.color.gray100};
 `;
 
-export const ManagementBox = styled.div`
-  width: 36px;
-  height: 34px;
-  border-radius: 8px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
+export const ManagementBox = styled(CommonIconBackground)`
   background: ${theme.color.white};
 `;
 
 export const AllSelectBtn = styled.button`
+  cursor: pointer;
   width: 90px;
   height: 28px;
   background: ${theme.color.gray500};
@@ -94,3 +99,31 @@ export const SelectedCount = styled.span`
   padding: 0px 10px;
   color: ${theme.color.gray400};
 `;
+
+export const DropdownWrap = styled.div`
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  z-index: 10;
+  & div.select-box {
+    padding: 8px 16px;
+    width: 202px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 40px;
+    border-radius: 8px;
+    border: solid 1px ${theme.color.gray200};
+    color: ${theme.color.gray400};
+    ${theme.typography.Body3};
+    cursor: pointer;
+  }
+  & span.icon-button {
+    padding: 5px 6px;
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    cursor: pointer;
+    background-color: ${theme.color.gray100};
+  }
+`;