[Feat] API 받아오는거 추가#1083

42organization · Nov 9, 2023 · 27a6b26 · 27a6b26
1 parent 30ce63f
commit 27a6b26
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 22 deletions.
diff --git 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
@@ -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>