From a278641e88fdd88fa7c3cf9cb464d270df3288a9 Mon Sep 17 00:00:00 2001
From: NohWookJin <jinn98@kakao.com>
Date: Tue, 23 Jan 2024 15:37:30 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=88=AC=ED=91=9C=20=EC=B7=A8=EC=86=8C?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LikedToursLists/LikedToursListItem.tsx    | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/Trip/LikedToursLists/LikedToursListItem.tsx b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
index 7260e8fa..9f7e72a5 100644
--- a/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
+++ b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
@@ -1,3 +1,7 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { postTripsLikeHate } from '@api/trips';
 import {
   ThumbsUp,
   ThumbsDown,
@@ -5,10 +9,6 @@ import {
   ClickThumbsDown,
   StarIcon,
 } from '@components/common/icons/Icons';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { postTripsLikeHate } from '@api/trips';
-import { useNavigate } from 'react-router-dom';
-import { useState } from 'react';
 
 interface LikedToursListItemProps {
   ourTripList: ourTripType;
@@ -34,11 +34,11 @@ const LikedToursListItem: React.FC<LikedToursListItemProps> = ({
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const [thumbsState, setThumbsState] = useState({
-    prefer: false,
-    notPrefer: false,
+    prefer: prefer,
+    notPrefer: notPrefer,
   });
 
-  const { mutate: thumbsUpMutate } = useMutation({
+  const { mutate: thumbsMutate } = useMutation({
     mutationFn: () =>
       postTripsLikeHate(
         selectedTripId,
@@ -54,14 +54,20 @@ const LikedToursListItem: React.FC<LikedToursListItemProps> = ({
 
   const onClickThumbsUpButton = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
-    setThumbsState({ prefer: true, notPrefer: false });
-    thumbsUpMutate();
+    setThumbsState((prev) => ({
+      prefer: !prev.prefer,
+      notPrefer: false,
+    }));
+    thumbsMutate();
   };
 
   const onClickThumbsDownButton = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
-    setThumbsState({ prefer: false, notPrefer: true });
-    thumbsUpMutate();
+    setThumbsState((prev) => ({
+      prefer: false,
+      notPrefer: !prev.notPrefer,
+    }));
+    thumbsMutate();
   };
 
   return (