[FEAT] 검색 결과 저장

package.json

@@ -30,6 +30,7 @@
     "clsx": "^2.1.1",
     "framer-motion": "^11.11.9",
     "jest": "^29.7.0",
+    "jotai": "^2.10.3",
     "react": "^18.3.1",
     "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",

src/App.tsx

@@ -1,19 +1,13 @@
 import { Outlet } from 'react-router-dom';
 
 import { Layout } from './components/common/Layout';
-import { MapDataProvider } from './contexts/MapContext';
-import { MarkerProvider } from './contexts/MarkerContext';
 import { useAuth } from './hooks/auth/useAuth';
 
 export const App = () => {
   useAuth();
   return (
-    <MapDataProvider>
-      <MarkerProvider>
-        <Layout>
-          <Outlet />
-        </Layout>
-      </MarkerProvider>
-    </MapDataProvider>
+    <Layout>
+      <Outlet />
+    </Layout>
   );
 };

src/components/common/Chip/Chip.stories.tsx

@@ -27,6 +27,10 @@ export const Basic: Story = {
     },
   },
   render: (args) => {
-    return <Chip variant={args.variant}>{args.children}</Chip>;
+    return (
+      <div className="w-20">
+        <Chip variant={args.variant}>{args.children}</Chip>
+      </div>
+    );
   },
 };

src/components/features/BookmarkDetail/BookmarkDetail.tsx

@@ -0,0 +1,64 @@
+import { useEffect } from 'react';
+import { useAtom } from 'jotai';
+
+import { Chip } from '@/components/common/Chip';
+import { Icon } from '@/components/common/Icon';
+import { ListCard } from '@/components/common/ListCard';
+import { Body1, Body2, Body4 } from '@/components/common/Typography';
+import { markersAtom } from '@/contexts/MarkerAtom';
+import { useMarkerList } from '@/hooks/api/marker/useMarkerList';
+import { useAuth } from '@/hooks/auth/useAuth';
+
+type Props = { bookmarkId: number; onPrev: () => void };
+export const BookmarkDetail = ({ bookmarkId, onPrev }: Props) => {
+  const { token } = useAuth();
+  const { data } = useMarkerList(bookmarkId, token);
+  const [, setMarkers] = useAtom(markersAtom);
+
+  useEffect(() => {
+    if (data?.markers?.data) {
+      setMarkers(data.markers.data);
+    }
+  }, [data?.markers?.data, setMarkers]);
+
+  return (
+    <div>
+      <div className="flex flex-row items-center">
+        <Icon
+          name="back"
+          size={30}
+          onClick={() => {
+            setMarkers([]);
+            onPrev();
+          }}
+          className="cursor-pointer"
+        />
+        <Body1 className="my-4 mx-3" weight="semibold" onClick={onPrev}>
+          {data?.bookmarkName}의 핀디 리스트
+        </Body1>
+      </div>
+      <ListCard>
+        {data?.markers.data.map((item, index) => (
+          <div key={item.markerId}>
+            <div
+              className={`flex flex-row justify-between items-center ${index !== data.markers.data.length - 1 && 'pb-2'}`}
+            >
+              <div className="flex flex-col gap-1 py-2">
+                <div className="flex flex-row gap-3 items-center">
+                  <Body2 className="text-primary">{item.title}</Body2>
+                  {typeof item.category === 'object' && (
+                    <Chip variant="medium">{item.category.majorCategory}</Chip>
+                  )}
+                </div>
+                <Body4 className="pt-1 " weight="normal">
+                  {item.address}
+                </Body4>
+              </div>
+            </div>
+            {index < data.markers.data.length - 1 && <hr className="border-dashed pt-2" />}
+          </div>
+        ))}
+      </ListCard>
+    </div>
+  );
+};

src/components/features/BookmarkDetail/index.tsx

@@ -0,0 +1 @@
+export { BookmarkDetail } from './BookmarkDetail';

src/components/features/BookmarkList/BookmarkList.tsx

@@ -1,10 +1,53 @@
+import { Icon } from '@/components/common/Icon';
 import { ListCard } from '@/components/common/ListCard';
+import { Body1, Body2, Body3 } from '@/components/common/Typography';
+import { useBookMarkList } from '@/hooks/api/bookmarks/useBookMarkList';
+import { useAuth } from '@/hooks/auth/useAuth';
 
-export const BookmarkList = () => {
+type Props = { onNext: (bookmarkId: number) => void };
+export const BookmarkList = ({ onNext }: Props) => {
+  const { token } = useAuth();
+  const { data } = useBookMarkList(token);
+
+  const handleBookmarkClick = (bookmarkId: number) => {
+    onNext(bookmarkId);
+  };
   return (
     <div>
-      나의 핀디 리스트
-      <ListCard>리스트 조회</ListCard>
+      <Body1 className="my-4 mx-3" weight="semibold">
+        나의 핀디 리스트
+      </Body1>
+      <ListCard>
+        {data?.data.map((item, index) => (
+          <>
+            <div
+              key={item.bookmarkId}
+              onClick={() => handleBookmarkClick(item.bookmarkId)}
+              className="flex flex-row justify-between items-center cursor-pointer"
+            >
+              <div className="flex flex-row gap-4 py-2.5 items-center justify-center">
+                {item.youtuberProfile ? (
+                  <img
+                    src={item.youtuberProfile}
+                    className="w-12 h-12 rounded-full"
+                    alt={`${item.name}의 프로필 이미지`}
+                  />
+                ) : (
+                  <Icon name="findy1" className="w-11 h-11" />
+                )}
+                <div className="flex flex-col py-1">
+                  <Body2 weight="medium">{item.name}</Body2>
+                  <div className="flex flex-row items-center gap-1">
+                    <Icon name="location" size={15} />
+                    <Body3 className=" text-gray-500">{item.markersCount}</Body3>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {index < data.data.length - 1 && <hr className="border-dashed pt-2" />}
+          </>
+        ))}
+      </ListCard>
     </div>
   );
 };

src/components/features/BookmarkList/index.tsx

@@ -0,0 +1 @@
+export { BookmarkList } from './BookmarkList';

src/components/features/BottomSheetContent/BottomSheetContent.tsx

@@ -1,32 +1,11 @@
-import { YoutubeResponse } from '@/hooks/api/link/useYoutubePlace';
-import { useAuth } from '@/hooks/auth/useAuth';
-import { Place } from '@/types/naver';
+import { FlowType } from '@/constants/funnelStep';
+import { useBottomFunnel } from '@/hooks/common/useBottomFunnel';
 
-import { ExtractedPlaces } from './ExtractedPlaces';
-import { SearchResult } from './SearchResult';
 import { BottomSheetContentProps } from './types';
 
-import { BookmarkList } from '../BookmarkList/BookmarkList';
+import { YoutubeResponse } from '../../../hooks/api/link/useYoutubePlace';
+import { Place } from '../../../types/naver';
 
 export const BottomSheetContent = ({ type, data }: BottomSheetContentProps) => {
-  const { token } = useAuth();
-
-  if (type === 'search') {
-    return <SearchResult places={data as Place[]} />;
-  }
-
-  if (type === 'extract') {
-    return <ExtractedPlaces places={data as YoutubeResponse} />;
-  }
-
-  if (token && type === 'list') {
-    return <BookmarkList />;
-  }
-
-  // TODO : 로그인하지 않은 경우 로그인 유도
-  return (
-    <div className=" flex items-center justify-center py-8">
-      <p className="text-gray-500">로그인한 사용자만 즐겨찾기가 가능합니다.</p>
-    </div>
-  );
+  return useBottomFunnel({ type: type as FlowType, data: data as Place[] | YoutubeResponse });
 };

src/components/features/ExtractedPlacesList/ExtractedList.tsx → src/components/features/ExtractedPlacesList/ExtractedPlacesList.tsx

@@ -13,11 +13,12 @@ import { useMarkers } from '@/hooks/common/useMarkers';
 import { Login } from '../LoginModal';
 
 type Props = { places: YoutubeResponse; onNext: () => void };
-export const ExtractedList = ({ places, onNext }: Props) => {
-  const { clearMarkers } = useMarkers();
+export const ExtractedPlacesList = ({ places, onNext }: Props) => {
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
   const [isOpen, setIsOpen] = useState<boolean>(false);
+
   const { token } = useAuth();
+  const { clearMarkers } = useMarkers();
   const { mutate: bookmarkMutate } = useYoutubeBookmark(token);
 
   const handleToggleSelect = (id: number) => {
@@ -32,26 +33,20 @@ export const ExtractedList = ({ places, onNext }: Props) => {
       return;
     }
 
-    const filteredPlaces = places.places.filter((place) =>
-      selectedIds.includes(place.id as number)
-    );
-
     const savePlaces = {
       ...places,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      places: filteredPlaces.map(({ id, ...rest }) => rest),
+      places: places.places
+        .filter((place) => selectedIds.includes(place.id as number))
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        .map(({ id, ...placeData }) => placeData),
     };
 
     bookmarkMutate(savePlaces, {
       onSuccess: () => {
-        sessionStorage.removeItem('bottomSheetType');
-        sessionStorage.removeItem('mapData');
+        sessionStorage.clear();
         clearMarkers();
         onNext();
       },
-      onError: (error) => {
-        console.error('저장 실패', error);
-      },
     });
   };
   return (
@@ -86,13 +81,13 @@ export const ExtractedList = ({ places, onNext }: Props) => {
                     <Chip variant="medium">{item.category.majorCategory}</Chip>
                   )}
                 </div>
-                <Body4 className="pt-1 " weight="normal">
+                <Body4 className="pt-1" weight="normal">
                   {item.address}
                 </Body4>
               </div>
               <Icon
                 name="check"
-                className="cursor-pointer h-7"
+                className="cursor-pointer h-7 w-7 flex-shrink-0"
                 color={selectedIds.includes(item.id as number) ? 'primary' : 'gray'}
                 onClick={() => handleToggleSelect(item.id as number)}
               />

src/components/features/ExtractedPlacesList/index.tsx

@@ -0,0 +1 @@
+export { ExtractedPlacesList } from './ExtractedPlacesList';

src/components/features/LinkForm/ExtractionStatus.tsx

@@ -7,6 +7,7 @@ import { Icon } from '@/components/common/Icon';
 import { Body1 } from '@/components/common/Typography';
 import { SLIDER_ANIMATION, THUMBNAIL_ANIMATION } from '@/constants/motions';
 import { Place } from '@/types/naver';
+import { extractVideoId } from '@/utils/extractVideoId';
 
 import { LinkFormProps } from './types';
 
@@ -20,9 +21,8 @@ export const ExtractionStatus = ({
   onNext,
   onHomeClick,
 }: ExtractProp) => {
-  const videoId = url.includes('v=') ? url.split('v=')[1].split('&')[0] : url.split('/').pop();
-  const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
-
+  const videoId = extractVideoId(url);
+  const thumbnailUrl = videoId ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg` : '';
   const handleNavigate = () => {
     if (place?.length > 0) {
       return onNext();