From 39700050365586e2840560032659bb910696ffbe Mon Sep 17 00:00:00 2001 From: sue Date: Sun, 7 Jan 2024 12:26:44 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Refactor:=20=EC=A2=8B=EC=95=84=EC=9A=94=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/detail.types.ts | 5 ++ .../DetailSectionTop/DetailToursInfo.tsx | 46 +--------------- src/components/common/like/Like.tsx | 55 +++++++++++++++++++ 3 files changed, 62 insertions(+), 44 deletions(-) create mode 100644 src/components/common/like/Like.tsx diff --git a/src/@types/detail.types.ts b/src/@types/detail.types.ts index 8c65e79c..bfb4bca8 100644 --- a/src/@types/detail.types.ts +++ b/src/@types/detail.types.ts @@ -9,3 +9,8 @@ interface tourDetail { tel: string; originalThumbnailUrl: string; } + +interface LikeProps { + liked: boolean; + id: number; +} diff --git a/src/components/DetailSectionTop/DetailToursInfo.tsx b/src/components/DetailSectionTop/DetailToursInfo.tsx index c4a0edf9..8af2a5ee 100644 --- a/src/components/DetailSectionTop/DetailToursInfo.tsx +++ b/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 ( <>
@@ -56,13 +20,7 @@ export default function DetailToursInfo({ infoData }: DetailToursInfoProps) {

{title}

-
- -
+
); diff --git a/src/components/common/like/Like.tsx b/src/components/common/like/Like.tsx new file mode 100644 index 00000000..e47b1730 --- /dev/null +++ b/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) => { + e.stopPropagation(); + const token = localStorage.getItem('accessToken'); + if (!token) { + // 비로그인 알람창 처리 필요 + navigate('/signin'); + } else { + if (liked === false) { + likeMutate(id); + } else { + unlikeMutate(id); + } + } + }; + + return ( +
+ +
+ ); +}; + +export default Like; From 44eb38e0547d3e023ba2cbae1e2367bd8c012eec Mon Sep 17 00:00:00 2001 From: sue Date: Sun, 7 Jan 2024 12:27:15 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Fix:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B2=BD=EA=B3=A0=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/icons/Icons.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index 83536fc9..73b09c65 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -769,8 +769,8 @@ export const KakaoIcon = () => { xmlns="http://www.w3.org/2000/svg"> From fdecd8396318d7581dbfb0fcac1fb8eba132d0fb Mon Sep 17 00:00:00 2001 From: sue Date: Sun, 7 Jan 2024 12:30:10 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Feat:=20=EC=9D=B8=EA=B8=B0=EC=97=AC?= =?UTF-8?q?=ED=96=89=EC=A7=80=20=EC=A2=8B=EC=95=84=EC=9A=94=20=EA=B8=B0?= =?UTF-8?q?=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 --- src/components/Tours/ToursCategory.tsx | 2 +- src/components/Tours/ToursItem.tsx | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/Tours/ToursCategory.tsx b/src/components/Tours/ToursCategory.tsx index d4e3a3fd..8578ddda 100644 --- a/src/components/Tours/ToursCategory.tsx +++ b/src/components/Tours/ToursCategory.tsx @@ -30,7 +30,7 @@ const ToursCategory = ({ }, [isLoading]); if (error) { - console.log('error - 예외 처리'); + console.error('error'); } const handleSelectRegion = (name: string) => { diff --git a/src/components/Tours/ToursItem.tsx b/src/components/Tours/ToursItem.tsx index df049fb2..41c1abd6 100644 --- a/src/components/Tours/ToursItem.tsx +++ b/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="여행지 이미지" />
- +