From 3820cf1988bd0cc80a256e609ee9006d929077df Mon Sep 17 00:00:00 2001
From: woo29 <dldngur37@naver.com>
Date: Tue, 21 May 2024 18:23:43 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A6=90=EA=B2=A8=EC=B0=BE=EA=B8=B0=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Card/CardList.tsx        | 47 +++++++++++++++++------------
 components/Folder/FolderContent.tsx |  1 -
 pages/folder/[id]/index.tsx         |  1 -
 services/folderApi.ts               |  4 +--
 4 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/components/Card/CardList.tsx b/components/Card/CardList.tsx
index 358560f8c..cc9a9fb80 100644
--- a/components/Card/CardList.tsx
+++ b/components/Card/CardList.tsx
@@ -1,6 +1,5 @@
 import { MouseEvent } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useRouter } from 'next/router';
 import getTimeDiff from '../../utils/getTimeDiff';
 import getCoustomDate from '../../utils/getCoustomDate';
 import * as Styled from './CardList.styled';
@@ -18,28 +17,36 @@ interface CardListPropsType {
 }
 
 function CardList({ handleKebabClick, selectCardId, linkList, option, handleModalAction }: CardListPropsType) {
-  // 즐겨찾기 기능 주석 처리
-  // const router = useRouter();
-  // const { id: linkId } = router.query;
-  // const queryClient = useQueryClient();
+  const queryClient = useQueryClient();
 
-  // const { mutate } = useMutation({
-  //   mutationFn: (linkInfo: any) => bookMarkLink(linkInfo),
-  //   onMutate: async () => {
-  //     await queryClient.cancelQueries({
-  //       queryKey: folderKey.selectLinkLoad(linkId)
-  //     });
+  const { mutate } = useMutation({
+    mutationFn: (linkInfo: any) => bookMarkLink(linkInfo),
+    onMutate: async (linkInfo) => {
+      await queryClient.cancelQueries({
+        queryKey: folderKey.allLink
+      });
 
-  //     const prevFavoriteState = queryClient.getQueryData(folderKey.selectLinkLoad(linkId));
+      // 이전 값
+      const prevFavoriteState = queryClient.getQueryData(folderKey.allLink);
 
-  //     queryClient.setQueryData(folderKey.selectLinkLoad(linkId), (prev: any) => !prev);
+      // 새로운 값으로 낙관적 업데이트 진행
+      queryClient.setQueryData(folderKey.allLink, (prev: any) => {
+        return prev.map((link: any) => {
+          if (link.id === linkInfo.id) {
+            return { ...link, favorite: !link.favorite };
+          }
+          return link;
+        });
+      });
 
-  //     return { prevFavoriteState };
-  //   },
-  //   onError: (err, _, context) => {
-  //     queryClient.setQueryData(folderKey.selectLinkLoad(linkId), context?.prevFavoriteState);
-  //   }
-  // });
+      // 값이 들어있는 context 객체를 반환
+      return { prevFavoriteState };
+    },
+    // mutation이 실패하면 onMutate에서 반환된 context를 사용하여 롤백 진행
+    onError(err, _, context) {
+      queryClient.setQueryData(folderKey.allLink, context?.prevFavoriteState);
+    }
+  });
 
   const handleBookmarkLink = (linkInfo: any, e: MouseEvent<HTMLElement>) => {
     const target = e.target as HTMLElement;
@@ -47,7 +54,7 @@ function CardList({ handleKebabClick, selectCardId, linkList, option, handleModa
       return;
     }
     e.preventDefault();
-    // mutate(linkInfo);
+    mutate(linkInfo);
   };
 
   const handleKebabModalAction = (
diff --git a/components/Folder/FolderContent.tsx b/components/Folder/FolderContent.tsx
index 49b7d398d..bcc85e944 100644
--- a/components/Folder/FolderContent.tsx
+++ b/components/Folder/FolderContent.tsx
@@ -22,7 +22,6 @@ function FolderContent({
   handleModalAction
 }: FolderContentPropsType) {
   const router = useRouter();
-  const { id } = router.query;
   const [selectCategory, setSelectCategory] = useState<SelectCategoryType>({
     // 현재 선택중인 카테고리
     id: 0,
diff --git a/pages/folder/[id]/index.tsx b/pages/folder/[id]/index.tsx
index e193741ec..e03842bd8 100644
--- a/pages/folder/[id]/index.tsx
+++ b/pages/folder/[id]/index.tsx
@@ -1,7 +1,6 @@
 import { useRouter } from 'next/router';
 import { useRef, useState } from 'react';
 import Head from 'next/head';
-import { useQuery } from '@tanstack/react-query';
 import Header from '../../../components/Header/Header';
 import FolderContent from '../../../components/Folder/FolderContent';
 import Footer from '../../../components/Footer/Footer';
diff --git a/services/folderApi.ts b/services/folderApi.ts
index a85926f02..06550d1cd 100644
--- a/services/folderApi.ts
+++ b/services/folderApi.ts
@@ -43,7 +43,7 @@ export const bookMarkLink = async (linkInfo: any) => {
     await api.put(`${API_PATH.LINK}/${linkInfo.id}`, {
       favorite: !linkInfo.isFavorite
     });
-  } catch (error) {
-    return console.error(error);
+  } catch (error: any) {
+    throw new Error(error);
   }
 };