[Feat]토너먼트 type 통일 #1084

42organization · Nov 10, 2023 · 263ef73 · 263ef73
2 parents fef6309 + 817b1f4
commit 263ef73
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 63 deletions.
diff --git a/components/admin/tournament/TournamentList.tsx b/components/admin/tournament/TournamentList.tsx
@@ -36,11 +36,12 @@ const tableTitle: { [key: string]: string } = {
 };
 
 const smapleTournamentList: ITournament[] = Array.from({ length: 10 }, () => ({
-  tournamentName: '샘플토너먼트제목',
+  title: '샘플토너먼트제목',
   content: '샘플내용',
   startTime: new Date(),
   endTime: new Date(),
   tournamentType: 'CUSTOM',
+  count: 7,
 }));
 
 export default function TournamentList() {

diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx
@@ -1,7 +1,7 @@
 import dynamic from 'next/dynamic';
 import { useSetRecoilState } from 'recoil';
-import { TournamentInfo } from 'types/modalTypes';
 import { QUILL_FORMATS } from 'types/quillTypes';
+import { TournamentInfo } from 'types/tournamentTypes';
 import { modalState } from 'utils/recoil/modal';
 import {
   ModalButtonContainer,
@@ -18,12 +18,10 @@ const Quill = dynamic(() => import('react-quill'), {
 export default function TournamentRegistryModal({
   title,
   contents,
-  startDate,
+  startTime,
   status,
   type,
-  winnerId,
-  winnerImage,
-  endDate,
+  endTime,
 }: TournamentInfo) {
   const setModal = useSetRecoilState(modalState);
 
@@ -38,7 +36,7 @@ export default function TournamentRegistryModal({
   return (
     <div className={styles.container}>
       <div className={styles.title}>{title}</div>
-      <div className={styles.title}>{startDate}</div>
+      <div className={styles.title}>{startTime.toString()}</div>
       <Quill
         className={styles.quillViewer}
         readOnly={true}

diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx
@@ -1,16 +1,15 @@
-import { TournamentInfo } from 'types/modalTypes';
+import { TournamentInfo } from 'types/tournamentTypes';
 import styles from 'styles/tournament/TournamentCard.module.scss';
 
 export default function TournamentCard({
-  tournametId,
+  tournamentId,
   title,
   contents,
-  startDate,
   status,
   type,
-  winnerId,
-  winnerImage,
-  endDate,
+  winnerUser,
+  startTime,
+  endTime,
 }: TournamentInfo) {
   return (
     <div className={styles.tournamentCardContainer}>

diff --git a/pages/tournament.tsx b/pages/tournament.tsx
@@ -1,58 +1,113 @@
+import { useQuery } from 'react-query';
 import { useSetRecoilState } from 'recoil';
-import { Modal } from 'types/modalTypes';
-import { modalState } from 'utils/recoil/modal';
+import { TournamentInfo } from 'types/tournamentTypes';
+import { instance } from 'utils/axios';
+import { errorState } from 'utils/recoil/error';
 import TournamentCard from 'components/tournament/TournamentCard';
 import styles from 'styles/tournament/TournamentContainer.module.scss';
 
+//나중에 삭제 필요
+interface TempData {
+  tournaments: TournamentInfo[];
+  totalPage: number;
+}
+
 // 내부의 토너먼트 보여주는 부분만 Component화 하면될까? 다른곳에서도 쓰일까?
 // 진행중인 토너먼트의 Bracket을 보여주는 부분도 다른곳에서도 쓸수있지않나?
-const tempData = {
+const tempData: TempData = {
   tournaments: [
     {
-      tournametId: 5,
+      tournamentId: 5,
       title: '5회 루키 토너먼트',
       contents: '블라블라',
-      startDate: '2023-11-11',
+      startTime: new Date(),
       status: '종료',
-      type: 'rookie',
-      winnerId: 'hannkim',
-      winnerImage: '',
-      endDate: '2023-11-11',
+      type: 'ROOKIE',
+      endTime: new Date(),
+    },
+    {
+      tournamentId: 6,
+      title: '7회 마스터 토너먼트',
+      contents: '블라블라 하이하이',
+      startTime: new Date(),
+      status: '진행중',
+      type: 'MASTER',
+      endTime: new Date(),
+    },
+    {
+      tournamentId: 6,
+      title: '8회 마스터 토너먼트',
+      contents: '블라블라 하이하이',
+      startTime: new Date(),
+      status: '진행중',
+      type: 'MASTER',
+      endTime: new Date(),
+    },
+    {
+      tournamentId: 6,
+      title: '9회 마스터 토너먼트',
+      contents: '블라블라 하이하이',
+      startTime: new Date(),
+      status: '진행중',
+      type: 'MASTER',
+      endTime: new Date(),
     },
     {
-      tournametId: 6,
-      title: '6회 마스터 토너먼트',
+      tournamentId: 6,
+      title: '10회 마스터 토너먼트',
       contents: '블라블라 하이하이',
-      startDate: '2023-11-12',
+      startTime: new Date(),
       status: '진행중',
-      type: 'master',
-      winnerId: 'hannkim',
-      winnerImage: '',
-      endDate: '2023-11-12',
+      type: 'MASTER',
+      endTime: new Date(),
+    },
+    {
+      tournamentId: 6,
+      title: '11회 마스터 토너먼트',
+      contents: '블라블라 하이하이',
+      startTime: new Date(),
+      status: '진행중',
+      type: 'MASTER',
+      endTime: new Date(),
+    },
+    {
+      tournamentId: 6,
+      title: '12회 마스터 토너먼트',
+      contents: '블라블라 하이하이',
+      startTime: new Date(),
+      status: '진행중',
+      type: 'MASTER',
+      endTime: new Date(),
     },
   ],
   totalPage: 100,
 };
 
 export default function Tournament() {
-  const setModal = useSetRecoilState<Modal>(modalState);
+  const setError = useSetRecoilState(errorState);
+
+  const openTorunamentInfo = useQuery<TournamentInfo>(
+    'openTorunamentInfo',
+    () =>
+      instance
+        .get('pingpong/tournaments?page=*&type=*&status=진행중')
+        .then((res) => res.data),
+    { retry: 1, staleTime: 60000 /* 60초 */ }
+  );
+
+  const waitTournamentInfo = useQuery<TournamentInfo>(
+    'waitTournamentInfo',
+    () =>
+      instance
+        .get('pingpong/tournaments?page=*&type=*&status=예정')
+        .then((res) => res.data),
+    { retry: 1, staleTime: 60000 /* 60초 */ }
+  );
+
+  if (openTorunamentInfo.isError || waitTournamentInfo.isError) {
+    setError('junhjeon');
+  }
 
-  const handleTournament = () => {
-    setModal({
-      modalName: 'TOURNAMENT-REGISTRY',
-      tournamentInfo: {
-        tournametId: 5,
-        title: '5회 루키 토너먼트',
-        contents: '블라블라',
-        startDate: '2023-11-11',
-        status: '종료',
-        type: 'rookie',
-        winnerId: 'hannkim',
-        winnerImage: '',
-        endDate: '2023-11-11',
-      },
-    });
-  };
   return (
     <div className={styles.pageWrap}>
       <h1 className={styles.title}>Tournament</h1>

diff --git a/types/admin/adminTournamentTypes.ts b/types/admin/adminTournamentTypes.ts
@@ -1,9 +1,10 @@
 export interface ITournament {
-  tournamentName: string;
-  content: string;
-  startTime: Date;
-  endTime: Date;
-  tournamentType: 'CUSTOM' | 'ROOKIE' | 'MASTER';
+  title: string; //제목
+  content: string; //내용
+  startTime: Date; //시작시간
+  endTime: Date; // 종료시간
+  tournamentType: 'CUSTOM' | 'ROOKIE' | 'MASTER'; //토너먼트 타입
+  count?: number; //참여인원 (최대참여인원 8명 fix)
 }
 
 export interface ITournamentTable {

diff --git a/types/modalTypes.ts b/types/modalTypes.ts
@@ -11,6 +11,7 @@ import { MatchMode } from 'types/mainType';
 import { ISeason } from 'types/seasonTypes';
 import { StoreManualMode } from 'types/storeTypes';
 import { ICoin } from 'types/userTypes';
+import { TournamentInfo } from './tournamentTypes';
 
 type EventModal = 'WELCOME' | 'ANNOUNCEMENT';
 
@@ -92,18 +93,6 @@ export interface Manual {
   radioMode: MatchMode;
 }
 
-export interface TournamentInfo {
-  tournametId: number;
-  title: string;
-  contents: string;
-  startDate: string;
-  status: string;
-  type: string;
-  winnerId: string;
-  winnerImage?: string | null;
-  endDate: string;
-}
-
 export interface PriceTag {
   itemId: number;
   product: string;

diff --git a/types/tournamentTypes.ts b/types/tournamentTypes.ts
@@ -0,0 +1,12 @@
+import { IUser } from './admin/adminUserTypes';
+
+export interface TournamentInfo {
+  tournamentId: number;
+  title: string;
+  contents: string;
+  status: string; // 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | 'DONE' | 'SCORE_DONE'
+  type: 'CUSTOM' | 'MASTER' | 'ROOKIE';
+  winnerUser?: IUser;
+  startTime: Date;
+  endTime: Date;
+}