[FEAT]: 관리자 매치 정보 수정 구현

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-select": "^2.0.0",
     "@sentry/nextjs": "^7.73.0",
     "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^5.8.2",

src/api/admin/league.ts

@@ -6,7 +6,6 @@ import {
   NewLeaguePayload,
   PutLeaguePayload,
   SportsCategoriesType,
-  SportsQuarterType,
 } from '@/types/admin/league';
 
 export const getAllLeaguesWithAuth = async () => {
@@ -38,11 +37,3 @@ export const getSportsCategoriesWithAuth = async () => {
 
   return data;
 };
-
-export const getSportsQuarterByIdWithAuth = async (sportId: string) => {
-  const { data } = await adminInstance.get<SportsQuarterType[]>(
-    `/sport/${sportId}/quarter/`,
-  );
-
-  return data;
-};

src/api/admin/match.ts

@@ -0,0 +1,32 @@
+import {
+  MatchInfoType,
+  PutMatchInfoPayload,
+  SportsQuarterType,
+} from '@/types/admin/match';
+
+import { adminInstance } from '..';
+
+export const getMatchInfoByIdWithAuth = async (matchId: string) => {
+  const { data } = await adminInstance.get<MatchInfoType>(
+    `/game/info/${matchId}/`,
+  );
+
+  return data;
+};
+
+export const putMatchInfoWithAuth = async (payload: {
+  matchId: string;
+  data: PutMatchInfoPayload;
+}) => {
+  await adminInstance.put(`/game/change/${payload.matchId}/`, payload.data);
+
+  return payload.matchId;
+};
+
+export const getSportsQuarterByIdWithAuth = async (sportId: number) => {
+  const { data } = await adminInstance.get<SportsQuarterType[]>(
+    `/sport/${sportId}/quarter/`,
+  );
+
+  return data;
+};

src/api/auth.ts

@@ -29,3 +29,11 @@ export const postLogin = async (body: AuthPayload) => {
 export const postGameStatus = async (id: number, gameStatus: string) => {
   adminInstance.post(`/manage/game/statustype/${id}/`, { gameStatus });
 };
+
+export const checkPermission = async () => {
+  const { data } = await adminInstance.get<number>('/accounts/permission/');
+  if (data === 400) {
+    throw new Error('해당 페이지에 접근할 권한이 없습니다');
+  }
+  return;
+};

src/api/index.ts

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 
 import LocalStorage from '@/utils/LocalStorage';
 
@@ -17,10 +17,83 @@ export const adminInstance = axios.create({
   },
 });
 
+const getAccessToken = () => {
+  const tokenInLocalStorage = LocalStorage.getItem('token');
+
+  if (tokenInLocalStorage) return tokenInLocalStorage;
+  else return null;
+};
+
+const onError = async (message: string) => {
+  alert(message);
+  return;
+};
+
 adminInstance.interceptors.request.use(config => {
-  config.headers.Authorization = `Bearer ${LocalStorage.getItem('token')}`;
+  const existedToken = getAccessToken();
+  config.headers.Authorization = `Bearer ${existedToken}`;
 
   return config;
 });
 
+let retryCounter = 0;
+
+adminInstance.interceptors.response.use(
+  res => {
+    retryCounter = 0;
+    return res;
+  },
+  async (error: AxiosError) => {
+    if (error.code === 'ECONNABORTED') {
+      alert('서버에 문제가 발생했습니다.');
+    }
+
+    switch (error.response?.status) {
+      case 400: {
+        onError('400: 잘못된 요청입니다.');
+        break;
+      }
+      case 401: {
+        if (retryCounter < 3) {
+          retryCounter++;
+          try {
+            const existedToken = getAccessToken();
+            if (!existedToken) throw new Error('no accessible token');
+            return await adminInstance({
+              ...error.config,
+              headers: { Authorization: `Bearer ${existedToken}` },
+            });
+          } catch (e) {
+            const message =
+              e instanceof Error ? e.message : '401: 로그인이 필요합니다.';
+            onError(message);
+            return (window.location.href = '/login');
+          }
+        } else {
+          onError('재시도 횟수를 초과하였습니다. 로그인 페이지로 이동합니다.');
+          return (window.location.href = '/login');
+        }
+      }
+      case 403: {
+        onError('403: 권한이 필요합니다.');
+        break;
+      }
+      case 404: {
+        onError('404: 잘못된 요청입니다.');
+        break;
+      }
+      case 500: {
+        onError('500: 서버에 문제가 발생했습니다.');
+        break;
+      }
+      default: {
+        onError('알 수 없는 오류입니다.');
+        break;
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
 export default instance;

src/app/admin/layout.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import LeagueIdWrapper from '@/components/admin/context/LeagueIdWrapper';
+
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LeagueIdWrapper>
+      <section className="space-y-8">{children}</section>
+    </LeagueIdWrapper>
+  );
+}

src/app/admin/league/[leagueId]/match/[matchId]/page.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import MatchInfoDetail from '@/components/admin/match/detail/Info';
+import AsyncBoundary from '@/components/common/AsyncBoundary';
+import AuthMatchInfoFetcher from '@/queries/admin/match/useMatchInfoByIdWithAuth/Fetcher';
+
+export default function Page({
+  params,
+}: {
+  params: { matchId: string; leagueId: string };
+}) {
+  const { matchId } = params;
+
+  return (
+    <section>
+      <AsyncBoundary
+        errorFallback={props => <MatchInfoDetail.ErrorFallback {...props} />}
+        loadingFallback={<div>로딩 중입니다...</div>}
+      >
+        <AuthMatchInfoFetcher matchId={matchId}>
+          {data => {
+            return <MatchInfoDetail {...{ ...data, params }} />;
+          }}
+        </AuthMatchInfoFetcher>
+      </AsyncBoundary>
+    </section>
+  );
+}

src/app/admin/league/[leagueId]/match/page.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { checkPermission } from '@/api/auth';
+import Home from '@/app/page';
+import { QUERY_PARAMS } from '@/constants/queryParams';
+import useQueryParams from '@/hooks/useQueryParams';
+
+export default function Page({ params }: { params: { leagueId: string } }) {
+  const { leagueId } = params;
+  const { setInParams } = useQueryParams();
+
+  useEffect(() => {
+    setInParams(QUERY_PARAMS.league, leagueId);
+    checkPermission();
+  });
+
+  return (
+    <>
+      <div className="text-2xl font-medium">리그 내 매치 </div>
+      <Home />
+    </>
+  );
+}

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { Suspense, useEffect } from 'react';
+
+import LeagueDetail from '@/components/admin/league/detail';
+import { useLeagueIdContext } from '@/hooks/useLeagueIdContext';
+import LeagueRegisterFetcher from '@/queries/admin/league/useLeagueRegister/Fetcher';
+import useSportsListByLeagueId from '@/queries/useSportsListByLeagueId/query';
+
+export default function Page({ params }: { params: { leagueId: string } }) {
+  const { leagueId } = params;
+  const { setLeagueId } = useLeagueIdContext();
+  const { sportsList: leagueSportsData } = useSportsListByLeagueId(leagueId);
+
+  useEffect(() => {
+    setLeagueId(leagueId);
+  }, []);
+
+  return (
+    <Suspense fallback={<div>리그 정보 로딩중...</div>}>
+      <LeagueRegisterFetcher>
+        {data => (
+          <LeagueDetail
+            data={{ ...data, leagueSportsData }}
+            leagueId={leagueId}
+          />
+        )}
+      </LeagueRegisterFetcher>
+    </Suspense>
+  );
+}

src/app/admin/league/page.tsx

@@ -10,13 +10,11 @@ const LeagueListFetcher = dynamic(
   () => import('@/queries/admin/league/useLeagueList/Fetcher'),
   { ssr: false },
 );
-const LeagueList = dynamic(
-  () => import('@/components/admin/league/LeagueList'),
-);
+const LeagueList = dynamic(() => import('@/components/admin/league/list'));
 
-export default function LeaguePage() {
+export default function Page() {
   return (
-    <div className="space-y-8">
+    <>
       <div className="text-2xl font-medium">전체 리그</div>
       <Suspense fallback={<div>리그 로딩중...</div>}>
         <LeagueListFetcher>
@@ -28,6 +26,6 @@ export default function LeaguePage() {
           새 리그 등록
         </Link>
       </Button>
-    </div>
+    </>
   );
 }

src/app/admin/register/page.tsx

@@ -2,43 +2,40 @@
 
 import { Suspense } from 'react';
 
-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/league/useLeagueRegister/Fetcher';
 import TeamRegisterFetcher from '@/queries/admin/team/useTeamRegister/Fetcher';
 
-export default function Register() {
+export default function Page() {
   const [Funnel, setStep] = useFunnel(['league', 'team', 'player'], 'league');
 
   return (
-    <RegisterWrapper className="space-y-8">
-      <Funnel>
-        <Funnel.Step name="league">
-          <Suspense fallback={<div>리그 정보 로딩중...</div>}>
-            <LeagueRegisterFetcher>
-              {data => (
-                <RegisterLeague data={data} onNext={() => setStep('team')} />
-              )}
-            </LeagueRegisterFetcher>
-          </Suspense>
-        </Funnel.Step>
-        <Funnel.Step name="team">
-          <Suspense fallback={<div>팀 정보 로딩중...</div>}>
-            <TeamRegisterFetcher>
-              {data => <RegisterTeam data={data} />}
-            </TeamRegisterFetcher>
-          </Suspense>
-        </Funnel.Step>
-        <Funnel.Step name="player">
-          <Suspense fallback={<div>선수 정보 로딩중...</div>}>
-            {/* <LeagueRegisterFetcher leagueId={leagueId}>
+    <Funnel>
+      <Funnel.Step name="league">
+        <Suspense fallback={<div>리그 정보 로딩중...</div>}>
+          <LeagueRegisterFetcher>
+            {data => (
+              <RegisterLeague data={data} onNext={() => setStep('team')} />
+            )}
+          </LeagueRegisterFetcher>
+        </Suspense>
+      </Funnel.Step>
+      <Funnel.Step name="team">
+        <Suspense fallback={<div>팀 정보 로딩중...</div>}>
+          <TeamRegisterFetcher>
+            {data => <RegisterTeam data={data} />}
+          </TeamRegisterFetcher>
+        </Suspense>
+      </Funnel.Step>
+      <Funnel.Step name="player">
+        <Suspense fallback={<div>선수 정보 로딩중...</div>}>
+          {/* <LeagueRegisterFetcher leagueId={leagueId}>
               {data => <RegisterLeague data={data} leagueId={leagueId} />}
             </LeagueRegisterFetcher> */}
-          </Suspense>
-        </Funnel.Step>
-      </Funnel>
-    </RegisterWrapper>
+        </Suspense>
+      </Funnel.Step>
+    </Funnel>
   );
 }