diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx index b47200b41..8c54dc2db 100644 --- a/components/modal/tournament/TournamentRegistryModal.tsx +++ b/components/modal/tournament/TournamentRegistryModal.tsx @@ -8,6 +8,7 @@ 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, @@ -30,25 +31,40 @@ export default function TournamentRegistryModal({ player_cnt, tournamentId, }: TournamentInfo) { + const setSnackbar = useSetRecoilState(toastState); const setModal = useSetRecoilState(modalState); const setError = useSetRecoilState(errorState); const [registState, setRegistState] = useState('LOADING'); const [openDate, setOpenDate] = useState('미정'); + const [closeDate, setCloseDate] = useState('미정'); const [loading, setLoading] = useState(false); const [playerCount, setPlayerCount] = useState(player_cnt); - const registTournament = useCallback(() => { setLoading(true); return instance .post(`/pingpong/tournaments/${tournamentId}/users`) .then((res) => { - // alert('토너먼트 신청이 완료됐습니다'); setLoading(false); + setSnackbar({ + toastName: `토너먼트 신청`, + severity: 'success', + message: `🔥 토너먼트 참가 신청이 완료 됐습니다 ! 🔥`, + clicked: true, + }); setRegistState(res.data.status); return res.data.status; }) .catch((error) => { - setError('토너먼트 신청 중 에러가 발생했습니다.'); + setSnackbar({ + toastName: `토너먼트 신청`, + severity: 'error', + message: `${ + error.response?.data?.message + ? error.response.data.message + : '예상치 못한 에러가 발생했습니다 다시 시도해 주세요 😢' + } `, + clicked: true, + }); setLoading(false); }); }, []); @@ -59,17 +75,31 @@ export default function TournamentRegistryModal({ .delete(`/pingpong/tournaments/${tournamentId}/users`) .then((res) => { if (registState === 'WAIT') { - // alert('토너먼트 대기가 취소 되었습니다'); + setSnackbar({ + toastName: `토너먼트 대기 취소`, + severity: 'success', + message: `토너먼트 대기 신청을 취소했습니다.`, + clicked: true, + }); } else { - // setPlayerCount(playerCount - 1); - // alert('토너먼트 등록이 취소 되었습니다'); + setSnackbar({ + toastName: `토너먼트 신청 취소 `, + severity: 'success', + message: `토너먼트 참가 신청을 취소했습니다.`, + clicked: true, + }); } setRegistState(res.data.status); setLoading(false); return res.data.status; }) .catch((error) => { - setError('토너먼트 등록취소 중 에러가 발생했습니다'); + setSnackbar({ + toastName: `토너먼트 신청 취소`, + severity: 'error', + message: `취소중 에러가 발생했습니다.`, + clicked: true, + }); setLoading(false); }); }, []); @@ -99,38 +129,42 @@ export default function TournamentRegistryModal({ }, [tournamentId]); useEffect(() => { - getTournamentInfo(); getStatus(); - const date = new Date(startTime); - setOpenDate(dateToKRLocaleTimeString(date)); + setOpenDate(dateToKRLocaleTimeString(new Date(startTime))); + setCloseDate(dateToKRLocaleTimeString(new Date(endTime))); }, []); useEffect(() => { - getTournamentInfo(); - }, [registState]); + if (registState !== 'LOADING') getTournamentInfo(); + }, [registState, getTournamentInfo]); const closeModalButtonHandler = () => { setModal({ modalName: null }); }; - const buttonContents: Record = { - LOADING: '로딩중...', - BEFORE: '등록', - WAIT: '대기 취소', - PLAYER: '등록 취소', - }; - - const buttonAction: Record = { - BEFORE: registTournament, - WAIT: unRegistTournament, - PLAYER: unRegistTournament, - LOADING: () => { - console.log('loading..'); + const buttonMappings: Record = { + LOADING: { + content: '로딩중...', + handler: () => { + console.log('loading...'); + }, + }, + BEFORE: { + content: '등록', + handler: registTournament, + }, + WAIT: { + content: '대기 취소', + handler: unRegistTournament, + }, + PLAYER: { + content: '등록 취소', + handler: unRegistTournament, }, }; - const buttonContent = buttonContents[registState]; - const buttonHandler = buttonAction[registState]; + const { content: buttonContent, handler: buttonHandler } = + buttonMappings[registState]; return (
@@ -145,7 +179,8 @@ export default function TournamentRegistryModal({
{title}
-
{openDate}
+
시작 : {openDate}
+
종료 : {closeDate}
{playerCount} / 8
@@ -163,7 +198,7 @@ export default function TournamentRegistryModal({ { - getTournamentInfo(); - getStatus(); + if (modal.modalName === null) { + getTournamentInfo(); + getStatus(); + } }, [modal]); const getStatus = useCallback(() => { diff --git a/pages/index.tsx b/pages/index.tsx index eabfdfd17..39b0c30a7 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,11 +6,10 @@ import styles from 'styles/main/Home.module.scss'; const Home: NextPage = () => { const tournamentData = useBeforeLiveTournamentData(); - return (
- {tournamentData && ( + {tournamentData?.length && (
)}
diff --git a/pages/tournament.tsx b/pages/tournament.tsx index 3ea344ea9..6eccaa455 100644 --- a/pages/tournament.tsx +++ b/pages/tournament.tsx @@ -12,7 +12,9 @@ import styles from 'styles/tournament/TournamentContainer.module.scss'; export default function Tournament() { const setError = useSetRecoilState(errorState); - const [openTournamentId, setOpenTournamentId] = useState(0); + const [openTournamentId, setOpenTournamentId] = useState( + undefined + ); const [openTournament, setOpenTournament] = useState([]); const [containerSize, setContainerSize] = useState({ width: 0, height: 0 }); const containerRef = useRef(null); // useRef를 사용하여 Ref 생성 @@ -23,12 +25,15 @@ export default function Tournament() { instance .get('/pingpong/tournaments?size=20&page=1&status=LIVE') .then((res) => { - setOpenTournamentId(res.data.tournaments[0].tournamentId); + if (res.data.tournaments?.length === 1) { + console.log('openInfo'); + setOpenTournamentId(res.data.tournaments[0].tournamentId); + } return res.data; }), { onError: (error) => { - setError('JHH02'); + setError('JJH02'); }, retry: 1, staleTime: 60000 /* 60초 */, @@ -45,7 +50,7 @@ export default function Tournament() { }), { onError: (error) => { - setError('JHH02'); + setError('JJH03'); }, } ); @@ -67,36 +72,45 @@ export default function Tournament() { useEffect(() => { if (openTournamentId !== undefined) fetchTournamentGames(); + }, [openTournamentId, fetchTournamentGames]); + + useEffect(() => { if (containerRef.current) { const width = containerRef.current.clientWidth; const height = containerRef.current.clientHeight; setContainerSize({ width, height }); } - }, [openTournamentId]); + }, []); return (

Tournament

예정된 토너먼트
- {waitInfo.data?.tournaments.map((tournament) => ( -
- -
- ))} -
진행중인 토너먼트
-
- {openInfo.data && openInfo.data.tournaments?.length === 0 ? ( -
- 진행중인 토너먼트가 없습니다 + {waitInfo.data?.tournaments.length === 0 ? ( +

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

+ ) : ( + waitInfo.data?.tournaments.map((tournament) => ( +
+
- ) : ( + )) + )} +
진행중인 토너먼트
+ {openInfo.data && openInfo.data.tournaments?.length === 0 ? ( +
+ 진행중인 토너먼트가 없습니다 +
+ ) : ( +
- )} -
+
+ )}
); diff --git a/styles/modal/event/TournamentRegistryModal.module.scss b/styles/modal/event/TournamentRegistryModal.module.scss index 2cd411b88..17a37ab20 100644 --- a/styles/modal/event/TournamentRegistryModal.module.scss +++ b/styles/modal/event/TournamentRegistryModal.module.scss @@ -30,6 +30,7 @@ } .startTime { + margin-bottom: 0.2rem; font-size: 0.7rem; color: rgba(18, 23, 37, 1); } diff --git a/styles/tournament/TournamentCard.module.scss b/styles/tournament/TournamentCard.module.scss index d6278a796..4c2c8c9f8 100644 --- a/styles/tournament/TournamentCard.module.scss +++ b/styles/tournament/TournamentCard.module.scss @@ -66,14 +66,9 @@ .time { display: flex; padding-bottom: 0.5rem; - font-size: 0.8rem; - justify-content: space-evenly; - .start { - color: green; - } - .end { - color: red; - } + font-size: 0.7rem; + justify-content: flex-start; + gap: 0.5rem; } } } diff --git a/styles/tournament/TournamentContainer.module.scss b/styles/tournament/TournamentContainer.module.scss index 07cee703e..5ab0ee163 100644 --- a/styles/tournament/TournamentContainer.module.scss +++ b/styles/tournament/TournamentContainer.module.scss @@ -40,3 +40,10 @@ margin-bottom: 0rem; } } + +.noTournamentText { + display: flex; + color: white; + justify-content: center; + align-content: center; +} diff --git a/utils/handleBraketSize.ts b/utils/handleBraketSize.ts new file mode 100644 index 000000000..c576e0b66 --- /dev/null +++ b/utils/handleBraketSize.ts @@ -0,0 +1,7 @@ +export const useContainerSize = ( + containerRef: React.RefObject +) => { + const width = containerRef.current?.clientWidth; + const height = containerRef.current?.clientHeight; + return { width, height }; +};