Merge branch 'main' into feat/관리자-토너먼트-페이지-api-연동-#1131

components/modal/admin/AdminEditTournamentBraket.tsx

@@ -1,10 +1,11 @@
 import { Match } from '@g-loot/react-tournament-brackets/dist/src/types';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, useRef } from 'react';
 import { ITournament } from 'types/admin/adminTournamentTypes';
 import { TournamentGame } from 'types/tournamentTypes';
 import { convertTournamentGamesToBracketMatchs } from 'utils/handleTournamentGame';
 import { mockInstance } from 'utils/mockAxios';
 import TournamentBraket from 'components/tournament/TournamentBraket';
+import useComponentSize from 'hooks/util/useComponentSize';
 import styles from 'styles/admin/modal/AdminEditTournamentBraket.module.scss';
 
 const tournamentId = 1;
@@ -13,6 +14,7 @@ export default function AdminEditTournamentBraket({
   tournamentId,
 }: ITournament) {
   const [bracketMatchs, setBracketMatchs] = useState<Match[]>([]);
+  const [ref, size] = useComponentSize<HTMLDivElement>();
 
   // const putHandler = async () => {
   //   await instanceInManage.put(
@@ -41,8 +43,11 @@ export default function AdminEditTournamentBraket({
   }, [fetchTournamentGames]);
 
   return (
-    <div className={styles['whole']}>
-      <TournamentBraket singleEliminationBracketMatchs={bracketMatchs} />
+    <div className={styles['whole']} ref={ref}>
+      <TournamentBraket
+        singleEliminationBracketMatchs={bracketMatchs}
+        containerSize={size}
+      />
       <button className={styles.editBtn}>수정 하기</button>
     </div>
   ); //*onClick={putHandler}

components/tournament-record/UserTournamentBracket.tsx

@@ -0,0 +1,67 @@
+import { Match } from '@g-loot/react-tournament-brackets/dist/src/types';
+import { useCallback, useEffect, useState, useRef } from 'react';
+import { TournamentGame } from 'types/tournamentTypes';
+import { convertTournamentGamesToBracketMatchs } from 'utils/handleTournamentGame';
+import { mockInstance } from 'utils/mockAxios';
+import TournamentBraket from 'components/tournament/TournamentBraket';
+import useComponentSize from 'hooks/util/useComponentSize';
+import styles from 'styles/tournament-record/UserTournamentBracket.module.scss';
+
+interface UserTournamentBracketProps {
+  tournamentId: number | undefined;
+}
+
+export default function UserTournamentBraket({
+  tournamentId,
+}: UserTournamentBracketProps) {
+  const [ref, size] = useComponentSize<HTMLDivElement>();
+
+  const [bracketMatchs, setBracketMatchs] = useState<Match[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // const putHandler = async () => {
+  //   await instanceInManage.put(
+  //     `/pingpong/admin/tournaments/${tournamentId}}/games`,
+  //     {
+  //       games: tournament
+  //     }
+  //   );
+  // };
+
+  const fetchTournamentGames = useCallback(async () => {
+    console.log('Fetching more data...');
+    try {
+      const res = await mockInstance.get(`/tournament/${tournamentId}/games`);
+      setIsLoading(false);
+      const data: TournamentGame[] = res.data.games;
+      const bracketMatchs = convertTournamentGamesToBracketMatchs(data);
+      setBracketMatchs(bracketMatchs);
+      return data;
+    } catch (error) {
+      setIsLoading(false);
+      console.error('Error fetching data:', error);
+    }
+  }, [tournamentId]);
+
+  useEffect(() => {
+    setIsLoading(true);
+    const identifier = setTimeout(() => {
+      console.log('fetching tournament game data..');
+      fetchTournamentGames();
+    }, 500);
+    return () => clearTimeout(identifier);
+  }, [tournamentId, fetchTournamentGames]);
+
+  return (
+    <div ref={ref} className={styles.bracketContainer}>
+      {isLoading ? (
+        <div className={styles.loadingAnimation} />
+      ) : (
+        <TournamentBraket
+          singleEliminationBracketMatchs={bracketMatchs}
+          containerSize={size}
+        />
+      )}
+    </div>
+  );
+}

components/tournament-record/WinnerSwiper.tsx

@@ -27,7 +27,7 @@ const WinnerSwiper = forwardRef(
       async (page: number) => {
         console.log('Fetching more data...');
         const res = await mockInstance.get(
-          `/tournament?page=${page}&type=${props.type}&size=${props.size}`
+          `/tournament?page=${page}&type=${props.type}&size=${props.size}&status=END`
         );
         return res.data;
       },
@@ -93,4 +93,4 @@ const WinnerSwiper = forwardRef(
 // forwardRef에 들어가는 익명함수에 대한 name
 WinnerSwiper.displayName = 'WinnerSwiper';
 
-export default WinnerSwiper;
+export default WinnerSwiper;

components/tournament/TournamentBraket.tsx

@@ -33,18 +33,16 @@ const SVGViewer = dynamic<React.ComponentProps<typeof StaticSVGViewer>>(
 
 interface TournamentBraketProps {
   singleEliminationBracketMatchs: Match[];
-  containerSize?: { width: number; height: number };
+  containerSize: { width: number | undefined; height: number | undefined };
 }
 
 export default function TournamentBraket({
   singleEliminationBracketMatchs,
   containerSize,
 }: TournamentBraketProps) {
-  if (singleEliminationBracketMatchs.length === 0)
+  if (singleEliminationBracketMatchs.length === 0) {
     return <h1 style={{ color: 'white' }}>Loading...</h1>;
-  // const [width, height] = useWindowSize();
-  const finalWidth = containerSize?.width; //Math.max(width - 50, 500);
-  const finalHeight = containerSize?.height; //Math.max(height - 100, 500);
+  }
 
   return (
     <SingleEliminationBracket
@@ -66,8 +64,8 @@ export default function TournamentBraket({
         <SVGViewer
           background={'rgba(0, 0, 0, 0)'}
           SVGBackground={'rgba(0, 0, 0, 0)'}
-          width={finalWidth}
-          height={finalHeight}
+          width={containerSize.width}
+          height={containerSize.height}
           {...props}
         >
           {children}

hooks/util/useComponentSize.ts

@@ -0,0 +1,28 @@
+import { useState, useLayoutEffect, useRef } from 'react';
+
+interface Size {
+  width: number | undefined;
+  height: number | undefined;
+}
+
+export default function useComponentSize<T extends HTMLElement>(): [
+  React.RefObject<T>,
+  Size
+] {
+  const ref = useRef<T>(null);
+  const [size, setSize] = useState<Size>({
+    width: undefined,
+    height: undefined,
+  });
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      setSize({
+        width: ref.current.offsetWidth,
+        height: ref.current.offsetHeight,
+      });
+    }
+  }, []);
+
+  return [ref, size];
+}

pages/tournament-record.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from 'react';
 import { SwiperRef } from 'swiper/react';
 import { TournamentInfo } from 'types/tournamentTypes';
 import LeagueButtonGroup from 'components/tournament-record/LeagueButtonGroup';
+import UserTournamentBracket from 'components/tournament-record/UserTournamentBracket';
 import WinnerSwiper from 'components/tournament-record/WinnerSwiper';
 import styles from 'styles/tournament-record/TournamentRecord.module.scss';
 
@@ -35,7 +36,7 @@ export default function TournamentRecord() {
         </p>
         <p className={styles.date}>{endTime?.toLocaleDateString()}</p>
       </div>
-      <div className={styles.bracketContainer}></div>
+      <UserTournamentBracket tournamentId={tournamentInfo?.tournamentId} />
     </div>
   );
 }

styles/tournament-record/TournamentRecord.module.scss

@@ -42,12 +42,3 @@
     font-size: 0.8rem;
   }
 }
-
-.bracketContainer {
-  width: 100%;
-  height: 21.5rem;
-  margin-top: 1rem;
-  background-color: rgba(112, 0, 255, 0.17);
-  border: 1px solid #c67dff;
-  border-radius: 26px;
-}

styles/tournament-record/UserTournamentBracket.module.scss

@@ -0,0 +1,33 @@
+@import 'styles/common.scss';
+
+.bracketContainer {
+  display: flex;
+  width: 100%;
+  height: 30rem;
+  margin-top: 1rem;
+  overflow: hidden;
+  background-color: rgba(112, 0, 225, 0.17);
+  border: 1px solid #c67dff;
+  border-radius: 26px;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes Rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loadingAnimation {
+  width: 3rem;
+  height: 3rem;
+  border: 0.3rem solid rgb(167, 167, 167);
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-radius: 50%;
+  animation: Rotate 0.8s infinite linear;
+}

styles/tournament/TournamentMatch.module.scss

@@ -5,8 +5,8 @@
   height: 45%;
   padding: 0.5rem;
   color: white;
-  background-color: $rank-purple;
-  border: 0.1rem solid black;
+  background-color: rgb(55, 0, 101);
+  border: 0.1rem solid white;
   border-radius: 0.6rem;
   justify-content: space-between;
   align-items: center;