feature-060: 영상 정리해보기 클릭 시 홈으로 이동

teamViNO · Feb 12, 2024 · 6a58cc7 · 6a58cc7
1 parent b85d07b
commit 6a58cc7
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 16 deletions.
diff --git 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
@@ -8,18 +8,20 @@ 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 = (
+  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
@@ -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}