[💎 : refactor] Lazy Loading 적용 (#12)

- 메인 페이지에 접속할 때 사용하지 않는 컴포넌트들까지 먼저 로드시키지 않기 위해 적용
- Lazy Loading이 적용된 컴포넌트는 빌드 시, 별도의 js 파일로 분리됨

src/App.tsx

@@ -1,15 +1,16 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, lazy, Suspense } from 'react';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import { auth } from './firebase.ts';
-import ProtectedRoute from './components/protected-route.tsx';
-import Home from './routes/home.tsx';
-import Profile from './routes/profile.tsx';
-import SearchResult from './routes/search-result.tsx';
-import Auth from './routes/auth.tsx';
-import Layout from './components/layout.tsx';
-import LoadingSpinner from './components/loading-spinner.tsx';
 import * as S from './styles/global.ts';
 
+const ProtectedRoute = lazy(() => import('./components/protected-route.tsx'));
+const Home = lazy(() => import('./routes/home.tsx'));
+const Profile = lazy(() => import('./routes/profile.tsx'));
+const SearchResult = lazy(() => import('./routes/search-result.tsx'));
+const Auth = lazy(() => import('./routes/auth.tsx'));
+const Layout = lazy(() => import('./components/layout.tsx'));
+const LoadingSpinner = lazy(() => import('./components/loading-spinner.tsx'));
+
 const router = createBrowserRouter([
   {
     path: '/',
@@ -51,7 +52,9 @@ function App() {
   return (
     <>
       <S.GlobalStyles />
-      {isLoading ? <LoadingSpinner /> : <RouterProvider router={router} />}
+      <Suspense fallback={<LoadingSpinner />}>
+        {isLoading ? <LoadingSpinner /> : <RouterProvider router={router} />}
+      </Suspense>
     </>
   );
 }