refactor: Change DotLottie To Custom loading component (#45)

- Animated progress bars that fill sequentially
- Auto-resetting animation loop every 10 steps
- Clean grid layout with proper spacing

Author: choiseona

client/package.json

@@ -16,7 +16,7 @@
     "fix": "pnpm format && pnpm lint:fix",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lighthouse": "playwright test --project=lighthouse"
+    "lighthouse": "pnpm build && playwright test --project=lighthouse"
   },
   "dependencies": {
     "@lottiefiles/dotlottie-react": "^0.10.1",

client/src/components/ui/BackgroundImage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import tiny from '@/assets/background-tiny.png';
 import { CDN } from '@/constants/cdn';
 import { cn } from '@/utils/cn';
@@ -9,14 +9,6 @@ interface BackgroundImageProps {
 
 const BackgroundImage = ({ className }: BackgroundImageProps) => {
   const [isLoaded, setIsLoaded] = useState(false);
-  const imgRef = useRef<HTMLImageElement>(null);
-
-  useEffect(() => {
-    const img = imgRef.current;
-    if (img) {
-      img.onload = () => setIsLoaded(true);
-    }
-  }, [imgRef.current]);
 
   return (
     <>
@@ -40,7 +32,7 @@ const BackgroundImage = ({ className }: BackgroundImageProps) => {
             'h-full w-full object-cover transition-opacity duration-300',
             isLoaded ? 'opacity-100' : 'opacity-0',
           )}
-          ref={imgRef}
+          onLoad={() => setIsLoaded(true)}
           loading="lazy"
           decoding="async"
         />

client/src/components/ui/Loading.tsx

@@ -1,10 +1,34 @@
-import { DotLottieReact } from '@lottiefiles/dotlottie-react';
-import loading from '@/assets/lottie/loading.lottie';
+import { useEffect, useState } from 'react';
 
 export const Loading = () => {
+  const [barCount, setBarCount] = useState(1);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setBarCount((prevCount) => (prevCount >= 10 ? 1 : prevCount + 1));
+    }, 500);
+
+    return () => clearInterval(timer);
+  }, []);
+
   return (
-    <div className="flex h-screen w-full items-center justify-center">
-      <DotLottieReact src={loading} loop autoplay className="h-96 w-96" />
+    <div className="relative min-h-screen min-w-80 bg-violet-950 bg-fixed antialiased">
+      <div className="flex h-screen w-full flex-col items-center justify-center gap-2">
+        <span className="text-3xl text-violet-300">LOADING...</span>
+        <div className="relative h-14 w-full max-w-64 border-8 border-violet-300">
+          <div className="absolute -left-2 -top-2 h-2 w-2 bg-slate-950" />
+          <div className="absolute -right-2 -top-2 h-2 w-2 bg-slate-950" />
+          <div className="absolute -bottom-2 -left-2 h-2 w-2 bg-slate-950" />
+          <div className="absolute -bottom-2 -right-2 h-2 w-2 bg-slate-950" />
+          <div className="grid h-full grid-cols-10 gap-2 p-2">
+            {Array.from({ length: barCount }).map((_, index) => (
+              <div key={index} className="relative h-full bg-violet-300">
+                <div className="absolute bottom-0 h-1/2 w-full bg-violet-500" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

client/src/layouts/GameLayout.tsx

@@ -1,10 +1,9 @@
-import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import { Outlet } from 'react-router-dom';
-import loading from '@/assets/lottie/loading.lottie';
 import { ChatContatiner } from '@/components/chat/ChatContatiner';
 import { NavigationModal } from '@/components/modal/NavigationModal';
 import { PlayerCardList } from '@/components/player/PlayerCardList';
 import BackgroundImage from '@/components/ui/BackgroundImage';
+import { Loading } from '@/components/ui/Loading';
 import { useGameSocket } from '@/hooks/socket/useGameSocket';
 import BrowserNavigationGuard from '@/layouts/BrowserNavigationGuard';
 import GameHeader from '@/layouts/GameHeader';
@@ -19,11 +18,7 @@ const GameLayout = () => {
 
   // 연결 상태에 따른 로딩 표시
   if (!isConnected) {
-    return (
-      <div className="flex h-screen w-full items-center justify-center">
-        <DotLottieReact src={loading} loop autoplay className="h-96 w-96" />
-      </div>
-    );
+    return <Loading />;
   }
 
   return (

client/src/main.tsx

@@ -2,13 +2,14 @@ import { StrictMode, Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
 import '@/index.css';
 import { RouterProvider } from 'react-router-dom';
+import { Loading } from './components/ui/Loading';
 import App from '@/App.tsx';
 import { router } from '@/routes';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App>
-      <Suspense fallback={null}>
+      <Suspense fallback={<Loading />}>
         <RouterProvider router={router} future={{ v7_startTransition: true }} />
       </Suspense>
     </App>