[BASE] 숏폼 수정

src/app/router/Router.tsx

@@ -7,7 +7,7 @@ import {
   AroundSearch,
   TourList,
   TourSearch,
-  TourSingleInfo,
+  TourShare,
 } from '@/app/router';
 import { Home } from '@/pages/home';
 import { GeoTrip } from '@/pages/tour/geotrip';
@@ -28,8 +28,8 @@ export default function Router() {
             <Route path="around-search" element={<AroundSearch />} />
           </Route>
           <Route path="/tour" element={<Tour />}>
-            <Route path="geo-trip" element={<GeoTrip />} />
-            <Route path="single/:contentId" element={<TourSingleInfo />} />
+            <Route path="geo" element={<GeoTrip />} />
+            <Route path="share/:contentId" element={<TourShare />} />
             <Route path="list" element={<TourList />} />
             <Route path="search" element={<TourSearch />} />
             <Route path="bookmark" element={<Bookmark />} />

src/app/router/lazyRoutes.ts

@@ -9,6 +9,4 @@ export const AroundSearch = lazy(
 );
 export const TourList = lazy(() => import('@/pages/tour/tourList/TourList'));
 export const TourSearch = lazy(() => import('@/pages/tour/search/TourSearch'));
-export const TourSingleInfo = lazy(
-  () => import('@/pages/tour/geotrip/SingleTrip'),
-);
+export const TourShare = lazy(() => import('@/pages/tour/geotrip/Share'));

src/features/aroundTourist/ui/GeoAroundTouristMap.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { Map } from 'react-kakao-maps-sdk';
 
@@ -10,26 +10,25 @@ import {
   NearbyTouristAttractionPinPoint,
   MiddleContent,
 } from '@/features/aroundTourist';
-import { TouristContentsTypeFilter } from '@/shared';
+import { TouristContentsTypeFilter, useLocalStorage } from '@/shared';
 
-import type { AroundContentTypeId, TourItem } from '@/entities/tour';
+import type { TourItem } from '@/entities/tour';
 import type { GeoTripLocation } from '@/shared';
+import type { TourInjected } from '@/features/tour';
 
 interface GeoAroundTouristMapProps {
   location: GeoTripLocation;
   contentId: string;
-  tourContentTypeId: AroundContentTypeId;
 }
 
-function GeoAroundTouristMap({
-  location,
-  tourContentTypeId,
-}: GeoAroundTouristMapProps) {
-  const [selectedContentTypeId, setSelectedContentTypeId] =
-    useState<AroundContentTypeId>(tourContentTypeId);
+function GeoAroundTouristMap({ location }: GeoAroundTouristMapProps) {
+  const [tourFilter, setTourFilter] = useLocalStorage('tourInfo', {
+    distance: '20000',
+    contentTypeId: '12',
+  } as TourInjected);
 
   const { data: aroundTouristObjects = [] } = useQuery(
-    aroundTouristQueries.list(location, selectedContentTypeId),
+    aroundTouristQueries.list(location, tourFilter.contentTypeId),
   );
 
   const middleTouristRef = useRef<TourItem | null>(null);
@@ -53,8 +52,8 @@ function GeoAroundTouristMap({
     <Map center={location} className="w-full h-full relative" level={7}>
       <div className="absolute top-0 left-0 z-10 w-full">
         <TouristContentsTypeFilter
-          contentTypeId={selectedContentTypeId}
-          setContentTypeId={setSelectedContentTypeId}
+          contentTypeId={tourFilter.contentTypeId}
+          setContentTypeId={setTourFilter}
         />
       </div>
       <ResizingMap points={allLocation} />

src/features/auth/ui/AuthButtonContainer.tsx

@@ -10,7 +10,7 @@ export default function AuthButtonContainer() {
     mutation.mutate();
   };
   const handleGuestLogin = () => {
-    navigate('/tour/geo-trip?distance=20000&tour-type=12');
+    navigate('/tour/geo');
   };
 
   return (

src/features/map/lib/withAroundMapParams.tsx

@@ -19,16 +19,13 @@ export default function withAroundMapParams<P extends InjectedProps>(
     const mapx = searchParams.get('lng');
     const mapy = searchParams.get('lat');
     const contentId = searchParams.get('contentId');
-    const tourContentTypeId = searchParams.get(
-      'contentTypeId',
-    ) as AroundContentTypeId;
 
     const location: GeoTripLocation = {
       lat: mapy ? Number(mapy) : 0,
       lng: mapx ? Number(mapx) : 0,
     };
 
-    if (!location || !contentId || !tourContentTypeId) {
+    if (!location || !contentId) {
       return (
         <div>
           필요한 정보가 부족합니다. 위치, 콘텐츠 ID, 관광지 타입을 확인해주세요.
@@ -41,7 +38,6 @@ export default function withAroundMapParams<P extends InjectedProps>(
         {...(props as P)}
         location={location}
         contentId={contentId}
-        tourContentTypeId={tourContentTypeId}
       />
     );
   };

src/features/shared/index.ts

@@ -0,0 +1,2 @@
+export * from './lib';
+export * from './ui';

src/features/shared/lib/index.ts

@@ -0,0 +1 @@
+export { default as useKakaoShare } from './useKakaoShare';

src/features/tour/ui/single/Single.tsx → src/features/shared/ui/ShareTrip.tsx

@@ -5,7 +5,7 @@ import { tourQueries, type TourItem } from '@/entities/tour';
 import { LoadingSpinner } from '@/shared/ui';
 import { TourSlide } from '@/features/tourShort';
 
-export default function Single() {
+export default function ShareTrip() {
   const { contentId } = useParams();
   const navigate = useNavigate();
 

src/features/shared/ui/SharedButtonContainer.tsx

@@ -9,7 +9,7 @@ interface SharedButtonContainerProps {
 export default function SharedButtonContainer({
   contentId,
 }: SharedButtonContainerProps) {
-  const link = `${window.location.origin}/tour/single/${contentId}`;
+  const link = `${window.location.origin}/tour/share/${contentId}`;
 
   const { shareKakao } = useKakaoShare({ contentId, link });
   return (

src/features/shared/ui/index.ts

@@ -0,0 +1,2 @@
+export { default as ShareTrip } from './ShareTrip';
+export { default as SharedButtonContainer } from './SharedButtonContainer';

src/features/tour/lib/withGeoTripParams.tsx

@@ -1,36 +1,32 @@
-import { useSearchParams } from 'react-router-dom';
-
 import { isValidTourType } from '@/features/map';
 
-import type { AroundContentTypeId } from '@/entities/tour';
-interface InjectedProps {
-  distance: string;
-  tourContentTypeId: AroundContentTypeId;
-}
+import { useLocalStorage } from '@/shared';
+import type { TourInjected } from '../types';
 
-export function withGeoTripParams<P extends InjectedProps>(
+export function withGeoTripParams<P extends TourInjected>(
   WrappedComponent: React.ComponentType<P>,
 ) {
-  return function GeoTripWrapper(props: Omit<P, keyof InjectedProps>) {
-    const [searchParams] = useSearchParams();
-    const distance = searchParams.get('distance');
-    const tourContentTypeId = searchParams.get('tour-type');
+  return function GeoTripWrapper(props: Omit<P, keyof TourInjected>) {
+    const [tourInfo] = useLocalStorage('tourInfo', {
+      distance: '20000',
+      contentTypeId: '12',
+    });
 
-    if (!distance || !tourContentTypeId) {
+    if (!tourInfo.distance || !tourInfo.contentTypeId) {
       throw new Error(
         '필요한 정보가 부족합니다. 거리와 관광지 타입을 확인해주세요.',
       );
     }
 
-    if (!isValidTourType(tourContentTypeId)) {
+    if (!isValidTourType(tourInfo.contentTypeId)) {
       throw new Error('잘못된 관광 타입입니다.');
     }
 
     return (
       <WrappedComponent
         {...(props as P)}
-        distance={distance}
-        tourContentTypeId={tourContentTypeId}
+        distance={tourInfo.distance}
+        contentTypeId={tourInfo.contentTypeId}
       />
     );
   };

src/features/tour/types.ts

@@ -33,3 +33,8 @@ export type TourDetailImage = {
   originimgurl?: string;
   serialnum: string;
 };
+
+export type TourInjected = {
+  distance: string;
+  contentTypeId: AroundContentTypeId;
+};

src/features/tourDetail/ui/TourOverview.tsx

@@ -1,10 +1,9 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
 
-import { commonSVG } from '@/assets';
-
 import { BookmarkButtonContainer } from '@/features/bookmark';
 import { tourQueries } from '@/entities/tour';
-import { TourTypeBadge, DistanceTimeInfo, getCopyClipBoard } from '@/shared';
+import { TourTypeBadge, DistanceTimeInfo } from '@/shared';
+import { SharedButtonContainer } from '@/features/shared';
 
 interface TourCardProps {
   distance: string;
@@ -37,10 +36,8 @@ export default function TourOverview({
           </div>
           <div className="flex items-center gap-4 mt-4 bg-white">
             <BookmarkButtonContainer contentId={tourContentId} />
-            <commonSVG.ShareIcon
-              className="cursor-pointer"
-              onClick={() => getCopyClipBoard(window.location.href)}
-            />
+
+            <SharedButtonContainer contentId={tourContentId} />
           </div>
         </div>
       </div>

src/features/tourFilter/index.ts

@@ -1,4 +1,3 @@
 export * from './ui';
 export * from './const';
 export * from './type';
-export * from './hook';

src/features/tourFilter/ui/DistanceSlider.tsx

@@ -1,28 +1,37 @@
-import type { Dispatch } from 'react';
-import type { Distance } from '@/features/tourFilter';
+import type { TourInjected } from '@/features/tour/types';
 
 interface DistanceSliderProps {
-  distance: number;
-  setDistance: Dispatch<React.SetStateAction<Distance>>;
+  distance: string;
+  setDistance: (
+    value: TourInjected | ((val: TourInjected) => TourInjected),
+  ) => void;
 }
 
 export default function DistanceSlider({
   distance,
   setDistance,
 }: DistanceSliderProps) {
+  const handleDistanceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDistance(prev => ({
+      ...prev,
+      distance: e.target.value,
+    }));
+  };
+
   return (
     <>
       <div className="flex items-center justify-between text-sm text-black mb-1">
         <span>1km</span>
+        <span>{distance}m</span>
         <span>20km</span>
       </div>
       <input
         type="range"
-        min={1}
-        max={20}
-        step={1}
+        min={'1000'}
+        max={'20000'}
+        step={'1000'}
         value={distance}
-        onChange={e => setDistance(Number(e.target.value) as Distance)}
+        onChange={handleDistanceChange}
         className="w-full"
       />
     </>