Merge pull request #60 from teamViNO/feature-062

feature-062: 카테고리 페이지 > 최근 읽은 영상 API 연동

src/apis/videos.ts

@@ -3,6 +3,7 @@ import { IVideo, VideoVersionType } from '@/models/video';
 
 import axios from './config/instance';
 import axiosInstance from './config/instance';
+import { IVideoProps } from 'types/videos';
 
 const PREFIX = '/videos';
 
@@ -19,3 +20,17 @@ export const deleteVideos = async (videos: number[]) => {
   });
   return response.data;
 };
+
+export const getRecentVideos = async (): Promise<
+  APIResponse<Record<'videos', IVideoProps[]>>
+> => {
+  const response = await axiosInstance.get('/videos/recent');
+  return response.data;
+};
+
+export const getVideoById = async (
+  videoId: number,
+): Promise<APIResponse<Record<'videos', IVideoProps[]>>> => {
+  const response = await axiosInstance.get(`/videos/${videoId}`);
+  return response.data;
+};

src/components/Home/InsightVideos.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { InsightVideosContainer } from '@/styles/HomepageStyle';
 import Card from '../category/Card';
-import { IVideoProps } from '../category/Card';
+import { IVideoProps } from 'types/videos';
 
 interface InsightVideosProps {
   username: string;

src/components/category/Card.tsx

@@ -1,18 +1,7 @@
 import React, { useEffect } from 'react';
 import * as CardStyles from '@/styles/category/Card.style';
 import VideoTag from '../common/videoTag';
-
-export interface IVideoProps {
-  video_id: number;
-  category_id: number;
-  title: string;
-  description: string;
-  image: string;
-  link: string;
-  created_at: string;
-  youtube_created_at: string;
-  tag: [{ name: string }];
-}
+import { IVideoProps } from 'types/videos';
 
 interface ICardProps {
   videos: IVideoProps[];

src/components/layout/sideBar/UserMode.tsx

@@ -47,6 +47,8 @@ const UserMode = () => {
   };
 
   const putCategoryFolder = async () => {
+    if (grabedCategory.current?.categoryId === dropedCategory.current) return;
+
     let response;
     if (grabedCategory.current?.topCategoryId === -1) {
       response = await subToTop(grabedCategory);

src/pages/CategoryPage.tsx

@@ -7,13 +7,14 @@ 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, { IVideoProps } from '@/components/category/Card';
-import axiosInstance from '@/apis/config/instance';
+import Card from '@/components/category/Card';
 import { useRecoilValue } from 'recoil';
 import { categoryState } from '@/stores/category';
 import { ISubFolderProps } from 'types/category';
 import EmptyCard from '@/components/category/EmptyCard';
-import { deleteVideos } from '@/apis/videos';
+import { deleteVideos, getRecentVideos, getVideoById } from '@/apis/videos';
+import { IVideoProps } from 'types/videos';
+import { sortVideos } from '@/utils/sortVideos';
 
 const CategoryPage = () => {
   const params = useParams();
@@ -27,23 +28,25 @@ const CategoryPage = () => {
   const toggleRecentRegisterMode = () =>
     setRecentRegisterMode(!recentRegisterMode);
 
+  const sortedVideos = sortVideos(videos, recentRegisterMode);
+
   useEffect(() => {
     if (!params.top_folder) {
-      // 최근 동영상 가져오는 로직
-      setName('최근 읽은 영상');
+      getRecentVideos()
+        .then((res) => {
+          setVideos(res.result.videos);
+          setName('최근 읽은 영상');
+        })
+        .catch((err) => console.log(err));
     } else {
-      (async () =>
-        await axiosInstance
-          .get(`/videos/${params.top_folder}`)
-          .then((res) => {
-            const index = categories.findIndex(
-              (category) => category.categoryId === Number(params.top_folder),
-            );
-            setVideos(res.data.result.videos);
-            setName(categories[index].name);
-            setMenus(categories[index].subFolders);
-          })
-          .catch((err) => console.log(err)))();
+      getVideoById(Number(params.top_folder)).then((res) => {
+        const index = categories.findIndex(
+          (category) => category.categoryId === Number(params.top_folder),
+        );
+        setVideos(res.result.videos);
+        setName(categories[index].name);
+        setMenus(categories[index].subFolders);
+      });
     }
   }, [categories, params.top_folder]);
 
@@ -72,17 +75,16 @@ const CategoryPage = () => {
   const dirMoveHanlder = () => {
     console.log(checkedVideos);
   };
-  console.log(videos);
 
   return (
     <CategoryPageStyles.Container>
-      <CategoryTitle name={name} totalVideos={videos.length} />
+      <CategoryTitle name={name} totalVideos={sortedVideos.length} />
       <CategoryPageStyles.MenuWrap>
         {checkedVideos.length > 0 ? (
           <>
             <div>
               <CategoryPageStyles.AllSelectBtn onClick={allCheckBtnHandler}>
-                {checkedVideos.length === videos.length
+                {checkedVideos.length === sortedVideos.length
                   ? '모두 삭제'
                   : '모두 선택'}
               </CategoryPageStyles.AllSelectBtn>
@@ -145,10 +147,12 @@ const CategoryPage = () => {
         )}
       </CategoryPageStyles.MenuWrap>
 
-      {(videos.length === 0 || videos === undefined) && <EmptyCard />}
-      {videos.length > 0 && (
+      {(sortedVideos.length === 0 || sortedVideos === undefined) && (
+        <EmptyCard />
+      )}
+      {sortedVideos.length > 0 && (
         <Card
-          videos={videos}
+          videos={sortedVideos}
           checkedVideos={checkedVideos}
           setCheckedVideos={setCheckedVideos}
         />

src/utils/sortVideos.ts

@@ -0,0 +1,21 @@
+import { IVideoProps } from 'types/videos';
+
+export const sortVideos = (
+  videos: IVideoProps[],
+  isRecentRegisterMode: boolean,
+) => {
+  const sortedVideos = videos.sort((prevVideo, nextVideo) => {
+    if (
+      prevVideo[isRecentRegisterMode ? 'created_at' : 'youtube_created_at'] >
+      nextVideo[isRecentRegisterMode ? 'created_at' : 'youtube_created_at']
+    )
+      return 1;
+    if (
+      prevVideo[isRecentRegisterMode ? 'created_at' : 'youtube_created_at'] ===
+      nextVideo[isRecentRegisterMode ? 'created_at' : 'youtube_created_at']
+    )
+      return 0;
+    return -1;
+  });
+  return sortedVideos;
+};

types/videos.ts

@@ -0,0 +1,11 @@
+export interface IVideoProps {
+  video_id: number;
+  category_id: number;
+  title: string;
+  description: string;
+  image: string;
+  link: string;
+  created_at: string;
+  youtube_created_at: string;
+  tag: [{ name: string }];
+}