From 2624f7cd2e12bd0aa6231806ae7d9ae1c56f6eb3 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Fri, 2 May 2025 23:56:42 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Suspense=20fallback=20?=
 =?UTF-8?q?=EC=8B=9C=20LoadingSpinner=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                   |  4 +-
 src/components/common/LoadingSpinner.jsx      | 10 +++++
 .../common/LoadingSpinner.module.scss         | 37 +++++++++++++++++++
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 src/components/common/LoadingSpinner.jsx
 create mode 100644 src/components/common/LoadingSpinner.module.scss

diff --git a/src/App.jsx b/src/App.jsx
index 9130095..3fe5bae 100644
--- a/src/App.jsx
+++ b/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 />} />
diff --git a/src/components/common/LoadingSpinner.jsx b/src/components/common/LoadingSpinner.jsx
new file mode 100644
index 0000000..b3d1250
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/common/LoadingSpinner.module.scss b/src/components/common/LoadingSpinner.module.scss
new file mode 100644
index 0000000..2b3f36c
--- /dev/null
+++ b/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;
+}