From 8db2c6c1cf1a7526f48dfc40a116262199462ae1 Mon Sep 17 00:00:00 2001
From: Hyein Jeong <jhi2359@naver.com>
Date: Tue, 26 Nov 2024 17:01:23 +0900
Subject: [PATCH] =?UTF-8?q?[FE][Feat]=20#274=20:=20=EC=A7=80=EB=8F=84=20?=
 =?UTF-8?q?=EA=B0=80=EC=A0=B8=EC=98=AC=20=EB=95=8C=20=EB=A1=9C=EB=94=A9=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=B6=94=EA=B0=80=20(=EB=A1=9C=EB=94=A9?=
 =?UTF-8?q?=20=EC=8A=A4=ED=94=BC=EB=84=88=EB=A1=9C=20=EB=8C=80=EC=B2=B4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 지도 가져올 때 로딩 화면 추가 (로딩 스피너로 대체)
- 홈 화면에서 지도 로딩 화면 적용
---
 frontend/src/App.css                          | 19 +++++++++++++++++++
 .../common/loadingSpinner/LoadingSpinner.tsx  |  3 +++
 frontend/src/pages/Main.tsx                   |  9 ++++++---
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/component/common/loadingSpinner/LoadingSpinner.tsx

diff --git a/frontend/src/App.css b/frontend/src/App.css
index e6a56888..8aab6cad 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -44,3 +44,22 @@
   -ms-user-select:none;
   user-select:none
 }
+
+.spinner {
+  width: 3rem;
+  height: 3rem;
+  border: 0.5rem solid rgba(0, 0, 0, 0.1);
+  border-top: 0.5rem solid #1c58b3;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 10px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/frontend/src/component/common/loadingSpinner/LoadingSpinner.tsx b/frontend/src/component/common/loadingSpinner/LoadingSpinner.tsx
new file mode 100644
index 00000000..e208f6ac
--- /dev/null
+++ b/frontend/src/component/common/loadingSpinner/LoadingSpinner.tsx
@@ -0,0 +1,3 @@
+export const LoadingSpinner = () => {
+  return <div className="spinner" />;
+};
diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx
index b0c787e0..049c9680 100644
--- a/frontend/src/pages/Main.tsx
+++ b/frontend/src/pages/Main.tsx
@@ -10,6 +10,7 @@ import { AppConfig } from '@/lib/constants/commonConstants.ts';
 import { v4 as uuidv4 } from 'uuid';
 import { getUserLocation } from '@/hooks/getUserLocation.ts';
 import { MapCanvasForView } from '@/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx';
+import { LoadingSpinner } from '@/component/common/loadingSpinner/LoadingSpinner.tsx';
 
 const contentData = [
   {
@@ -103,13 +104,15 @@ export const Main = () => {
               otherLocations={otherLocations}
             />
           ) : (
-            <section className="flex h-full items-center justify-center">
+            <section className="flex h-full flex-col items-center justify-center gap-2 text-xl text-gray-700">
+              <LoadingSpinner />
               Loading map data...
             </section>
           )
         ) : (
-          <section className="flex h-full items-center justify-center">
-            {error ? `Error: ${error}` : 'Loading'}
+          <section className="flex h-full flex-col items-center justify-center gap-2 text-xl text-gray-700">
+            <LoadingSpinner />
+            {error ? `Error: ${error}` : 'Loading map data...'}
           </section>
         )}
       </main>