feat: 선물 삭제 api

SWEET-DEVELOPERS · Mar 15, 2024 · 74de642 · 74de642
1 parent 3376bd8
commit 74de642
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 21 deletions.
diff --git a/src/components/Tournament/Intro/TournamentDeleteButton/TournamentDeleteButton.tsx b/src/components/Tournament/Intro/TournamentDeleteButton/TournamentDeleteButton.tsx
@@ -1,11 +1,11 @@
 import BtnFill from '../../../common/Button/Cta/fill/BtnFill';
 import * as S from './TournamentDeleteButton.style';
-
-interface TournamentStartButtonProps {
-  onClick: () => void;
+interface TournamentDeleteButtonProps {
+  onClick: (roomId: number) => void;
+  roomId: number; // roomId를 props로 받음
 }
 
-const TournamentDeleteButton = ({ onClick }: TournamentStartButtonProps) => {
+const TournamentDeleteButton = ({ onClick, roomId }: TournamentDeleteButtonProps) => {
   return (
     <S.TournamentStartButtonWrapper>
       <BtnFill
@@ -15,12 +15,12 @@ const TournamentDeleteButton = ({ onClick }: TournamentStartButtonProps) => {
           backgroundColor: '#FF2176',
           border: 'none',
         }}
-        onClick={onClick}
+        onClick={() => onClick(roomId)} // props로 받은 roomId를 사용
       >
         선물방 종료하기
       </BtnFill>
     </S.TournamentStartButtonWrapper>
   );
 };
 
-export default TournamentDeleteButton;
+export default TournamentDeleteButton;
diff --git a/src/components/Tournament/Intro/TournamentIntroContainer.tsx b/src/components/Tournament/Intro/TournamentIntroContainer.tsx
@@ -19,12 +19,14 @@ const TournamentIntroContainer = () => {
   const navigate = useNavigate();
   const params = useParams();
   const giftee = params.giftee;
+
   const roomIdString = params.roomId || '';
   const roomId = parseInt(roomIdString || '', 10);
+
   const memberData = useGetItem({ roomId: Number(roomId) });
   let tournamentData: GiftData[] = [];
 
-  const { mutation } = useDeleteRoom(roomId);
+  const { mutation } = useDeleteRoom({ roomId: Number(roomId) });
 
   const { showTournamentContainer, handleStartClick } = useTournament();
   const handleClearRoom = () => {};
@@ -43,12 +45,10 @@ const TournamentIntroContainer = () => {
     console.log(tournamentData);
   }
 
-  console.log('룸디는 : ' + roomId);
-  const handleClickConfirmDeleteBtn = (roomId?: number) => {
-    if (roomId !== undefined) {
-      mutation.mutate(roomId);
-      navigate(`/mypage`);
-    }
+  const handleClickConfirmDeleteBtn = (roomId: number) => {
+    // console.log('룸디는 : ' + roomId);
+    mutation.mutate(roomId);
+    navigate(`/mypage`);
   };
 
   return (
@@ -64,7 +64,7 @@ const TournamentIntroContainer = () => {
                     <S.TournamentImg>
                       <TrophyNone />
                     </S.TournamentImg>
-                    <TournamentDeleteButton onClick={handleClickConfirmDeleteBtn} />
+                    <TournamentDeleteButton roomId={roomId} onClick={handleClickConfirmDeleteBtn} />
                   </>
                 ) : (
                   <>

diff --git a/src/hooks/queries/tournament/useDeleteRoom.tsx b/src/hooks/queries/tournament/useDeleteRoom.tsx
@@ -1,23 +1,31 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { post } from '../../../apis/client';
 
-export async function deleteMyGift(roomId: number) {
+export const MY_TOURNAMENT_QUERY_KEY: string[] = ['myRoomData'];
+
+export async function deleteRoom(roomId: number) {
   await post(`/gift/tournament-end/${roomId}`);
 }
 
-export const useDeleteRoom = (roomId: number) => {
-  const MY_TOURNAMENT_QUERY_KEY: string[] = ['myRoomData'];
-
+// export const deleteRoom = async (roomId: number): Promise<any> => {
+//   try {
+//     const response = await post(`/gift/tournament-end/${roomId}`);
+//     return response;
+//   } catch (error) {
+//     return '중복입니다';
+//   }
+// };
+export const useDeleteRoom = ({ roomId }: { roomId: number }) => {
   const queryClient = useQueryClient();
 
-  const mutation = useMutation({
-    mutationFn: deleteMyGift,
+  const mutation: any = useMutation({
+    mutationFn: deleteRoom,
     onSuccess() {
       console.log('선물 삭제 성공');
       queryClient.invalidateQueries({ queryKey: [MY_TOURNAMENT_QUERY_KEY[0], roomId] });
     },
     onError: (error) => {
-      console.log(roomId);
+      console.log('삭제에러:' + roomId);
       console.log('선물 삭제 중 에러가 발생했습니다.', error.message);
     },
   });