[Refactor] loading spinner 컴포넌트 분리 및 fallbackText 추가 #1203

42organization · Dec 22, 2023 · 28a69e6 · 28a69e6
1 parent 2bf417c
commit 28a69e6
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/...urnament-record/UserTournamentBracket.tsx → ...ents/tournament/UserTournamentBracket.tsx b/...urnament-record/UserTournamentBracket.tsx → ...ents/tournament/UserTournamentBracket.tsx
@@ -5,15 +5,18 @@ import { instance } from 'utils/axios';
 import { convertTournamentGamesToBracketMatchs } from 'utils/handleTournamentGame';
 import { errorState } from 'utils/recoil/error';
 import TournamentBraket from 'components/tournament/TournamentBraket';
+import LoadingSpinner from 'components/UI/LoadingSpinner';
 import useComponentSize from 'hooks/util/useComponentSize';
-import styles from 'styles/tournament-record/UserTournamentBracket.module.scss';
+import styles from 'styles/tournament/UserTournamentBracket.module.scss';
 
 interface UserTournamentBracketProps {
   tournamentId: number | undefined;
+  fallbackText?: string;
 }
 
 export default function UserTournamentBraket({
   tournamentId,
+  fallbackText,
 }: UserTournamentBracketProps) {
   const setError = useSetRecoilState(errorState);
   const [ref, size] = useComponentSize<HTMLDivElement>();
@@ -45,12 +48,14 @@ export default function UserTournamentBraket({
   return (
     <div ref={ref} className={styles.bracketContainer}>
       {isLoading ? (
-        <div className={styles.loadingAnimation} />
-      ) : (
+        <LoadingSpinner />
+      ) : tournamentId ? (
         <TournamentBraket
           singleEliminationBracketMatchs={bracketMatches}
           containerSize={size}
         />
+      ) : (
+        <div className={styles.noTournamentText}>{fallbackText}</div>
       )}
     </div>
   );