From 6a58cc7e67c18ab54ef7adef9476ae5b390dfe6c Mon Sep 17 00:00:00 2001
From: gs0428 <lider28@naver.com>
Date: Mon, 12 Feb 2024 16:33:58 +0900
Subject: [PATCH] =?UTF-8?q?feature-060:=20=EC=98=81=EC=83=81=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=AC=ED=95=B4=EB=B3=B4=EA=B8=B0=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=EC=8B=9C=20=ED=99=88=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/category/EmptyCard.tsx  |  2 +-
 src/hooks/useMoveCategory.ts           | 42 ++++++++++++++++++--------
 src/styles/category/EmptyCard.style.ts |  7 +++--
 3 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/components/category/EmptyCard.tsx b/src/components/category/EmptyCard.tsx
index 1278d61..5febd81 100644
--- a/src/components/category/EmptyCard.tsx
+++ b/src/components/category/EmptyCard.tsx
@@ -13,7 +13,7 @@ const EmptyCard = () => {
           관련 영상들을 모아보세요
         </EmptyCardStyles.Content>
       </EmptyCardStyles.ContentWrap>
-      <EmptyCardStyles.Button>영상 정리해보기</EmptyCardStyles.Button>
+      <EmptyCardStyles.Button to="/">영상 정리해보기</EmptyCardStyles.Button>
     </EmptyCardStyles.Container>
   );
 };
diff --git a/src/hooks/useMoveCategory.ts b/src/hooks/useMoveCategory.ts
index 4902cc5..0b19138 100644
--- a/src/hooks/useMoveCategory.ts
+++ b/src/hooks/useMoveCategory.ts
@@ -8,10 +8,12 @@ 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,
@@ -19,7 +21,7 @@ const useMoveCategory = () => {
     insertSubToTopCategory,
   } = handleCategory();
 
-  const subToOtherTop = (
+  const subToOtherTop = async (
     topId: number,
     grabedCategory: React.MutableRefObject<ISubFolderProps | undefined>,
   ) => {
@@ -39,13 +41,20 @@ const useMoveCategory = () => {
       grabedCategory.current?.topCategoryId,
       grabedCategory.current!,
     );
-    putSubToOtherTop(grabedCategory.current!.categoryId, topId);
-    setCategories([...insertResponse]);
-    navigate(`/category/${grabedCategory.current?.topCategoryId}`);
-    console.log(grabedCategory.current?.name);
+    const res = await putSubToOtherTop(
+      grabedCategory.current!.categoryId,
+      topId,
+    );
+    if (res.isSuccess) {
+      updateCategories();
+      setCategories([...insertResponse]);
+      navigate(`/category/${grabedCategory.current?.topCategoryId}`);
+    } else {
+      alert('카테고리를 옮기는데 오류가 발생했습니다.');
+    }
   };
 
-  const subToTop = (
+  const subToTop = async (
     topId: number,
     grabedCategory: React.MutableRefObject<ISubFolderProps | undefined>,
     dropedCategory: React.MutableRefObject<number | undefined>,
@@ -66,11 +75,16 @@ const useMoveCategory = () => {
       dropedCategory.current,
       grabedCategory.current!,
     );
-    putSubToTop(grabedCategory.current!.categoryId);
-    setCategories([...insertResponse]);
+    const res = await putSubToTop(grabedCategory.current!.categoryId);
+    if (res.isSuccess) {
+      updateCategories();
+      setCategories([...insertResponse]);
+    } else {
+      alert('카테고리를 옮기는데 오류가 발생했습니다.');
+    }
   };
 
-  const topToOtherTop = (
+  const topToOtherTop = async (
     grabedCategory: React.MutableRefObject<ISubFolderProps | undefined>,
     dropedCategory: React.MutableRefObject<number | undefined>,
   ) => {
@@ -89,12 +103,16 @@ const useMoveCategory = () => {
         topCategoryId: dropedCategory.current!,
       },
     );
-    putTopToOtherTop(
+    const res = await putTopToOtherTop(
       grabedCategory.current!.categoryId,
       dropedCategory.current!,
     );
-    setCategories(insertResponse);
-    navigate(`/category/${dropedCategory.current}`);
+    if (res.isSuccess) {
+      setCategories(insertResponse);
+      navigate(`/category/${dropedCategory.current}`);
+    } else {
+      alert('카테고리를 옮기는데 오류가 발생했습니다.');
+    }
   };
 
   return { subToOtherTop, subToTop, topToOtherTop };
diff --git a/src/styles/category/EmptyCard.style.ts b/src/styles/category/EmptyCard.style.ts
index 4d07b2d..547027d 100644
--- a/src/styles/category/EmptyCard.style.ts
+++ b/src/styles/category/EmptyCard.style.ts
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import theme from '../theme';
+import { Link } from 'react-router-dom';
 
 export const Container = styled.div`
   display: flex;
@@ -17,11 +18,11 @@ export const Content = styled.p`
   ${theme.typography.Subheader2}
 `;
 
-export const Button = styled.button`
-  cursor: pointer;
-  border: 0;
+export const Button = styled(Link)`
   background-color: ${theme.color.gray500};
   color: ${theme.color.white};
+  text-decoration: none;
+  text-align: center;
   border-radius: 100px;
   padding: 12px 32px;
   ${theme.typography.Subheader2}