✨ feat: Suspense fallback 시 LoadingSpinner 추가

Author: LeeCh0129

src/App.jsx

@@ -1,7 +1,7 @@
 import './assets/styles/base.scss';
 import { Route, Routes } from 'react-router-dom';
 import { Suspense, lazy } from 'react';
-import UploadProgressBar from './components/common/UploadProgressBar';
+import LoadingSpinner from './components/common/LoadingSpinner';
 import Header from './components/layout/Header/Header';
 
 const RecipientList = lazy(() => import('./pages/RecipientList/RecipientList'));
@@ -16,7 +16,7 @@ export default function App() {
   return (
     <>
       <Header />
-      <Suspense fallback={<UploadProgressBar progress={80} />}>
+      <Suspense fallback={<LoadingSpinner />}>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/list" element={<RecipientList />} />

src/components/common/LoadingSpinner.jsx

@@ -0,0 +1,10 @@
+import styles from './LoadingSpinner.module.scss';
+
+export default function LoadingSpinner() {
+  return (
+    <div className={styles.spinnerWrapper}>
+      <div className={styles.spinner}></div>
+      <span className={styles.text}>로딩중...</span>
+    </div>
+  );
+}

src/components/common/LoadingSpinner.module.scss

@@ -0,0 +1,37 @@
+@use '../../assets/styles/variables.scss' as *;
+
+.spinnerWrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #eee;
+  border-top: 4px solid $purple-600;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.text {
+  color: $purple-600;
+  font-size: 1.1rem;
+  font-weight: 500;
+}