feature-060: 카테고리 이동 API 연동 리팩토링

teamViNO · Feb 13, 2024 · aae5f9a · aae5f9a
1 parent f7a9940
commit aae5f9a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 63 deletions.
diff --git a/src/components/category/Card.tsx b/src/components/category/Card.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import * as CardStyles from '@/styles/category/Card.style';
+import VideoTag from '../common/videoTag';
 
 export interface IVideoProps {
   video_id: number;
@@ -60,14 +61,14 @@ const Card: React.FC<ICardProps> = ({
               {video.description}
             </CardStyles.Summary>
             <CardStyles.ChipWrap key={`${video.title}-chip-wrap`}>
-              {/* {video.tag.map((tag) => (
+              {video.tag.map((tag) => (
                 <VideoTag
                   content={`# ${tag.name}`}
                   color={'gray400'}
                   typography="Caption1"
                   key={`${video.title}-${tag.name}`}
                 />
-              ))} */}
+              ))}
             </CardStyles.ChipWrap>
           </CardStyles.Content>
         </CardStyles.Wrap>

diff --git a/src/components/layout/header/profile/ProfileDetail.tsx b/src/components/layout/header/profile/ProfileDetail.tsx
@@ -27,6 +27,7 @@ const ProfileDetail = ({ onClose }: Props) => {
 
   const handleClickLogoutButton = () => {
     setUserToken(null);
+    navigate('/');
     onClose();
   };
 

diff --git a/src/components/layout/sideBar/UserMode.tsx b/src/components/layout/sideBar/UserMode.tsx
@@ -47,16 +47,21 @@ const UserMode = () => {
   };
 
   const putCategoryFolder = async () => {
+    let response;
     if (grabedCategory.current?.topCategoryId === -1) {
-      subToTop(topId, grabedCategory, dropedCategory);
+      response = await subToTop(grabedCategory);
     } else if (grabedCategory.current?.topCategoryId === null) {
-      topToOtherTop(grabedCategory, dropedCategory);
+      response = await topToOtherTop(grabedCategory, dropedCategory);
     } else {
-      subToOtherTop(topId, grabedCategory);
+      response = await subToOtherTop(topId, grabedCategory);
     }
     // 잡은 카테고리, 놓은 카테고리 초기화
-    grabedCategory.current = undefined;
-    dropedCategory.current = undefined;
+    if (response) {
+      grabedCategory.current = undefined;
+      dropedCategory.current = undefined;
+    } else {
+      alert('카테고리를 옮기는데 오류가 발생했습니다.');
+    }
   };
   return (
     <>

diff --git a/src/hooks/useMoveCategory.ts b/src/hooks/useMoveCategory.ts
@@ -3,23 +3,13 @@ import {
   putSubToTop,
   putTopToOtherTop,
 } from '@/apis/category';
-import { categoryState } from '@/stores/category';
-import handleCategory from '@/utils/handleCategory';
 import { useNavigate } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
 import { ISubFolderProps } from 'types/category';
 import useUpdateCategories from './useUpdateCategories';
 
 const useMoveCategory = () => {
-  const [categories, setCategories] = useRecoilState(categoryState);
   const navigate = useNavigate();
   const { updateCategories } = useUpdateCategories();
-  const {
-    deleteSubCategory,
-    deleteTopCategory,
-    insertCategory,
-    insertSubToTopCategory,
-  } = handleCategory();
 
   const subToOtherTop = async (
     topId: number,
@@ -31,57 +21,32 @@ const useMoveCategory = () => {
     }
     // 하위에 있는 폴더를 다른 상위 폴더로 이동하는 기능
     // 카테고리 이동1
-    const deleteResponse = deleteSubCategory(
-      categories,
-      topId,
-      grabedCategory.current?.categoryId,
-    );
-    const insertResponse = insertCategory(
-      deleteResponse,
-      grabedCategory.current?.topCategoryId,
-      grabedCategory.current!,
-    );
     const res = await putSubToOtherTop(
       grabedCategory.current!.categoryId,
       topId,
     );
+    console.log(res);
     if (res.isSuccess) {
-      updateCategories();
-      setCategories([...insertResponse]);
+      await updateCategories();
       navigate(`/category/${grabedCategory.current?.topCategoryId}`);
-    } else {
-      alert('카테고리를 옮기는데 오류가 발생했습니다.');
     }
+    return res.isSuccess;
   };
 
   const subToTop = async (
-    topId: number,
     grabedCategory: React.MutableRefObject<ISubFolderProps | undefined>,
-    dropedCategory: React.MutableRefObject<number | undefined>,
   ) => {
     if (grabedCategory.current?.name === '기타') {
       alert(`'기타' 폴더는 이동할 수 없습니다.`);
       return;
     }
     // 하위에 있는 폴더를 상위로 올리는 기능
     // 카테고리 이동2
-    const deleteResponse = deleteSubCategory(
-      categories,
-      topId,
-      grabedCategory.current?.categoryId,
-    );
-    const insertResponse = insertSubToTopCategory(
-      deleteResponse,
-      dropedCategory.current,
-      grabedCategory.current!,
-    );
     const res = await putSubToTop(grabedCategory.current!.categoryId);
     if (res.isSuccess) {
-      updateCategories();
-      setCategories([...insertResponse]);
-    } else {
-      alert('카테고리를 옮기는데 오류가 발생했습니다.');
+      await updateCategories();
     }
+    return res.isSuccess;
   };
 
   const topToOtherTop = async (
@@ -90,29 +55,15 @@ const useMoveCategory = () => {
   ) => {
     // 상위에 있는 폴더를 다른 상위 폴더로 넣는 기능
     // 카테고리 이동3
-    const deleteResponse = deleteTopCategory(
-      categories,
-      grabedCategory.current!.categoryId,
-    );
-    const insertResponse = insertCategory(
-      deleteResponse,
-      dropedCategory.current!,
-      {
-        categoryId: grabedCategory.current!.categoryId,
-        name: grabedCategory.current!.name,
-        topCategoryId: dropedCategory.current!,
-      },
-    );
     const res = await putTopToOtherTop(
       grabedCategory.current!.categoryId,
       dropedCategory.current!,
     );
     if (res.isSuccess) {
-      setCategories(insertResponse);
+      await updateCategories();
       navigate(`/category/${dropedCategory.current}`);
-    } else {
-      alert('카테고리를 옮기는데 오류가 발생했습니다.');
     }
+    return res.isSuccess;
   };
 
   return { subToOtherTop, subToTop, topToOtherTop };