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 ( <>
- }> + }> } /> } /> 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 ( +
+
+ 로딩중... +
+ ); +} 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; +}