[FIX] 타입들을 사용하는 곳에서 변경된 내용들을 수정 #1084

42organization · Nov 10, 2023 · 817b1f4 · 817b1f4
1 parent a5146a6
commit 817b1f4
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 39 deletions.
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/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>