[토너먼트] 강제종료 (#508)

* feat: 선물방 강제 종료하기 API

* chore: 선물방 아이디 콘솔 출력

* feat: 선물 삭제 api

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;

src/components/Tournament/Intro/TournamentIntroContainer.tsx

@@ -13,20 +13,23 @@ import { GiftData } from '../../../types/tournament';
 import TournamentDeleteButton from './TournamentDeleteButton/TournamentDeleteButton';
 import { useNavigate } from 'react-router-dom';
 import Modal from '../../common/Modal/Modal';
+import useDeleteRoom from '../../../hooks/queries/tournament/useDeleteRoom';
 
 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: Number(roomId) });
+
   const { showTournamentContainer, handleStartClick } = useTournament();
-  const handleClearRoom = () => {
-    navigate(`/mypage`);
-  };
+  const handleClearRoom = () => {};
 
   if (typeof memberData === 'string') {
     console.log('Error :', memberData);
@@ -42,6 +45,12 @@ const TournamentIntroContainer = () => {
     console.log(tournamentData);
   }
 
+  const handleClickConfirmDeleteBtn = (roomId: number) => {
+    // console.log('룸디는 : ' + roomId);
+    mutation.mutate(roomId);
+    navigate(`/mypage`);
+  };
+
   return (
     <>
       {showTournamentContainer ? (
@@ -55,7 +64,7 @@ const TournamentIntroContainer = () => {
                     <S.TournamentImg>
                       <TrophyNone />
                     </S.TournamentImg>
-                    <TournamentDeleteButton onClick={handleClearRoom} />
+                    <TournamentDeleteButton roomId={roomId} onClick={handleClickConfirmDeleteBtn} />
                   </>
                 ) : (
                   <>

src/hooks/queries/tournament/useDeleteRoom.tsx

@@ -0,0 +1,36 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { post } from '../../../apis/client';
+
+export const MY_TOURNAMENT_QUERY_KEY: string[] = ['myRoomData'];
+
+export async function deleteRoom(roomId: number) {
+  await post(`/gift/tournament-end/${roomId}`);
+}
+
+// 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: any = useMutation({
+    mutationFn: deleteRoom,
+    onSuccess() {
+      console.log('선물 삭제 성공');
+      queryClient.invalidateQueries({ queryKey: [MY_TOURNAMENT_QUERY_KEY[0], roomId] });
+    },
+    onError: (error) => {
+      console.log('삭제에러:' + roomId);
+      console.log('선물 삭제 중 에러가 발생했습니다.', error.message);
+    },
+  });
+
+  return { mutation };
+};
+
+export default useDeleteRoom;