} />
- } />
}>
} />
} />
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);
diff --git a/src/features/navigate/ui/ResizingMap.tsx b/src/features/navigate/ui/ResizingMap.tsx
index 89a4459b..e15d1cf5 100644
--- a/src/features/navigate/ui/ResizingMap.tsx
+++ b/src/features/navigate/ui/ResizingMap.tsx
@@ -9,7 +9,7 @@ import {
useTransportationStore,
} from '@/features/navigate';
-import { getSuspenseLocation, type GeoTripLocation } from '@/shared';
+import { Button, getSuspenseLocation, type GeoTripLocation } from '@/shared';
interface ResizingMapProps {
points: GeoTripLocation[];
@@ -68,12 +68,12 @@ export default function ResizingMap({
>
모든 경로 보기
-
+
);
diff --git a/src/pages/geoSetup/GeoSetup.tsx b/src/pages/geoSetup/GeoSetup.tsx
deleted file mode 100644
index 0b642e28..00000000
--- a/src/pages/geoSetup/GeoSetup.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { SetupContainer } from './components';
-
-export default function GeoSetup() {
- return (
- <>
-
-
- );
-}
diff --git a/src/pages/geoSetup/components/FooterButton.tsx b/src/pages/geoSetup/components/FooterButton.tsx
deleted file mode 100644
index 116027d0..00000000
--- a/src/pages/geoSetup/components/FooterButton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-interface FooterButtonProps {
- onClick: () => void;
- text: string;
-}
-
-export default function FooterButton({ onClick, text }: FooterButtonProps) {
- return (
-
- );
-}
diff --git a/src/pages/geoSetup/components/SetupButton.tsx b/src/pages/geoSetup/components/SetupButton.tsx
deleted file mode 100644
index ede43a81..00000000
--- a/src/pages/geoSetup/components/SetupButton.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { commonSVG } from '@/assets';
-import clsx from 'clsx';
-interface SetupButtonProps {
- label: string;
- checked: boolean;
- value: string;
- onClick: (value: string) => void;
-}
-
-export default function SetupButton({
- label,
- checked,
- value,
- onClick,
-}: SetupButtonProps) {
- const bgColor = clsx({
- 'bg-[#FFE5E5] inset-shadow-sm inset-shadow-rose-300 ring': checked,
- 'bg-[#ffffff] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]': !checked,
- });
-
- const checkButtonColor = clsx({
- 'text-primary-red': checked,
- 'text-primary-gray': !checked,
- });
-
- return (
-
- );
-}
diff --git a/src/pages/geoSetup/components/SetupButtonList.tsx b/src/pages/geoSetup/components/SetupButtonList.tsx
deleted file mode 100644
index 1cc62491..00000000
--- a/src/pages/geoSetup/components/SetupButtonList.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { Step } from '../types';
-import { SetupButton } from './';
-
-interface SetupButtonListProps {
- steps: Step[];
- selectedValue: string;
- onSelect: (value: string) => void;
-}
-
-export default function SetupButtonList({
- steps,
- selectedValue,
- onSelect,
-}: SetupButtonListProps) {
- return (
- <>
- {steps.map(step => (
- onSelect(step.value)}
- />
- ))}
-
- );
-}
diff --git a/src/pages/geoSetup/components/SetupContainer.tsx b/src/pages/geoSetup/components/SetupContainer.tsx
deleted file mode 100644
index 47c0cb76..00000000
--- a/src/pages/geoSetup/components/SetupContainer.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { STEP } from '../const';
-import { useCallback, useEffect, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { useStep } from '../lib';
-import { SetupButtonList, FooterButton, SetupHeader } from './';
-
-export default function SetupContainer() {
- const {
- currentStep: currentStepNum,
- nextStep,
- prevStep,
- hasNextStep,
- hasPrevStep,
- } = useStep({
- maxStep: STEP.length - 1,
- });
-
- const currentStep = STEP[currentStepNum];
- const [currentValue, setCurrentValue] = useState(
- STEP[0].stepList[0].value
- );
- const [searchParams, setSearchParams] = useSearchParams();
- const navigate = useNavigate();
-
- useEffect(() => {
- searchParams.set(currentStep.name, currentValue);
- setSearchParams(searchParams, { replace: true });
- }, [currentValue]);
-
- const handleButtonClick = useCallback(
- (value: string) => {
- setCurrentValue(value);
- },
- [currentStep]
- );
-
- const handleNext = useCallback(() => {
- if (hasNextStep) {
- nextStep();
- } else {
- navigate({
- pathname: '/tour/geo-trip',
- search: searchParams.toString(),
- });
- }
- }, [hasNextStep]);
-
- return (
-
-
-
-
-
-
-
- );
-}
diff --git a/src/pages/geoSetup/components/SetupHeader.tsx b/src/pages/geoSetup/components/SetupHeader.tsx
deleted file mode 100644
index f18c9ebd..00000000
--- a/src/pages/geoSetup/components/SetupHeader.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-interface SetupButtonProps {
- hasPrevStep: boolean;
- prevStep: () => void;
- currentStep: number;
- maxStep: number;
- title: string;
-}
-
-export default function SetupHeader({
- hasPrevStep,
- prevStep,
- currentStep,
- maxStep,
- title,
-}: SetupButtonProps) {
- return (
- <>
-
- {hasPrevStep && (
-
- )}
-
- {currentStep}/{maxStep}
-
-
- {title}
-
-
- );
-}
diff --git a/src/pages/geoSetup/components/index.ts b/src/pages/geoSetup/components/index.ts
deleted file mode 100644
index a693069d..00000000
--- a/src/pages/geoSetup/components/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as SetupButton } from './SetupButton';
-export { default as SetupContainer } from './SetupContainer';
-export { default as SetupButtonList } from './SetupButtonList';
-export { default as FooterButton } from './FooterButton';
-export { default as SetupHeader } from './SetupHeader';
diff --git a/src/pages/geoSetup/const.ts b/src/pages/geoSetup/const.ts
deleted file mode 100644
index 10c7b30a..00000000
--- a/src/pages/geoSetup/const.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export const STEP = [
- {
- id: 1,
- title: '이동 가능한 거리를\n 선택해주세요.',
- name: 'distance',
- stepList: [
- { id: 1, label: '~ 1KM', value: '1000' },
- { id: 2, label: '~ 5KM', value: '5000' },
- { id: 3, label: '~ 10KM', value: '10000' },
- { id: 4, label: '~ 20KM', value: '20000' },
- ],
- },
- {
- id: 2,
- title: '관광 타입을 선택해주세요.',
- name: 'tour-type',
- stepList: [
- { id: 1, label: '관광지', value: '12' },
- { id: 2, label: '문화시설', value: '14' },
- { id: 3, label: '축제공연행사', value: '15' },
- ],
- },
-] as const;
diff --git a/src/pages/geoSetup/index.ts b/src/pages/geoSetup/index.ts
deleted file mode 100644
index 2caa290e..00000000
--- a/src/pages/geoSetup/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as GeoSetup } from './GeoSetup';
diff --git a/src/pages/geoSetup/lib/index.ts b/src/pages/geoSetup/lib/index.ts
deleted file mode 100644
index cae481fe..00000000
--- a/src/pages/geoSetup/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as useStep } from './useStep';
diff --git a/src/pages/geoSetup/lib/useStep.tsx b/src/pages/geoSetup/lib/useStep.tsx
deleted file mode 100644
index 5e3e2926..00000000
--- a/src/pages/geoSetup/lib/useStep.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useState } from 'react';
-
-type UseStepProps = { initialStep?: number; maxStep: number };
-
-export default function useStep({ initialStep = 0, maxStep }: UseStepProps) {
- const [currentStep, setCurrentStep] = useState(initialStep);
- const hasNextStep = currentStep < maxStep;
- const hasPrevStep = currentStep > 0;
-
- function nextStep() {
- if (!hasNextStep) return;
- setCurrentStep(prev => prev + 1);
- }
- function prevStep() {
- if (!hasPrevStep) return;
- setCurrentStep(prev => (prev > 0 ? prev - 1 : 0));
- }
-
- return { currentStep, nextStep, prevStep, hasNextStep, hasPrevStep };
-}
diff --git a/src/pages/geoSetup/types.d.ts b/src/pages/geoSetup/types.d.ts
deleted file mode 100644
index 647b8082..00000000
--- a/src/pages/geoSetup/types.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type Step = {
- id: number;
- label: string;
- value: string;
-};
diff --git a/src/shared/ui/button/BackButton.tsx b/src/shared/ui/button/BackButton.tsx
index bc6d7718..8efa32c9 100644
--- a/src/shared/ui/button/BackButton.tsx
+++ b/src/shared/ui/button/BackButton.tsx
@@ -8,7 +8,12 @@ export default function BackButton() {
};
return (
-