Merge pull request #73 from teamViNO/feature-065

feature-065: 카테고리 페이지 수정
teamViNO · Feb 14, 2024 · 03aa543 · 03aa543
2 parents 277f8ce + 805d83d
commit 03aa543
Show file tree

Hide file tree

Showing 16 changed files with 364 additions and 150 deletions.
diff --git a/src/apis/category.ts b/src/apis/category.ts
@@ -8,6 +8,12 @@ export const getCategories = async () => {
   return response.data;
 };
 
+// 카테고리 별 태그 가져오는 API
+export const getCategoryTags = async (categoryId: string) => {
+  const response = await axiosInstance.get(`/category/${categoryId}/`);
+  return response.data;
+};
+
 // 카테고리 이동1 API
 export const putSubToOtherTop = async (
   categoryId: number,

diff --git a/src/apis/videos.ts b/src/apis/videos.ts
@@ -29,9 +29,9 @@ export const getRecentVideos = async (): Promise<
 };
 
 export const getVideoById = async (
-  videoId: number,
+  videoId: string,
 ): Promise<APIResponse<Record<'videos', IVideoProps[]>>> => {
-  const response = await axiosInstance.get(`/videos/${videoId}`);
+  const response = await axiosInstance.get(`/videos/${videoId}/get`);
   return response.data;
 };
 

diff --git a/src/components/Home/RecentVideos.tsx b/src/components/Home/RecentVideos.tsx
@@ -19,31 +19,29 @@ const RecentVideos = ({ videos }: IRecentVideosProp) => {
   return (
     <RecentVideosContainer>
       <div className="container">
-        <div className='title-container'>
-            <VideosTitle>최근 읽은 영상</VideosTitle>
-            {videos.length >= 4 && (
-                <Link to='/videos/recent'>
-                    <div className='icon-wrapper'>
-                        <MoveIcon width={28} height={28}/>
-                    </div>
-                </Link>
-            )}
+        <div className="title-container">
+          <VideosTitle>최근 읽은 영상</VideosTitle>
+          {videos.length >= 4 && (
+            <Link to="/videos/recent">
+              <div className="icon-wrapper">
+                <MoveIcon width={28} height={28} />
+              </div>
+            </Link>
+          )}
         </div>
-        
+
         {videos.length === 0 && (
-          <>
+          <div className="empty-container">
             <div className="empty-video">
               <img src={CardImage} alt="비어있는 비디오 이미지" />
             </div>
-            <div className='empty-text'>
-                <VideosSubtitle>
-                처음 방문하셨나요? <br /> 아직 정리해본 영상이 없어요!
-                </VideosSubtitle>
-                <VideoButton>
-                <h2 className="button-text">영상 정리해보기</h2>
-                </VideoButton>
-            </div>
-          </>
+            <VideosSubtitle>
+              처음 방문하셨나요? <br /> 아직 정리해본 영상이 없어요!
+            </VideosSubtitle>
+            <VideoButton>
+              <h2 className="button-text">영상 정리해보기</h2>
+            </VideoButton>
+          </div>
         )}
         {videos.length > 0 && (
           <CardContainer>

diff --git a/src/components/category/Card.tsx b/src/components/category/Card.tsx
@@ -7,6 +7,7 @@ import { CategorySelectBox } from '@/components/SummaryPage/SummaryDetailBox/Cat
 import { categoryState } from '@/stores/category';
 
 import * as CardStyles from '@/styles/category/Card.style';
+import Chip from '../common/chip/Chip';
 
 interface ICardProps {
   mode: 'default' | 'category' | 'recommend';
@@ -65,7 +66,7 @@ const Card: React.FC<ICardProps> = ({
         <CardStyles.Summary>{video.description}</CardStyles.Summary>
         <CardStyles.ChipWrap>
           {video.tag.map((tag) => (
-            <CardStyles.Chip key={tag.name}>{`# ${tag.name}`}</CardStyles.Chip>
+            <Chip key={tag.name} name={tag.name} />
           ))}
         </CardStyles.ChipWrap>
       </CardStyles.Content>

diff --git a/src/components/category/DefaultMenu.tsx b/src/components/category/DefaultMenu.tsx
@@ -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) => (
+          <div key={menu.name}>
+            {'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>
+        ))}
+      </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;
diff --git a/src/components/category/VideoSelectMenu.tsx b/src/components/category/VideoSelectMenu.tsx
@@ -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;
diff --git a/src/components/common/chip/Chip.style.ts b/src/components/common/chip/Chip.style.ts
@@ -0,0 +1,23 @@
+import theme from '@/styles/theme';
+import styled from 'styled-components';
+
+export const ChipContainer = styled.div`
+  cursor: pointer;
+  margin-right: 18px;
+  margin-bottom: 18px;
+  padding: 3px 9.5px;
+  background-color: ${theme.color.gray100};
+  border-radius: 8px;
+  color: ${theme.color.gray400};
+  ${theme.typography.Caption1};
+
+  &.light {
+    border: 1px solid ${theme.color.gray200};
+    background-color: ${theme.color.white};
+  }
+
+  &.selected {
+    border-color: ${theme.color.gray300};
+    background-color: ${theme.color.gray100};
+  }
+`;
diff --git a/src/components/common/chip/Chip.tsx b/src/components/common/chip/Chip.tsx
@@ -0,0 +1,19 @@
+import { ChipContainer } from './Chip.style';
+
+interface IChipProps {
+  name: string;
+  light?: boolean;
+  selected?: boolean;
+  onSelectTag?: (name: string) => void;
+}
+
+const Chip = ({ name, light, selected, onSelectTag }: IChipProps) => {
+  return (
+    <ChipContainer
+      className={`${light && 'light'} ${selected && 'selected'}`}
+      onClick={() => onSelectTag && onSelectTag(name)}
+    >{`# ${name}`}</ChipContainer>
+  );
+};
+
+export default Chip;
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}`);