Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Dec 22, 2023
+124 −60
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c1b7822
[Style]] 토너먼트 카드 스타일 수정 #1195
Dec 21, 2023
0782a17
[Fix] 메인페이지와 토너먼트 페이지의 카드 토너먼트 통합 #1195
Dec 21, 2023
78de839
[Fix] 공백 함수 대체 #1195
Dec 21, 2023
38f1b54
Merge branch 'main' into feat/진행중인-토너먼트의-내용-보여주기#1195
joonho0410 Dec 22, 2023
6f89a5d
Merge branch 'main' into feat/진행중인-토너먼트의-내용-보여주기#1195
Clearsu Dec 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions components/main/TournamentPreview/TournamentPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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%' }}
/>
Expand Down
31 changes: 21 additions & 10 deletions components/modal/tournament/TournamentRegistryModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,16 +195,27 @@ export default function TournamentRegistryModal({
/>
<div>
Clearsu marked this conversation as resolved.
Show resolved Hide resolved
<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>
Expand Down
31 changes: 21 additions & 10 deletions components/tournament/TournamentCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>('로딩중');
Expand Down Expand Up @@ -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>
</>
) : (
<>
Clearsu marked this conversation as resolved.
Show resolved Hide resolved
<div className={`${styles.gameState} ${styles[status]}`}>
{status === 'LIVE' ? '경기 중' : '예정'}
</div>
</>
)}
</div>
</div>
<div className={styles.time}>
Expand Down
40 changes: 29 additions & 11 deletions pages/tournament.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Clearsu marked this conversation as resolved.
Show resolved Hide resolved
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'
Clearsu marked this conversation as resolved.
Show resolved Hide resolved
/>
)}
<div className={styles.openTournamentBox} ref={containerRef}>
<TournamentBraket
singleEliminationBracketMatchs={openTournament}
containerSize={containerSize}
/>
</div>
</>
)}
</div>
</div>
Expand Down
65 changes: 43 additions & 22 deletions styles/tournament/TournamentCard.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down
8 changes: 8 additions & 0 deletions styles/tournament/TournamentContainer.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down