[Feature] TanstackQuery & Suspense 기반 APi 페칭 로딩 UI 적용 (#384)

* feat : Skeleton 공용 컴포넌트 구현

* Refactor : 열린 배틀 목록 조회, 닫힌 배틀 목록 조회 useQuery들 useSuspenseQuery로 마이그레이션
>>
>> - 수동 로딩/에러 상태 관리 코드 제거

* fix : pnpm workspace 의존성 해결을 위한 Dockerfile 수정

- 백엔드 Dockerfile에 frontend/package.json 및 packages 폴더 추가
- 프론트엔드 Dockerfile에 backend/package.json 및 packages 폴더 추가

* style : 배틀 생성 페이지에서 배틀 생성 버튼 text 변경

- 기존 + 아이콘이였지만 배틀 생성하기 텍스트로 수정 했습니다

* feat : 로딩 모달 컴포넌트 구현 및 배틀 생성시 api 대기 시간까지 로딩 모달 띄우는 기능  구현

* feat : 메인 페이지에서 조회되는 배틀이 없는 경우 표시할 빈 배틀 목록 UI 컴포넌트 구현

- 진행중/종료된 배틀이 없는 경우 각각 안내 컴포넌트 표시

* refactor: 배틀/결과 페이지 로딩을 Suspense 패턴으로 통일

- useQuery → useSuspenseQuery 전환 (useGetBattleInfo, useGetBattleResult)
- 페이지 내 isLoading 체크 로직 제거 후 BattlePage, BattleResultPage를 App.tsx에서 Suspense로 래핑 및 로딩 UI 제공

* refactor: LoadingModal을 LoadingOverlay로 이름 변경

- 여러 용도에서 사용 되기에 컴포넌트명을 수정했습니다

Author: JuJangGwon

backend/Dockerfile

@@ -8,6 +8,8 @@ RUN corepack enable
 # Copy workspace 
 COPY pnpm-lock.yaml pnpm-workspace.yaml package.json ./
 COPY backend/package.json ./backend/package.json
+COPY frontend/package.json ./frontend/package.json
+COPY packages ./packages
 
 # 의존성 설치
 ENV HUSKY=0
@@ -36,6 +38,7 @@ RUN corepack enable
 # Copy workspace files
 COPY pnpm-lock.yaml pnpm-workspace.yaml package.json ./
 COPY backend/package.json ./backend/package.json
+COPY packages ./packages
 
 # 의존성 설치 (프로덕션용, husky 스크립트 무시)
 ENV HUSKY=0

frontend/Dockerfile

@@ -8,6 +8,8 @@ RUN corepack enable
 
 COPY pnpm-lock.yaml pnpm-workspace.yaml package.json ./
 COPY frontend/package.json ./frontend/package.json
+COPY backend/package.json ./backend/package.json
+COPY packages ./packages
 
 # Install
 ENV HUSKY=0

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
-import { useEffect } from 'react';
+import { useEffect, Suspense } from 'react';
 import * as Sentry from '@sentry/react';
 import BattleCreatePage from './pages/battleCreatePage';
 import MainPage from './pages/mainPage';
@@ -15,6 +15,7 @@ import ErrorPage from './pages/errorPage';
 import TutorialBattlePage from './pages/tutorialPage/battle';
 import { TUTORIAL_BATTLE_INFO } from './pages/tutorialPage/const/tutorialBattle';
 import { ToastContainer } from './commons/components/toast/ToastContainer';
+import LoadingOverlay from './commons/components/LoadingOverlay';
 import { useAuthStore } from './commons/stores/authStore';
 import './App.css';
 
@@ -35,7 +36,14 @@ const router = sentryCreateBrowserRouter([
         path: 'battle/create',
         element: <BattleCreatePage />
       },
-      { path: 'battle/:id', element: <BattlePage /> },
+      {
+        path: 'battle/:id',
+        element: (
+          <Suspense fallback={<LoadingOverlay isOpen={true} message="배틀 정보를 불러오는 중..." />}>
+            <BattlePage />
+          </Suspense>
+        )
+      },
       { path: 'battle/:id/team-select', element: <TeamSelectPage /> },
       {
         path: 'tutorial/team-select',
@@ -44,7 +52,14 @@ const router = sentryCreateBrowserRouter([
       },
       { path: 'tutorial/battle', element: <TutorialBattlePage />, loader: () => TUTORIAL_BATTLE_INFO },
       { path: 'battles/:inviteCode', element: <InvitePage /> },
-      { path: 'battles/:id/result', element: <BattleResultPage /> }
+      {
+        path: 'battles/:id/result',
+        element: (
+          <Suspense fallback={<LoadingOverlay isOpen={true} message="배틀 결과를 불러오는 중..." />}>
+            <BattleResultPage />
+          </Suspense>
+        )
+      }
     ]
   }
 ]);

frontend/src/commons/components/ErrorBoundary/SectionErrorFallback.tsx

@@ -5,19 +5,19 @@ interface SectionErrorFallbackProps {
   reset: () => void;
   title?: string;
   className?: string;
-  minHeight?: string;
+  height?: string;
 }
 
 export default function SectionErrorFallback({
   error,
   reset,
   title = '데이터를 불러올 수 없습니다',
   className = '',
-  minHeight = '18.75rem'
+  height = '18.75rem'
 }: SectionErrorFallbackProps) {
   return (
     <div
-      style={{ minHeight }}
+      style={{ height }}
       className={`w-full bg-[#1A1A2E] border border-[#364153] rounded-xl p-8 flex flex-col items-center justify-center animate-fadeIn ${className}`}
     >
       <div className="flex flex-col items-center gap-4 text-center">

frontend/src/commons/components/LoadingModal.tsx

@@ -0,0 +1,34 @@
+interface LoadingModalProps {
+  isOpen: boolean;
+  message?: string;
+}
+
+export default function LoadingModal({ isOpen, message = '처리 중입니다...' }: LoadingModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md animate-in fade-in duration-200">
+      <div className="relative rounded-3xl border border-orange-500/20 bg-gradient-to-br from-[#1a1a2e] to-[#121226] p-10 shadow-[0_20px_60px_rgba(255,105,0,0.3)] animate-in zoom-in-95 duration-300">
+        <div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-orange-500/10 to-transparent blur-xl"></div>
+
+        <div className="relative flex flex-col items-center gap-6">
+          <div className="relative">
+            <div className="h-16 w-16 animate-spin rounded-full border-4 border-orange-500/20 border-t-orange-500 shadow-[0_0_20px_rgba(255,105,0,0.5)]"></div>
+            <div className="absolute inset-0 h-16 w-16 animate-ping rounded-full border-4 border-orange-500/30 opacity-20"></div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <p className="text-xl font-bold bg-gradient-to-r from-orange-400 to-orange-600 bg-clip-text text-transparent">
+              {message}
+            </p>
+            <div className="flex gap-1">
+              <span className="h-2 w-2 animate-bounce rounded-full bg-orange-500 [animation-delay:-0.3s]"></span>
+              <span className="h-2 w-2 animate-bounce rounded-full bg-orange-500 [animation-delay:-0.15s]"></span>
+              <span className="h-2 w-2 animate-bounce rounded-full bg-orange-500"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/commons/components/LoadingOverlay.tsx

@@ -0,0 +1,34 @@
+interface LoadingOverlayProps {
+  isOpen: boolean;
+  message?: string;
+}
+
+export default function LoadingOverlay({ isOpen, message = '처리 중입니다...' }: LoadingOverlayProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md animate-in fade-in duration-200">
+      <div className="relative rounded-3xl border border-orange-500/20 bg-gradient-to-br from-[#1a1a2e] to-[#121226] p-10 shadow-[0_20px_60px_rgba(255,105,0,0.3)] animate-in zoom-in-95 duration-300">
+        <div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-orange-500/10 to-transparent blur-xl"></div>
+
+        <div className="relative flex flex-col items-center gap-6">
+          <div className="relative">
+            <div className="h-16 w-16 animate-spin rounded-full border-4 border-orange-500/20 border-t-orange-500 shadow-[0_0_20px_rgba(255,105,0,0.5)]"></div>
+            <div className="absolute inset-0 h-16 w-16 animate-ping rounded-full border-4 border-orange-500/30 opacity-20"></div>
+          </div>
+
+          <div className="flex flex-col items-center gap-2">
+            <p className="text-xl font-bold bg-gradient-to-r from-orange-400 to-orange-600 bg-clip-text text-transparent">
+              {message}
+            </p>
+            <div className="flex gap-1">
+              <span className="h-2 w-2 animate-bounce rounded-full bg-orange-500 [animation-delay:-0.3s]"></span>
+              <span className="h-2 w-2 animate-bounce rounded-full bg-orange-500 [animation-delay:-0.15s]"></span>
+              <span className="h-2 w-2 animate-bounce rounded-full bg-orange-500"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/commons/components/Skeleton.tsx

@@ -0,0 +1,14 @@
+interface SkeletonProps {
+  width?: string;
+  height?: string;
+  className?: string;
+}
+
+export default function Skeleton({ width, height, className = '' }: SkeletonProps) {
+  return (
+    <div
+      className={`bg-gradient-to-r from-[#1a1a2e] via-[#252540] to-[#1a1a2e] bg-[length:200%_100%] animate-pulse  ${className}`}
+      style={{ width: width, height: height }}
+    />
+  );
+}

frontend/src/commons/hooks/useGetBattleInfo.ts

@@ -1,14 +1,12 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import getBattleInfo from '@/commons/apis/getBattleInfo';
 
 export function useGetBattleInfo(battleId: string) {
-  const { data, ...rest } = useQuery({
+  const { data, ...rest } = useSuspenseQuery({
     queryKey: ['battle', 'info', battleId],
     queryFn: () => getBattleInfo(battleId),
     staleTime: 0,
-    gcTime: 1000 * 60 * 5,
-    enabled: !!battleId,
-    throwOnError: true
+    gcTime: 1000 * 60 * 5
   });
 
   return {