-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature-065: 카테고리 페이지 메뉴 부분 컴포넌트로 분리
- Loading branch information
Showing
3 changed files
with
158 additions
and
97 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import * as CategoryPageStyles from '@/styles/category/index.style'; | ||
| import { ISubFolderProps, ITagProps } from 'types/category'; | ||
| import Chip from '../common/chip/Chip'; | ||
| import ChangeBottomSvg from '@/assets/icons/change-bottom.svg?react'; | ||
| import ChangeTopSvg from '@/assets/icons/change-top.svg?react'; | ||
|
|
||
| interface IDefaultMenuProps { | ||
| menus: ISubFolderProps[] | ITagProps[]; | ||
| recentRegisterMode: boolean; | ||
| selectedTags: string[]; | ||
| setSelectedTags: React.Dispatch<React.SetStateAction<string[]>>; | ||
| toggleRecentRegisterMode: () => void; | ||
| } | ||
|
|
||
| const DefaultMenu = ({ | ||
| menus, | ||
| recentRegisterMode, | ||
| selectedTags, | ||
| setSelectedTags, | ||
| toggleRecentRegisterMode, | ||
| }: IDefaultMenuProps) => { | ||
| const onSelectTag = (name: string) => { | ||
| if (selectedTags.includes(name)) { | ||
| setSelectedTags(selectedTags.filter((tag) => tag !== name)); | ||
| } else { | ||
| setSelectedTags([...selectedTags, name]); | ||
| } | ||
| }; | ||
| return ( | ||
| <> | ||
| <div style={{ display: 'flex' }}> | ||
| {menus.map((menu: ISubFolderProps | ITagProps) => ( | ||
| <> | ||
| {'tag_id' in menu && ( | ||
| <Chip | ||
| key={menu.tag_id} | ||
| name={menu.name} | ||
| light | ||
| selected={selectedTags.includes(menu.name)} | ||
| onSelectTag={onSelectTag} | ||
| /> | ||
| )} | ||
| {!('tag_id' in menu) && ( | ||
| <CategoryPageStyles.Menu | ||
| to={`/category/${menu.topCategoryId}/${menu.categoryId}`} | ||
| key={`${menu.name}-${menu.categoryId}`} | ||
| > | ||
| {menu.name} | ||
| </CategoryPageStyles.Menu> | ||
| )} | ||
| </> | ||
| ))} | ||
| </div> | ||
| <CategoryPageStyles.ModeWrap onClick={toggleRecentRegisterMode}> | ||
| <CategoryPageStyles.Mode> | ||
| {recentRegisterMode ? '최근등록순' : '최근영상순'} | ||
| </CategoryPageStyles.Mode> | ||
| {recentRegisterMode ? ( | ||
| <ChangeBottomSvg width={24} height={24} /> | ||
| ) : ( | ||
| <ChangeTopSvg width={24} height={24} /> | ||
| )} | ||
| </CategoryPageStyles.ModeWrap> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default DefaultMenu; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import * as CategoryPageStyles from '@/styles/category/index.style'; | ||
| import GarbageSvg from '@/assets/icons/garbage.svg?react'; | ||
| import CloseSvg from '@/assets/icons/close.svg?react'; | ||
| import { useState } from 'react'; | ||
| import { CategorySelectBox } from '../SummaryPage/SummaryDetailBox/CategorySelectBox'; | ||
| import { IFolderProps } from 'types/category'; | ||
|
|
||
| interface IVideoSelectMenuProps { | ||
| categories: IFolderProps[]; | ||
| totalVideoCount: number; | ||
| checkedVideos: number[]; | ||
| setCheckedVideos: React.Dispatch<React.SetStateAction<number[]>>; | ||
| handleDeleteVideos: () => void; | ||
| allCheckBtnHandler: () => void; | ||
| } | ||
|
|
||
| const VideoSelectMenu = ({ | ||
| categories, | ||
| totalVideoCount, | ||
| checkedVideos, | ||
| setCheckedVideos, | ||
| handleDeleteVideos, | ||
| allCheckBtnHandler, | ||
| }: IVideoSelectMenuProps) => { | ||
| const [selectedCategoryId, setSelectedCategoryId] = useState( | ||
| categories.length ? categories[0].categoryId : -1, | ||
| ); | ||
|
|
||
| const handleSelectCategory = (categoryId: number) => { | ||
| setSelectedCategoryId(categoryId); | ||
| }; | ||
|
|
||
| const onFileClick = (e: React.MouseEvent) => { | ||
| e.stopPropagation(); | ||
| // 비디오 이동 API 호출 후 모든 비디오 받아오는 API 재호출로 최신화하기 | ||
| }; | ||
| return ( | ||
| <CategoryPageStyles.SelectModeWrap> | ||
| <div> | ||
| <CategoryPageStyles.AllSelectBtn onClick={allCheckBtnHandler}> | ||
| {checkedVideos.length === totalVideoCount ? '모두 삭제' : '모두 선택'} | ||
| </CategoryPageStyles.AllSelectBtn> | ||
| <CategoryPageStyles.SelectedCount> | ||
| {checkedVideos.length}개 선택 | ||
| </CategoryPageStyles.SelectedCount> | ||
| </div> | ||
| <CategoryPageStyles.CardManagement> | ||
| <CategoryPageStyles.DropdownWrap> | ||
| <CategorySelectBox | ||
| selectedCategoryId={selectedCategoryId} | ||
| onSelect={handleSelectCategory} | ||
| onFileClick={onFileClick} | ||
| /> | ||
| </CategoryPageStyles.DropdownWrap> | ||
| <CategoryPageStyles.ManagementBoxGray onClick={handleDeleteVideos}> | ||
| <GarbageSvg width={28} height={28} /> | ||
| </CategoryPageStyles.ManagementBoxGray> | ||
| <CategoryPageStyles.ManagementBox> | ||
| <CloseSvg | ||
| width={28} | ||
| height={28} | ||
| onClick={() => { | ||
| setCheckedVideos([]); | ||
| }} | ||
| /> | ||
| </CategoryPageStyles.ManagementBox> | ||
| </CategoryPageStyles.CardManagement> | ||
| </CategoryPageStyles.SelectModeWrap> | ||
| ); | ||
| }; | ||
|
|
||
| export default VideoSelectMenu; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters