Merge pull request #199 from P-pick/modify/#197/shorts-1

[#197] tour filter정보 스토리지에 저장

Author: zzzRYT

src/app/router/Router.tsx

@@ -28,6 +28,7 @@ export default function Router() {
             <Route path="around-search" element={<AroundSearch />} />
           </Route>
           <Route path="/tour" element={<Tour />}>
+            <Route path=":contentId" element={<GeoTrip />} />
             <Route path="geo-trip" element={<GeoTrip />} />
             <Route path="single/:contentId" element={<TourSingleInfo />} />
             <Route path="list" element={<TourList />} />

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/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/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/tourFilter/hook/index.ts

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

src/features/tourFilter/hook/useTourFilterQuery.ts

@@ -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"
       />
     </>

src/features/tourFilter/index.ts

@@ -1,14 +1,9 @@
-import { useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 
-import {
-  DistanceSlider,
-  SortOptions,
-  useTourFilterQuery,
-} from '@/features/tourFilter';
-import { TouristContentsTypeFilter } from '@/shared';
-
-import type { SortOption } from '@/features/tourFilter';
+import { DistanceSlider } from '@/features/tourFilter';
+import { TouristContentsTypeFilter, useLocalStorage } from '@/shared';
+import type { TourInjected } from '@/features/tour/types';
+import { useState } from 'react';
 
 interface BottomSheetProps {
   onClose: () => void;
@@ -19,19 +14,31 @@ export default function TourFilterSidebar({
   onClose,
   isOpen,
 }: BottomSheetProps) {
-  const { getQuery, updateQuery } = useTourFilterQuery();
+  const [tourFilter, setTourFilter] = useLocalStorage('tourInfo', {
+    distance: '20000',
+    contentTypeId: '12',
+  } as TourInjected);
 
-  const [aroundContentTypeId, setAroundContentTypeId] = useState(
-    getQuery()?.tourType ?? '12',
-  );
-  const [distance, setDistance] = useState(getQuery()?.distance || 1);
-  const [sortOption, setSortOption] = useState<SortOption>('distance');
+  const [currentTourFilter, setCurrentTourFilter] = useState<TourInjected>({
+    distance: tourFilter.distance,
+    contentTypeId: tourFilter.contentTypeId,
+  });
 
   const handleSubmit = () => {
-    updateQuery({ tourType: aroundContentTypeId, distance });
+    setTourFilter({
+      distance: currentTourFilter.distance,
+      contentTypeId: currentTourFilter.contentTypeId,
+    });
     onClose();
   };
 
+  const handleReset = () => {
+    setCurrentTourFilter({
+      distance: '20000',
+      contentTypeId: '12',
+    });
+  };
+
   return (
     <AnimatePresence>
       {isOpen && (
@@ -58,28 +65,25 @@ export default function TourFilterSidebar({
                   관광 타입
                 </label>
                 <TouristContentsTypeFilter
-                  contentTypeId={aroundContentTypeId}
-                  setContentTypeId={setAroundContentTypeId}
+                  contentTypeId={currentTourFilter.contentTypeId}
+                  setContentTypeId={setCurrentTourFilter}
                 />
               </section>
               <section className="my-5 py-5 px-5 rounded-xl shadow mr-3">
                 <label className="block mb-2 text-lg font-semibold text-black">
                   거리
                 </label>
-                <DistanceSlider distance={distance} setDistance={setDistance} />
-              </section>
-              <section className="my-5 py-5 px-5 rounded-xl shadow mr-3">
-                <label className="block mb-2 text-lg font-semibold text-black">
-                  정렬
-                </label>
-                <SortOptions
-                  selected={sortOption}
-                  setSelected={setSortOption}
+                <DistanceSlider
+                  distance={currentTourFilter.distance}
+                  setDistance={setCurrentTourFilter}
                 />
               </section>
             </main>
             <footer className="flex gap-3">
-              <button className="w-30 rounded-2xl bg-gray-300 px-5 py-2 text-black cursor-pointer ">
+              <button
+                className="w-30 rounded-2xl bg-gray-300 px-5 py-2 text-black cursor-pointer"
+                onClick={handleReset}
+              >
                 초기화
               </button>
               <button