Feat/진행중인 토너먼트의 내용 보여주기#1195 (#1202)

* [Style]] 토너먼트 카드 스타일 수정 #1195 * [Fix] 메인페이지와 토너먼트 페이지의 카드 토너먼트 통합 #1195 * [Fix] 공백 함수 대체 #1195 --------- Co-authored-by: Junho Jeon <[email protected]> Co-authored-by: Jincheol Park <[email protected]>
42organization · Dec 22, 2023 · c94cae2 · c94cae2
1 parent ed3e40c
commit c94cae2
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 60 deletions.
diff --git a/components/main/TournamentPreview/TournamentPreview.tsx b/components/main/TournamentPreview/TournamentPreview.tsx
@@ -2,6 +2,7 @@ import { useRouter } from 'next/router';
 import { useState, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { TournamentInfo } from 'types/tournamentTypes';
+import TournamentCard from 'components/tournament/TournamentCard';
 import useBeforeLiveTournamentData from 'hooks/tournament/useBeforeLiveTournamentData';
 import useInterval from 'hooks/useInterval';
 import styles from 'styles/main/TournamentPreview/TournamentPreview.module.scss';
@@ -40,13 +41,7 @@ export default function TournamentPreview() {
           data={data}
           ref={virtuoso}
           itemContent={(index) => (
-            <TournamentPreviewItem
-              id={data[index].tournamentId}
-              title={data[index].title}
-              startTime={data[index].startTime}
-              endTime={data[index].endTime}
-              status={data[index].status}
-            />
+            <TournamentCard {...data[index]} page='main' />
           )}
           style={{ height: '100%' }}
         />

diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx
@@ -195,16 +195,27 @@ export default function TournamentRegistryModal({
       />
       <div>
         <ModalButtonContainer>
-          <ModalButton
-            onClick={buttonHandler}
-            value={
-              playerCount === 8 && registState === 'BEFORE'
-                ? '대기 등록'
-                : buttonContent
-            }
-            style={'positive'}
-            isLoading={loading}
-          />
+          {status !== 'LIVE' ? (
+            <ModalButton
+              onClick={buttonHandler}
+              value={
+                playerCount === 8 && registState === 'BEFORE'
+                  ? '대기 등록'
+                  : buttonContent
+              }
+              style={'positive'}
+              isLoading={loading}
+            />
+          ) : (
+            <ModalButton
+              onClick={() => {
+                console.log('토너먼트가 진행중 입니다.');
+              }}
+              value={'진행중...'}
+              style={'positive'}
+              isLoading={loading}
+            />
+          )}
         </ModalButtonContainer>
       </div>
     </div>

diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx
@@ -21,7 +21,8 @@ export default function TournamentCard({
   winnerIntraId,
   winnerImageUrl,
   player_cnt,
-}: TournamentInfo) {
+  page,
+}: TournamentInfo & { page: string }) {
   const modal = useRecoilValue(modalState);
   const setModal = useSetRecoilState<Modal>(modalState);
   const [registState, setRegistState] = useState<string>('로딩중');
@@ -82,26 +83,36 @@ export default function TournamentCard({
   const isFull = playerCount === 8 ? 'full' : 'notFull';
 
   const userState: Record<string, string> = {
-    BEFORE: '미 참여',
+    BEFORE: '참여하기!',
     PLAYER: '참여 중',
     WAIT: '대기 중',
   };
 
   return (
     <div
-      className={styles.tournamentCardContainer}
-      onClick={openTournamentInfoModal}
+      className={`${styles.tournamentCard} ${styles[page]}`}
+      onClick={page !== 'main' ? openTournamentInfoModal : undefined}
     >
       <div className={styles.text}>
         <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>
+            {page === 'tournament' ? (
+              <>
+                <div className={`${styles.participants} ${styles[isFull]}`}>
+                  <MdPeopleAlt /> {playerCount} / 8
+                </div>
+                <div className={`${styles.playerState} ${styles[registState]}`}>
+                  {userState[registState]}
+                </div>
+              </>
+            ) : (
+              <>
+                <div className={`${styles.gameState} ${styles[status]}`}>
+                  {status === 'LIVE' ? '경기 중' : '예정'}
+                </div>
+              </>
+            )}
           </div>
         </div>
         <div className={styles.time}>

diff --git a/pages/tournament.tsx b/pages/tournament.tsx
@@ -92,24 +92,42 @@ export default function Tournament() {
             예정된 토너먼트가 없습니다.
           </h4>
         ) : (
-          waitInfo.data?.tournaments.map((tournament) => (
-            <div className={styles.cardContainer} key={tournament.tournamentId}>
-              <TournamentCard key={tournament.tournamentId} {...tournament} />
-            </div>
-          ))
+          <div className={styles.tournamentCardContainer}>
+            {waitInfo.data?.tournaments.map((tournament) => (
+              <div
+                className={styles.cardContainer}
+                key={tournament.tournamentId}
+              >
+                <TournamentCard
+                  key={tournament.tournamentId}
+                  {...tournament}
+                  page='tournament'
+                />
+              </div>
+            ))}
+          </div>
         )}
         <div className={styles.tournamentText}> 진행중인 토너먼트 </div>
         {openInfo.data && openInfo.data.tournaments?.length === 0 ? (
           <div className={styles.noTournamentText}>
             진행중인 토너먼트가 없습니다
           </div>
         ) : (
-          <div className={styles.openTournamentBox} ref={containerRef}>
-            <TournamentBraket
-              singleEliminationBracketMatchs={openTournament}
-              containerSize={containerSize}
-            />
-          </div>
+          <>
+            {openInfo.data?.tournaments[0].tournamentId && (
+              <TournamentCard
+                key={openInfo.data?.tournaments[0].tournamentId}
+                {...openInfo.data?.tournaments[0]}
+                page='tournament/playing'
+              />
+            )}
+            <div className={styles.openTournamentBox} ref={containerRef}>
+              <TournamentBraket
+                singleEliminationBracketMatchs={openTournament}
+                containerSize={containerSize}
+              />
+            </div>
+          </>
         )}
       </div>
     </div>

diff --git a/styles/tournament/TournamentCard.module.scss b/styles/tournament/TournamentCard.module.scss
@@ -1,72 +1,93 @@
-.tournamentCardContainer {
+@mixin tag-style {
   display: flex;
-  height: 100%;
-  padding: 0 1rem;
-  margin-top: 0.5rem;
-  overflow-y: scroll;
-  cursor: pointer;
-  background: #7816e1;
+  padding: 0.3rem;
   border-radius: 0.5rem;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
   align-items: center;
+  justify-content: center;
+}
+
+.tournamentCard {
+  height: 5rem;
+  padding: 1rem;
+  cursor: pointer;
+  &.tournament {
+    background: #8034f7;
+  }
+  &.tournament\/playing {
+    background: #8034f7;
+  }
+  border-radius: 1rem;
 
   .text {
     display: flex;
     width: 100%;
     flex-direction: column;
-    padding-top: 0.5rem;
+    justify-content: flex-start;
+    gap: 0.5rem;
     color: white;
-    justify-content: space-between;
 
     .up {
       display: flex;
       flex-direction: row;
-      margin-bottom: 0.5rem;
-      justify-content: space-between;
+      justify-items: flex-start;
+      gap: 1rem;
 
       .title {
+        max-width: 55%;
         padding: 0.2rem;
         overflow: hidden;
+        font-size: 1rem;
+        font-weight: bold;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
 
       .tag {
         display: flex;
         flex-direction: row;
+        justify-content: flex-start;
+        gap: 0.5rem;
+        font-size: small;
 
-        .state {
-          padding: 0.2rem 0.5rem;
-          margin-right: 1rem;
-          border-radius: 0.5rem;
+        .playerState {
+          @include tag-style;
           &.PLAYER {
             background-color: rgb(75, 183, 75);
           }
           &.WAIT {
             background-color: rgb(216, 170, 42);
           }
           &.BEFORE {
-            background-color: #949393;
+            background-color: #cc5af5;
+          }
+        }
+
+        .gameState {
+          @include tag-style;
+          &.LIVE {
+            background-color: rgb(251, 56, 56);
+          }
+          &.BEFORE {
+            background-color: green;
           }
         }
 
         .participants {
-          padding: 0.2rem 0.5rem;
-          margin-right: 1rem;
-          border-radius: 0.5rem;
+          @include tag-style;
           &.full {
             background-color: red;
           }
           &.notFull {
-            background-color: blue;
+            background-color: rgb(44, 44, 249);
           }
         }
       }
     }
+
     .time {
       display: flex;
-      padding-bottom: 0.5rem;
       font-size: 0.7rem;
+      color: yellow;
       justify-content: flex-start;
       gap: 0.5rem;
     }

diff --git a/styles/tournament/TournamentContainer.module.scss b/styles/tournament/TournamentContainer.module.scss
@@ -17,13 +17,21 @@
   height: 60vh;
   flex: 15;
   flex-direction: column;
+  margin-top: 1rem;
   overflow-x: scroll;
   overflow-y: scroll;
   background: rgba(112, 0, 255, 0.17);
   border: 1px solid #c67dff;
   border-radius: 0.3rem;
 }
 
+.tournamentCardContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+
 .tournamentText {
   display: flex;
   flex: 1;