diff --git a/src/features/navigate/lib/useDestination.ts b/src/features/navigate/lib/useDestination.ts new file mode 100644 index 00000000..3415e622 --- /dev/null +++ b/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; diff --git a/src/features/navigate/lib/useGettingLocation.ts b/src/features/navigate/lib/useGettingLocation.ts new file mode 100644 index 00000000..96e755e8 --- /dev/null +++ b/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; diff --git a/src/features/navigate/lib/withDestination.tsx b/src/features/navigate/lib/withDestination.tsx index a401251a..8357ef79 100644 --- a/src/features/navigate/lib/withDestination.tsx +++ b/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

( return function GeoDestinationMapWrapper( props: Omit, ) { - 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

( )} - }> - - + + }> + + + ); }; diff --git a/src/features/navigate/ui/GeoDestinationMap.tsx b/src/features/navigate/ui/GeoDestinationMap.tsx index 8af80686..315dedea 100644 --- a/src/features/navigate/ui/GeoDestinationMap.tsx +++ b/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);