[#191] 지도 lazy적용

src/features/navigate/lib/useDestination.ts

@@ -0,0 +1,41 @@
+import { useStore } from 'zustand';
+import {
+  useFollowAlongStore,
+  useMapLevelStore,
+  useTransportationStore,
+} from '.';
+import { useSearchParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { getSuspenseLocation } from '@/shared';
+import type { TransportationType } from '@/entities/navigate';
+
+const useDestination = () => {
+  const [searchParams] = useSearchParams();
+
+  const { reset: resetFollowAlong } = useStore(useFollowAlongStore);
+  const { reset: resetTransportation, setVehicle } = useStore(
+    useTransportationStore,
+  );
+  const { reset: resetMapLevel } = useStore(useMapLevelStore);
+
+  //이동수단
+  const vehicle = searchParams.get('vehicle');
+
+  useEffect(() => {
+    setVehicle(vehicle as TransportationType);
+  }, [vehicle]);
+
+  const geoLocation = getSuspenseLocation();
+
+  useEffect(() => {
+    return () => {
+      resetTransportation();
+      resetMapLevel();
+      resetFollowAlong();
+    };
+  }, [resetFollowAlong, resetTransportation, resetMapLevel]);
+
+  return { geoLocation };
+};
+
+export default useDestination;

src/features/navigate/lib/useGettingLocation.ts

@@ -0,0 +1,18 @@
+import { useSearchParams } from 'react-router-dom';
+
+const useGettingLocation = () => {
+  const [searchParams] = useSearchParams();
+
+  //좌표
+  const lng = searchParams.get('lnt');
+  const lat = searchParams.get('lat');
+
+  const destination = {
+    lng: lng ? parseFloat(lng) : 0,
+    lat: lat ? parseFloat(lat) : 0,
+  };
+
+  return { destination };
+};
+
+export default useGettingLocation;

src/features/navigate/lib/withDestination.tsx

@@ -1,24 +1,19 @@
-import { Suspense, useEffect } from 'react';
+import { Suspense } from 'react';
 import { useStore } from 'zustand';
 import { useSearchParams } from 'react-router-dom';
 
 import {
   useFollowAlongStore,
-  useMapLevelStore,
-  useTransportationStore,
   SelectTransportationFromGeoMap,
   isValidationLocation,
   DepartureAndArrivalAddress,
   DestinationSkeleton,
 } from '@/features/navigate';
-import {
-  getSuspenseLocation,
-  LoadingSpinner,
-  QueryErrorBoundary,
-} from '@/shared';
+import { LoadingSpinner, QueryErrorBoundary } from '@/shared';
 
 import type { GeoTripLocation } from '@/shared';
-import type { TransportationType } from '@/entities/navigate';
+import useGettingLocation from './useGettingLocation';
+import useDestination from './useDestination';
 
 interface WithDestinationProps {
   start: GeoTripLocation;
@@ -31,43 +26,13 @@ export default function withDestination<P extends WithDestinationProps>(
   return function GeoDestinationMapWrapper(
     props: Omit<P, keyof WithDestinationProps>,
   ) {
-    const { isFollowAlong, reset: resetFollowAlong } =
-      useStore(useFollowAlongStore);
-    const { reset: resetTransportation, setVehicle } = useStore(
-      useTransportationStore,
-    );
-    const { reset: resetMapLevel } = useStore(useMapLevelStore);
+    const { isFollowAlong } = useStore(useFollowAlongStore);
+    const { geoLocation } = useDestination();
+    const { destination } = useGettingLocation();
     const [searchParams] = useSearchParams();
 
-    //좌표
-    const lng = searchParams.get('lnt');
-    const lat = searchParams.get('lat');
-
-    const destination = {
-      lng: lng ? parseFloat(lng) : 0,
-      lat: lat ? parseFloat(lat) : 0,
-    };
-
-    //컨텐츠 ID, Type
     const id = searchParams.get('id') && atob(searchParams.get('id') as string);
 
-    //이동수단
-    const vehicle = searchParams.get('vehicle');
-
-    useEffect(() => {
-      setVehicle(vehicle as TransportationType);
-    }, [vehicle]);
-
-    const geoLocation = getSuspenseLocation();
-
-    useEffect(() => {
-      return () => {
-        resetTransportation();
-        resetMapLevel();
-        resetFollowAlong();
-      };
-    }, [resetFollowAlong, resetTransportation, resetMapLevel]);
-
     if (
       !isValidationLocation(geoLocation) ||
       !isValidationLocation(destination) ||
@@ -88,13 +53,15 @@ export default function withDestination<P extends WithDestinationProps>(
             <SelectTransportationFromGeoMap />
           </div>
         )}
-        <Suspense fallback={<LoadingSpinner centered={true} />}>
-          <WrappedComponent
-            {...(props as P)}
-            start={geoLocation}
-            end={destination}
-          />
-        </Suspense>
+        <QueryErrorBoundary>
+          <Suspense fallback={<LoadingSpinner centered={true} />}>
+            <WrappedComponent
+              {...(props as P)}
+              start={geoLocation}
+              end={destination}
+            />
+          </Suspense>
+        </QueryErrorBoundary>
       </>
     );
   };

src/features/navigate/ui/GeoDestinationMap.tsx

@@ -5,18 +5,22 @@ import {
   useTransportationStore,
   withDestination,
 } from '@/features/navigate';
-import { Car } from '@/features/car';
-import { Pedestrian } from '@/features/pedestrian';
-import { PublicTransit } from '@/features/publicTransit';
 import { LoadingSpinner } from '@/shared';
 
 import type { GeoTripLocation } from '@/shared';
+import { lazy } from 'react';
 
 interface GeoDestinationMapProps {
   start: GeoTripLocation;
   end: GeoTripLocation;
 }
 
+const Pedestrian = lazy(() => import('@/features/pedestrian/ui/Pedestrian'));
+const Car = lazy(() => import('@/features/car/ui/Car'));
+const PublicTransit = lazy(
+  () => import('@/features/publicTransit/ui/PublicTransit'),
+);
+
 function GeoDestinationMap({ start, end }: GeoDestinationMapProps) {
   const { vehicle } = useStore(useTransportationStore);