From 27a6b2637887909492fc97da98f22e2177241f7b Mon Sep 17 00:00:00 2001
From: Junho Jeon <junhjeon@c1r1s5.42seoul.kr>
Date: Thu, 9 Nov 2023 20:08:21 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20API=20=EB=B0=9B=EC=95=84=EC=98=A4?=
 =?UTF-8?q?=EB=8A=94=EA=B1=B0=20=EC=B6=94=EA=B0=80#1083?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/tournament/TournamentCard.tsx |  29 ++++++-
 pages/tournament.tsx                     | 103 ++++++++++++++++++-----
 2 files changed, 110 insertions(+), 22 deletions(-)

diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx
index 5af6c76e3..7a7622e65 100644
--- a/components/tournament/TournamentCard.tsx
+++ b/components/tournament/TournamentCard.tsx
@@ -1,4 +1,7 @@
-import { TournamentInfo } from 'types/modalTypes';
+import { totalmem } from 'os';
+import { useSetRecoilState } from 'recoil';
+import { TournamentInfo , Modal } from 'types/modalTypes';
+import { modalState } from 'utils/recoil/modal';
 import styles from 'styles/tournament/TournamentCard.module.scss';
 
 export default function TournamentCard({
@@ -12,8 +15,30 @@ export default function TournamentCard({
   winnerImage,
   endDate,
 }: TournamentInfo) {
+  const setModal = useSetRecoilState<Modal>(modalState);
+
+  const openTournamentInfoModal = () => {
+    setModal({
+      modalName: 'TOURNAMENT-REGISTRY',
+      tournamentInfo: {
+        tournametId: tournametId,
+        title: title,
+        contents: contents,
+        startDate: startDate,
+        status: status,
+        type: type,
+        winnerId: winnerId,
+        winnerImage: winnerImage,
+        endDate: endDate,
+      },
+    });
+  };
+
   return (
-    <div className={styles.tournamentCardContainer}>
+    <div
+      className={styles.tournamentCardContainer}
+      onClick={openTournamentInfoModal}
+    >
       <div className={styles.text}>{title}</div>
     </div>
   );
diff --git a/pages/tournament.tsx b/pages/tournament.tsx
index 5626b6070..eb5f92602 100644
--- a/pages/tournament.tsx
+++ b/pages/tournament.tsx
@@ -1,6 +1,8 @@
+import { useQuery } from 'react-query';
 import { useSetRecoilState } from 'recoil';
-import { Modal } from 'types/modalTypes';
-import { modalState } from 'utils/recoil/modal';
+import { TournamentInfo } from 'types/modalTypes';
+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';
 
@@ -21,7 +23,62 @@ const tempData = {
     },
     {
       tournametId: 6,
-      title: '6회 마스터 토너먼트',
+      title: '7회 마스터 토너먼트',
+      contents: '블라블라 하이하이',
+      startDate: '2023-11-12',
+      status: '진행중',
+      type: 'master',
+      winnerId: 'hannkim',
+      winnerImage: '',
+      endDate: '2023-11-12',
+    },
+    {
+      tournametId: 6,
+      title: '8회 마스터 토너먼트',
+      contents: '블라블라 하이하이',
+      startDate: '2023-11-12',
+      status: '진행중',
+      type: 'master',
+      winnerId: 'hannkim',
+      winnerImage: '',
+      endDate: '2023-11-12',
+    },
+    {
+      tournametId: 6,
+      title: '9회 마스터 토너먼트',
+      contents: '블라블라 하이하이',
+      startDate: '2023-11-12',
+      status: '진행중',
+      type: 'master',
+      winnerId: 'hannkim',
+      winnerImage: '',
+      endDate: '2023-11-12',
+    },
+    {
+      tournametId: 6,
+      title: '10회 마스터 토너먼트',
+      contents: '블라블라 하이하이',
+      startDate: '2023-11-12',
+      status: '진행중',
+      type: 'master',
+      winnerId: 'hannkim',
+      winnerImage: '',
+      endDate: '2023-11-12',
+    },
+    {
+      tournametId: 6,
+      title: '11회 마스터 토너먼트',
+      contents: '블라블라 하이하이',
+      startDate: '2023-11-12',
+      status: '진행중',
+      type: 'master',
+      winnerId: 'hannkim',
+      winnerImage: '',
+      endDate: '2023-11-12',
+    },
+    {
+      tournametId: 6,
+      title: '12회 마스터 토너먼트',
       contents: '블라블라 하이하이',
       startDate: '2023-11-12',
       status: '진행중',
@@ -35,24 +92,30 @@ const tempData = {
 };
 
 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>