[FE][Feat] #274 : 지도 가져올 때 로딩 화면 추가 (로딩 스피너로 대체)

- 지도 가져올 때 로딩 화면 추가 (로딩 스피너로 대체)
- 홈 화면에서 지도 로딩 화면 적용

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);
+  }
+}

frontend/src/component/common/loadingSpinner/LoadingSpinner.tsx

@@ -0,0 +1,3 @@
+export const LoadingSpinner = () => {
+  return <div className="spinner" />;
+};

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>