From 7554f7756bb1a460c58c2c4be2311f49f79d3a05 Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Tue, 12 Dec 2023 15:23:23 +0900 Subject: [PATCH 1/7] =?UTF-8?q?[Fix]=20=ED=86=A0=EB=84=88=EB=A8=BC?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=84=EC=B2=B4=20=EC=A1=B0=ED=9A=8C=20api=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0=20#1150?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tournament/TournamentMegaphone.tsx | 4 +- pages/tournament.tsx | 63 +++++++++++-------- 2 files changed, 38 insertions(+), 29 deletions(-) diff --git a/components/tournament/TournamentMegaphone.tsx b/components/tournament/TournamentMegaphone.tsx index d41a01515..8cf6046d4 100644 --- a/components/tournament/TournamentMegaphone.tsx +++ b/components/tournament/TournamentMegaphone.tsx @@ -39,8 +39,8 @@ const TournamentMegaphone = () => { const router = useRouter(); function getTournamentListHandler() { - return mockInstance - .get(`tournament?size=20&page=1&status=BEFORE`) + return instance + .get(`/pingpong/tournaments?size=20&page=1&status=BEFORE`) .then((res) => { setTournamentList(res.data.tournaments); }); diff --git a/pages/tournament.tsx b/pages/tournament.tsx index c3d936f06..8a93ef2c0 100644 --- a/pages/tournament.tsx +++ b/pages/tournament.tsx @@ -24,20 +24,35 @@ export default function Tournament() { const openInfo = useQuery( 'openTorunamentInfo', () => - mockInstance.get('tournament?page=1&status=BEFORE').then((res) => { - setOpenTournamentId(res.data.tournamentId); - return res.data.tournamentId; - }), - { retry: 1, staleTime: 60000 /* 60초 */ } + instance + .get('/pingpong/tournaments?size=20&page=1&status=LIVE') + .then((res) => { + setOpenTournamentId(res.data.tournamentId); + return res.data.tournamentId; + }), + { + onError: (error) => { + setError('JHH02'); + }, + retry: 1, + staleTime: 60000 /* 60초 */, + } ); - const fetchWaitTournamentData = (page: number) => { - return mockInstance - .get(`tournament?page=${page}&status=BEFORE&size=4`) - .then((res) => { - return res.data; - }); - }; + const waitInfo = useQuery( + 'waitTournamentInfo', + () => + instance + .get(`/pingpong/tournaments?size=20&page=1&status=BEFORE`) + .then((res) => { + return res.data; + }), + { + onError: (error) => { + setError('JHH02'); + }, + } + ); const fetchTournamentGames = useCallback(async () => { console.log('Fetching more data...'); @@ -55,17 +70,7 @@ export default function Tournament() { }, [openTournament]); useEffect(() => { - fetchWaitTournamentData(1) - .then((data) => { - setWaitTournament(data); - }) - .catch(() => { - setError('JHH02'); - }); fetchTournamentGames(); - }, []); - - useEffect(() => { if (containerRef.current) { const width = containerRef.current.clientWidth; const height = containerRef.current.clientHeight; @@ -79,11 +84,15 @@ export default function Tournament() {
예정된 토너먼트
- {waitTournament?.tournaments.map((tournament) => ( -
- -
- ))} + {waitInfo.data && + waitInfo.data.tournaments.map((tournament) => ( +
+ +
+ ))}
진행중인 토너먼트
From 741e19b12e8a76fcda8aacbe20a2c394fc68ea96 Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Tue, 12 Dec 2023 15:49:40 +0900 Subject: [PATCH 2/7] =?UTF-8?q?[Fix]=20=ED=86=A0=EB=84=88=EB=A8=BC?= =?UTF-8?q?=ED=8A=B8=20=EC=8B=A0=EC=B2=AD,=20=EC=B7=A8=EC=86=8C=20?= =?UTF-8?q?=EC=86=8C=20api=20=EC=97=B0=EA=B2=B0=20#1150?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tournament/TournamentRegistryModal.tsx | 86 +++++++++++++------ 1 file changed, 60 insertions(+), 26 deletions(-) diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx index cfc322184..15261a3d1 100644 --- a/components/modal/tournament/TournamentRegistryModal.tsx +++ b/components/modal/tournament/TournamentRegistryModal.tsx @@ -4,6 +4,7 @@ import { useSetRecoilState } from 'recoil'; import { MdPeopleAlt } from 'react-icons/md'; import { QUILL_FORMATS } from 'types/quillTypes'; import { TournamentInfo } from 'types/tournamentTypes'; +import { instance } from 'utils/axios'; import { dateToString } from 'utils/handleTime'; import { mockInstance } from 'utils/mockAxios'; import { errorState } from 'utils/recoil/error'; @@ -34,44 +35,64 @@ export default function TournamentRegistryModal({ const setSnackbar = useSetRecoilState(toastState); const setModal = useSetRecoilState(modalState); const setError = useSetRecoilState(errorState); - const [registState, setRegistState] = useState(true); + const [registState, setRegistState] = useState('LOADING'); const [openDate, setOpenDate] = useState('미정'); const [loading, setLoading] = useState(false); const [playerCount, setPlayerCount] = useState(player_cnt); const registTournament = useCallback(() => { setLoading(true); - return mockInstance - .post(`tournament/${tournamentId}/users?users=1`) + return instance + .post(`/pingpong/tournaments/${tournamentId}/users`) .then((res) => { - console.log(res.data.status); - if (res.data.status) { + setSnackbar({ + toastName: `토너먼트 등록 신청`, + severity: 'success', + message: `토너먼트 신청이 완료됐습니다`, + clicked: true, + }); + setModal({ modalName: null }); + return res.data.status; + }) + .catch((error) => { + setSnackbar({ + toastName: `토너먼트 등록 신청`, + severity: 'error', + message: `토너먼트 신청 중 에러가 발생했습니다`, + clicked: true, + }); + setLoading(false); + }); + }, []); + + const unRegistTournament = useCallback(() => { + setLoading(true); + return instance + .delete(`/pingpong/tournaments/${tournamentId}/users`) + .then((res) => { + if (registState === 'WAIT') { setSnackbar({ - toastName: `토너먼트 등록 신청`, + toastName: `토너먼트 대기 취소`, severity: 'success', - message: `토너먼트 신청이 완료됐습니다`, + message: `토너먼트 대기가 취소 되었습니다`, clicked: true, }); - } - if (res.data.status == false) { + } else { setSnackbar({ - toastName: `토너먼트 등록취소 신청`, + toastName: `토너먼트 등록 취소`, severity: 'success', - message: `토너먼트 신청이 취소됐습니다`, + message: `토너먼트 등록이 취소 되었습니다`, clicked: true, }); } - - setRegistState(res.data.status); - setLoading(false); setModal({ modalName: null }); return res.data.status; }) .catch((error) => { setSnackbar({ - toastName: `토너먼트 등록 신청`, + toastName: `토너먼트 등록취소`, severity: 'error', - message: `토너먼트 신청 중 에러가 발생했습니다`, + message: `토너먼트 등록취소 중 에러가 발생했습니다`, clicked: true, }); setLoading(false); @@ -79,8 +100,8 @@ export default function TournamentRegistryModal({ }, []); const getStatus = useCallback(() => { - return mockInstance - .get(`tournament/${tournamentId}/users?users=1`) + return instance + .get(`/pingpong/tournaments/${tournamentId}/users`) .then((res) => { setRegistState(res.data.status); return res.data.status; @@ -100,6 +121,25 @@ export default function TournamentRegistryModal({ setModal({ modalName: null }); }; + const buttonContents: Record = { + LOADING: '로딩중...', + BEFORE: '등록', + WAIT: '대기 취소', + PLAYER: '등록 취소', + }; + + const buttonAction: Record = { + BEFORE: registTournament, + WAIT: unRegistTournament, + PLAYER: unRegistTournament, + LOADING: () => { + console.log('loading..'); + }, + }; + + const buttonContent = buttonContents[registState]; + const buttonHandler = buttonAction[registState]; + return (
@@ -129,14 +169,8 @@ export default function TournamentRegistryModal({
From 96f6f427484291c00281137f7cdbfa8dbf7e5372 Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Tue, 12 Dec 2023 16:14:09 +0900 Subject: [PATCH 3/7] =?UTF-8?q?[Fix]=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=EC=95=8A=EB=8A=94=20=20mockInstance=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20#1150?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/modal/tournament/TournamentRegistryModal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx index 15261a3d1..2c1cdac25 100644 --- a/components/modal/tournament/TournamentRegistryModal.tsx +++ b/components/modal/tournament/TournamentRegistryModal.tsx @@ -6,7 +6,6 @@ import { QUILL_FORMATS } from 'types/quillTypes'; import { TournamentInfo } from 'types/tournamentTypes'; import { instance } from 'utils/axios'; import { dateToString } from 'utils/handleTime'; -import { mockInstance } from 'utils/mockAxios'; import { errorState } from 'utils/recoil/error'; import { modalState } from 'utils/recoil/modal'; import { toastState } from 'utils/recoil/toast'; From c7682526c72020a224420eebda74380d5aa0bed8 Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Wed, 13 Dec 2023 15:41:25 +0900 Subject: [PATCH 4/7] =?UTF-8?q?[Fix]=20toast=20message=20=EB=A5=BC=20alert?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EA=B5=90=EC=B2=B4=ED=96=88=EC=8A=B5?= =?UTF-8?q?=EB=8B=88=EB=8B=A4=20#1150?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tournament/TournamentRegistryModal.tsx | 41 +++++-------------- 1 file changed, 10 insertions(+), 31 deletions(-) diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx index 2c1cdac25..b3b1924f3 100644 --- a/components/modal/tournament/TournamentRegistryModal.tsx +++ b/components/modal/tournament/TournamentRegistryModal.tsx @@ -44,22 +44,12 @@ export default function TournamentRegistryModal({ return instance .post(`/pingpong/tournaments/${tournamentId}/users`) .then((res) => { - setSnackbar({ - toastName: `토너먼트 등록 신청`, - severity: 'success', - message: `토너먼트 신청이 완료됐습니다`, - clicked: true, - }); + alert('토너먼트 신청이 완료됐습니다'); setModal({ modalName: null }); return res.data.status; }) .catch((error) => { - setSnackbar({ - toastName: `토너먼트 등록 신청`, - severity: 'error', - message: `토너먼트 신청 중 에러가 발생했습니다`, - clicked: true, - }); + alert('토너먼트 신청 중 에러가 발생했습니다.'); setLoading(false); }); }, []); @@ -70,30 +60,15 @@ export default function TournamentRegistryModal({ .delete(`/pingpong/tournaments/${tournamentId}/users`) .then((res) => { if (registState === 'WAIT') { - setSnackbar({ - toastName: `토너먼트 대기 취소`, - severity: 'success', - message: `토너먼트 대기가 취소 되었습니다`, - clicked: true, - }); + alert('토너먼트 대기가 취소 되었습니다'); } else { - setSnackbar({ - toastName: `토너먼트 등록 취소`, - severity: 'success', - message: `토너먼트 등록이 취소 되었습니다`, - clicked: true, - }); + alert('토너먼트 등록이 취소 되었습니다'); } setModal({ modalName: null }); return res.data.status; }) .catch((error) => { - setSnackbar({ - toastName: `토너먼트 등록취소`, - severity: 'error', - message: `토너먼트 등록취소 중 에러가 발생했습니다`, - clicked: true, - }); + alert('토너먼트 등록취소 중 에러가 발생했습니다'); setLoading(false); }); }, []); @@ -169,7 +144,11 @@ export default function TournamentRegistryModal({ From 03020a495eea3a347ece4fed100d5f8c65322e00 Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Wed, 13 Dec 2023 16:03:05 +0900 Subject: [PATCH 5/7] =?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=20api=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0=20#1150?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/tournament.tsx | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/pages/tournament.tsx b/pages/tournament.tsx index 5b5b1a7ce..7e7c93070 100644 --- a/pages/tournament.tsx +++ b/pages/tournament.tsx @@ -3,8 +3,8 @@ import React, { useState, useEffect, useCallback, useRef } from 'react'; 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 { mockInstance } from 'utils/mockAxios'; import { errorState } from 'utils/recoil/error'; import TournamentBraket from 'components/tournament/TournamentBraket'; import TournamentCard from 'components/tournament/TournamentCard'; @@ -12,9 +12,6 @@ import styles from 'styles/tournament/TournamentContainer.module.scss'; export default function Tournament() { const setError = useSetRecoilState(errorState); - const [waitTournament, setWaitTournament] = useState( - null - ); const [openTournamentId, setOpenTournamentId] = useState(0); const [openTournament, setOpenTournament] = useState([]); const [containerSize, setContainerSize] = useState({ width: 0, height: 0 }); @@ -26,8 +23,9 @@ export default function Tournament() { instance .get('/pingpong/tournaments?size=20&page=1&status=LIVE') .then((res) => { - setOpenTournamentId(res.data.tournamentId); - return res.data.tournamentId; + console.log(res.data.tournaments[0].tournamentId); + setOpenTournamentId(res.data.tournaments[0].tournamentId); + return res.data; }), { onError: (error) => { @@ -56,8 +54,8 @@ export default function Tournament() { const fetchTournamentGames = useCallback(async () => { console.log('Fetching more data...'); try { - const res = await mockInstance.get( - `/tournament/${openTournamentId}/games` + const res = await instance.get( + `pingpong/tournaments/${openTournamentId}/games` ); const data: TournamentGame[] = res.data.games; const bracketMatchs = convertTournamentGamesToBracketMatchs(data); @@ -66,16 +64,16 @@ export default function Tournament() { } catch (error) { console.error('Error fetching data:', error); } - }, [openTournament]); + }, [openTournamentId]); useEffect(() => { - fetchTournamentGames(); + if (openTournamentId !== undefined) fetchTournamentGames(); if (containerRef.current) { const width = containerRef.current.clientWidth; const height = containerRef.current.clientHeight; setContainerSize({ width, height }); } - }, []); + }, [openTournamentId]); return (
@@ -95,7 +93,7 @@ export default function Tournament() {
진행중인 토너먼트
- {openInfo.data && openInfo.data.tournaments.length === 0 ? ( + {openInfo.data && openInfo.data.tournaments?.length === 0 ? (
진행중인 토너먼트가 없습니다
From ff6e1d6a206b6f7a554524f43a692dc2152f1fa3 Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Wed, 13 Dec 2023 16:09:13 +0900 Subject: [PATCH 6/7] =?UTF-8?q?[Fix]=20=EC=98=88=EC=A0=95=EB=90=9C=20?= =?UTF-8?q?=ED=86=A0=EB=84=88=EB=A8=BC=ED=8A=B8=20=EB=B6=88=EB=9F=AC?= =?UTF-8?q?=EC=98=A4=EA=B8=B0=20=EA=B3=A0=EC=B9=A8=20#1150?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/tournament.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/pages/tournament.tsx b/pages/tournament.tsx index 938df7784..ebdeea955 100644 --- a/pages/tournament.tsx +++ b/pages/tournament.tsx @@ -1,4 +1,3 @@ -import { start } from 'repl'; import { Match } from '@g-loot/react-tournament-brackets/dist/src/types'; import React, { useState, useEffect, useCallback, useRef } from 'react'; import { useQuery } from 'react-query'; @@ -7,17 +6,12 @@ import { TournamentData, TournamentGame } from 'types/tournamentTypes'; import { instance } from 'utils/axios'; import { convertTournamentGamesToBracketMatchs } from 'utils/handleTournamentGame'; import { errorState } from 'utils/recoil/error'; -import { clickedTournamentState } from 'utils/recoil/tournament'; import TournamentBraket from 'components/tournament/TournamentBraket'; import TournamentCard from 'components/tournament/TournamentCard'; import styles from 'styles/tournament/TournamentContainer.module.scss'; export default function Tournament() { const setError = useSetRecoilState(errorState); - const sethighLightUser = useSetRecoilState(clickedTournamentState); - const [waitTournament, setWaitTournament] = useState( - null - ); const [openTournamentId, setOpenTournamentId] = useState(0); const [openTournament, setOpenTournament] = useState([]); const [containerSize, setContainerSize] = useState({ width: 0, height: 0 }); @@ -86,7 +80,7 @@ export default function Tournament() {

Tournament

예정된 토너먼트
- {waitTournament?.tournaments.map((tournament) => ( + {waitInfo.data?.tournaments.map((tournament) => (
From 85f31e0629fbc1d956b51ff4aa9ab0861404a278 Mon Sep 17 00:00:00 2001 From: Junho Jeon Date: Wed, 13 Dec 2023 16:14:07 +0900 Subject: [PATCH 7/7] =?UTF-8?q?[Fix]=20=EC=8B=9C=EC=9E=91=20=EC=8B=9C?= =?UTF-8?q?=EA=B0=84=20=EB=82=98=EC=98=A4=EB=8A=94=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20#=201150?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/modal/tournament/TournamentRegistryModal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx index b3b1924f3..cf3d0a8a1 100644 --- a/components/modal/tournament/TournamentRegistryModal.tsx +++ b/components/modal/tournament/TournamentRegistryModal.tsx @@ -5,7 +5,7 @@ import { MdPeopleAlt } from 'react-icons/md'; import { QUILL_FORMATS } from 'types/quillTypes'; import { TournamentInfo } from 'types/tournamentTypes'; import { instance } from 'utils/axios'; -import { dateToString } from 'utils/handleTime'; +import { dateToKRLocaleTimeString } from 'utils/handleTime'; import { errorState } from 'utils/recoil/error'; import { modalState } from 'utils/recoil/modal'; import { toastState } from 'utils/recoil/toast'; @@ -88,7 +88,7 @@ export default function TournamentRegistryModal({ useEffect(() => { getStatus(); const date = new Date(startTime); - setOpenDate(dateToString(date)); + setOpenDate(dateToKRLocaleTimeString(date)); }, []); const closeModalButtonHandler = () => {