feat: 경기 관련 fetch 함수 toast 적용

components/pages/club/LeagueDetail.tsx

@@ -72,20 +72,21 @@ function LeagueDetail() {
   const { mutate: deleteParticipate } = useDeleteParticipantLeague(
     clubId as string,
     leagueId as string,
-    () => alert("경기 신청 취소가 완료되었습니다"),
+    () => alert("경기 참여 취소가 완료되었습니다"),
   );
   const { mutate: deleteLeague } = useDeleteLeague(
     clubId as string,
     leagueId as string,
+    () => alert("경기 취소가 완료되었습니다"),
   );
   const { mutate: createMatch } = usePostMatches(
     clubId as string,
     leagueId as string,
+    () => router.push(`/club/${clubId}/league/${leagueId}/match`),
   );
-  const { data: sessionData } = useGetMembersSession();
 
   const handleParticipate = (status: boolean) => {
-    if (sessionData?.result === "FAIL") {
+    if (loginedUser?.result === "FAIL") {
       alert("로그인이 필요한 기능입니다");
       return router.push("/login");
     }
@@ -103,9 +104,13 @@ function LeagueDetail() {
   };
 
   const makeMatch = () => {
-    createMatch(undefined, {
-      onSuccess: () => router.push(`/club/${clubId}/league/${leagueId}/match`),
-    });
+    createMatch();
+  };
+
+  const cancelLeague = () => {
+    if (confirm("정말로 경기를 취소하시겠습니까?")) {
+      deleteLeague();
+    }
   };
 
   if (isLoading) {
@@ -132,7 +137,8 @@ function LeagueDetail() {
           </div>
         </div>
         {!!loginedUser?.data &&
-          loginedUser.data.member_token === league?.league_owner_token && (
+          loginedUser.data.member_token === league?.league_owner_token &&
+          league?.league_status !== "CANCELED" && (
             <div className="flex justify-center gap-2">
               <Link href={`/club/${clubId}/league/${leagueId}/update`}>
                 <Button
@@ -148,7 +154,7 @@ function LeagueDetail() {
                 size="sm"
                 variant="outline"
                 className="flex items-center gap-1 hover:bg-zinc-500 hover:text-white border-zinc-500 text-zinc-500"
-                onClick={() => deleteLeague()}
+                onClick={cancelLeague}
               >
                 <TicketX size={16} />
                 취소

lib/api/functions/matchFn.ts

@@ -1,7 +1,8 @@
-import type { GetMatchesResponse } from "@/types/matchTypes";
-import restClient from "../restClient";
-
-const BASE_URL = `${process.env.NEXT_PUBLIC_BASE_URL}`;
+import restClient from "@/lib/api/restClient";
+import type {
+  GetMatchesResponse,
+  PostMatchesResponse,
+} from "@/types/matchTypes";
 
 export const getMatches = async (
   clubId: string,
@@ -15,18 +16,8 @@ export const getMatches = async (
 export const postMatches = async (
   clubId: string,
   leagueId: string,
-): Promise<string> => {
-  const response = await fetch(
-    `${BASE_URL}/clubs/${clubId}/leagues/${leagueId}/matches`,
-    {
-      method: "POST",
-      credentials: "include",
-    },
+): Promise<PostMatchesResponse> => {
+  return restClient.post<PostMatchesResponse>(
+    `/clubs/${clubId}/leagues/${leagueId}/matches`,
   );
-
-  if (!response.ok) {
-    throw new Error("대진표 생성에 실패했습니다.");
-  }
-
-  return response.text();
 };

lib/api/hooks/leagueHook.ts

@@ -1,3 +1,16 @@
+import {
+  deleteLeagues,
+  deleteParticipateLeague,
+  getDateLeague,
+  getLeagueCheck,
+  getLeagueDetail,
+  getMonthLeagues,
+  patchLeague,
+  postLeague,
+  postParticipateLeague,
+} from "@/lib/api/functions/leagueFn";
+import useMutationWithToast from "@/lib/api/hooks/useMutationWithToast";
+import useQueryWithToast from "@/lib/api/hooks/useQueryWithToast";
 import type {
   DeleteLeagueData,
   DeleteLeagueParticipantData,
@@ -10,19 +23,6 @@ import type {
   PostLeagueRequest,
 } from "@/types/leagueTypes";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import {
-  deleteLeagues,
-  deleteParticipateLeague,
-  getDateLeague,
-  getLeagueCheck,
-  getLeagueDetail,
-  getMonthLeagues,
-  patchLeague,
-  postLeague,
-  postParticipateLeague,
-} from "../functions/leagueFn";
-import useMutationWithToast from "./useMutationWithToast";
-import useQueryWithToast from "./useQueryWithToast";
 
 export const usePostLeague = (clubId: string, onSuccess: () => void) => {
   const queryClient = useQueryClient();
@@ -123,13 +123,18 @@ export const usePatchLeague = (clubId: string, leagueId: string) => {
   });
 };
 
-export const useDeleteLeague = (clubId: string, leagueId: string) => {
+export const useDeleteLeague = (
+  clubId: string,
+  leagueId: string,
+  onSuccess: () => void,
+) => {
   const queryClient = useQueryClient();
 
   const mutationFn = () => deleteLeagues(clubId, leagueId);
 
   const onSuccessCallback = () => {
     queryClient.invalidateQueries({ queryKey: ["leagueDetailData"] });
+    onSuccess();
   };
 
   return useMutationWithToast<DeleteLeagueData, void>(

lib/api/hooks/matchHook.ts

@@ -1,23 +1,31 @@
 import { getMatches, postMatches } from "@/lib/api/functions/matchFn";
 import useQueryWithToast from "@/lib/api/hooks/useQueryWithToast";
-import type { GetMatchesData } from "@/types/matchTypes";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { GetMatchesData, PostMatchesData } from "@/types/matchTypes";
+import { useQueryClient } from "@tanstack/react-query";
+import useMutationWithToast from "./useMutationWithToast";
 
 export const useGetMatches = (clubId: string, leagueId: number) => {
   return useQueryWithToast<GetMatchesData>(["matchesData"], () =>
     getMatches(clubId, leagueId),
   );
 };
 
-export const usePostMatches = (clubId: string, leagueId: string) => {
+export const usePostMatches = (
+  clubId: string,
+  leagueId: string,
+  onSuccess: () => void,
+) => {
   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: () => postMatches(clubId, leagueId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["matchesData"] });
-      queryClient.invalidateQueries({ queryKey: ["leagueDetailData"] });
-    },
-    onError: (error: Error) => alert(error),
-  });
+  const mutationFn = () => postMatches(clubId, leagueId);
+
+  const onSuccessCallback = () => {
+    queryClient.invalidateQueries({ queryKey: ["matchesData"] });
+    queryClient.invalidateQueries({ queryKey: ["leagueDetailData"] });
+    onSuccess();
+  };
+  return useMutationWithToast<PostMatchesData, void>(
+    mutationFn,
+    onSuccessCallback,
+  );
 };

types/matchTypes.ts

@@ -5,4 +5,9 @@ export type GetMatchesResponse =
 
 export type GetMatchesData = components["schemas"]["BracketResponse"];
 
+export type PostMatchesResponse =
+  components["schemas"]["CommonResponseBracketResponse"];
+
+export type PostMatchesData = components["schemas"]["BracketResponse"];
+
 export type MatchParticipant = components["schemas"]["Participant"];