From debc23c31f8c337feccfb4f72b28e312f3655fc2 Mon Sep 17 00:00:00 2001 From: dlwl98 Date: Sun, 3 Dec 2023 18:09:25 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=ED=81=AC=EB=A3=A8=20=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EC=8B=A0=EC=B2=AD=20=EC=B7=A8=EC=86=8C=ED=95=98?= =?UTF-8?q?=EA=B8=B0=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 --- .../crews/useCrewParticipateDeleteMutation.ts | 24 +++++++++++++++++++ .../components/ParticipateButton.tsx | 20 ++++++++++++---- 2 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 src/hooks/crews/useCrewParticipateDeleteMutation.ts diff --git a/src/hooks/crews/useCrewParticipateDeleteMutation.ts b/src/hooks/crews/useCrewParticipateDeleteMutation.ts new file mode 100644 index 00000000..a107ae1b --- /dev/null +++ b/src/hooks/crews/useCrewParticipateDeleteMutation.ts @@ -0,0 +1,24 @@ +import { useMutation } from '@tanstack/react-query'; +import { useQueryClient } from '@tanstack/react-query'; + +import { deleteCrewParticipate } from '@api/crews/deleteCrewParticipate'; + +import { useLoginInfoStore } from '@stores/loginInfo.store'; + +export const useCrewParticipateDeleteMutation = () => { + const queryClient = useQueryClient(); + const id = useLoginInfoStore((state) => state.loginInfo?.id); + + return useMutation({ + mutationFn: deleteCrewParticipate, + onSuccess: (_, { crewId }) => { + queryClient.invalidateQueries({ + queryKey: ['crew-detail', crewId], + }); + id && + queryClient.invalidateQueries({ + queryKey: ['crew-registration', id, crewId], + }); + }, + }); +}; diff --git a/src/pages/CrewsDetailPage/components/ParticipateButton.tsx b/src/pages/CrewsDetailPage/components/ParticipateButton.tsx index a6e35c33..ba62d62c 100644 --- a/src/pages/CrewsDetailPage/components/ParticipateButton.tsx +++ b/src/pages/CrewsDetailPage/components/ParticipateButton.tsx @@ -3,6 +3,7 @@ import toast from 'react-hot-toast'; import { Button } from '@components/shared/Button'; import { useCrewParticipateCreateMutation } from '@hooks/crews/useCrewParticipateCreateMutation'; +import { useCrewParticipateDeleteMutation } from '@hooks/crews/useCrewParticipateDeleteMutation'; import { useCrewRegistrationStatusQuery } from '@hooks/member/useCrewRegistrationStatusQuery'; import { theme } from '@styles/theme'; @@ -19,8 +20,10 @@ export const ParticipateButton = ({ const { data: { memberRegistrationStatus }, } = useCrewRegistrationStatusQuery({ memberId: loginId, crewId }); - const { mutate: participateMutate } = useCrewParticipateCreateMutation(); - + const { mutate: participateCreateMutate } = + useCrewParticipateCreateMutation(); + const { mutate: participateDeleteMutate } = + useCrewParticipateDeleteMutation(); if (memberRegistrationStatus === '없음' && !vacancy) { return ( From 90feb81638b4465c9dafeb9164695a4429925cbe Mon Sep 17 00:00:00 2001 From: dlwl98 Date: Sun, 3 Dec 2023 18:14:24 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=AA=A8=EC=A7=91=20=EC=B0=B8=EC=97=AC=20=EC=B7=A8=EC=86=8C?= =?UTF-8?q?=ED=95=98=EA=B8=B0=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 --- .../games/useGameParticipateDeleteMutation.ts | 23 +++++++++++------ .../components/GuestButton.tsx | 25 +++++++++++++++---- 2 files changed, 36 insertions(+), 12 deletions(-) diff --git a/src/hooks/games/useGameParticipateDeleteMutation.ts b/src/hooks/games/useGameParticipateDeleteMutation.ts index b501f8e1..f33f683f 100644 --- a/src/hooks/games/useGameParticipateDeleteMutation.ts +++ b/src/hooks/games/useGameParticipateDeleteMutation.ts @@ -1,15 +1,24 @@ import { useMutation } from '@tanstack/react-query'; +import { useQueryClient } from '@tanstack/react-query'; import { deleteGameParticipate } from '@api/games/deleteGameParticipate'; -import { DeleteGameParticipateRequest } from '@type/api/games'; +import { useLoginInfoStore } from '@stores/loginInfo.store'; + +export const useGameParticipateDeleteMutation = () => { + const queryClient = useQueryClient(); + const id = useLoginInfoStore((state) => state.loginInfo?.id); -export const useGameParticipateDeleteMutation = ({ - gameId, - memberId, -}: DeleteGameParticipateRequest) => { return useMutation({ - mutationKey: ['delete-game-participate', gameId, memberId], - mutationFn: () => deleteGameParticipate({ gameId, memberId }), + mutationFn: deleteGameParticipate, + onSuccess: (_, { gameId }) => { + queryClient.invalidateQueries({ + queryKey: ['game-detail', gameId], + }); + id && + queryClient.invalidateQueries({ + queryKey: ['game-registration', id, gameId], + }); + }, }); }; diff --git a/src/pages/GamesDetailPage/components/GuestButton.tsx b/src/pages/GamesDetailPage/components/GuestButton.tsx index 8f4ffa60..6d07ebd6 100644 --- a/src/pages/GamesDetailPage/components/GuestButton.tsx +++ b/src/pages/GamesDetailPage/components/GuestButton.tsx @@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom'; import { Button } from '@components/shared/Button'; import { useGameParticipateCreateMutation } from '@hooks/games/useGameParticipateCreateMutation'; +import { useGameParticipateDeleteMutation } from '@hooks/games/useGameParticipateDeleteMutation'; import { useGameRegistrationStatusQuery } from '@hooks/member/useGameRegistrationStatusQuery'; import { theme } from '@styles/theme'; @@ -35,13 +36,16 @@ export const GuestButton = ({ const { data: { memberRegistrationStatus, isReviewDone }, } = useGameRegistrationStatusQuery({ memberId: loginId, gameId }); - const { mutate: participateMutate } = useGameParticipateCreateMutation(); + const { mutate: participateCreateMutate } = + useGameParticipateCreateMutation(); + const { mutate: participateDeleteMutate } = + useGameParticipateDeleteMutation(); const navigateReviewPage = () => navigate(PATH_NAME.GET_GAMES_REVIEW_PATH(String(gameId))); - const handleParticipateButtonClick = () => - participateMutate( + const handleParticipateCreateButtonClick = () => + participateCreateMutate( { gameId }, { onSuccess: () => { @@ -50,6 +54,17 @@ export const GuestButton = ({ } ); + const handleParticipateDeleteButtonClick = () => { + participateDeleteMutate( + { memberId: loginId, gameId }, + { + onSuccess: () => { + toast('참여 신청이 취소되었습니다'); + }, + } + ); + }; + if (isContinue) { return null; } @@ -81,7 +96,7 @@ export const GuestButton = ({ if (memberRegistrationStatus === '없음') { return ( - + 참여 신청하기 ); @@ -89,7 +104,7 @@ export const GuestButton = ({ if (memberRegistrationStatus === '대기') { return ( - toast('준비중인 기능입니다')}> + 참여 취소하기 );