diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx index cf3d0a8a1..b47200b41 100644 --- a/components/modal/tournament/TournamentRegistryModal.tsx +++ b/components/modal/tournament/TournamentRegistryModal.tsx @@ -8,7 +8,6 @@ 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, @@ -31,7 +30,6 @@ 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'); @@ -44,12 +42,13 @@ export default function TournamentRegistryModal({ return instance .post(`/pingpong/tournaments/${tournamentId}/users`) .then((res) => { - alert('토너먼트 신청이 완료됐습니다'); - setModal({ modalName: null }); + // alert('토너먼트 신청이 완료됐습니다'); + setLoading(false); + setRegistState(res.data.status); return res.data.status; }) .catch((error) => { - alert('토너먼트 신청 중 에러가 발생했습니다.'); + setError('토너먼트 신청 중 에러가 발생했습니다.'); setLoading(false); }); }, []); @@ -60,15 +59,17 @@ export default function TournamentRegistryModal({ .delete(`/pingpong/tournaments/${tournamentId}/users`) .then((res) => { if (registState === 'WAIT') { - alert('토너먼트 대기가 취소 되었습니다'); + // alert('토너먼트 대기가 취소 되었습니다'); } else { - alert('토너먼트 등록이 취소 되었습니다'); + // setPlayerCount(playerCount - 1); + // alert('토너먼트 등록이 취소 되었습니다'); } - setModal({ modalName: null }); + setRegistState(res.data.status); + setLoading(false); return res.data.status; }) .catch((error) => { - alert('토너먼트 등록취소 중 에러가 발생했습니다'); + setError('토너먼트 등록취소 중 에러가 발생했습니다'); setLoading(false); }); }, []); @@ -85,12 +86,29 @@ export default function TournamentRegistryModal({ }); }, []); + const getTournamentInfo = useCallback(() => { + return instance + .get(`/pingpong/tournaments/${tournamentId}`) + .then((res) => { + setPlayerCount(res.data.player_cnt); + return res.data.player_cnt; + }) + .catch((error) => { + setError('JJH2'); + }); + }, [tournamentId]); + useEffect(() => { + getTournamentInfo(); getStatus(); const date = new Date(startTime); setOpenDate(dateToKRLocaleTimeString(date)); }, []); + useEffect(() => { + getTournamentInfo(); + }, [registState]); + const closeModalButtonHandler = () => { setModal({ modalName: null }); }; diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx index 8e5dc64f5..950b8d647 100644 --- a/components/tournament/TournamentCard.tsx +++ b/components/tournament/TournamentCard.tsx @@ -1,9 +1,12 @@ -import { useSetRecoilState } from 'recoil'; +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; import { BiCalendar } from 'react-icons/bi'; import { MdPeopleAlt } from 'react-icons/md'; import { Modal } from 'types/modalTypes'; import { TournamentInfo } from 'types/tournamentTypes'; -import { dateToString } from 'utils/handleTime'; +import { instance } from 'utils/axios'; +import { dateToKRLocaleTimeString } from 'utils/handleTime'; +import { errorState } from 'utils/recoil/error'; import { modalState } from 'utils/recoil/modal'; import styles from 'styles/tournament/TournamentCard.module.scss'; @@ -19,7 +22,11 @@ export default function TournamentCard({ winnerImageUrl, player_cnt, }: TournamentInfo) { + const modal = useRecoilValue(modalState); const setModal = useSetRecoilState(modalState); + const [registState, setRegistState] = useState('로딩중'); + const [playerCount, setPlayerCount] = useState(player_cnt); + const setError = useSetRecoilState(errorState); const openTournamentInfoModal = () => { setModal({ @@ -39,11 +46,44 @@ export default function TournamentCard({ }); }; - const date = new Date(startTime); - const year = date.getFullYear(); - const month = date.getMonth() + 1; - const il = date.getDate(); - const start = `${year}.${month}.${il}`; + const getTournamentInfo = useCallback(() => { + return instance + .get(`/pingpong/tournaments/${tournamentId}`) + .then((res) => { + setPlayerCount(res.data.player_cnt); + return res.data.player_cnt; + }) + .catch((error) => { + setError('JJH2'); + }); + }, [tournamentId]); + + useEffect(() => { + getTournamentInfo(); + getStatus(); + }, [modal]); + + const getStatus = useCallback(() => { + return instance + .get(`/pingpong/tournaments/${tournamentId}/users`) + .then((res) => { + setRegistState(res.data.status); + return res.data.status; + }) + .catch((error) => { + setError('JJH2'); + }); + }, []); + + const start = dateToKRLocaleTimeString(new Date(startTime)); + const end = dateToKRLocaleTimeString(new Date(endTime)); + const isFull = playerCount === 8 ? 'full' : 'notFull'; + + const userState: Record = { + BEFORE: '미 참여', + PLAYER: '참여 중', + WAIT: '대기 중', + }; return (
-
{title}
- {player_cnt} / 8 -
- {start} +
+
{title}
+
+
+ {playerCount} / 8 +
+
+ {userState[registState]} +
+
+
+
+ + ~ +
diff --git a/styles/tournament/TournamentCard.module.scss b/styles/tournament/TournamentCard.module.scss index c5babf2b7..d6278a796 100644 --- a/styles/tournament/TournamentCard.module.scss +++ b/styles/tournament/TournamentCard.module.scss @@ -1,11 +1,11 @@ .tournamentCardContainer { display: flex; - height: 3.5rem; + height: 100%; padding: 0 1rem; margin-top: 0.5rem; overflow-y: scroll; cursor: pointer; - background: linear-gradient(to bottom, #7816e1, #9e35db); + background: #7816e1; border-radius: 0.5rem; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6); align-items: center; @@ -13,21 +13,67 @@ .text { display: flex; width: 100%; + flex-direction: column; + padding-top: 0.5rem; color: white; justify-content: space-between; - .left { - flex: 2; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - // text-align: left; - } + .up { + display: flex; + flex-direction: row; + margin-bottom: 0.5rem; + justify-content: space-between; + + .title { + padding: 0.2rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .tag { + display: flex; + flex-direction: row; - .right { - flex: 1; + .state { + padding: 0.2rem 0.5rem; + margin-right: 1rem; + border-radius: 0.5rem; + &.PLAYER { + background-color: rgb(75, 183, 75); + } + &.WAIT { + background-color: rgb(216, 170, 42); + } + &.BEFORE { + background-color: #949393; + } + } + + .participants { + padding: 0.2rem 0.5rem; + margin-right: 1rem; + border-radius: 0.5rem; + &.full { + background-color: red; + } + &.notFull { + background-color: blue; + } + } + } + } + .time { + display: flex; + padding-bottom: 0.5rem; font-size: 0.8rem; - // text-align: right; + justify-content: space-evenly; + .start { + color: green; + } + .end { + color: red; + } } } }