Merge branch 'main' into feat/랜딩페이지-토너먼트-배너-ui-변경-#1149

42organization · Dec 12, 2023 · b88c8ad · b88c8ad
2 parents 2bdadfe + 889f147
commit b88c8ad
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 41 deletions.
diff --git a/components/tournament-record/UserTournamentBracket.tsx b/components/tournament-record/UserTournamentBracket.tsx
@@ -1,8 +1,9 @@
 import { Match } from '@g-loot/react-tournament-brackets/dist/src/types';
-import { useCallback, useEffect, useState, useRef } from 'react';
-import { TournamentGame } from 'types/tournamentTypes';
+import { useQuery } from 'react-query';
+import { useSetRecoilState } from 'recoil';
 import { convertTournamentGamesToBracketMatchs } from 'utils/handleTournamentGame';
 import { mockInstance } from 'utils/mockAxios';
+import { errorState } from 'utils/recoil/error';
 import TournamentBraket from 'components/tournament/TournamentBraket';
 import useComponentSize from 'hooks/util/useComponentSize';
 import styles from 'styles/tournament-record/UserTournamentBracket.module.scss';
@@ -14,51 +15,38 @@ interface UserTournamentBracketProps {
 export default function UserTournamentBraket({
   tournamentId,
 }: UserTournamentBracketProps) {
+  const setError = useSetRecoilState(errorState);
   const [ref, size] = useComponentSize<HTMLDivElement>();
 
-  const [bracketMatchs, setBracketMatchs] = useState<Match[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
+  const fetchTournamentGames = async () => {
+    const res = await mockInstance.get(`/tournament/${tournamentId}/games`);
+    return convertTournamentGamesToBracketMatchs(res.data.games);
+  };
 
-  // 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);
+  const {
+    data: bracketMatches = [],
+    isLoading,
+    isError,
+  } = useQuery<Match[]>(
+    ['tournamentMatches', tournamentId],
+    () => fetchTournamentGames(),
+    {
+      enabled: !!tournamentId, // tournamentId가 undefined가 아닐 때만 작동하도록
+      staleTime: 86400000, // 하루
     }
-  }, [tournamentId]);
+  );
 
-  useEffect(() => {
-    setIsLoading(true);
-    const identifier = setTimeout(() => {
-      console.log('fetching tournament game data..');
-      fetchTournamentGames();
-    }, 500);
-    return () => clearTimeout(identifier);
-  }, [tournamentId, fetchTournamentGames]);
+  if (isError) {
+    setError('JC03');
+  }
 
   return (
     <div ref={ref} className={styles.bracketContainer}>
       {isLoading ? (
         <div className={styles.loadingAnimation} />
       ) : (
         <TournamentBraket
-          singleEliminationBracketMatchs={bracketMatchs}
+          singleEliminationBracketMatchs={bracketMatches}
           containerSize={size}
         />
       )}

diff --git a/styles/Layout/MegaPhone.module.scss b/styles/Layout/MegaPhone.module.scss
@@ -1,12 +1,14 @@
+$bannerHeight: 3rem;
+
 .rollingBanner {
   position: relative;
   display: flex;
   width: 100%;
   max-width: 28rem;
-  height: 2.8rem;
+  height: $bannerHeight;
   overflow: hidden;
-  background-color: rgba(0, 0, 0, 0.7);
-  border-radius: 10px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 0.7rem;
   justify-content: center;
   align-items: center;
 }
@@ -19,11 +21,10 @@
 
 .contentWrapper {
   display: flex;
-  height: 2.8rem;
+  height: $bannerHeight;
   flex-direction: column;
-  color: rgba(255, 255, 0, 0.8);
+  color: rgb(255, 255, 0);
   text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
-  background-color: rgba(0, 0, 0, 0.7);
   justify-content: flex-start;
   align-items: center;
 }