인기여행지 좋아요 기능 추가

src/@types/detail.types.ts

@@ -9,3 +9,8 @@ interface tourDetail {
   tel: string;
   originalThumbnailUrl: string;
 }
+
+interface LikeProps {
+  liked: boolean;
+  id: number;
+}

src/components/DetailSectionTop/DetailToursInfo.tsx

@@ -1,7 +1,4 @@
-import { HeartIcon } from '@components/common/icons/Icons';
-import { postLikedTours, deleteLikedTours } from '@api/tours';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useNavigate } from 'react-router-dom';
+import Like from '@components/common/like/Like';
 
 interface DetailToursInfoProps {
   infoData: tourDetail;
@@ -10,39 +7,6 @@ interface DetailToursInfoProps {
 export default function DetailToursInfo({ infoData }: DetailToursInfoProps) {
   const { title, liked, originalThumbnailUrl, id } = infoData;
 
-  const navigate = useNavigate();
-  const queryClient = useQueryClient();
-
-  const { mutate: likeMutate } = useMutation({
-    mutationFn: (id: number) => postLikedTours({ id }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['details'] });
-    },
-    onError: () => console.log('error'),
-  });
-
-  const { mutate: unlikeMutate } = useMutation({
-    mutationFn: (id: number) => deleteLikedTours({ id }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['details'] });
-    },
-    onError: () => console.log('error'),
-  });
-
-  const onClickLikeButton = () => {
-    const token = localStorage.getItem('accessToken');
-    if (!token) {
-      // 비로그인 알람창 처리 필요
-      navigate('/signin');
-    } else {
-      if (liked === false) {
-        likeMutate(id);
-      } else {
-        unlikeMutate(id);
-      }
-    }
-  };
-
   return (
     <>
       <div className="column mt-1 flex aspect-[3/2] h-[11.938rem] w-full items-start overflow-hidden rounded-lg">
@@ -56,13 +20,7 @@ export default function DetailToursInfo({ infoData }: DetailToursInfoProps) {
         <h1 className="font-['Pretendard'] text-2xl font-bold text-black ">
           {title}
         </h1>
-        <div className="top-75 h-[24px] w-[24px] cursor-pointer">
-          <HeartIcon
-            fill={liked ? '#FF2167' : '#D7D7D7'}
-            color="none"
-            onClick={onClickLikeButton}
-          />
-        </div>
+        <Like liked={liked} id={id} />
       </div>
     </>
   );

src/components/Tours/ToursCategory.tsx

@@ -30,7 +30,7 @@ const ToursCategory = ({
   }, [isLoading]);
 
   if (error) {
-    console.log('error - 예외 처리');
+    console.error('error');
   }
 
   const handleSelectRegion = (name: string) => {

src/components/Tours/ToursItem.tsx

@@ -1,5 +1,6 @@
 import { TourType } from '@/@types/tours.types';
 import { HeartIcon, StarIcon } from '@components/common/icons/Icons';
+import Like from '@components/common/like/Like';
 import { useNavigate } from 'react-router-dom';
 
 const ToursItem = ({ tour }: { tour: TourType }) => {
@@ -26,11 +27,7 @@ const ToursItem = ({ tour }: { tour: TourType }) => {
           alt="여행지 이미지"
         />
         <div className="absolute right-[8px] top-[8px] z-10 w-[24px]">
-          <HeartIcon
-            size={24}
-            color={liked ? '#ff2167' : '#ffffff'}
-            fill={liked ? '#ff2167' : '#D7D7D7'}
-          />
+          <Like liked={liked} id={id} />
         </div>
       </div>
       <p className="headline1 mt-2 overflow-hidden text-clip whitespace-nowrap px-[2px] leading-normal">

src/components/common/icons/Icons.tsx

@@ -769,8 +769,8 @@ export const KakaoIcon = () => {
       xmlns="http://www.w3.org/2000/svg">
       <path
         id="Kakao"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M8.60938 12.9979C13.0277 12.9979 16.6094 10.2415 16.6094 6.84126C16.6094 3.44101 13.0277 0.68457 8.60938 0.68457C4.1911 0.68457 0.609375 3.44101 0.609375 6.84126C0.609375 9.02531 2.08711 10.9437 4.31509 12.0367L3.76215 15.1916L6.86492 12.8511C7.42645 12.9473 8.01022 12.9979 8.60938 12.9979Z"
         fill="#3B1E1E"
       />

src/components/common/like/Like.tsx

@@ -0,0 +1,55 @@
+import { useNavigate } from 'react-router-dom';
+import { HeartIcon } from '../icons/Icons';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { deleteLikedTours, postLikedTours } from '@api/tours';
+
+const Like = ({ liked, id }: LikeProps) => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const { mutate: likeMutate } = useMutation({
+    mutationFn: (id: number) => postLikedTours({ id }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['details'] });
+      queryClient.invalidateQueries({ queryKey: ['tours'] });
+    },
+    onError: () => console.log('error'),
+  });
+
+  const { mutate: unlikeMutate } = useMutation({
+    mutationFn: (id: number) => deleteLikedTours({ id }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['details'] });
+      queryClient.invalidateQueries({ queryKey: ['tours'] });
+    },
+    onError: () => console.log('error'),
+  });
+
+  const onClickLikeButton = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+    const token = localStorage.getItem('accessToken');
+    if (!token) {
+      // 비로그인 알람창 처리 필요
+      navigate('/signin');
+    } else {
+      if (liked === false) {
+        likeMutate(id);
+      } else {
+        unlikeMutate(id);
+      }
+    }
+  };
+
+  return (
+    <div
+      onClick={onClickLikeButton}
+      className="top-75 h-[24px] w-[24px] cursor-pointer">
+      <HeartIcon
+        fill={liked ? '#FF2167' : '#D7D7D7'}
+        color={liked ? '#ff2167' : '#ffffff'}
+      />
+    </div>
+  );
+};
+
+export default Like;