From e797f1f40a7695cc734df75064e895651d4058ee Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Wed, 13 Dec 2023 20:41:35 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[Stlye]=20=EC=B9=B4=EB=93=9C=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95=20#1159?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tournament/TournamentCard.tsx | 54 ++++++++++++--- styles/tournament/TournamentCard.module.scss | 70 ++++++++++++++++---- 2 files changed, 102 insertions(+), 22 deletions(-) diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx index 8e5dc64f5..f3a609f29 100644 --- a/components/tournament/TournamentCard.tsx +++ b/components/tournament/TournamentCard.tsx @@ -1,9 +1,12 @@ +import { useCallback, useEffect, useState } from 'react'; import { 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 , dateToString } from 'utils/handleTime'; +import { errorState } from 'utils/recoil/error'; import { modalState } from 'utils/recoil/modal'; import styles from 'styles/tournament/TournamentCard.module.scss'; @@ -20,6 +23,8 @@ export default function TournamentCard({ player_cnt, }: TournamentInfo) { const setModal = useSetRecoilState(modalState); + const [registState, setRegistState] = useState('로딩중'); + const setError = useSetRecoilState(errorState); const openTournamentInfoModal = () => { setModal({ @@ -39,11 +44,25 @@ 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}`; + useEffect(() => { + getStatus(); + }, []); + + 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 = player_cnt === 8 ? 'full' : 'notFull'; return (
-
{title}
- {player_cnt} / 8 -
- {start} +
+
{title}
+
+
+ {player_cnt} / 8 +
+
+ {registState} +
+
+
+
+ + ~ +
diff --git a/styles/tournament/TournamentCard.module.scss b/styles/tournament/TournamentCard.module.scss index c5babf2b7..f3782a754 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(87, 216, 87); + } + &.WAIT { + background-color: yellow; + } + &.BEFORE { + background-color: rgb(105, 162, 105); + } + } + + .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; + } } } } From 18562d333747435fd7243f1d44dad0358e0da029 Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Thu, 14 Dec 2023 16:01:56 +0900 Subject: [PATCH 2/5] =?UTF-8?q?[Fix]=20=ED=86=A0=EB=84=88=EB=A8=BC?= =?UTF-8?q?=ED=8A=B8=20=EB=A0=88=EC=A7=80=EC=8A=A4=ED=8A=B8=EB=A6=AC=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=88=98=EC=A0=95=20#1159?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modal/tournament/TournamentRegistryModal.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx index cf3d0a8a1..f622ef786 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'); @@ -45,14 +43,16 @@ export default function TournamentRegistryModal({ .post(`/pingpong/tournaments/${tournamentId}/users`) .then((res) => { alert('토너먼트 신청이 완료됐습니다'); - setModal({ modalName: null }); + setLoading(false); + setRegistState(res.data.status); + if (playerCount < 8) setPlayerCount(playerCount + 1); return res.data.status; }) .catch((error) => { alert('토너먼트 신청 중 에러가 발생했습니다.'); setLoading(false); }); - }, []); + }, [playerCount]); const unRegistTournament = useCallback(() => { setLoading(true); @@ -62,16 +62,18 @@ export default function TournamentRegistryModal({ if (registState === 'WAIT') { alert('토너먼트 대기가 취소 되었습니다'); } else { + setPlayerCount(playerCount - 1); alert('토너먼트 등록이 취소 되었습니다'); } - setModal({ modalName: null }); + setRegistState(res.data.status); + setLoading(false); return res.data.status; }) .catch((error) => { alert('토너먼트 등록취소 중 에러가 발생했습니다'); setLoading(false); }); - }, []); + }, [playerCount]); const getStatus = useCallback(() => { return instance @@ -91,6 +93,7 @@ export default function TournamentRegistryModal({ setOpenDate(dateToKRLocaleTimeString(date)); }, []); + console.log(registState); const closeModalButtonHandler = () => { setModal({ modalName: null }); }; From 8f3788631d916866cc14f1926c6ee98343645f26 Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Thu, 14 Dec 2023 16:03:17 +0900 Subject: [PATCH 3/5] =?UTF-8?q?[others]=20=20=EC=A3=BC=EC=84=9D=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20#1159?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/tournament.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/tournament.tsx b/pages/tournament.tsx index ebdeea955..3ea344ea9 100644 --- a/pages/tournament.tsx +++ b/pages/tournament.tsx @@ -23,7 +23,6 @@ export default function Tournament() { instance .get('/pingpong/tournaments?size=20&page=1&status=LIVE') .then((res) => { - console.log(res.data.tournaments[0].tournamentId); setOpenTournamentId(res.data.tournaments[0].tournamentId); return res.data; }), From d47233802f7732faa0c57cef4d63f1da077e6275 Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Thu, 14 Dec 2023 19:03:29 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[Style]=20=20=EC=83=81=ED=83=9C=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EC=83=89=EC=83=81=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?#1159?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/tournament/TournamentCard.module.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/styles/tournament/TournamentCard.module.scss b/styles/tournament/TournamentCard.module.scss index f3782a754..d6278a796 100644 --- a/styles/tournament/TournamentCard.module.scss +++ b/styles/tournament/TournamentCard.module.scss @@ -40,13 +40,13 @@ margin-right: 1rem; border-radius: 0.5rem; &.PLAYER { - background-color: rgb(87, 216, 87); + background-color: rgb(75, 183, 75); } &.WAIT { - background-color: yellow; + background-color: rgb(216, 170, 42); } &.BEFORE { - background-color: rgb(105, 162, 105); + background-color: #949393; } } From f8f2cadc6021bd9d61a99a40be86dea2e36c8114 Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Thu, 14 Dec 2023 19:04:00 +0900 Subject: [PATCH 5/5] =?UTF-8?q?[Fix]=20=EC=B0=B8=EC=97=AC=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=EC=9D=98=20=EB=B3=80=ED=99=94=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=9D=BC=20=ED=99=94=EB=A9=B4=EC=97=90=20=EA=B0=B1=EC=8B=A0=20?= =?UTF-8?q?#1159?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tournament/TournamentRegistryModal.tsx | 35 +++++++++++++------ components/tournament/TournamentCard.tsx | 35 +++++++++++++++---- 2 files changed, 53 insertions(+), 17 deletions(-) diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx index f622ef786..b47200b41 100644 --- a/components/modal/tournament/TournamentRegistryModal.tsx +++ b/components/modal/tournament/TournamentRegistryModal.tsx @@ -42,17 +42,16 @@ export default function TournamentRegistryModal({ return instance .post(`/pingpong/tournaments/${tournamentId}/users`) .then((res) => { - alert('토너먼트 신청이 완료됐습니다'); + // alert('토너먼트 신청이 완료됐습니다'); setLoading(false); setRegistState(res.data.status); - if (playerCount < 8) setPlayerCount(playerCount + 1); return res.data.status; }) .catch((error) => { - alert('토너먼트 신청 중 에러가 발생했습니다.'); + setError('토너먼트 신청 중 에러가 발생했습니다.'); setLoading(false); }); - }, [playerCount]); + }, []); const unRegistTournament = useCallback(() => { setLoading(true); @@ -60,20 +59,20 @@ export default function TournamentRegistryModal({ .delete(`/pingpong/tournaments/${tournamentId}/users`) .then((res) => { if (registState === 'WAIT') { - alert('토너먼트 대기가 취소 되었습니다'); + // alert('토너먼트 대기가 취소 되었습니다'); } else { - setPlayerCount(playerCount - 1); - alert('토너먼트 등록이 취소 되었습니다'); + // setPlayerCount(playerCount - 1); + // alert('토너먼트 등록이 취소 되었습니다'); } setRegistState(res.data.status); setLoading(false); return res.data.status; }) .catch((error) => { - alert('토너먼트 등록취소 중 에러가 발생했습니다'); + setError('토너먼트 등록취소 중 에러가 발생했습니다'); setLoading(false); }); - }, [playerCount]); + }, []); const getStatus = useCallback(() => { return instance @@ -87,13 +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)); }, []); - console.log(registState); + useEffect(() => { + getTournamentInfo(); + }, [registState]); + const closeModalButtonHandler = () => { setModal({ modalName: null }); }; diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx index f3a609f29..950b8d647 100644 --- a/components/tournament/TournamentCard.tsx +++ b/components/tournament/TournamentCard.tsx @@ -1,11 +1,11 @@ -import { useCallback, useEffect, useState } from 'react'; -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 { instance } from 'utils/axios'; -import { dateToKRLocaleTimeString , dateToString } from 'utils/handleTime'; +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'; @@ -22,8 +22,10 @@ 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 = () => { @@ -44,9 +46,22 @@ export default function TournamentCard({ }); }; + 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 @@ -62,7 +77,13 @@ export default function TournamentCard({ const start = dateToKRLocaleTimeString(new Date(startTime)); const end = dateToKRLocaleTimeString(new Date(endTime)); - const isFull = player_cnt === 8 ? 'full' : 'notFull'; + const isFull = playerCount === 8 ? 'full' : 'notFull'; + + const userState: Record = { + BEFORE: '미 참여', + PLAYER: '참여 중', + WAIT: '대기 중', + }; return (
{title}
- {player_cnt} / 8 + {playerCount} / 8
- {registState} + {userState[registState]}