From e4cf74803db6e1fb71d9548637af35ae346f229c Mon Sep 17 00:00:00 2001 From: Clearsu Date: Wed, 20 Dec 2023 12:47:42 +0900 Subject: [PATCH 01/34] =?UTF-8?q?[Fix]=20=EC=A7=84=ED=96=89=EC=A4=91?= =?UTF-8?q?=EC=9D=B8=20=ED=86=A0=EB=84=88=EB=A8=BC=ED=8A=B8=20=EC=97=86?= =?UTF-8?q?=EC=9D=84=20=EC=8B=9C=20'0'=20=EB=A0=8C=EB=8D=94=EB=A7=81=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20#1173?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/index.tsx b/pages/index.tsx index a90a509d6..38a9189b3 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -10,7 +10,7 @@ const Home: NextPage = () => { return (
- {tournamentData?.length && ( + {tournamentData && tournamentData?.length > 0 && (
)}
From e6a3cb9af846da656725373f323dc1ba86761f7c Mon Sep 17 00:00:00 2001 From: Clearsu Date: Wed, 20 Dec 2023 14:31:38 +0900 Subject: [PATCH 02/34] =?UTF-8?q?[Chore]=20=ED=8C=8C=EC=9D=BC=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20#1173?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Layout/Layout.tsx | 2 +- components/{ => UI}/EmptyImage.tsx | 2 +- components/{ => UI}/StyledButton.tsx | 2 +- components/store/InventoryList.tsx | 2 +- pages/login.tsx | 2 +- styles/{ => UI}/EmptyImage.module.scss | 0 styles/{ => UI}/StyledButton.module.scss | 0 7 files changed, 5 insertions(+), 5 deletions(-) rename components/{ => UI}/EmptyImage.tsx (87%) rename components/{ => UI}/StyledButton.tsx (89%) rename styles/{ => UI}/EmptyImage.module.scss (100%) rename styles/{ => UI}/StyledButton.module.scss (100%) diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx index 7f93c560f..59cbb3596 100644 --- a/components/Layout/Layout.tsx +++ b/components/Layout/Layout.tsx @@ -10,7 +10,7 @@ import Header from 'components/Layout/Header'; import HeaderStateContext from 'components/Layout/HeaderContext'; import MainPageProfile from 'components/Layout/MainPageProfile'; import Megaphone from 'components/Layout/MegaPhone'; -import StyledButton from 'components/StyledButton'; +import StyledButton from 'components/UI/StyledButton'; import Statistics from 'pages/statistics'; import useAnnouncementCheck from 'hooks/Layout/useAnnouncementCheck'; import useGetUserSeason from 'hooks/Layout/useGetUserSeason'; diff --git a/components/EmptyImage.tsx b/components/UI/EmptyImage.tsx similarity index 87% rename from components/EmptyImage.tsx rename to components/UI/EmptyImage.tsx index bdcf9133d..64fd292aa 100644 --- a/components/EmptyImage.tsx +++ b/components/UI/EmptyImage.tsx @@ -1,5 +1,5 @@ import NotiEmptyEmoji from 'public/image/noti_empty.svg'; -import styles from 'styles/EmptyImage.module.scss'; +import styles from 'styles/UI/EmptyImage.module.scss'; function EmptyImage() { return ( diff --git a/components/StyledButton.tsx b/components/UI/StyledButton.tsx similarity index 89% rename from components/StyledButton.tsx rename to components/UI/StyledButton.tsx index 3833338ae..d5d44b9cf 100644 --- a/components/StyledButton.tsx +++ b/components/UI/StyledButton.tsx @@ -1,5 +1,5 @@ import { MouseEventHandler } from 'react'; -import styles from 'styles/StyledButton.module.scss'; +import styles from 'styles/UI/StyledButton.module.scss'; type StyledButtonProps = { onClick: MouseEventHandler; diff --git a/components/store/InventoryList.tsx b/components/store/InventoryList.tsx index 2b5f12f46..28ba8837a 100644 --- a/components/store/InventoryList.tsx +++ b/components/store/InventoryList.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { instance } from 'utils/axios'; import { InfinityScroll } from 'utils/infinityScroll'; -import EmptyImage from 'components/EmptyImage'; import { InfiniteScrollComponent } from 'components/store/InfiniteScrollComponent'; import { InvetoryItem } from 'components/store/InventoryItem'; import StoreLoading from 'components/store/StoreLoading'; +import EmptyImage from 'components/UI/EmptyImage'; import styles from 'styles/store/Inventory.module.scss'; function fetchInventoryData(page: number) { diff --git a/pages/login.tsx b/pages/login.tsx index 5515dbaad..e2076a94c 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -1,7 +1,7 @@ import Image from 'next/image'; import { useRouter } from 'next/router'; import { useEffect } from 'react'; -import StyledButton from 'components/StyledButton'; +import StyledButton from 'components/UI/StyledButton'; import styles from 'styles/Login.module.scss'; function Login() { diff --git a/styles/EmptyImage.module.scss b/styles/UI/EmptyImage.module.scss similarity index 100% rename from styles/EmptyImage.module.scss rename to styles/UI/EmptyImage.module.scss diff --git a/styles/StyledButton.module.scss b/styles/UI/StyledButton.module.scss similarity index 100% rename from styles/StyledButton.module.scss rename to styles/UI/StyledButton.module.scss From 8cb65e1f2129693877ade1c719cf856e71db6b39 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Wed, 20 Dec 2023 14:32:13 +0900 Subject: [PATCH 03/34] =?UTF-8?q?[Feat]=20boucing=20dots=20UI=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20#1173?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/UI/BouncingDots.tsx | 11 +++++++++++ styles/UI/BouncingDots.module.scss | 30 ++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 components/UI/BouncingDots.tsx create mode 100644 styles/UI/BouncingDots.module.scss diff --git a/components/UI/BouncingDots.tsx b/components/UI/BouncingDots.tsx new file mode 100644 index 000000000..2485d3378 --- /dev/null +++ b/components/UI/BouncingDots.tsx @@ -0,0 +1,11 @@ +import styles from 'styles/UI/BouncingDots.module.scss'; + +export default function BouncingDots() { + return ( +
+
+
+
+
+ ); +} diff --git a/styles/UI/BouncingDots.module.scss b/styles/UI/BouncingDots.module.scss new file mode 100644 index 000000000..d2056f2e0 --- /dev/null +++ b/styles/UI/BouncingDots.module.scss @@ -0,0 +1,30 @@ +.bouncingDots { + display: flex; + justify-content: space-between; + width: 1rem; + .dot { + width: 0.2rem; + height: 0.2rem; + background-color: white; + border-radius: 50%; + animation: wave 1.3s linear infinite; + &:nth-child(2) { + animation-delay: -1.1s; + } + &:nth-child(3) { + animation-delay: -0.9s; + } + } +} + +@keyframes wave { + 0%, + 60%, + 100% { + transform: initial; + } + + 30% { + transform: translateY(-0.3rem); + } +} From 2e7be2005afa422a91d57bd2d1215ddba8c7db28 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Wed, 20 Dec 2023 18:24:12 +0900 Subject: [PATCH 04/34] =?UTF-8?q?[Feat]=20bouncing=20dots=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20#1173?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tournament/TournamentMatch.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/components/tournament/TournamentMatch.tsx b/components/tournament/TournamentMatch.tsx index ad121aa1a..c6f7580bc 100644 --- a/components/tournament/TournamentMatch.tsx +++ b/components/tournament/TournamentMatch.tsx @@ -2,10 +2,10 @@ import { MatchComponentProps, Participant, } from '@g-loot/react-tournament-brackets/dist/src/types'; -import { useEffect } from 'react'; import { useRecoilValue } from 'recoil'; import { clickedTournamentState } from 'utils/recoil/tournament'; import PlayerImage from 'components/PlayerImage'; +import BouncingDots from 'components/UI/BouncingDots'; import styles from 'styles/tournament/TournamentMatch.module.scss'; interface TournamentMatchPartyProps { party: Participant; @@ -31,6 +31,12 @@ function TournamentMatchParty({ highLightUser !== 'TBD' && highLightUser === party.name ? styles.highlight : '' + } ${ + party.resultText !== '' && + party.resultText !== '-1' && + party.resultText !== '2' + ? styles.lost + : '' }`} onMouseEnter={() => onMouseEnter(party.id)} onClick={() => onPartyClick(party, false)} @@ -43,11 +49,14 @@ function TournamentMatchParty({ styleName={`tournament`} size={1} /> -
{party.name || teamNameFallback}
-
- {party.resultText ?? resultFallback(party)} -
+ {party.resultText === '-1' ? ( + + ) : ( +
+ {party.resultText ?? resultFallback(party)} +
+ )}
); } From 45fbf998e8ba619840d3ef75e2181835de2367e8 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Wed, 20 Dec 2023 18:24:50 +0900 Subject: [PATCH 05/34] =?UTF-8?q?[Style]=20=ED=8C=A8=EC=9E=90=20=EC=96=B4?= =?UTF-8?q?=EB=91=90=EC=9A=B4=20=EC=98=A4=EB=B2=84=EB=A0=88=EC=9D=B4=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20#1173?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/tournament/TournamentMatch.module.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/styles/tournament/TournamentMatch.module.scss b/styles/tournament/TournamentMatch.module.scss index d3798e251..7a42ad64c 100644 --- a/styles/tournament/TournamentMatch.module.scss +++ b/styles/tournament/TournamentMatch.module.scss @@ -13,10 +13,12 @@ .partyName { margin-left: 1rem; } - .score { margin-left: auto; } + &.lost { + filter: brightness(50%); + } } .highlight { From 5ffde2511401592295cf337e21c109f3e91e5eb5 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Thu, 21 Dec 2023 16:20:32 +0900 Subject: [PATCH 06/34] =?UTF-8?q?[Refactor]=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20Import=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tournament/TournamentMatch.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/tournament/TournamentMatch.tsx b/components/tournament/TournamentMatch.tsx index 8e25fd293..bf4177bf9 100644 --- a/components/tournament/TournamentMatch.tsx +++ b/components/tournament/TournamentMatch.tsx @@ -4,7 +4,6 @@ import { } from '@g-loot/react-tournament-brackets/dist/src/types'; import { useRecoilValue } from 'recoil'; import { clickedTournamentState } from 'utils/recoil/tournament'; -import PlayerImage from 'components/PlayerImage'; import BouncingDots from 'components/UI/BouncingDots'; import styles from 'styles/tournament/TournamentMatch.module.scss'; interface TournamentMatchPartyProps { From b85b359dece1222a8365f259316aef2f3da523a0 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Thu, 21 Dec 2023 17:23:47 +0900 Subject: [PATCH 07/34] =?UTF-8?q?[Feat]=20=EA=B2=BD=EA=B8=B0=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=EC=97=90=20=EB=94=B0=EB=A5=B8=20bouncing=20dots=20UI?= =?UTF-8?q?=20=ED=91=9C=EC=8B=9C=20#1173?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tournament/TournamentMatch.tsx | 28 ++++++++----------- styles/UI/BouncingDots.module.scss | 4 +-- styles/tournament/TournamentMatch.module.scss | 4 +-- 3 files changed, 14 insertions(+), 22 deletions(-) diff --git a/components/tournament/TournamentMatch.tsx b/components/tournament/TournamentMatch.tsx index bf4177bf9..2f8a5af98 100644 --- a/components/tournament/TournamentMatch.tsx +++ b/components/tournament/TournamentMatch.tsx @@ -9,10 +9,10 @@ import styles from 'styles/tournament/TournamentMatch.module.scss'; interface TournamentMatchPartyProps { party: Participant; teamNameFallback: string; - resultFallback: (participant: Participant) => string; onMouseEnter: (partyId: string | number) => void; onPartyClick: (party: Participant, partyWon: boolean) => void; highLightUser?: string; + state: string; } function TournamentMatchParty({ @@ -20,7 +20,7 @@ function TournamentMatchParty({ teamNameFallback, onMouseEnter, onPartyClick, - resultFallback, + state, }: TournamentMatchPartyProps) { const highLightUser = useRecoilValue(clickedTournamentState); @@ -30,12 +30,6 @@ function TournamentMatchParty({ highLightUser !== '' && highLightUser === party.name ? styles.highlight : '' - } ${ - party.resultText !== '' && - party.resultText !== '-1' && - party.resultText !== '2' - ? styles.lost - : '' }`} onMouseEnter={() => onMouseEnter(party.id)} onClick={() => onPartyClick(party, false)} @@ -54,13 +48,13 @@ function TournamentMatchParty({ />
{party.name || teamNameFallback}
- {party.resultText === '-1' ? ( - - ) : ( -
- {party.resultText ?? resultFallback(party)} -
- )} +
+ {state === 'LIVE' || state === 'WAIT' ? ( + + ) : ( + party.resultText + )} +
); } @@ -91,14 +85,14 @@ export default function TournamentMatch({ teamNameFallback={teamNameFallback} onMouseEnter={onMouseEnter} onPartyClick={onPartyClick} - resultFallback={resultFallback} + state={match.state} > ); diff --git a/styles/UI/BouncingDots.module.scss b/styles/UI/BouncingDots.module.scss index d2056f2e0..04065f9cf 100644 --- a/styles/UI/BouncingDots.module.scss +++ b/styles/UI/BouncingDots.module.scss @@ -21,10 +21,10 @@ 0%, 60%, 100% { - transform: initial; + margin-top: 0; } 30% { - transform: translateY(-0.3rem); + margin-top: -0.3rem; } } diff --git a/styles/tournament/TournamentMatch.module.scss b/styles/tournament/TournamentMatch.module.scss index 56f5be7b7..55c2e19e8 100644 --- a/styles/tournament/TournamentMatch.module.scss +++ b/styles/tournament/TournamentMatch.module.scss @@ -21,11 +21,9 @@ margin-left: 1rem; } .score { + margin-right: 1rem; margin-left: auto; } - &.lost { - filter: brightness(50%); - } } .highlight { From a67dca42e0563973d5a787cfaa508cc6d3119269 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Fri, 22 Dec 2023 13:30:48 +0900 Subject: [PATCH 08/34] =?UTF-8?q?[Refactor]=20before,=20live=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=EB=A5=BC=20=EB=B6=84=EB=A6=AC=ED=95=98?= =?UTF-8?q?=EC=97=AC=20=EB=B0=98=ED=99=98=ED=95=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20#1204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tournament/useBeforeLiveTournamentData.ts | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/hooks/tournament/useBeforeLiveTournamentData.ts b/hooks/tournament/useBeforeLiveTournamentData.ts index 338da1a01..8e225865d 100644 --- a/hooks/tournament/useBeforeLiveTournamentData.ts +++ b/hooks/tournament/useBeforeLiveTournamentData.ts @@ -8,24 +8,25 @@ import { errorState } from 'utils/recoil/error'; export default function useBeforeLiveTournamentData() { const setError = useSetRecoilState(errorState); const fetchTournamentData = useCallback(async () => { - const liveRes = await instance.get( - '/pingpong/tournaments?page=1&status=LIVE' - ); const beforeRes = await instance.get( '/pingpong/tournaments?page=1&status=BEFORE' ); - const combinedData = [ - ...liveRes.data.tournaments, - ...beforeRes.data.tournaments, - ]; - return combinedData; + const liveRes = await instance.get( + '/pingpong/tournaments?page=1&status=LIVE' + ); + return { + beforeTournament: beforeRes.data.tournaments, + liveTournament: liveRes.data.tournaments, + }; }, []); - const { data, isError } = useQuery( - 'beforeLiveTournamentData', - fetchTournamentData, - { retry: 1, staleTime: 60000 } - ); + const { data, isError } = useQuery<{ + beforeTournament: TournamentInfo[]; + liveTournament: TournamentInfo[]; + }>('beforeLiveTournamentData', fetchTournamentData, { + retry: 1, + staleTime: 60000, + }); if (isError) { setError('JC04'); From 2bf417c0f6d2ff1b453770f71155dac84d058912 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Fri, 22 Dec 2023 15:43:36 +0900 Subject: [PATCH 09/34] =?UTF-8?q?[Refactor]=20=EB=A1=9C=EB=94=A9=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=8C=80=EC=B2=B4=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tournament/TournamentBraket.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/components/tournament/TournamentBraket.tsx b/components/tournament/TournamentBraket.tsx index b979dac2e..405de5a87 100644 --- a/components/tournament/TournamentBraket.tsx +++ b/components/tournament/TournamentBraket.tsx @@ -11,6 +11,7 @@ import React from 'react'; import { useSetRecoilState } from 'recoil'; import { clickedTournamentState } from 'utils/recoil/tournament'; import TournamentMatch from 'components/tournament/TournamentMatch'; +import LoadingSpinner from 'components/UI/LoadingSpinner'; if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') { import('@g-loot/react-tournament-brackets'); @@ -19,7 +20,7 @@ if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') { const SingleEliminationBracket = dynamic< React.ComponentProps >( - () => { + async () => { return import('@g-loot/react-tournament-brackets').then( (mod) => mod.SingleEliminationBracket ); @@ -28,7 +29,7 @@ const SingleEliminationBracket = dynamic< ); const SVGViewer = dynamic>( - () => { + async () => { return import('@g-loot/react-tournament-brackets').then( (mod) => mod.SVGViewer ); @@ -47,16 +48,17 @@ export default function TournamentBraket({ }: TournamentBraketProps) { const setHighLightUser = useSetRecoilState(clickedTournamentState); - if (singleEliminationBracketMatchs.length === 0) - return

Loading...

; - const finalWidth = containerSize?.width; //Math.max(width - 50, 500); - const finalHeight = containerSize?.height; //Math.max(height - 100, 500); + if (singleEliminationBracketMatchs.length === 0) { + return ; + } return ( { - if (party.name !== '') setHighLightUser(party.name); + if (party.name !== '') { + setHighLightUser(party.name); + } }} matchComponent={TournamentMatch} options={{ From 28a69e6d214edde82458df071e0c81f3813c8731 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Fri, 22 Dec 2023 15:45:31 +0900 Subject: [PATCH 10/34] =?UTF-8?q?[Refactor]=20loading=20spinner=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC=20?= =?UTF-8?q?=EB=B0=8F=20fallbackText=20=EC=B6=94=EA=B0=80=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../UserTournamentBracket.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) rename components/{tournament-record => tournament}/UserTournamentBracket.tsx (84%) diff --git a/components/tournament-record/UserTournamentBracket.tsx b/components/tournament/UserTournamentBracket.tsx similarity index 84% rename from components/tournament-record/UserTournamentBracket.tsx rename to components/tournament/UserTournamentBracket.tsx index 7634e90eb..e115c6bc4 100644 --- a/components/tournament-record/UserTournamentBracket.tsx +++ b/components/tournament/UserTournamentBracket.tsx @@ -5,15 +5,18 @@ import { instance } from 'utils/axios'; import { convertTournamentGamesToBracketMatchs } from 'utils/handleTournamentGame'; import { errorState } from 'utils/recoil/error'; import TournamentBraket from 'components/tournament/TournamentBraket'; +import LoadingSpinner from 'components/UI/LoadingSpinner'; import useComponentSize from 'hooks/util/useComponentSize'; -import styles from 'styles/tournament-record/UserTournamentBracket.module.scss'; +import styles from 'styles/tournament/UserTournamentBracket.module.scss'; interface UserTournamentBracketProps { tournamentId: number | undefined; + fallbackText?: string; } export default function UserTournamentBraket({ tournamentId, + fallbackText, }: UserTournamentBracketProps) { const setError = useSetRecoilState(errorState); const [ref, size] = useComponentSize(); @@ -45,12 +48,14 @@ export default function UserTournamentBraket({ return (
{isLoading ? ( -
- ) : ( + + ) : tournamentId ? ( + ) : ( +
{fallbackText}
)}
); From d30758c8ee0dc5f732fb6acf42ecea3dbaacccc3 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Fri, 22 Dec 2023 15:46:04 +0900 Subject: [PATCH 11/34] =?UTF-8?q?[Refactor]=20loading=20spinner=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC=20#12?= =?UTF-8?q?03?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/UI/LoadingSpinner.tsx | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 components/UI/LoadingSpinner.tsx diff --git a/components/UI/LoadingSpinner.tsx b/components/UI/LoadingSpinner.tsx new file mode 100644 index 000000000..b8f5e4620 --- /dev/null +++ b/components/UI/LoadingSpinner.tsx @@ -0,0 +1,5 @@ +import styles from 'styles/UI/LoadingSpinner.module.scss'; + +export default function LoadingSpinner() { + return
; +} From 9cdede9948e20a48f3ebc90bab697eaea56d309e Mon Sep 17 00:00:00 2001 From: Clearsu Date: Fri, 22 Dec 2023 15:47:21 +0900 Subject: [PATCH 12/34] =?UTF-8?q?[Chore]=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/tournament-record.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/tournament-record.tsx b/pages/tournament-record.tsx index 33074624e..a7c58478d 100644 --- a/pages/tournament-record.tsx +++ b/pages/tournament-record.tsx @@ -1,8 +1,8 @@ import { useState, useRef, useEffect } from 'react'; import { SwiperRef } from 'swiper/react'; import { TournamentInfo } from 'types/tournamentTypes'; +import UserTournamentBracket from 'components/tournament/UserTournamentBracket'; import LeagueButtonGroup from 'components/tournament-record/LeagueButtonGroup'; -import UserTournamentBracket from 'components/tournament-record/UserTournamentBracket'; import WinnerSwiper from 'components/tournament-record/WinnerSwiper'; import WinnerTournamentInfo from 'components/tournament-record/WinnerTournamentInfo'; import styles from 'styles/tournament-record/TournamentRecord.module.scss'; @@ -15,7 +15,7 @@ export default function TournamentRecord() { useEffect(() => { if (swiperRef.current?.swiper) { - swiperRef.current?.swiper.slideTo(0, 0); // index, speed + swiperRef.current?.swiper.slideTo(0, 0); // 이동할 슬라이드 인덱스, 이동 속도 } }, [selectedType]); From b4834307072ea019ef2dfc980ae217ba4d23e9b1 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Fri, 22 Dec 2023 15:47:52 +0900 Subject: [PATCH 13/34] =?UTF-8?q?[WIP]=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81=20=EC=A4=91=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/tournament.tsx | 79 ++++++++++++++++++++------------------------ 1 file changed, 36 insertions(+), 43 deletions(-) diff --git a/pages/tournament.tsx b/pages/tournament.tsx index 6eccaa455..3500f7ba7 100644 --- a/pages/tournament.tsx +++ b/pages/tournament.tsx @@ -4,10 +4,11 @@ import { useQuery } from 'react-query'; import { useSetRecoilState } from 'recoil'; import { TournamentData, TournamentGame } from 'types/tournamentTypes'; import { instance } from 'utils/axios'; -import { convertTournamentGamesToBracketMatchs } from 'utils/handleTournamentGame'; +// import { convertTournamentGamesToBracketMatchs } from 'utils/handleTournamentGame'; import { errorState } from 'utils/recoil/error'; -import TournamentBraket from 'components/tournament/TournamentBraket'; +// import TournamentBraket from 'components/tournament/TournamentBraket'; import TournamentCard from 'components/tournament/TournamentCard'; +import UserTournamentBraket from 'components/tournament/UserTournamentBracket'; import styles from 'styles/tournament/TournamentContainer.module.scss'; export default function Tournament() { @@ -15,9 +16,9 @@ export default function Tournament() { const [openTournamentId, setOpenTournamentId] = useState( undefined ); - const [openTournament, setOpenTournament] = useState([]); - const [containerSize, setContainerSize] = useState({ width: 0, height: 0 }); - const containerRef = useRef(null); // useRef를 사용하여 Ref 생성 + // const [openTournament, setOpenTournament] = useState([]); + // const [containerSize, setContainerSize] = useState({ width: 0, height: 0 }); + // const containerRef = useRef(null); // useRef를 사용하여 Ref 생성 const openInfo = useQuery( 'openTorunamentInfo', @@ -55,32 +56,32 @@ export default function Tournament() { } ); - const fetchTournamentGames = useCallback(async () => { - console.log('Fetching more data...'); - try { - const res = await instance.get( - `pingpong/tournaments/${openTournamentId}/games` - ); - const data: TournamentGame[] = res.data.games; - const bracketMatchs = convertTournamentGamesToBracketMatchs(data); - setOpenTournament(bracketMatchs); - return data; - } catch (error) { - console.error('Error fetching data:', error); - } - }, [openTournamentId]); + // const fetchTournamentGames = useCallback(async () => { + // console.log('Fetching more data...'); + // try { + // const res = await instance.get( + // `pingpong/tournaments/${openTournamentId}/games` + // ); + // const data: TournamentGame[] = res.data.games; + // const bracketMatchs = convertTournamentGamesToBracketMatchs(data); + // setOpenTournament(bracketMatchs); + // return data; + // } catch (error) { + // console.error('Error fetching data:', error); + // } + // }, [openTournamentId]); - useEffect(() => { - if (openTournamentId !== undefined) fetchTournamentGames(); - }, [openTournamentId, fetchTournamentGames]); + // useEffect(() => { + // if (openTournamentId !== undefined) fetchTournamentGames(); + // }, [openTournamentId, fetchTournamentGames]); - useEffect(() => { - if (containerRef.current) { - const width = containerRef.current.clientWidth; - const height = containerRef.current.clientHeight; - setContainerSize({ width, height }); - } - }, []); + // useEffect(() => { + // if (containerRef.current) { + // const width = containerRef.current.clientWidth; + // const height = containerRef.current.clientHeight; + // setContainerSize({ width, height }); + // } + // }, []); return (
@@ -88,9 +89,9 @@ export default function Tournament() {
예정된 토너먼트
{waitInfo.data?.tournaments.length === 0 ? ( -

+
예정된 토너먼트가 없습니다. -

+
) : ( waitInfo.data?.tournaments.map((tournament) => (
@@ -99,18 +100,10 @@ export default function Tournament() { )) )}
진행중인 토너먼트
- {openInfo.data && openInfo.data.tournaments?.length === 0 ? ( -
- 진행중인 토너먼트가 없습니다 -
- ) : ( -
- -
- )} +
); From 9c03732569c67a1482c26557b55f14f4639912de Mon Sep 17 00:00:00 2001 From: Clearsu Date: Fri, 22 Dec 2023 15:48:17 +0900 Subject: [PATCH 14/34] =?UTF-8?q?[Docs]=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/tournament/TournamentContainer.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/tournament/TournamentContainer.module.scss b/styles/tournament/TournamentContainer.module.scss index 5ab0ee163..6a3f798c2 100644 --- a/styles/tournament/TournamentContainer.module.scss +++ b/styles/tournament/TournamentContainer.module.scss @@ -30,7 +30,7 @@ margin: 1.5rem 0 1rem; font-weight: 700; color: white; - text-align: center; /* 텍스트를 가로로 중앙에 정렬 */ + text-align: center; } .cardContainer { From 93be361a4e52aa3493303763360b4cbd612fa7bf Mon Sep 17 00:00:00 2001 From: Clearsu Date: Fri, 22 Dec 2023 15:49:49 +0900 Subject: [PATCH 15/34] =?UTF-8?q?[Chore]=20=EA=B2=BD=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../UserTournamentBracket.module.scss | 33 ------------------- .../UserTournamentBracket.module.scss | 19 +++++++++++ 2 files changed, 19 insertions(+), 33 deletions(-) delete mode 100644 styles/tournament-record/UserTournamentBracket.module.scss create mode 100644 styles/tournament/UserTournamentBracket.module.scss diff --git a/styles/tournament-record/UserTournamentBracket.module.scss b/styles/tournament-record/UserTournamentBracket.module.scss deleted file mode 100644 index 6643c30cd..000000000 --- a/styles/tournament-record/UserTournamentBracket.module.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import 'styles/common.scss'; - -.bracketContainer { - display: flex; - width: 100%; - height: 30rem; - margin-top: 1rem; - overflow: hidden; - background-color: rgba(112, 0, 225, 0.17); - border: 1px solid #c67dff; - border-radius: 26px; - align-items: center; - justify-content: center; -} - -@keyframes Rotate { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -.loadingAnimation { - width: 3rem; - height: 3rem; - border: 0.3rem solid rgb(167, 167, 167); - border-top-color: transparent; - border-left-color: transparent; - border-radius: 50%; - animation: Rotate 0.8s infinite linear; -} diff --git a/styles/tournament/UserTournamentBracket.module.scss b/styles/tournament/UserTournamentBracket.module.scss new file mode 100644 index 000000000..1026dd6a6 --- /dev/null +++ b/styles/tournament/UserTournamentBracket.module.scss @@ -0,0 +1,19 @@ +.bracketContainer { + display: flex; + width: 100%; + height: 30rem; + margin-top: 1rem; + overflow: hidden; + background-color: rgba(112, 0, 225, 0.17); + border: 1px solid #c67dff; + border-radius: 26px; + align-items: center; + justify-content: center; +} + +.noTournamentText { + display: flex; + color: white; + justify-content: center; + align-content: center; +} From 2fe673f0316413a7e31382a1cef70eb9b0eb764e Mon Sep 17 00:00:00 2001 From: Clearsu Date: Fri, 22 Dec 2023 15:50:07 +0900 Subject: [PATCH 16/34] [Refactor] loading spinner #1203 --- styles/UI/LoadingSpinner.module.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 styles/UI/LoadingSpinner.module.scss diff --git a/styles/UI/LoadingSpinner.module.scss b/styles/UI/LoadingSpinner.module.scss new file mode 100644 index 000000000..77c621739 --- /dev/null +++ b/styles/UI/LoadingSpinner.module.scss @@ -0,0 +1,18 @@ +@keyframes Rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.loadingAnimation { + width: 3rem; + height: 3rem; + border: 0.3rem solid rgb(167, 167, 167); + border-top-color: transparent; + border-left-color: transparent; + border-radius: 50%; + animation: Rotate 0.8s infinite linear; +} From 4b68c523d4ed1e865c665d6f78826977534f2774 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Wed, 27 Dec 2023 18:57:24 +0900 Subject: [PATCH 17/34] =?UTF-8?q?[Chore]=20=EB=94=94=EB=A0=89=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=20=EC=82=AD=EC=A0=9C=20#1204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/main/Section.tsx | 2 +- .../TournamentPreview.tsx | 36 +++++++++---------- .../TournamentPreview.module.scss | 0 3 files changed, 19 insertions(+), 19 deletions(-) rename components/main/{TournamentPreview => }/TournamentPreview.tsx (56%) rename styles/main/{TournamentPreview => }/TournamentPreview.module.scss (100%) diff --git a/components/main/Section.tsx b/components/main/Section.tsx index 7081161f6..1c4019eca 100644 --- a/components/main/Section.tsx +++ b/components/main/Section.tsx @@ -2,7 +2,7 @@ import { useRouter } from 'next/router'; import React from 'react'; import { FaChevronRight } from 'react-icons/fa'; import GameResult from 'components/game/GameResult'; -import TournamentPreview from 'components/main/TournamentPreview/TournamentPreview'; +import TournamentPreview from 'components/main/TournamentPreview'; import RankListMain from 'components/rank/topRank/RankListMain'; import styles from 'styles/main/Section.module.scss'; diff --git a/components/main/TournamentPreview/TournamentPreview.tsx b/components/main/TournamentPreview.tsx similarity index 56% rename from components/main/TournamentPreview/TournamentPreview.tsx rename to components/main/TournamentPreview.tsx index 255478fa0..3a4896c36 100644 --- a/components/main/TournamentPreview/TournamentPreview.tsx +++ b/components/main/TournamentPreview.tsx @@ -1,24 +1,26 @@ 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'; -import TournamentPreviewItem from './TournamentPreviewItem'; +import styles from 'styles/main/TournamentPreview.module.scss'; export default function TournamentPreview() { - const data: TournamentInfo[] | undefined = useBeforeLiveTournamentData(); + const { data } = useBeforeLiveTournamentData(); const [selectedIndex, setSelectedIndex] = useState(0); const virtuoso = useRef(null); const router = useRouter(); + const dataCombined = data + ? [...data.beforeTournament, ...data.liveTournament] + : []; + useInterval(() => { - if (!data || data?.length === 0) { + if (!data || dataCombined.length === 0) { return; } - const nextIndex = (selectedIndex + 1) % data.length; + const nextIndex = (selectedIndex + 1) % dataCombined.length; setSelectedIndex(nextIndex); if (virtuoso.current !== null) { virtuoso.current.scrollToIndex({ @@ -34,18 +36,16 @@ export default function TournamentPreview() { className={styles.rollingBanner} onClick={() => router.push('tournament')} > - {data && data.length > 0 && ( - ( - - )} - style={{ height: '100%' }} - /> - )} + ( + + )} + style={{ height: '100%' }} + />
); } diff --git a/styles/main/TournamentPreview/TournamentPreview.module.scss b/styles/main/TournamentPreview.module.scss similarity index 100% rename from styles/main/TournamentPreview/TournamentPreview.module.scss rename to styles/main/TournamentPreview.module.scss From f85847d40bff76f885d74cda587d7193296ef11c Mon Sep 17 00:00:00 2001 From: Clearsu Date: Wed, 27 Dec 2023 18:57:58 +0900 Subject: [PATCH 18/34] =?UTF-8?q?[Chore]=20=EB=AF=B8=EC=82=AC=EC=9A=A9=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EA=B1=B0=20#12?= =?UTF-8?q?04?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TournamentPreviewItem.tsx | 34 ------------------ .../TournamentPreviewItem.module.scss | 35 ------------------- 2 files changed, 69 deletions(-) delete mode 100644 components/main/TournamentPreview/TournamentPreviewItem.tsx delete mode 100644 styles/main/TournamentPreview/TournamentPreviewItem.module.scss diff --git a/components/main/TournamentPreview/TournamentPreviewItem.tsx b/components/main/TournamentPreview/TournamentPreviewItem.tsx deleted file mode 100644 index 174f9f06e..000000000 --- a/components/main/TournamentPreview/TournamentPreviewItem.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { dateToKRLocaleTimeString } from 'utils/handleTime'; -import styles from 'styles/main/TournamentPreview/TournamentPreviewItem.module.scss'; - -interface TournamentPreviewItemProps { - id: number; - title: string; - startTime: string; - endTime: string; - status: string; -} - -export default function TournamentPreviewItem({ - title, - startTime, - endTime, - status, -}: TournamentPreviewItemProps) { - const formattedStartTime = dateToKRLocaleTimeString(new Date(startTime)); - const formattedEndTime = dateToKRLocaleTimeString(new Date(endTime)); - - const statusColor = status === 'LIVE' ? 'live' : 'scheduled'; - - return ( -
-
-

{title}

-
- {status === 'LIVE' ? '경기 중' : '예정'} -
-
- ~ -
- ); -} diff --git a/styles/main/TournamentPreview/TournamentPreviewItem.module.scss b/styles/main/TournamentPreview/TournamentPreviewItem.module.scss deleted file mode 100644 index 8da1ac0f9..000000000 --- a/styles/main/TournamentPreview/TournamentPreviewItem.module.scss +++ /dev/null @@ -1,35 +0,0 @@ -.itemWrapper { - width: 100%; - height: 5rem; - padding: 1rem; - - .titleStatusWrapper { - display: flex; - align-items: center; - - h4 { - margin: 0; - } - - .statusWrapper { - display: flex; - padding: 0.3rem; - margin-left: 0.5rem; - font-size: 0.7rem; - border-radius: 0.5rem; - align-items: center; - - &.live { - background-color: red; - } - &.scheduled { - background-color: green; - } - } - } - - time { - font-size: 0.8rem; - color: yellow; - } -} From 7e6e92569615391e2e37010a48faff4d0c7d618d Mon Sep 17 00:00:00 2001 From: Clearsu Date: Wed, 27 Dec 2023 18:59:18 +0900 Subject: [PATCH 19/34] =?UTF-8?q?[Refactor]=20=EC=9D=98=EC=A1=B4=EC=84=B1?= =?UTF-8?q?=EB=B0=B0=EC=97=B4=20=EC=88=98=EC=A0=95,=20=EC=B0=B8=EA=B0=80?= =?UTF-8?q?=20=EC=83=81=ED=83=9C=20=EB=AC=B8=EC=9E=90=EC=97=B4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20#1204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tournament/TournamentCard.tsx | 27 ++++++++++++------------ 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx index 79145b8ac..c79bd485d 100644 --- a/components/tournament/TournamentCard.tsx +++ b/components/tournament/TournamentCard.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useRecoilValue, useSetRecoilState } from 'recoil'; import { BiCalendar } from 'react-icons/bi'; import { MdPeopleAlt } from 'react-icons/md'; @@ -47,7 +47,7 @@ export default function TournamentCard({ }); }; - const getTournamentInfo = useCallback(() => { + const getTournamentInfo = useCallback(async () => { return instance .get(`/pingpong/tournaments/${tournamentId}`) .then((res) => { @@ -57,16 +57,9 @@ export default function TournamentCard({ .catch((error) => { setError('JJH2'); }); - }, [tournamentId]); + }, [tournamentId, setError]); - useEffect(() => { - if (modal.modalName === null) { - getTournamentInfo(); - getStatus(); - } - }, [modal]); - - const getStatus = useCallback(() => { + const getStatus = useCallback(async () => { return instance .get(`/pingpong/tournaments/${tournamentId}/users`) .then((res) => { @@ -79,12 +72,20 @@ export default function TournamentCard({ }, []); const start = dateToKRLocaleTimeString(new Date(startTime)); + + useEffect(() => { + if (modal.modalName === null) { + getTournamentInfo(); + getStatus(); + } + }, [modal, getStatus, getTournamentInfo]); + const end = dateToKRLocaleTimeString(new Date(endTime)); const isFull = playerCount === 8 ? 'full' : 'notFull'; const userState: Record = { - BEFORE: '참여하기!', - PLAYER: '참여 중', + BEFORE: '참가하기!', + PLAYER: '참가 중', WAIT: '대기 중', }; From d6fcab817443c92be263ea97b34ea6c2af911717 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Wed, 27 Dec 2023 18:59:45 +0900 Subject: [PATCH 20/34] =?UTF-8?q?[Refactor]=20=EB=A6=AC=ED=84=B4=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=AA=85=EC=8B=9C=20#1204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hooks/tournament/useBeforeLiveTournamentData.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/hooks/tournament/useBeforeLiveTournamentData.ts b/hooks/tournament/useBeforeLiveTournamentData.ts index 8e225865d..0452acf66 100644 --- a/hooks/tournament/useBeforeLiveTournamentData.ts +++ b/hooks/tournament/useBeforeLiveTournamentData.ts @@ -5,7 +5,17 @@ import { TournamentInfo } from 'types/tournamentTypes'; import { instance } from 'utils/axios'; import { errorState } from 'utils/recoil/error'; -export default function useBeforeLiveTournamentData() { +type UseBeforeLiveTournamentDataReturn = { + data: + | { + beforeTournament: TournamentInfo[]; + liveTournament: TournamentInfo[]; + } + | undefined; + isLoading: boolean; +}; + +export default function useBeforeLiveTournamentData(): UseBeforeLiveTournamentDataReturn { const setError = useSetRecoilState(errorState); const fetchTournamentData = useCallback(async () => { const beforeRes = await instance.get( @@ -20,7 +30,7 @@ export default function useBeforeLiveTournamentData() { }; }, []); - const { data, isError } = useQuery<{ + const { data, isLoading, isError } = useQuery<{ beforeTournament: TournamentInfo[]; liveTournament: TournamentInfo[]; }>('beforeLiveTournamentData', fetchTournamentData, { @@ -32,5 +42,5 @@ export default function useBeforeLiveTournamentData() { setError('JC04'); } - return data; + return { data, isLoading }; } From 9f7eb021fb1076d19bada3692f60befb65eaea81 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Wed, 27 Dec 2023 19:00:56 +0900 Subject: [PATCH 21/34] =?UTF-8?q?[Refactor]=20=EC=98=88=EC=A0=95&=EC=A7=84?= =?UTF-8?q?=ED=96=89=EC=A4=91=EC=9D=B8=20=ED=86=A0=EB=84=88=EB=A8=BC?= =?UTF-8?q?=ED=8A=B8=20data=20fetching=20=EC=BB=A4=EC=8A=A4=ED=85=80?= =?UTF-8?q?=ED=9B=85=20=EC=A0=81=EC=9A=A9=20#1204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index.tsx | 11 ++-- pages/tournament.tsx | 117 +++++++++++++------------------------------ 2 files changed, 43 insertions(+), 85 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 99b92e730..5e9913eb2 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -5,13 +5,16 @@ import useBeforeLiveTournamentData from 'hooks/tournament/useBeforeLiveTournamen import styles from 'styles/main/Home.module.scss'; const Home: NextPage = () => { - const tournamentData = useBeforeLiveTournamentData(); + const { data: tournamentData } = useBeforeLiveTournamentData(); + return (
- {tournamentData && tournamentData?.length > 0 && ( -
- )} + {tournamentData && + (tournamentData.beforeTournament?.length > 0 || + tournamentData.liveTournament?.length > 0) && ( +
+ )}
diff --git a/pages/tournament.tsx b/pages/tournament.tsx index 6f0155053..9c17ca066 100644 --- a/pages/tournament.tsx +++ b/pages/tournament.tsx @@ -1,99 +1,53 @@ import { Match } from '@g-loot/react-tournament-brackets/dist/src/types'; -import React, { useState, useEffect, useCallback, useRef } from 'react'; -import { useQuery } from 'react-query'; +import React, { useState, useEffect, useCallback } from 'react'; import { useSetRecoilState } from 'recoil'; -import { TournamentData, TournamentGame } from 'types/tournamentTypes'; import { instance } from 'utils/axios'; import { convertTournamentGamesToBracketMatchs } from 'utils/handleTournamentGame'; import { errorState } from 'utils/recoil/error'; import TournamentBraket from 'components/tournament/TournamentBraket'; import TournamentCard from 'components/tournament/TournamentCard'; +import useBeforeLiveTournamentData from 'hooks/tournament/useBeforeLiveTournamentData'; +import useComponentSize from 'hooks/util/useComponentSize'; import styles from 'styles/tournament/TournamentContainer.module.scss'; export default function Tournament() { const setError = useSetRecoilState(errorState); - const [openTournamentId, setOpenTournamentId] = useState( - undefined - ); - const [openTournament, setOpenTournament] = useState([]); - const [containerSize, setContainerSize] = useState({ width: 0, height: 0 }); - const containerRef = useRef(null); // useRef를 사용하여 Ref 생성 - - const openInfo = useQuery( - 'openTorunamentInfo', - () => - instance - .get('/pingpong/tournaments?size=20&page=1&status=LIVE') - .then((res) => { - if (res.data.tournaments?.length === 1) { - setOpenTournamentId(res.data.tournaments[0].tournamentId); - } - return res.data; - }), - { - onError: (error) => { - setError('JJH02'); - }, - retry: 1, - staleTime: 60000 /* 60초 */, - } - ); + const { data, isLoading } = useBeforeLiveTournamentData(); + const [ref, size] = useComponentSize(); + const [liveMatch, setLiveMatch] = useState(); - const waitInfo = useQuery( - 'waitTournamentInfo', - () => - instance - .get(`/pingpong/tournaments?size=20&page=1&status=BEFORE`) - .then((res) => { - return res.data; - }), - { - onError: (error) => { - setError('JJH03'); - }, - retry: 1, - staleTime: 60000, - } + const fetchTournamentGames = useCallback( + async (tournamentId: number) => { + try { + const res = await instance.get( + `pingpong/tournaments/${tournamentId}/games` + ); + setLiveMatch(convertTournamentGamesToBracketMatchs(res.data.games)); + } catch (error) { + setError('JJH01'); + } + }, + [setError] ); - const fetchTournamentGames = useCallback(async () => { - try { - const res = await instance.get( - `pingpong/tournaments/${openTournamentId}/games` - ); - const data: TournamentGame[] = res.data.games; - const bracketMatchs = convertTournamentGamesToBracketMatchs(data); - setOpenTournament(bracketMatchs); - return data; - } catch (error) { - console.error('Error fetching data:', error); - } - }, [openTournamentId]); - useEffect(() => { - if (openTournamentId !== undefined) fetchTournamentGames(); - }, [openTournamentId, fetchTournamentGames]); - - useEffect(() => { - if (containerRef.current) { - const width = containerRef.current.clientWidth; - const height = containerRef.current.clientHeight; - setContainerSize({ width, height }); + if (data && data.liveTournament.length > 0) { + fetchTournamentGames(data.liveTournament[0].tournamentId); } - }, []); + }, [data, fetchTournamentGames]); return (

Tournament

예정된 토너먼트
- {waitInfo.data?.tournaments.length === 0 ? ( -

+ {data?.beforeTournament.length === 0 ? ( +
예정된 토너먼트가 없습니다. -

+
) : (
- {waitInfo.data?.tournaments.map((tournament) => ( + {data?.beforeTournament.map((tournament) => (
)}
진행중인 토너먼트
- {openInfo.data && openInfo.data.tournaments?.length === 0 ? ( + {data?.liveTournament?.length === 0 ? (
진행중인 토너먼트가 없습니다
) : ( <> - {openInfo.data?.tournaments[0].tournamentId && ( + {data && ( )} -
- -
+ {liveMatch && ( +
+ +
+ )} )}
From f089a9dc7af28385baac95e650b653aa7fa4f268 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Wed, 27 Dec 2023 19:01:44 +0900 Subject: [PATCH 22/34] =?UTF-8?q?[Style]=20noTournamentText=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=EB=B0=8F=20=ED=8F=B0=ED=8A=B8=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EC=A6=88=20=EC=A1=B0=EC=A0=95=20#1204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/tournament/TournamentContainer.module.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/styles/tournament/TournamentContainer.module.scss b/styles/tournament/TournamentContainer.module.scss index 5d91b77fd..9f956f510 100644 --- a/styles/tournament/TournamentContainer.module.scss +++ b/styles/tournament/TournamentContainer.module.scss @@ -38,7 +38,7 @@ margin: 1.5rem 0 1rem; font-weight: 700; color: white; - text-align: center; /* 텍스트를 가로로 중앙에 정렬 */ + text-align: center; } .cardContainer { @@ -51,7 +51,8 @@ .noTournamentText { display: flex; - color: white; + font-size: 0.9rem; + color: rgb(174, 174, 174); justify-content: center; align-content: center; } From cca747831f3778ed53391d269995f81ce6703502 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Wed, 27 Dec 2023 19:02:03 +0900 Subject: [PATCH 23/34] =?UTF-8?q?[Style]=20gap=20=EB=B0=8F=20=ED=8F=B0?= =?UTF-8?q?=ED=8A=B8=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?#1204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/tournament/TournamentCard.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/tournament/TournamentCard.module.scss b/styles/tournament/TournamentCard.module.scss index 1d127047b..328d7b944 100644 --- a/styles/tournament/TournamentCard.module.scss +++ b/styles/tournament/TournamentCard.module.scss @@ -30,7 +30,7 @@ display: flex; flex-direction: row; justify-items: flex-start; - gap: 1rem; + gap: 0.5rem; .title { max-width: 55%; @@ -47,7 +47,7 @@ flex-direction: row; justify-content: flex-start; gap: 0.5rem; - font-size: small; + font-size: 0.7rem; .playerState { @include tag-style; From 55c436eaf16dcef2c51a96ae1ea7827aacb81346 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Mon, 1 Jan 2024 18:50:24 +0900 Subject: [PATCH 24/34] =?UTF-8?q?[Refactor]=20=EB=8D=B0=EC=9D=B4=ED=84=B0?= =?UTF-8?q?=20=EC=9A=94=EC=B2=AD=20=EB=A1=9C=EC=A7=81=20=EB=B6=84=EB=A6=AC?= =?UTF-8?q?=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tournament-record/WinnerSwiper.tsx | 61 ++++------------- pages/tournament-record.tsx | 68 +++++++++++++++---- 2 files changed, 68 insertions(+), 61 deletions(-) diff --git a/components/tournament-record/WinnerSwiper.tsx b/components/tournament-record/WinnerSwiper.tsx index e7bc7d6ac..70b4afb17 100644 --- a/components/tournament-record/WinnerSwiper.tsx +++ b/components/tournament-record/WinnerSwiper.tsx @@ -1,53 +1,32 @@ -import React, { - useMemo, - useCallback, - SetStateAction, - forwardRef, - Ref, -} from 'react'; +import React, { useMemo, SetStateAction, forwardRef, Ref } from 'react'; +import { InfiniteData } from 'react-query'; import { EffectCoverflow } from 'swiper/modules'; -import { Swiper, SwiperSlide, SwiperClass, SwiperRef } from 'swiper/react'; -import { TournamentData, TournamentInfo } from 'types/tournamentTypes'; -import { instance } from 'utils/axios'; -import { InfiniteScroll } from 'utils/infinityScroll'; +import { Swiper, SwiperSlide, SwiperRef, SwiperClass } from 'swiper/react'; +import { TournamentInfo, TournamentData } from 'types/tournamentTypes'; import styles from 'styles/tournament-record/WinnerSwiper.module.scss'; import 'swiper/css'; import 'swiper/css/effect-coverflow'; import WinnerProfileImage from './WinnerProfileImage'; interface WinnerSwiperProps { + tournamentData: InfiniteData | undefined; type: string; size: number; setTournamentInfo: React.Dispatch>; - setIsEmpty: React.Dispatch>; + onIndexChange: (swiper: SwiperClass) => void; } const WinnerSwiper = forwardRef( ( - { type, size, setTournamentInfo, setIsEmpty }: WinnerSwiperProps, + { + tournamentData, + type, + size, + setTournamentInfo, + onIndexChange, + }: WinnerSwiperProps, ref: Ref | undefined ) => { - const fetchTournamentData = useCallback( - async (page: number) => { - const res = await instance.get( - `/pingpong/tournaments?page=${page}&type=${type}&size=${size}&status=END` - ); - if (res.data.totalPage === 0) { - setIsEmpty(true); - } else { - setIsEmpty(false); - } - return res.data; - }, - [type, size, setIsEmpty] - ); - - const { data, hasNextPage, fetchNextPage } = InfiniteScroll( - ['tournamentData', type], - fetchTournamentData, - 'JC01' - ); - const coverflowEffect = useMemo( () => ({ rotate: 35, @@ -58,16 +37,6 @@ const WinnerSwiper = forwardRef( [] ); - const indexChangeHandler = useCallback( - (swiper: SwiperClass) => { - const slidesLength = swiper.slides.length; - if (hasNextPage && swiper.activeIndex >= slidesLength - 3) { - fetchNextPage(); - } - }, - [hasNextPage, fetchNextPage] - ); - return ( - {data?.pages.map((page, pageIndex) => ( + {tournamentData?.pages.map((page, pageIndex) => ( {page.tournaments.length > 0 && page.tournaments.map((tournament, index) => ( diff --git a/pages/tournament-record.tsx b/pages/tournament-record.tsx index 34900e783..49643c05d 100644 --- a/pages/tournament-record.tsx +++ b/pages/tournament-record.tsx @@ -1,18 +1,47 @@ -import { useState, useRef, useEffect } from 'react'; -import { SwiperRef } from 'swiper/react'; -import { TournamentInfo } from 'types/tournamentTypes'; +import { useState, useRef, useEffect, useCallback } from 'react'; +import { SwiperClass, SwiperRef } from 'swiper/react'; +import { TournamentInfo, TournamentData } from 'types/tournamentTypes'; +import { instance } from 'utils/axios'; +import { InfiniteScroll } from 'utils/infinityScroll'; import UserTournamentBracket from 'components/tournament/UserTournamentBracket'; import LeagueButtonGroup from 'components/tournament-record/LeagueButtonGroup'; import WinnerSwiper from 'components/tournament-record/WinnerSwiper'; import WinnerTournamentInfo from 'components/tournament-record/WinnerTournamentInfo'; +import LoadingSpinner from 'components/UI/LoadingSpinner'; import styles from 'styles/tournament-record/TournamentRecord.module.scss'; export default function TournamentRecord() { const [tournamentInfo, setTournamentInfo] = useState(); const [selectedType, setSelectedType] = useState('ROOKIE'); - const [isEmpty, setIsEmpty] = useState(false); const swiperRef = useRef(null); + const fetchTournamentData = useCallback( + async (page: number) => { + const res = await instance.get( + `pingpong/tournaments?page=${page}&type=${selectedType}&size=5&status=END` + ); + return res.data; + }, + [selectedType] + ); + + const { data, hasNextPage, fetchNextPage, isLoading } = + InfiniteScroll( + ['tournamentData', selectedType], + fetchTournamentData, + 'JC01' + ); + + const indexChangeHandler = useCallback( + (swiper: SwiperClass) => { + const slidesLength = swiper.slides.length; + if (hasNextPage && swiper.activeIndex >= slidesLength - 3) { + fetchNextPage(); + } + }, + [hasNextPage, fetchNextPage] + ); + useEffect(() => { if (swiperRef.current?.swiper) { swiperRef.current?.swiper.slideTo(0, 0); // 이동할 슬라이드 인덱스, 이동 속도 @@ -23,19 +52,28 @@ export default function TournamentRecord() {

Hall of Fame

- - {isEmpty ? ( -

종료된 토너먼트가 없습니다!

+ {isLoading ? ( + ) : ( <> - - + + {data?.pages[0].totalPage === 0 ? ( +

종료된 토너먼트가 없습니다!

+ ) : ( + <> + + + + )} )}
From 33c56058fcf1094cf103fd02a20a11f764670f1b Mon Sep 17 00:00:00 2001 From: Clearsu Date: Mon, 1 Jan 2024 19:15:43 +0900 Subject: [PATCH 25/34] =?UTF-8?q?[Refactor]=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/tournament-record/TournamentRecord.module.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/styles/tournament-record/TournamentRecord.module.scss b/styles/tournament-record/TournamentRecord.module.scss index 37f66bb91..78a469644 100644 --- a/styles/tournament-record/TournamentRecord.module.scss +++ b/styles/tournament-record/TournamentRecord.module.scss @@ -26,9 +26,3 @@ justify-content: center; animation: text-fade-in-out 4s infinite; } - -.winnerImageContainer { - height: 10rem; - margin-top: 1.8rem; - background-color: rgb(88, 88, 88); -} From 74ccebfa1d7daa17ee21af640c652b4dbf78439d Mon Sep 17 00:00:00 2001 From: Clearsu Date: Mon, 1 Jan 2024 19:16:10 +0900 Subject: [PATCH 26/34] =?UTF-8?q?[Style]=20fallback=20=EB=AC=B8=EA=B5=AC?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tournament-record/WinnerTournamentInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tournament-record/WinnerTournamentInfo.tsx b/components/tournament-record/WinnerTournamentInfo.tsx index 9f9023295..f529bec01 100644 --- a/components/tournament-record/WinnerTournamentInfo.tsx +++ b/components/tournament-record/WinnerTournamentInfo.tsx @@ -12,7 +12,7 @@ export default function WinnerTournamentInfo({ return (

- {tournamentInfo?.winnerIntraId ?? '아이디 정보가 없습니다.'} + {tournamentInfo?.winnerIntraId ?? 'IntraId'}

{tournamentInfo?.title}{' '} From 6ef640613f16bc0f9786d2e510f4dc8073459992 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Thu, 4 Jan 2024 14:35:41 +0900 Subject: [PATCH 27/34] =?UTF-8?q?[Refactor]=20stale=20time=20=ED=94=84?= =?UTF-8?q?=EB=A1=AD=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20fallback=20text=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tournament/UserTournamentBracket.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/components/tournament/UserTournamentBracket.tsx b/components/tournament/UserTournamentBracket.tsx index e115c6bc4..987890569 100644 --- a/components/tournament/UserTournamentBracket.tsx +++ b/components/tournament/UserTournamentBracket.tsx @@ -11,12 +11,12 @@ import styles from 'styles/tournament/UserTournamentBracket.module.scss'; interface UserTournamentBracketProps { tournamentId: number | undefined; - fallbackText?: string; + queryStaleTime: number; } export default function UserTournamentBraket({ tournamentId, - fallbackText, + queryStaleTime, }: UserTournamentBracketProps) { const setError = useSetRecoilState(errorState); const [ref, size] = useComponentSize(); @@ -37,7 +37,7 @@ export default function UserTournamentBraket({ () => fetchTournamentGames(), { enabled: !!tournamentId, // tournamentId가 undefined가 아닐 때만 작동하도록 - staleTime: 86400000, // 하루 + staleTime: queryStaleTime, } ); @@ -49,13 +49,11 @@ export default function UserTournamentBraket({

{isLoading ? ( - ) : tournamentId ? ( + ) : ( - ) : ( -
{fallbackText}
)}
); From 3b94dc8946158cd3d4529eca1580208b725891c2 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Thu, 4 Jan 2024 14:36:40 +0900 Subject: [PATCH 28/34] =?UTF-8?q?[Feat]=20=EB=A1=9C=EB=94=A9=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=91=9C=EC=8B=9C=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/tournament-record.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/pages/tournament-record.tsx b/pages/tournament-record.tsx index 49643c05d..6303c5cd8 100644 --- a/pages/tournament-record.tsx +++ b/pages/tournament-record.tsx @@ -53,7 +53,9 @@ export default function TournamentRecord() {

Hall of Fame

{isLoading ? ( - +
+ +
) : ( <> )} From 4a3e7958d7b7156823c8ec322c09b84851a30134 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Thu, 4 Jan 2024 14:38:12 +0900 Subject: [PATCH 29/34] =?UTF-8?q?[Refactor]=20=EC=BF=BC=EB=A6=AC=20?= =?UTF-8?q?=ED=82=A4=20=EB=B3=80=EA=B2=BD=20=EC=8B=9C=20=EC=BF=BC=EB=A6=AC?= =?UTF-8?q?=20=EC=B4=88=EA=B8=B0=ED=99=94=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/infinityScroll.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/utils/infinityScroll.ts b/utils/infinityScroll.ts index 89ddd168c..7881e7a34 100644 --- a/utils/infinityScroll.ts +++ b/utils/infinityScroll.ts @@ -86,7 +86,8 @@ export function InfiniteScroll( } }, retry: 0, - keepPreviousData: true, + // 쿼리 키 변경 시 쿼리를 초기화하여 isLoading 업데이트 + // keepPreviousData: true, } ); } From e449c4fb5ee38c43cd15667ee20dce82317a8cc2 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Thu, 4 Jan 2024 15:09:42 +0900 Subject: [PATCH 30/34] =?UTF-8?q?[Refactor]=20=EC=A4=91=EB=B3=B5=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EB=B0=8F=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=8C=80=EC=B2=B4=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/tournament.tsx | 108 +++++++++++++------------------------------ 1 file changed, 33 insertions(+), 75 deletions(-) diff --git a/pages/tournament.tsx b/pages/tournament.tsx index 9c17ca066..baab6b862 100644 --- a/pages/tournament.tsx +++ b/pages/tournament.tsx @@ -1,90 +1,48 @@ -import { Match } from '@g-loot/react-tournament-brackets/dist/src/types'; -import React, { useState, useEffect, useCallback } from 'react'; -import { useSetRecoilState } from 'recoil'; -import { instance } from 'utils/axios'; -import { convertTournamentGamesToBracketMatchs } from 'utils/handleTournamentGame'; -import { errorState } from 'utils/recoil/error'; -import TournamentBraket from 'components/tournament/TournamentBraket'; import TournamentCard from 'components/tournament/TournamentCard'; +import UserTournamentBraket from 'components/tournament/UserTournamentBracket'; import useBeforeLiveTournamentData from 'hooks/tournament/useBeforeLiveTournamentData'; -import useComponentSize from 'hooks/util/useComponentSize'; import styles from 'styles/tournament/TournamentContainer.module.scss'; export default function Tournament() { - const setError = useSetRecoilState(errorState); const { data, isLoading } = useBeforeLiveTournamentData(); - const [ref, size] = useComponentSize(); - const [liveMatch, setLiveMatch] = useState(); - - const fetchTournamentGames = useCallback( - async (tournamentId: number) => { - try { - const res = await instance.get( - `pingpong/tournaments/${tournamentId}/games` - ); - setLiveMatch(convertTournamentGamesToBracketMatchs(res.data.games)); - } catch (error) { - setError('JJH01'); - } - }, - [setError] - ); - - useEffect(() => { - if (data && data.liveTournament.length > 0) { - fetchTournamentGames(data.liveTournament[0].tournamentId); - } - }, [data, fetchTournamentGames]); return (

Tournament

-
-
예정된 토너먼트
- {data?.beforeTournament.length === 0 ? ( -
- 예정된 토너먼트가 없습니다. -
- ) : ( -
- {data?.beforeTournament.map((tournament) => ( -
- -
- ))} -
- )} -
진행중인 토너먼트
- {data?.liveTournament?.length === 0 ? ( -
- 진행중인 토너먼트가 없습니다 -
- ) : ( +
예정된 토너먼트
+ {data?.beforeTournament.length === 0 ? ( +
+ 예정된 토너먼트가 없습니다. +
+ ) : ( +
+ {data?.beforeTournament.map((tournament) => ( +
+ +
+ ))} +
+ )} +
진행중인 토너먼트
+ {data?.liveTournament?.length === 0 ? ( +
+ 진행중인 토너먼트가 없습니다. +
+ ) : ( + data && + data?.liveTournament.length > 0 && ( <> - {data && ( - - )} - {liveMatch && ( -
- -
- )} + + - )} -
+ ) + )}
); } From 34953d3822835c95ed9c5cae55901a46223905ef Mon Sep 17 00:00:00 2001 From: Clearsu Date: Thu, 4 Jan 2024 15:10:11 +0900 Subject: [PATCH 31/34] =?UTF-8?q?[Refactor]=20=EC=9D=98=EC=A1=B4=EC=84=B1?= =?UTF-8?q?=EB=B0=B0=EC=97=B4=20=EC=B6=94=EA=B0=80=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tournament/TournamentCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx index c79bd485d..a2f31db35 100644 --- a/components/tournament/TournamentCard.tsx +++ b/components/tournament/TournamentCard.tsx @@ -69,7 +69,7 @@ export default function TournamentCard({ .catch((error) => { setError('JJH2'); }); - }, []); + }, [tournamentId, setError]); const start = dateToKRLocaleTimeString(new Date(startTime)); From f3595b9e9a4d6fe06324101fa7921787a85f6219 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Thu, 4 Jan 2024 15:10:54 +0900 Subject: [PATCH 32/34] =?UTF-8?q?[Refactor]=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/tournament/TournamentContainer.module.scss | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/styles/tournament/TournamentContainer.module.scss b/styles/tournament/TournamentContainer.module.scss index 9f956f510..786bd536a 100644 --- a/styles/tournament/TournamentContainer.module.scss +++ b/styles/tournament/TournamentContainer.module.scss @@ -11,20 +11,6 @@ cursor: pointer; } -.openTournamentBox { - display: flex; - width: 100%; - 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; @@ -51,6 +37,7 @@ .noTournamentText { display: flex; + padding: 2rem; font-size: 0.9rem; color: rgb(174, 174, 174); justify-content: center; From c2c1475bfb4125c37f48fc957a829bba1c3ebb76 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Thu, 4 Jan 2024 15:12:30 +0900 Subject: [PATCH 33/34] =?UTF-8?q?[Feat]=20loading=20spinner=20wrapper=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/tournament-record/TournamentRecord.module.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/styles/tournament-record/TournamentRecord.module.scss b/styles/tournament-record/TournamentRecord.module.scss index 78a469644..759be9a03 100644 --- a/styles/tournament-record/TournamentRecord.module.scss +++ b/styles/tournament-record/TournamentRecord.module.scss @@ -26,3 +26,11 @@ justify-content: center; animation: text-fade-in-out 4s infinite; } + +.spinnerWrapper { + display: flex; + width: 100%; + height: 14rem; + align-items: center; + justify-content: center; +} From 245f501b2b6c36645bd4ca0c8bc0eb05913c7086 Mon Sep 17 00:00:00 2001 From: Clearsu Date: Thu, 4 Jan 2024 15:31:03 +0900 Subject: [PATCH 34/34] =?UTF-8?q?[Chore]=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=9B=85=20=EC=82=AD=EC=A0=9C?= =?UTF-8?q?=20#1203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/handleBraketSize.ts | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 utils/handleBraketSize.ts diff --git a/utils/handleBraketSize.ts b/utils/handleBraketSize.ts deleted file mode 100644 index c576e0b66..000000000 --- a/utils/handleBraketSize.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const useContainerSize = ( - containerRef: React.RefObject -) => { - const width = containerRef.current?.clientWidth; - const height = containerRef.current?.clientHeight; - return { width, height }; -};