Feat/토너먼트 게임 정보 mock api #1102

components/admin/tournament/TournamentList.tsx

@@ -14,6 +14,7 @@ import {
   ITournamentTable,
 } from 'types/admin/adminTournamentTypes';
 import { TournamentInfo } from 'types/tournamentTypes';
+import { mockInstance } from 'utils/mockAxios';
 import { modalState } from 'utils/recoil/modal';
 import { tableFormat } from 'constants/admin/table';
 import {
@@ -32,22 +33,13 @@ const Quill = dynamic(() => import('react-quill'), {
 
 const tableTitle: { [key: string]: string } = {
   title: '토너먼트 이름',
-  content: '토너먼트 내용',
+  contents: '토너먼트 내용',
   startTime: '시작 시간',
   endTime: '종료 시간',
-  tournamentType: '토너먼트 타입',
+  type: '토너먼트 타입',
   edit: '수정하기',
 };
 
-const smapleTournamentList: ITournament[] = Array.from({ length: 10 }, () => ({
-  title: '샘플토너먼트제목',
-  content: '샘플내용',
-  startTime: new Date(),
-  endTime: new Date(),
-  tournamentType: 'CUSTOM',
-  count: 7,
-}));
-
 export default function TournamentList() {
   const setModal = useSetRecoilState(modalState);
   const [tournamentInfo, setTournamentInfo] = useState<ITournamentTable>({
@@ -58,14 +50,12 @@ export default function TournamentList() {
 
   const [currentPage, setCurrentPage] = useState<number>(1);
 
-  const getTournaments = useCallback(async () => {
+  const fetchTournaments = useCallback(async () => {
     try {
-      // const res = await instanceInManage.get(
-      //   `/announcement?page=${currentPage}&size=3`
-      // );
+      const res = await mockInstance.get(`/tournament?page=${currentPage}`);
       setTournamentInfo({
-        tournamentList: smapleTournamentList, //res.data.tournamentList,
-        totalPage: 10, //res.data.totalPage,
+        tournamentList: res.data.tournaments,
+        totalPage: res.data.totalPage,
         currentPage: currentPage,
       });
     } catch (e) {
@@ -74,8 +64,8 @@ export default function TournamentList() {
   }, [currentPage]);
 
   useEffect(() => {
-    getTournaments();
-  }, [getTournaments]);
+    fetchTournaments();
+  }, [fetchTournaments]);
 
   return (
     <div className={styles.container}>
@@ -109,6 +99,7 @@ export default function TournamentList() {
                                   onClick={() => {
                                     setModal({
                                       modalName: 'ADMIN-TOURNAMENT_BRAKET_EDIT',
+                                      tournament: tournament,
                                     });
                                   }}
                                 >

components/modal/admin/AdminEditTournamentBraket.tsx

@@ -1,131 +1,37 @@
 import { Match } from '@g-loot/react-tournament-brackets/dist/src/types';
+import { useCallback, useEffect, useState } from 'react';
+import { ITournament } from 'types/admin/adminTournamentTypes';
+import { TournamentGame, TournamentInfo } from 'types/tournamentTypes';
+import { convertTournamentGamesToBracketMatchs } from 'utils/handleTournamentGame';
+import { mockInstance } from 'utils/mockAxios';
 import TournamentBraket from 'components/tournament/TournamentBraket';
 import styles from 'styles/admin/modal/AdminEditTournamentBraket.module.scss';
 
-export const simpleSmallBracket: Match[] = [
-  {
-    id: 19753,
-    nextMatchId: null,
-    tournamentRoundText: '3',
-    startTime: '2021-05-30',
-    state: 'SCHEDULED',
-    participants: [],
-  },
-  {
-    id: 19754,
-    nextMatchId: 19753,
-    tournamentRoundText: '2',
-    startTime: '2021-05-30',
-    state: 'SCHEDULED',
-    participants: [
-      {
-        id: '14754a1a-932c-4992-8dec-f7f94a339960',
-        resultText: null,
-        isWinner: false,
-        status: null,
-        name: 'CoKe BoYz',
-        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
-      },
-    ],
-  },
-  {
-    id: 19755,
-    nextMatchId: 19754,
-    tournamentRoundText: '1',
-    startTime: '2021-05-30',
-    state: 'SCORE_DONE',
-    participants: [
-      {
-        id: '14754a1a-932c-4992-8dec-f7f94a339960',
-        resultText: 'Won',
-        isWinner: true,
-        status: 'PLAYED',
-        name: 'CoKe BoYz',
-        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
-      },
-      {
-        id: 'd16315d4-7f2d-427b-ae75-63a1ae82c0a8',
-        resultText: 'Lost',
-        isWinner: false,
-        status: 'PLAYED',
-        name: 'Aids Team',
-        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
-      },
-    ],
-  },
-  {
-    id: 19756,
-    nextMatchId: 19754,
-    tournamentRoundText: '1',
-    startTime: '2021-05-30',
-    state: 'RUNNING',
-    participants: [
-      {
-        id: 'd8b9f00a-0ffa-4527-8316-da701894768e',
-        resultText: null,
-        isWinner: false,
-        status: null,
-        name: 'Art of kill',
-        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
-      },
-    ],
-  },
-  {
-    id: 19757,
-    nextMatchId: 19753,
-    tournamentRoundText: '2',
-    startTime: '2021-05-30',
-    state: 'SCHEDULED',
-    participants: [],
-  },
-  {
-    id: 19758,
-    nextMatchId: 19757,
-    tournamentRoundText: '1',
-    startTime: '2021-05-30',
-    state: 'SCHEDULED',
-    participants: [
-      {
-        id: '9397971f-4b2f-44eb-a094-722eb286c59b',
-        resultText: null,
-        isWinner: false,
-        status: null,
-        name: 'Crazy Pepes',
-        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
-      },
-    ],
-  },
-  {
-    id: 19759,
-    nextMatchId: 19757,
-    tournamentRoundText: '1',
-    startTime: '2021-05-30',
-    state: 'SCHEDULED',
-    participants: [
-      {
-        id: '42fecd89-dc83-4821-80d3-718acb50a30c',
-        resultText: null,
-        isWinner: false,
-        status: null,
-        name: 'BLUEJAYS',
-        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
-      },
-      {
-        id: 'df01fe2c-18db-4190-9f9e-aa63364128fe',
-        resultText: null,
-        isWinner: false,
-        status: null,
-        name: 'Bosphorus',
-        picture: 'teamlogos/r7zn4gr8eajivapvjyzd',
-      },
-    ],
-  },
-];
+export default function AdminEditTournamentBraket({
+  tournamentId,
+}: ITournament) {
+  const [bracketMatchs, setBracketMatchs] = useState<Match[]>([]);
+
+  const fetchTournamentGames = useCallback(async () => {
+    console.log('Fetching more data...');
+    try {
+      const res = await mockInstance.get(`/tournament/${tournamentId}/games`);
+      const data: TournamentGame[] = res.data.games;
+      const bracketMatchs = convertTournamentGamesToBracketMatchs(data);
+      setBracketMatchs(bracketMatchs);
+      return data;
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchTournamentGames();
+  }, [fetchTournamentGames]);
 
-export default function AdminEditTournamentBraket() {
   return (
     <div className={styles['whole']}>
-      <TournamentBraket singleEliminationBracketMatchs={simpleSmallBracket} />
+      <TournamentBraket singleEliminationBracketMatchs={bracketMatchs} />
     </div>
   );
 }

components/modal/modalType/AdminModal.tsx

@@ -31,7 +31,7 @@ export default function AdminModal() {
     profile,
     item,
     coinPolicy,
-    tournamentInfo,
+    tournament,
   } = useRecoilValue(modalState);
 
   const content: { [key: string]: JSX.Element | null } = {
@@ -78,7 +78,9 @@ export default function AdminModal() {
     'ADMIN-COINPOLICY_EDIT': coinPolicy ? (
       <AdminEditCoinPolicyModal {...coinPolicy} />
     ) : null,
-    'ADMIN-TOURNAMENT_BRAKET_EDIT': <AdminEditTournamentBraket />,
+    'ADMIN-TOURNAMENT_BRAKET_EDIT': tournament ? (
+      <AdminEditTournamentBraket {...tournament} />
+    ) : null,
   };
 
   if (!modalName) return null;

components/tournament-record/WinnerSwiper.tsx

@@ -93,4 +93,4 @@ const WinnerSwiper = forwardRef(
 // forwardRef에 들어가는 익명함수에 대한 name
 WinnerSwiper.displayName = 'WinnerSwiper';
 
-export default WinnerSwiper;
+export default WinnerSwiper;

components/tournament/TournamentBraket.tsx

@@ -38,6 +38,8 @@ interface TournamentBraketProps {
 export default function TournamentBraket({
   singleEliminationBracketMatchs,
 }: TournamentBraketProps) {
+  if (singleEliminationBracketMatchs.length === 0)
+    return <h1 style={{ color: 'white' }}>Loading...</h1>;
   // const [width, height] = useWindowSize();
   const finalWidth = 500; //Math.max(width - 50, 500);
   const finalHeight = 500; //Math.max(height - 100, 500);

components/tournament/TournamentMatch.tsx

@@ -32,7 +32,6 @@ function TournamentMatchParty({
       <div className={styles.partyName}>{party.name || teamNameFallback}</div>
       <div className={styles.score}>
         {party.resultText ?? resultFallback(party)}
-        {/* <input value={topParty.resultText ?? resultFallback(topParty)} /> */}
       </div>
     </div>
   );

constants/admin/table.ts

@@ -152,14 +152,7 @@ export const tableFormat: TableFormat = {
   },
   tournament: {
     name: '토너먼트',
-    columns: [
-      'title',
-      'content',
-      'startTime',
-      'endTime',
-      'tournamentType',
-      'edit',
-    ],
+    columns: ['title', 'contents', 'startTime', 'endTime', 'type', 'edit'],
   },
   tournamentCreate: {
     name: '토너먼트 생성',

pages/api/pingpong/tournament/[tournamentId]/games/dummyTournamentGame.ts

@@ -0,0 +1,102 @@
+import { TournamentGame } from 'types/tournamentTypes';
+
+export const dummyLiveTournamentGames = {
+  games: [
+    {
+      tournamentGameId: 19753,
+      game: null,
+      status: 'SCHEDULED',
+      nextTournamentGameId: null,
+    },
+    {
+      tournamentGameId: 19754,
+      game: null,
+      status: 'SCHEDULED',
+      nextTournamentGameId: 19753,
+    },
+    {
+      tournamentGameId: 19755,
+      game: {
+        gameId: 1,
+        status: 'END',
+        mode: 'TOURNAMENT',
+        time: '13',
+        team1: {
+          players: [
+            {
+              intraId: 'CoKe BoYz',
+              userImageUri:
+                'https://avatars.githubusercontent.com/u/93255519?v=4',
+              level: 3,
+            },
+          ],
+          isWin: true,
+          score: 2,
+        },
+        team2: {
+          players: [
+            {
+              intraId: 'Aids Team',
+              userImageUri:
+                'https://avatars.githubusercontent.com/u/93255519?v=4',
+              level: 3,
+            },
+          ],
+          isWin: false,
+          score: 1,
+        },
+      },
+      status: 'SCORE_DONE',
+      nextTournamentGameId: 19754,
+    },
+    {
+      tournamentGameId: 19756,
+      nextTournamentGameId: 19754,
+      status: 'RUNNING',
+      game: null,
+    },
+    {
+      tournamentGameId: 19757,
+      nextTournamentGameId: 19753,
+      status: 'SCHEDULED',
+      game: null,
+    },
+    {
+      tournamentGameId: 19758,
+      nextTournamentGameId: 19757,
+      status: 'SCHEDULED',
+      game: null,
+    },
+    {
+      tournamentGameId: 19759,
+      nextTournamentGameId: 19757,
+      status: 'SCHEDULED',
+      game: {
+        gameId: 1,
+        status: 'LIVE',
+        mode: 'TOURNAMENT',
+        time: '13',
+        team1: {
+          players: [
+            {
+              intraId: 'BLUEJAYS',
+              userImageUri:
+                'https://avatars.githubusercontent.com/u/93255519?v=4',
+              level: 3,
+            },
+          ],
+        },
+        team2: {
+          players: [
+            {
+              intraId: 'Bosphorus',
+              userImageUri:
+                'https://avatars.githubusercontent.com/u/93255519?v=4',
+              level: 3,
+            },
+          ],
+        },
+      },
+    },
+  ],
+};