크루, 게스트 모집 참여 취소하기 api 연결 (#461)

* feat: 크루 가입 신청 취소하기 기능 추가

* feat: 게스트 모집 참여 취소하기 기능 추가

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],
+        });
+    },
+  });
+};

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],
+        });
+    },
   });
 };

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 (
       <Button
@@ -40,7 +43,7 @@ export const ParticipateButton = ({
         height="50px"
         width="100%"
         onClick={() =>
-          participateMutate(
+          participateCreateMutate(
             { crewId },
             {
               onSuccess: () => {
@@ -61,7 +64,16 @@ export const ParticipateButton = ({
         {...theme.BUTTON_PROPS.LARGE_RED_BUTTON_PROPS}
         height="50px"
         width="100%"
-        onClick={() => toast('준비중인 기능입니다')}
+        onClick={() =>
+          participateDeleteMutate(
+            { memberId: loginId, crewId },
+            {
+              onSuccess: () => {
+                toast('가입 신청이 취소되었습니다');
+              },
+            }
+          )
+        }
       >
         참여 취소하기
       </Button>

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,15 +96,15 @@ export const GuestButton = ({
 
   if (memberRegistrationStatus === '없음') {
     return (
-      <BottomButton onClick={handleParticipateButtonClick}>
+      <BottomButton onClick={handleParticipateCreateButtonClick}>
         참여 신청하기
       </BottomButton>
     );
   }
 
   if (memberRegistrationStatus === '대기') {
     return (
-      <BottomButton onClick={() => toast('준비중인 기능입니다')}>
+      <BottomButton onClick={handleParticipateDeleteButtonClick}>
         참여 취소하기
       </BottomButton>
     );