Merge pull request #75 from hufs-sports-live/refactor/match-page

[REFACTOR] match page 내부 수정 및 리팩토링

next.config.js

@@ -3,8 +3,7 @@ const nextConfig = {
   images: {
     domains: [
       'hufstreaming.s3.ap-northeast-2.amazonaws.com',
-      'lh3.googleusercontent.com',
-      'velog.velcdn.com',
+      'hufscheer-server.s3.ap-northeast-2.amazonaws.com',
     ],
   },
 };

src/api/admin.ts

@@ -3,7 +3,7 @@ import { AxiosError } from 'axios';
 
 import { GameScorePayload, NewGamePayload } from '@/types/admin';
 
-import { adminInstance } from './instance';
+import { adminInstance } from '.';
 
 export const createNewGame = (body: NewGamePayload) => {
   try {

src/api/auth.ts

@@ -2,9 +2,9 @@ import * as Sentry from '@sentry/nextjs';
 import { AxiosError } from 'axios';
 
 import { AuthPayload, AuthType } from '@/types/auth';
-import { GameStatusType } from '@/types/game';
+import { MatchQuarterType } from '@/types/match';
 
-import { adminInstance } from './instance';
+import { adminInstance } from '.';
 
 export const postLogin = async (body: AuthPayload) => {
   try {
@@ -29,7 +29,7 @@ export const postLogin = async (body: AuthPayload) => {
 
 export const postGameStatus = async (
   id: number,
-  gameStatus: GameStatusType,
+  gameStatus: MatchQuarterType,
 ) => {
   adminInstance.post(`/manage/game/statustype/${id}/`, { gameStatus });
 };

src/api/match.ts

@@ -0,0 +1,47 @@
+import {
+  MatchCheerType,
+  MatchCommentType,
+  MatchDetailType,
+  MatchLineupType,
+  MatchTimelineType,
+} from '@/types/match';
+
+import instance from '.';
+
+export const getMatchById = async (gameId: string) => {
+  const { data } = await instance.get<MatchDetailType>(`/games/${gameId}`);
+
+  return data;
+};
+
+export const getMatchCheerById = async (matchId: string) => {
+  const { data } = await instance.get<MatchCheerType[]>(
+    `/games/${matchId}/cheer`,
+  );
+
+  return data;
+};
+
+export const getGameComments = async (gameId: string, cursor = 1) => {
+  const response = await instance.get<MatchCommentType[]>(
+    `/games/${gameId}/comments?cursor=${cursor}`,
+  );
+
+  return response.data;
+};
+
+export const getMatchTimelineById = async (matchId: string) => {
+  const { data } = await instance.get<MatchTimelineType[]>(
+    `/games/${matchId}/timeline`,
+  );
+
+  return data;
+};
+
+export const getMatchLineupById = async (matchId: string) => {
+  const { data } = await instance.get<MatchLineupType[]>(
+    `/games/${matchId}/lineup`,
+  );
+
+  return data;
+};

src/app/admin/page.tsx

@@ -1,21 +1,18 @@
 'use client';
 
-import { notFound, useRouter } from 'next/navigation';
-import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ChangeEvent, FormEvent, useState } from 'react';
 
 import { createNewGame } from '@/api/admin';
-import { getTeams } from '@/api/team';
 import Input from '@/components/common/Input/Input';
-import Select from '@/components/common/Select/Select';
 import useDate from '@/hooks/useDate';
 import useValidate from '@/hooks/useValidate';
-import { GameTeamType } from '@/types/game';
 
 export default function Admin() {
   const router = useRouter();
 
   const { month, day } = useDate(new Date().toString());
-  const [teams, setTeams] = useState<GameTeamType[]>([]);
+
   const [gameData, setGameData] = useState({
     name: '삼건물대회',
     sportsName: '축구',
@@ -61,18 +58,6 @@ export default function Admin() {
     }).then(() => router.push('/'));
   };
 
-  useEffect(() => {
-    const loadTeams = async () => {
-      const res = await getTeams();
-
-      if (typeof res === 'number') return notFound();
-
-      setTeams(res);
-    };
-
-    loadTeams();
-  }, []);
-
   return (
     <form onSubmit={submitHandler} className="flex flex-col">
       <label>
@@ -108,32 +93,6 @@ export default function Admin() {
         )}
       </label>
       <p>팀 선택</p>
-      <Select
-        name="firstTeam"
-        required
-        value={gameData.firstTeam}
-        onChange={handleInput}
-        placeholder="팀을 선택해주세요."
-      >
-        {teams.map(team => (
-          <option key={team.id} value={team.id}>
-            {team.name}
-          </option>
-        ))}
-      </Select>
-      <Select
-        name="secondTeam"
-        required
-        value={gameData.secondTeam}
-        onChange={handleInput}
-        placeholder="팀을 선택해주세요."
-      >
-        {teams.map(team => (
-          <option key={team.id} value={team.id}>
-            {team.name}
-          </option>
-        ))}
-      </Select>
       {isTeamError && (
         <div className="text-sm text-red-400">팀을 다시 선택해주세요!</div>
       )}