[Fix] 토너먼트 card style 수정#1159

components/modal/tournament/TournamentRegistryModal.tsx

@@ -8,7 +8,6 @@ import { instance } from 'utils/axios';
 import { dateToKRLocaleTimeString } from 'utils/handleTime';
 import { errorState } from 'utils/recoil/error';
 import { modalState } from 'utils/recoil/modal';
-import { toastState } from 'utils/recoil/toast';
 import {
   ModalButtonContainer,
   ModalButton,
@@ -31,7 +30,6 @@ export default function TournamentRegistryModal({
   player_cnt,
   tournamentId,
 }: TournamentInfo) {
-  const setSnackbar = useSetRecoilState(toastState);
   const setModal = useSetRecoilState(modalState);
   const setError = useSetRecoilState(errorState);
   const [registState, setRegistState] = useState<string>('LOADING');
@@ -44,12 +42,13 @@ export default function TournamentRegistryModal({
     return instance
       .post(`/pingpong/tournaments/${tournamentId}/users`)
       .then((res) => {
-        alert('토너먼트 신청이 완료됐습니다');
-        setModal({ modalName: null });
+        // alert('토너먼트 신청이 완료됐습니다');
+        setLoading(false);
+        setRegistState(res.data.status);
         return res.data.status;
       })
       .catch((error) => {
-        alert('토너먼트 신청 중 에러가 발생했습니다.');
+        setError('토너먼트 신청 중 에러가 발생했습니다.');
         setLoading(false);
       });
   }, []);
@@ -60,15 +59,17 @@ export default function TournamentRegistryModal({
       .delete(`/pingpong/tournaments/${tournamentId}/users`)
       .then((res) => {
         if (registState === 'WAIT') {
-          alert('토너먼트 대기가 취소 되었습니다');
+          // alert('토너먼트 대기가 취소 되었습니다');
         } else {
-          alert('토너먼트 등록이 취소 되었습니다');
+          // setPlayerCount(playerCount - 1);
+          // alert('토너먼트 등록이 취소 되었습니다');
         }
-        setModal({ modalName: null });
+        setRegistState(res.data.status);
+        setLoading(false);
         return res.data.status;
       })
       .catch((error) => {
-        alert('토너먼트 등록취소 중 에러가 발생했습니다');
+        setError('토너먼트 등록취소 중 에러가 발생했습니다');
         setLoading(false);
       });
   }, []);
@@ -85,12 +86,29 @@ export default function TournamentRegistryModal({
       });
   }, []);
 
+  const getTournamentInfo = useCallback(() => {
+    return instance
+      .get(`/pingpong/tournaments/${tournamentId}`)
+      .then((res) => {
+        setPlayerCount(res.data.player_cnt);
+        return res.data.player_cnt;
+      })
+      .catch((error) => {
+        setError('JJH2');
+      });
+  }, [tournamentId]);
+
   useEffect(() => {
+    getTournamentInfo();
     getStatus();
     const date = new Date(startTime);
     setOpenDate(dateToKRLocaleTimeString(date));
   }, []);
 
+  useEffect(() => {
+    getTournamentInfo();
+  }, [registState]);
+
   const closeModalButtonHandler = () => {
     setModal({ modalName: null });
   };

components/tournament/TournamentCard.tsx

@@ -1,9 +1,12 @@
-import { useSetRecoilState } from 'recoil';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { BiCalendar } from 'react-icons/bi';
 import { MdPeopleAlt } from 'react-icons/md';
 import { Modal } from 'types/modalTypes';
 import { TournamentInfo } from 'types/tournamentTypes';
-import { dateToString } from 'utils/handleTime';
+import { instance } from 'utils/axios';
+import { dateToKRLocaleTimeString } from 'utils/handleTime';
+import { errorState } from 'utils/recoil/error';
 import { modalState } from 'utils/recoil/modal';
 import styles from 'styles/tournament/TournamentCard.module.scss';
 
@@ -19,7 +22,11 @@ export default function TournamentCard({
   winnerImageUrl,
   player_cnt,
 }: TournamentInfo) {
+  const modal = useRecoilValue(modalState);
   const setModal = useSetRecoilState<Modal>(modalState);
+  const [registState, setRegistState] = useState<string>('로딩중');
+  const [playerCount, setPlayerCount] = useState<number>(player_cnt);
+  const setError = useSetRecoilState(errorState);
 
   const openTournamentInfoModal = () => {
     setModal({
@@ -39,22 +46,70 @@ export default function TournamentCard({
     });
   };
 
-  const date = new Date(startTime);
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const il = date.getDate();
-  const start = `${year}.${month}.${il}`;
+  const getTournamentInfo = useCallback(() => {
+    return instance
+      .get(`/pingpong/tournaments/${tournamentId}`)
+      .then((res) => {
+        setPlayerCount(res.data.player_cnt);
+        return res.data.player_cnt;
+      })
+      .catch((error) => {
+        setError('JJH2');
+      });
+  }, [tournamentId]);
+
+  useEffect(() => {
+    getTournamentInfo();
+    getStatus();
+  }, [modal]);
+
+  const getStatus = useCallback(() => {
+    return instance
+      .get(`/pingpong/tournaments/${tournamentId}/users`)
+      .then((res) => {
+        setRegistState(res.data.status);
+        return res.data.status;
+      })
+      .catch((error) => {
+        setError('JJH2');
+      });
+  }, []);
+
+  const start = dateToKRLocaleTimeString(new Date(startTime));
+  const end = dateToKRLocaleTimeString(new Date(endTime));
+  const isFull = playerCount === 8 ? 'full' : 'notFull';
+
+  const userState: Record<string, string> = {
+    BEFORE: '미 참여',
+    PLAYER: '참여 중',
+    WAIT: '대기 중',
+  };
 
   return (
     <div
       className={styles.tournamentCardContainer}
       onClick={openTournamentInfoModal}
     >
       <div className={styles.text}>
-        <div className={styles.left}>{title}</div>
-        <MdPeopleAlt /> {player_cnt} / 8
-        <div className={styles.right}>
-          <BiCalendar /> {start}
+        <div className={styles.up}>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.tag}>
+            <div className={`${styles.participants} ${styles[isFull]}`}>
+              <MdPeopleAlt /> {playerCount} / 8
+            </div>
+            <div className={`${styles.state} ${styles[registState]}`}>
+              {userState[registState]}
+            </div>
+          </div>
+        </div>
+        <div className={styles.time}>
+          <time>
+            <BiCalendar /> {start}
+          </time>
+          ~
+          <time>
+            <BiCalendar /> {end}
+          </time>
         </div>
       </div>
     </div>

pages/tournament.tsx

@@ -23,7 +23,6 @@ export default function Tournament() {
       instance
         .get('/pingpong/tournaments?size=20&page=1&status=LIVE')
         .then((res) => {
-          console.log(res.data.tournaments[0].tournamentId);
           setOpenTournamentId(res.data.tournaments[0].tournamentId);
           return res.data;
         }),

styles/tournament/TournamentCard.module.scss

@@ -1,33 +1,79 @@
 .tournamentCardContainer {
   display: flex;
-  height: 3.5rem;
+  height: 100%;
   padding: 0 1rem;
   margin-top: 0.5rem;
   overflow-y: scroll;
   cursor: pointer;
-  background: linear-gradient(to bottom, #7816e1, #9e35db);
+  background: #7816e1;
   border-radius: 0.5rem;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
   align-items: center;
 
   .text {
     display: flex;
     width: 100%;
+    flex-direction: column;
+    padding-top: 0.5rem;
     color: white;
     justify-content: space-between;
 
-    .left {
-      flex: 2;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      // text-align: left;
-    }
+    .up {
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 0.5rem;
+      justify-content: space-between;
+
+      .title {
+        padding: 0.2rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .tag {
+        display: flex;
+        flex-direction: row;
 
-    .right {
-      flex: 1;
+        .state {
+          padding: 0.2rem 0.5rem;
+          margin-right: 1rem;
+          border-radius: 0.5rem;
+          &.PLAYER {
+            background-color: rgb(75, 183, 75);
+          }
+          &.WAIT {
+            background-color: rgb(216, 170, 42);
+          }
+          &.BEFORE {
+            background-color: #949393;
+          }
+        }
+
+        .participants {
+          padding: 0.2rem 0.5rem;
+          margin-right: 1rem;
+          border-radius: 0.5rem;
+          &.full {
+            background-color: red;
+          }
+          &.notFull {
+            background-color: blue;
+          }
+        }
+      }
+    }
+    .time {
+      display: flex;
+      padding-bottom: 0.5rem;
       font-size: 0.8rem;
-      // text-align: right;
+      justify-content: space-evenly;
+      .start {
+        color: green;
+      }
+      .end {
+        color: red;
+      }
     }
   }
 }