From c1b7822d02a7e537024f0007f18ac56cc64a6e8d Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Thu, 21 Dec 2023 21:08:13 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[Style]]=20=ED=86=A0=EB=84=88=EB=A8=BC?= =?UTF-8?q?=ED=8A=B8=20=EC=B9=B4=EB=93=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20#1195?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/tournament/TournamentCard.module.scss | 65 ++++++++++++------- .../TournamentContainer.module.scss | 8 +++ 2 files changed, 51 insertions(+), 22 deletions(-) diff --git a/styles/tournament/TournamentCard.module.scss b/styles/tournament/TournamentCard.module.scss index 4c2c8c9f8..1d127047b 100644 --- a/styles/tournament/TournamentCard.module.scss +++ b/styles/tournament/TournamentCard.module.scss @@ -1,32 +1,43 @@ -.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; } @@ -34,11 +45,12 @@ .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); } @@ -46,27 +58,36 @@ 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 index 5ab0ee163..5d91b77fd 100644 --- a/styles/tournament/TournamentContainer.module.scss +++ b/styles/tournament/TournamentContainer.module.scss @@ -17,6 +17,7 @@ height: 60vh; flex: 15; flex-direction: column; + margin-top: 1rem; overflow-x: scroll; overflow-y: scroll; background: rgba(112, 0, 255, 0.17); @@ -24,6 +25,13 @@ border-radius: 0.3rem; } +.tournamentCardContainer { + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 1rem; +} + .tournamentText { display: flex; flex: 1; From 0782a17dd1be768532c3aa6e29b315e6ecf5fc3f Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Thu, 21 Dec 2023 21:10:07 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[Fix]=20=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=99=80=20=ED=86=A0=EB=84=88=EB=A8=BC?= =?UTF-8?q?=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=9D=98=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20=ED=86=A0=EB=84=88=EB=A8=BC=ED=8A=B8=20=ED=86=B5?= =?UTF-8?q?=ED=95=A9=20#1195?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TournamentPreview/TournamentPreview.tsx | 9 +---- .../tournament/TournamentRegistryModal.tsx | 29 +++++++++----- components/tournament/TournamentCard.tsx | 31 +++++++++----- pages/tournament.tsx | 40 ++++++++++++++----- 4 files changed, 71 insertions(+), 38 deletions(-) diff --git a/components/main/TournamentPreview/TournamentPreview.tsx b/components/main/TournamentPreview/TournamentPreview.tsx index d642c17cf..255478fa0 100644 --- 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) => ( - + )} style={{ height: '100%' }} /> diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx index 8c54dc2db..5afec7abf 100644 --- a/components/modal/tournament/TournamentRegistryModal.tsx +++ b/components/modal/tournament/TournamentRegistryModal.tsx @@ -195,16 +195,25 @@ export default function TournamentRegistryModal({ />
- + {status !== 'LIVE' ? ( + + ) : ( + + )}
diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx index f4efa81be..563fe90df 100644 --- 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(modalState); const [registState, setRegistState] = useState('로딩중'); @@ -82,26 +83,36 @@ export default function TournamentCard({ const isFull = playerCount === 8 ? 'full' : 'notFull'; const userState: Record = { - BEFORE: '미 참여', + BEFORE: '참여하기!', PLAYER: '참여 중', WAIT: '대기 중', }; return (
{title}
-
- {playerCount} / 8 -
-
- {userState[registState]} -
+ {page === 'tournament' ? ( + <> +
+ {playerCount} / 8 +
+
+ {userState[registState]} +
+ + ) : ( + <> +
+ {status === 'LIVE' ? '경기 중' : '예정'} +
+ + )}
diff --git a/pages/tournament.tsx b/pages/tournament.tsx index 6eccaa455..b349bf332 100644 --- a/pages/tournament.tsx +++ b/pages/tournament.tsx @@ -92,11 +92,20 @@ export default function Tournament() { 예정된 토너먼트가 없습니다. ) : ( - waitInfo.data?.tournaments.map((tournament) => ( -
- -
- )) +
+ {waitInfo.data?.tournaments.map((tournament) => ( +
+ +
+ ))} +
)}
진행중인 토너먼트
{openInfo.data && openInfo.data.tournaments?.length === 0 ? ( @@ -104,12 +113,21 @@ export default function Tournament() { 진행중인 토너먼트가 없습니다
) : ( -
- -
+ <> + {openInfo.data?.tournaments[0].tournamentId && ( + + )} +
+ +
+ )}
From 78de83933158f62b0b93521cd4dea761b757b617 Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Thu, 21 Dec 2023 21:11:41 +0900 Subject: [PATCH 3/3] =?UTF-8?q?[Fix]=20=EA=B3=B5=EB=B0=B1=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EB=8C=80=EC=B2=B4=20#1195?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/modal/tournament/TournamentRegistryModal.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx index 5afec7abf..b28150458 100644 --- a/components/modal/tournament/TournamentRegistryModal.tsx +++ b/components/modal/tournament/TournamentRegistryModal.tsx @@ -208,7 +208,9 @@ export default function TournamentRegistryModal({ /> ) : ( { + console.log('토너먼트가 진행중 입니다.'); + }} value={'진행중...'} style={'positive'} isLoading={loading}