Fix: 좋아요 기능 수정 #65

puppypawpaw · Oct 18, 2023 · 30f9242 · 30f9242
1 parent c2cf12d
commit 30f9242
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 48 deletions.
diff --git a/components/ui/BoardCard/BoardCardPackage/CommentWrapper.tsx b/components/ui/BoardCard/BoardCardPackage/CommentWrapper.tsx
@@ -38,8 +38,9 @@ export function BoardCardCommentWrapper({
   const updateLike = () => {
     if (isLiked) {
       unlikeMutate(boardId);
+    } else {
+      likeMutate(boardId);
     }
-    likeMutate(boardId);
   };
 
   return (

diff --git a/hooks/mutations/useLikeBoard.ts b/hooks/mutations/useLikeBoard.ts
@@ -11,7 +11,7 @@ export default function useLikeBoard() {
       await queryClient.cancelQueries({ queryKey: ['boardList'] });
       const previousBoards = queryClient.getQueryData<BoardList>(['boardList']);
 
-      // 낙관적 업데이트 시작
+      // 낙관적 업데이트
       if (previousBoards) {
         queryClient.setQueryData<BoardList>(['boardList'], (oldData) => {
           if (oldData) {
@@ -40,35 +40,5 @@ export default function useLikeBoard() {
       );
     },
   });
-  // const { mutate, isLoading } = useMutation({
-  //   mutationFn: updateBoardLike,
-  //   onMutate: async (liked) => {
-  //     // Cancel any outgoing refetches
-  //     // (so they don't overwrite our optimistic update)
-  //     await queryClient.cancelQueries({ queryKey: ['boardList'] });
-
-  //     // Snapshot the previous value
-  //     const previousBoards = queryClient.getQueryData<BoardList>(['boardList']);
-
-  //     // Optimistically update to the new value
-  //     // queryClient.setQueryData(['boardList'], (old) => [...old, newTodo])
-  //     if (previousBoards) {
-  //       queryClient.setQueryData(['boardList'], liked);
-  //     }
-
-  //     // Return a context object with the snapshotted value
-  //     return { previousBoards };
-  //   },
-  //   onSuccess: () => {
-  //     queryClient.invalidateQueries(['boardList']);
-  //   },
-  //   onError: (_err, _, context) => {
-  //     // 캐시를 저장된 값으로 롤백
-  //     queryClient.setQueryData(['boardList'], context?.previousBoards);
-  //     Toast.error(
-  //       '좋아요를 누르는데 실패했습니다. 잠시후 다시 시도해주세요.🥲',
-  //     );
-  //   },
-  // });
   return { mutate, isLoading };
 }
diff --git a/service/board.ts b/service/board.ts
@@ -76,24 +76,52 @@ export async function getCommentList(
 
 export async function updateBoardLike(boardId: number) {
   const url = `endpoint/api/boardLike/like?boardId=${boardId}`;
-  const response = await fetch(url, {
-    method: 'POST',
-    credentials: 'include',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-  return response.json();
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (response.status === 401) {
+      throw new AuthError('로그인이 필요한 서비스입니다.');
+    }
+    if (!response.ok) {
+      throw new Error(`서버오류:${response.status}`);
+    }
+    return await response.json();
+  } catch (error) {
+    if (error instanceof AuthError) {
+      window.location.replace('/auth/login');
+      alert(error.message);
+    }
+    throw error;
+  }
 }
 
 export async function deleteBoardLike(boardId: number) {
   const url = `endpoint/api/boardLike/deleteLike?boardId=${boardId}`;
-  const response = await fetch(url, {
-    method: 'POST',
-    credentials: 'include',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-  return response.json();
+  try {
+    const response = await fetch(url, {
+      method: 'DELETE',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (response.status === 401) {
+      throw new AuthError('로그인이 필요한 서비스입니다.');
+    }
+    if (!response.ok) {
+      throw new Error(`서버오류:${response.status}`);
+    }
+    return await response.json();
+  } catch (error) {
+    if (error instanceof AuthError) {
+      window.location.replace('/auth/login');
+      alert(error.message);
+    }
+    throw error;
+  }
 }