[FEAT] 유투브 장소 추출 저장

package.json

@@ -31,6 +31,7 @@
     "framer-motion": "^11.11.9",
     "jest": "^29.7.0",
     "react": "^18.3.1",
+    "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-router-dom": "^6.26.2",

src/App.tsx

@@ -1,14 +1,19 @@
 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 (
-    <Layout>
+    <MapDataProvider>
       <MarkerProvider>
-        <Outlet />
+        <Layout>
+          <Outlet />
+        </Layout>
       </MarkerProvider>
-    </Layout>
+    </MapDataProvider>
   );
 };

src/assets/icons/index.tsx

@@ -4,6 +4,7 @@ import EmptyBookMark from './bookmark-empty.svg?react';
 import BookMark from './bookmark.svg?react';
 import Bubble from './bubble.svg?react';
 import Cafe from './cafe-dessert.svg?react';
+import Check from './check.svg?react';
 import DeleteRound from './delete-round.svg?react';
 import Fidies from './findies.svg?react';
 import Findy1 from './findy-1.svg?react';
@@ -56,6 +57,7 @@ export const Icons = {
   user: User,
   back: Back,
   home: Home,
+  check: Check,
   deleteRound: DeleteRound,
   kakaoLogin: KakaoLogin,
   naverLogin: NaverLogin,

src/components/common/Chip/Chip.variants.ts

@@ -1,14 +1,17 @@
 import { cva } from 'class-variance-authority';
 
-export const ChipVariants = cva(`bg-primary rounded-md text-white cursor-default px-3 py-1`, {
-  variants: {
-    variant: {
-      small: 'h-6 min-w-6 text-caption',
-      medium: 'h-7 min-w-7 text-body4',
-      large: 'h-8 min-w-8 text-body3',
+export const ChipVariants = cva(
+  `flex items-center bg-primary rounded-md text-white cursor-default px-3 py-1`,
+  {
+    variants: {
+      variant: {
+        small: 'h-5 min-w-6 text-caption',
+        medium: 'h-6 min-w-7 text-body4',
+        large: 'h-7 min-w-8 text-body3',
+      },
     },
-  },
-  defaultVariants: {
-    variant: 'medium',
-  },
-});
+    defaultVariants: {
+      variant: 'medium',
+    },
+  }
+);

src/components/common/Layout/index.tsx

@@ -2,7 +2,7 @@ import { Props } from './Layout.types';
 
 export const Layout = ({ children }: Props) => {
   return (
-    <div className="relative max-w-[30rem] h-dvh bg-white shadow-sm py-0 px-2 m-auto border-x-[1px] border-gray-50">
+    <div className="max-w-[30rem] h-dvh bg-white shadow-sm py-0 px-2 m-auto border-x-[1px] border-gray-50">
       {children}
     </div>
   );

src/components/common/ListCard/index.tsx

@@ -4,7 +4,11 @@ import { Props } from './ListCard.types';
 
 export const ListCard = forwardRef<HTMLDivElement, Props>(({ children, ...props }, ref) => {
   return (
-    <div className="w-full h-fit py-6 pl-6 pr-3.5 rounded-2xl bg-gray-100" {...props} ref={ref}>
+    <div
+      className="w-full max-h-[65dvh] h-fit py-5 pl-6 pr-5 rounded-2xl bg-gray-50  overflow-y-scroll"
+      {...props}
+      ref={ref}
+    >
       {children}
     </div>
   );

src/components/common/SideMenu/index.tsx

@@ -8,7 +8,7 @@ import { Tooltip } from '../Tooltip';
 
 export const SideMenu = ({ variant, position = 'left', className = '', ...props }: Props) => {
   return (
-    <button type="button" className="relative" {...props}>
+    <button type="button" className="relative focus:outline-none" {...props}>
       <IconButton name={variant} className={cn('peer', className)} />
       <Tooltip
         message={sideMenuTooltip[variant]}

src/components/features/BookmarkList/BookmarkList.tsx

@@ -0,0 +1,10 @@
+import { ListCard } from '@/components/common/ListCard';
+
+export const BookmarkList = () => {
+  return (
+    <div>
+      나의 핀디 리스트
+      <ListCard>리스트 조회</ListCard>
+    </div>
+  );
+};

src/components/features/BottomSheetContent/BottomSheetContent.tsx

@@ -0,0 +1,32 @@
+import { YoutubeResponse } from '@/hooks/api/link/useYoutubePlace';
+import { useAuth } from '@/hooks/auth/useAuth';
+import { Place } from '@/types/naver';
+
+import { ExtractedPlaces } from './ExtractedPlaces';
+import { SearchResult } from './SearchResult';
+import { BottomSheetContentProps } from './types';
+
+import { BookmarkList } from '../BookmarkList/BookmarkList';
+
+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>
+  );
+};

src/components/features/BottomSheetContent/ExtractedPlaces.tsx

@@ -0,0 +1,27 @@
+import { extractedPlaceStepNames } from '@/constants/funnelStep';
+import { YoutubeResponse } from '@/hooks/api/link/useYoutubePlace';
+import { useFunnel } from '@/hooks/common/useFunnel';
+
+import { BookmarkList } from '../BookmarkList/BookmarkList';
+import { ExtractedList } from '../ExtractedPlacesList/ExtractedList';
+
+export type ExtractedPlacesProps = {
+  places: YoutubeResponse;
+};
+export const ExtractedPlaces = ({ places }: ExtractedPlacesProps) => {
+  const { Funnel, Step, setStep } = useFunnel(extractedPlaceStepNames[0]);
+
+  return (
+    <>
+      <Funnel>
+        <Step name="추출장소">
+          <ExtractedList places={places} onNext={() => setStep('리스트')} />
+        </Step>
+        {/* TODO : 리스트 노출 */}
+        <Step name="리스트">
+          <BookmarkList />
+        </Step>
+      </Funnel>
+    </>
+  );
+};

src/components/features/BottomSheetContent/SearchResult.tsx

@@ -0,0 +1,27 @@
+import { searchPlaceStepNames } from '@/constants/funnelStep';
+import { useFunnel } from '@/hooks/common/useFunnel';
+import { Place } from '@/types/naver';
+
+import { BookmarkList } from '../BookmarkList/BookmarkList';
+import { SearchList } from '../SearchList/SearchList';
+
+export type SearchResultProps = {
+  places: Place[];
+};
+export const SearchResult = ({ places }: SearchResultProps) => {
+  const { Funnel, Step, setStep } = useFunnel(searchPlaceStepNames[0]);
+  return (
+    <>
+      <Funnel>
+        <Step name="추출장소">
+          <SearchList places={places} onNext={() => setStep('리스트선택')} />
+        </Step>
+        {/* TODO : 리스트 선택, 리스트 노출 */}
+        <Step name="리스트선택">2. 리스트 선택</Step>
+        <Step name="리스트">
+          <BookmarkList />
+        </Step>
+      </Funnel>
+    </>
+  );
+};

src/components/features/BottomSheetContent/index.tsx

@@ -0,0 +1,2 @@
+export { ExtractedPlaces } from './ExtractedPlaces';
+export { SearchResult } from './SearchResult';

src/components/features/BottomSheetContent/types.ts

@@ -0,0 +1,7 @@
+import { YoutubeResponse } from '@/hooks/api/link/useYoutubePlace';
+import { Place } from '@/types/naver';
+
+export type BottomSheetContentProps = {
+  type: 'search' | 'extract' | 'list' | null;
+  data?: Place[] | YoutubeResponse | null;
+};