From b4834307072ea019ef2dfc980ae217ba4d23e9b1 Mon Sep 17 00:00:00 2001
From: Clearsu <clearwater1219@gmail.com>
Date: Fri, 22 Dec 2023 15:47:52 +0900
Subject: [PATCH] =?UTF-8?q?[WIP]=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20?=
 =?UTF-8?q?=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<number | undefined>(
     undefined
   );
-  const [openTournament, setOpenTournament] = useState<Match[]>([]);
-  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
-  const containerRef = useRef<HTMLDivElement | null>(null); // useRef를 사용하여 Ref 생성
+  // const [openTournament, setOpenTournament] = useState<Match[]>([]);
+  // const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+  // const containerRef = useRef<HTMLDivElement | null>(null); // useRef를 사용하여 Ref 생성
 
   const openInfo = useQuery<TournamentData>(
     '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 (
     <div className={styles.pageWrap}>
@@ -88,9 +89,9 @@ export default function Tournament() {
       <div className={styles.tournamentContainer}>
         <div className={styles.tournamentText}> 예정된 토너먼트 </div>
         {waitInfo.data?.tournaments.length === 0 ? (
-          <h4 className={styles.noTournamentText}>
+          <div className={styles.noTournamentText}>
             예정된 토너먼트가 없습니다.
-          </h4>
+          </div>
         ) : (
           waitInfo.data?.tournaments.map((tournament) => (
             <div className={styles.cardContainer} key={tournament.tournamentId}>
@@ -99,18 +100,10 @@ export default function Tournament() {
           ))
         )}
         <div className={styles.tournamentText}> 진행중인 토너먼트 </div>
-        {openInfo.data && openInfo.data.tournaments?.length === 0 ? (
-          <div className={styles.noTournamentText}>
-            진행중인 토너먼트가 없습니다
-          </div>
-        ) : (
-          <div className={styles.openTournamentBox} ref={containerRef}>
-            <TournamentBraket
-              singleEliminationBracketMatchs={openTournament}
-              containerSize={containerSize}
-            />
-          </div>
-        )}
+        <UserTournamentBraket
+          tournamentId={openTournamentId}
+          fallbackText='진행중인 토너먼트가 없습니다.'
+        />
       </div>
     </div>
   );