refactor: 구글 지도를 로드해주는 페이지와 UI를 렌더링 하는 페이지 분리

[#903]

frontend/src/App.tsx

@@ -1,18 +1,27 @@
 import { Status, Wrapper } from '@googlemaps/react-wrapper';
 import Loading from 'components/ui/Loading';
 
-import CarFfeineMap from '@map/CarFfeineMap';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import NotFound from '@ui/NotFound';
 
+const RedirectToGoogleMaps = () => {
+  const navigate = useNavigate();
+  useEffect(() => {
+    navigate('/maps');
+  }, []);
+  return <></>;
+};
+
 const render = (status: Status) => {
   switch (status) {
     case Status.LOADING:
       return <Loading />;
     case Status.FAILURE:
       return <NotFound />;
     case Status.SUCCESS:
-      return <CarFfeineMap />;
+      return <RedirectToGoogleMaps />;
   }
 };
 

frontend/src/router/index.tsx

@@ -1,11 +1,13 @@
+import { lazy } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 
-import GoogleLogin from '@components/login-page/GoogleLogin';
-
 import NotFound from '@ui/NotFound';
 
 import App from '../App';
 
+const GoogleLogin = lazy(() => import('@components/login-page/GoogleLogin'));
+const CarFfeineMap = lazy(() => import('@map/CarFfeineMap'));
+
 export const router = createBrowserRouter([
   {
     path: '/google',
@@ -16,4 +18,8 @@ export const router = createBrowserRouter([
     element: <App />,
     errorElement: <NotFound />,
   },
+  {
+    path: '/maps',
+    element: <CarFfeineMap />,
+  },
 ]);