Merge pull request #119 from hufs-sports-live/feat/admin-league

[REFACTOR]: 관리자 리그 쿼리, 스크롤락, 리그 삭제 버그픽스

src/app/admin/league/page.tsx

@@ -7,7 +7,7 @@ import { Suspense } from 'react';
 import Button from '@/components/common/Button';
 
 const LeagueListFetcher = dynamic(
-  () => import('@/queries/admin/useLeagueList/Fetcher'),
+  () => import('@/queries/admin/league/useLeagueList/Fetcher'),
   { ssr: false },
 );
 const LeagueList = dynamic(
@@ -16,7 +16,7 @@ const LeagueList = dynamic(
 
 export default function LeaguePage() {
   return (
-    <div className="space-y-8 py-8">
+    <div className="space-y-8">
       <div className="text-2xl font-medium">전체 리그</div>
       <Suspense fallback={<div>리그 로딩중...</div>}>
         <LeagueListFetcher>

src/app/admin/register/[leagueId]/page.tsx

@@ -3,14 +3,14 @@
 import { Suspense } from 'react';
 
 import EditLeague from '@/components/admin/register/League/edit';
-import LeagueRegisterFetcher from '@/queries/admin/useLeagueRegister/Fetcher';
+import LeagueRegisterFetcher from '@/queries/admin/league/useLeagueRegister/Fetcher';
 import useSportsListByLeagueId from '@/queries/useSportsListByLeagueId/query';
 
 export default function Edit({ params }: { params: { leagueId: string } }) {
   const { leagueId } = params;
   const { sportsList: leagueSportsData } = useSportsListByLeagueId(leagueId);
   return (
-    <div className="space-y-8 py-8">
+    <div className="space-y-8">
       <Suspense fallback={<div>리그 정보 로딩중...</div>}>
         <LeagueRegisterFetcher>
           {data => (

src/app/admin/register/page.tsx

@@ -6,14 +6,14 @@ import RegisterWrapper from '@/components/admin/register/context/RegisterWrapper
 import RegisterLeague from '@/components/admin/register/League/';
 import RegisterTeam from '@/components/admin/register/Team';
 import { useFunnel } from '@/hooks/useFunnel';
-import LeagueRegisterFetcher from '@/queries/admin/useLeagueRegister/Fetcher';
-import TeamRegisterFetcher from '@/queries/admin/useTeamRegister/Fetcher';
+import LeagueRegisterFetcher from '@/queries/admin/league/useLeagueRegister/Fetcher';
+import TeamRegisterFetcher from '@/queries/admin/team/useTeamRegister/Fetcher';
 
 export default function Register() {
   const [Funnel, setStep] = useFunnel(['league', 'team', 'player'], 'league');
 
   return (
-    <RegisterWrapper className="space-y-8 py-8">
+    <RegisterWrapper className="space-y-8">
       <Funnel>
         <Funnel.Step name="league">
           <Suspense fallback={<div>리그 정보 로딩중...</div>}>

src/components/admin/league/LeagueList/index.tsx

@@ -6,20 +6,23 @@ import { useEffect, useState } from 'react';
 import Button from '@/components/common/Button';
 import Card from '@/components/common/Card';
 import LeagueContent from '@/components/common/Card/league/Content';
-import { DELETE_DESCRIPTION } from '@/constants/adminDescription';
+import { DELETE_DESCRIPTION } from '@/constants/admin/description';
 import { useScrollLock } from '@/hooks/useScrollLock';
-import { useDeleteLeagueMutation } from '@/queries/admin/useLeagueList/query';
+import useDeleteLeagueMutation from '@/queries/admin/league/useDeleteLeagueMutation';
 import { LeagueType } from '@/types/admin/league';
 
 export default function LeagueList({ data }: { data: LeagueType[] }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedLeagueId, setSelectedLeagueId] = useState<number | null>(null);
   const { disableScroll, enableScroll } = useScrollLock();
 
   const { mutate } = useDeleteLeagueMutation();
 
-  const toggleModal = () => {
+  const toggleModal = (leagueId: number) => {
     setIsModalOpen(!isModalOpen);
+    setSelectedLeagueId(leagueId);
   };
+
   const deleteLeague = async (leagueId: number) => {
     mutate({ leagueId });
     setIsModalOpen(false);
@@ -51,25 +54,26 @@ export default function LeagueList({ data }: { data: LeagueType[] }) {
               <Button
                 type="button"
                 className="w-full rounded-lg bg-red-300 p-3 text-red-800 hover:bg-red-600 hover:text-red-300"
-                onClick={toggleModal}
+                onClick={() => toggleModal(league.leagueId)}
               >
                 삭제하기
               </Button>
             </div>
           </Card>
-          {isModalOpen && (
+          {isModalOpen && selectedLeagueId === league.leagueId && (
             <div>
               <div className="fixed inset-0 bg-black/50" />
               <Card className="fixed left-1/2 top-1/2 w-96 max-w-md -translate-x-1/2 -translate-y-1/2">
                 <div className="m-2 my-4 flex flex-col space-y-4">
                   <span className="text-3xl">리그 삭제</span>
+                  <span className="text-2xl font-bold">{league.name}</span>
                   <span className="text-gray-4">{DELETE_DESCRIPTION}</span>
                 </div>
                 <div className="flex w-full gap-4">
                   <Button
                     type="button"
                     className="w-full rounded-lg bg-secondary p-3 text-gray-5 hover:bg-[#9AB0D3] hover:text-white"
-                    onClick={toggleModal}
+                    onClick={() => setIsModalOpen(false)}
                   >
                     돌아가기
                   </Button>

src/components/admin/register/League/edit/index.tsx

@@ -7,10 +7,8 @@ import Button from '@/components/common/Button';
 import CheckboxItem from '@/components/common/Checkbox/Item';
 import Input from '@/components/common/Input/Input';
 import useValidate from '@/hooks/useValidate';
-import {
-  usePostLeagueMutation,
-  usePutLeagueMutation,
-} from '@/queries/admin/useLeagueRegister/query';
+import usePostNewLeagueMutation from '@/queries/admin/league/usePostNewLeagueMutation';
+import usePutLeagueMutation from '@/queries/admin/league/usePutLeagueMutation';
 import {
   LeagueDataType,
   LeagueRegisterDataType,
@@ -39,7 +37,7 @@ export default function EditLeague({
 
   const router = useRouter();
 
-  const { mutate: postLeague } = usePostLeagueMutation();
+  const { mutate: postLeague } = usePostNewLeagueMutation();
   const { mutate: putLeague } = usePutLeagueMutation();
 
   useEffect(() => {

src/components/admin/register/League/index.tsx

@@ -7,10 +7,8 @@ import Button from '@/components/common/Button';
 import CheckboxItem from '@/components/common/Checkbox/Item';
 import Input from '@/components/common/Input/Input';
 import useValidate from '@/hooks/useValidate';
-import {
-  usePostLeagueMutation,
-  usePutLeagueMutation,
-} from '@/queries/admin/useLeagueRegister/query';
+import usePostNewLeagueMutation from '@/queries/admin/league/usePostNewLeagueMutation';
+import usePutLeagueMutation from '@/queries/admin/league/usePutLeagueMutation';
 import { LeagueDataType, LeagueRegisterDataType } from '@/types/admin/league';
 import { updateSet } from '@/utils/set';
 import { parseTimeString } from '@/utils/time';
@@ -34,7 +32,7 @@ export default function RegisterLeague({
 
   const router = useRouter();
 
-  const { mutate: postLeague } = usePostLeagueMutation();
+  const { mutate: postLeague } = usePostNewLeagueMutation();
   const { mutate: putLeague } = usePutLeagueMutation();
 
   useEffect(() => {

src/components/admin/register/Team/index.tsx

@@ -8,7 +8,7 @@ import { Icon } from '@/components/common/Icon';
 import Input from '@/components/common/Input/Input';
 import { useLeagueIdContext } from '@/hooks/useLeagueIdContext';
 import useValidate from '@/hooks/useValidate';
-import { usePostTeamMutation } from '@/queries/admin/useTeamRegister/query';
+import usePostTeamMutation from '@/queries/admin/team/usePostTeamMutation';
 import { TeamType } from '@/types/admin/team';
 
 export default function RegisterTeam({

src/constants/admin/mutationKey.ts

@@ -0,0 +1,6 @@
+export const ADMIN_MUTATION_KEY = {
+  POST_NEW_LEAGUE: 'POST_NEW_LEAGUE',
+  PUT_LEAGUE: 'PUT_LEAGUE',
+  DELETE_LEAGUE: 'DELETE_LEAGUE',
+  POST_TEAM: 'POST_TEAM',
+} as const;

src/constants/admin/queryKey.ts

@@ -0,0 +1,6 @@
+export const ADMIN_QUERY_KEY = {
+  LEAGUE_LIST: 'LEAGUE_LIST',
+  LEAGUE_SPORTS: 'LEAGUE_SPORTS',
+  SPORTS_LIST: 'SPORTS_LIST',
+  TEAM_LIST: 'TEAM_LIST',
+} as const;

src/hooks/useScrollLock.ts

@@ -3,7 +3,6 @@ export function useScrollLock() {
 
   const disableScroll = () => {
     document.body.style.overflow = 'hidden';
-    document.body.style.position = 'fixed';
     document.body.style.top = `-${scrollPosition}px`;
     document.body.style.width = '100%';
   };

src/queries/admin/league/useDeleteLeagueMutation/index.ts

@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { deleteLeagueByIdWithAuth } from '@/api/admin/league';
+import { ADMIN_MUTATION_KEY } from '@/constants/admin/mutationKey';
+import { ADMIN_QUERY_KEY } from '@/constants/admin/queryKey';
+
+export default function useDeleteLeagueMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: [ADMIN_MUTATION_KEY.DELETE_LEAGUE],
+    mutationFn: deleteLeagueByIdWithAuth,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [ADMIN_QUERY_KEY.LEAGUE_LIST],
+      });
+    },
+  });
+}

src/queries/admin/useLeagueList/Fetcher.tsx → src/queries/admin/league/useLeagueList/Fetcher.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import { LeagueType } from '@/types/admin/league';
 
-import { useLeagueList } from './query';
+import useLeagueList from './query';
 
 type LeagueListFetcherProps = {
   children: (data: LeagueType[]) => ReactNode;

src/queries/admin/league/useLeagueList/query.ts

@@ -0,0 +1,16 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getAllLeaguesWithAuth } from '@/api/admin/league';
+import { ADMIN_QUERY_KEY } from '@/constants/admin/queryKey';
+
+export default function useLeagueList() {
+  const { data, error } = useSuspenseQuery({
+    queryKey: [ADMIN_QUERY_KEY.LEAGUE_LIST],
+    queryFn: () => getAllLeaguesWithAuth(),
+  });
+
+  return {
+    data,
+    error,
+  };
+}

src/queries/admin/useLeagueRegister/Fetcher.tsx → src/queries/admin/league/useLeagueRegister/Fetcher.tsx

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 
-import { useLeagueList } from '@/queries/admin/useLeagueList/query';
+import useLeagueList from '@/queries/admin/league/useLeagueList/query';
 import { LeagueRegisterDataType } from '@/types/admin/league';
 
-import { useSportsList } from './query';
+import useSportsList from './query';
 
 type LeagueRegisterFetcherProps = {
   children: ({
@@ -16,7 +16,7 @@ export default function LeagueRegisterFetcher({
   children,
 }: LeagueRegisterFetcherProps) {
   const { data: leagueData, error: leagueDataError } = useLeagueList();
-  const { sportsListData, sportsListError } = useSportsList();
+  const { data: sportsListData, error: sportsListError } = useSportsList();
 
   if (leagueDataError) throw leagueDataError;
   if (sportsListError) throw sportsListError;

src/queries/admin/league/useLeagueRegister/query.ts

@@ -0,0 +1,42 @@
+import { useSuspenseQueries, useSuspenseQuery } from '@tanstack/react-query';
+
+import {
+  getAllLeaguesWithAuth,
+  getSportsCategoriesWithAuth,
+} from '@/api/admin/league';
+import { ADMIN_QUERY_KEY } from '@/constants/admin/queryKey';
+
+export default function useSportsList() {
+  const { data, error } = useSuspenseQuery({
+    queryKey: [ADMIN_QUERY_KEY.SPORTS_LIST],
+    queryFn: () => getSportsCategoriesWithAuth(),
+  });
+
+  return {
+    data,
+    error,
+  };
+}
+
+export function useLeagueRegisterData() {
+  // leagueRegisterFetcher에서 각 쿼리의 data를 지명해서 변수로 쓰고 싶은데, 아래와 같이 작성하면 array 데이터로 묶여서 사용하기 불편해짐
+  // TODO: 복수 쿼리들의 결과값을 1:1 네이밍해 내보낼 수 있는 방법 찾기
+  return useSuspenseQueries({
+    queries: [
+      {
+        queryKey: [ADMIN_QUERY_KEY.LEAGUE_LIST],
+        queryFn: getAllLeaguesWithAuth,
+      },
+      {
+        queryKey: [ADMIN_QUERY_KEY.SPORTS_LIST],
+        queryFn: getSportsCategoriesWithAuth,
+      },
+    ],
+    combine: results => {
+      return {
+        data: results.map(result => result.data),
+        error: results.some(result => result.error),
+      };
+    },
+  });
+}

src/queries/admin/league/usePostNewLeagueMutation/index.ts

@@ -0,0 +1,26 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { postNewLeagueWithAuth } from '@/api/admin/league';
+import { ADMIN_MUTATION_KEY } from '@/constants/admin/mutationKey';
+import { ADMIN_QUERY_KEY } from '@/constants/admin/queryKey';
+import { useLeagueIdContext } from '@/hooks/useLeagueIdContext';
+
+export default function usePostNewLeagueMutation() {
+  const queryClient = useQueryClient();
+  const { setLeagueId } = useLeagueIdContext();
+
+  return useMutation({
+    mutationKey: [ADMIN_MUTATION_KEY.POST_NEW_LEAGUE],
+    mutationFn: postNewLeagueWithAuth,
+    onSuccess: data => {
+      const { leagueId } = data;
+      setLeagueId(leagueId.toString());
+      queryClient.invalidateQueries({
+        queryKey: [ADMIN_QUERY_KEY.LEAGUE_LIST],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [ADMIN_QUERY_KEY.LEAGUE_SPORTS, leagueId],
+      });
+    },
+  });
+}

src/queries/admin/league/usePutLeagueMutation/index.ts

@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { putLeagueWithAuth } from '@/api/admin/league';
+import { ADMIN_MUTATION_KEY } from '@/constants/admin/mutationKey';
+import { ADMIN_QUERY_KEY } from '@/constants/admin/queryKey';
+
+export default function usePutLeagueMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: [ADMIN_MUTATION_KEY.PUT_LEAGUE],
+    mutationFn: putLeagueWithAuth,
+    onSuccess: leagueId => {
+      queryClient.invalidateQueries({
+        queryKey: [ADMIN_QUERY_KEY.LEAGUE_LIST],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [ADMIN_QUERY_KEY.LEAGUE_SPORTS, leagueId],
+      });
+    },
+  });
+}

src/queries/admin/team/usePostTeamMutation/index.ts

@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { postTeamByLeagueIdWithAuth } from '@/api/admin/team';
+import { ADMIN_MUTATION_KEY } from '@/constants/admin/mutationKey';
+import { ADMIN_QUERY_KEY } from '@/constants/admin/queryKey';
+
+export default function usePostTeamMutation(leagueId: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: [ADMIN_MUTATION_KEY.POST_TEAM],
+    mutationFn: postTeamByLeagueIdWithAuth,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [ADMIN_QUERY_KEY.TEAM_LIST, leagueId],
+      });
+    },
+  });
+}

src/queries/admin/useTeamRegister/Fetcher.tsx → src/queries/admin/team/useTeamRegister/Fetcher.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { useLeagueIdContext } from '@/hooks/useLeagueIdContext';
 import { TeamType } from '@/types/admin/team';
 
-import { useTeamListByLeagueId } from './query';
+import useTeamListByLeagueId from './query';
 
 type TeamRegisterFetcherProps = {
   children: (data: TeamType[] | string | undefined) => ReactNode;

src/queries/admin/team/useTeamRegister/query.ts

@@ -0,0 +1,16 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getTeamListByLeagueIdWithAuth } from '@/api/admin/team';
+import { ADMIN_QUERY_KEY } from '@/constants/admin/queryKey';
+
+export default function useTeamListByLeagueId(leagueId: string) {
+  const { data, error } = useSuspenseQuery({
+    queryKey: [ADMIN_QUERY_KEY.TEAM_LIST, leagueId],
+    queryFn: () => getTeamListByLeagueIdWithAuth(leagueId),
+  });
+
+  return {
+    teamList: data,
+    error,
+  };
+}