[WIP] 리팩토링 중 #1203

42organization · Dec 22, 2023 · b483430 · b483430
1 parent 9cdede9
commit b483430
Showing 1 changed file with 36 additions and 43 deletions.
diff --git a/pages/tournament.tsx b/pages/tournament.tsx
@@ -4,20 +4,21 @@ 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() {
   const setError = useSetRecoilState(errorState);
   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,42 +56,42 @@ 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}>
       <h1 className={styles.title}>Tournament</h1>
       <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>
   );