feat: CelebDropDown, NavButton 컴포넌트 기능 구현

frontend/src/@types/celeb.types.ts

@@ -1,6 +1,6 @@
 import type { RestaurantData } from './api.types';
 
-export type Celebs = RestaurantData['celebs'];
+type Celebs = RestaurantData['celebs'];
 
 export type Celeb = Celebs[number];
 

frontend/src/@types/restaurant.types.ts

@@ -2,3 +2,17 @@ import type { RestaurantData } from './api.types';
 
 export type Restaurant = Omit<RestaurantData, 'celebs'>;
 export type RestaurantModalInfo = Omit<Restaurant, 'lat' | 'lng'>;
+
+export type RestaurantCategory =
+  | '전체'
+  | '일식당'
+  | '한식'
+  | '초밥, 롤'
+  | '생선회'
+  | '양식'
+  | '육류, 고기요리'
+  | '이자카야'
+  | '돼지고기구이'
+  | '요리주점'
+  | '와인'
+  | '기타';

frontend/src/components/@common/Map/Map.tsx

@@ -3,7 +3,7 @@
 import { styled } from 'styled-components';
 import OverlayMarker from './OverlayMarker';
 import type { Coordinate } from '~/@types/map.types';
-import type { Celebs } from '~/@types/celeb.types';
+import type { Celeb } from '~/@types/celeb.types';
 import MapContent from './MapContent';
 import OverlayMyLocation from './OverlayMyLocation';
 import LoadingDots from '../LoadingDots';
@@ -16,7 +16,7 @@
 
 interface MapProps {
   clickMarker: ({ lat, lng }: Coordinate) => void;
-  markers: { position: Coordinate; celebs: Celebs }[];
+  markers: { position: Coordinate; celebs: Celeb[] }[];
   setData: React.Dispatch<React.SetStateAction<RestaurantData[]>>;
 }
 
@@ -35,11 +35,11 @@
   const { handleFetch } = useFetch('restaurants');
 
   const onClick = (e: google.maps.MapMouseEvent) => {
     setClicks([...clicks, e.latLng!]);
   };
 
   const onIdle = (m: google.maps.Map) => {
     setZoom(m.getZoom()!);
 
     const lowLatitude = String(m.getBounds().getSouthWest().lat());
     const highLatitude = String(m.getBounds().getNorthEast().lat());

frontend/src/components/@common/NavButton/NavButton.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NavButton from './NavButton';
+import FastFoodIcon from '~/assets/icons/fastFood.svg';
+
+const meta: Meta<typeof NavButton> = {
+  title: 'NavButton',
+  component: NavButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NavButton>;
+
+export const Default: Story = {
+  args: {
+    label: '캠핑장',
+    icon: <FastFoodIcon />,
+    isShow: true,
+  },
+};

frontend/src/components/@common/NavButton/NavButton.tsx

@@ -0,0 +1,46 @@
+import React, { MouseEvent } from 'react';
+import styled, { css } from 'styled-components';
+
+import { FONT_SIZE } from '~/styles/common';
+
+interface NavButtonProps {
+  label: string;
+  icon: React.ReactNode;
+  isShow?: boolean;
+  onClick?: (e?: MouseEvent<HTMLElement>) => void;
+}
+
+function NavButton({ icon, label, onClick, isShow = false }: NavButtonProps) {
+  return (
+    <StyledNavButton onClick={onClick} isShow={isShow}>
+      <div>{icon}</div>
+      <div>{label}</div>
+    </StyledNavButton>
+  );
+}
+
+export default NavButton;
+
+const StyledNavButton = styled.button<{ isShow: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+
+  width: fit-content;
+  height: 56px;
+
+  margin: 1.6rem 0 1rem;
+
+  border: none;
+  background: var(--white);
+  outline: none;
+
+  font-size: ${FONT_SIZE.sm};
+
+  ${({ isShow }) =>
+    isShow &&
+    css`
+      border-bottom: 3px solid var(--black);
+    `};
+`;

frontend/src/components/@common/NavButton/index.tsx

@@ -0,0 +1,3 @@
+import NavButton from '~/components/@common/NavButton/NavButton';
+
+export default NavButton;

frontend/src/components/CategoryNavbar/CategoryNavbar.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CategoryNavbar from './CategoryNavbar';
+import FastFood from '~/assets/icons/fastFood.svg';
+import { RestaurantCategory } from '~/@types/restaurant.types';
+
+interface Category {
+  label: RestaurantCategory;
+  icon: React.ReactNode;
+}
+
+const categories: Category[] = [
+  {
+    label: '일식당',
+    icon: <FastFood />,
+  },
+  {
+    label: '한식',
+    icon: <FastFood />,
+  },
+  {
+    label: '초밥, 롤',
+    icon: <FastFood />,
+  },
+  {
+    label: '생선회',
+    icon: <FastFood />,
+  },
+  {
+    label: '양식',
+    icon: <FastFood />,
+  },
+  {
+    label: '육류, 고기요리',
+    icon: <FastFood />,
+  },
+  {
+    label: '이자카야',
+    icon: <FastFood />,
+  },
+  {
+    label: '돼지고기구이',
+    icon: <FastFood />,
+  },
+  {
+    label: '요리주점',
+    icon: <FastFood />,
+  },
+  {
+    label: '와인',
+    icon: <FastFood />,
+  },
+];
+
+const meta: Meta<typeof CategoryNavbar> = {
+  title: 'Selector/CategoryNavbar',
+  component: CategoryNavbar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CategoryNavbar>;
+
+export const Default: Story = {
+  args: {
+    categories,
+  },
+};

frontend/src/components/CategoryNavbar/CategoryNavbar.tsx

@@ -0,0 +1,54 @@
+import { MouseEvent, useState } from 'react';
+import styled from 'styled-components';
+import { RestaurantCategory } from '~/@types/restaurant.types';
+import NavButton from '~/components/@common/NavButton';
+import isEqual from '~/utils/compare';
+
+interface Category {
+  label: RestaurantCategory;
+  icon: React.ReactNode;
+}
+
+interface CategoryProps {
+  categories: Category[];
+  externalOnClick?: (e?: MouseEvent<HTMLElement>) => void;
+}
+
+function CategoryNavbar({ categories, externalOnClick }: CategoryProps) {
+  const [selected, setSelected] = useState<RestaurantCategory>('전체');
+
+  const clickCategory = (value: RestaurantCategory) => (event?: MouseEvent<HTMLElement>) => {
+    setSelected(value);
+
+    if (externalOnClick) externalOnClick(event);
+  };
+
+  return (
+    <StyledCategoryNavbarWrapper>
+      {categories.map(({ icon, label }) => (
+        <NavButton
+          label={label}
+          icon={icon}
+          data-label={label}
+          isShow={isEqual(selected, label)}
+          onClick={clickCategory(label)}
+        />
+      ))}
+    </StyledCategoryNavbarWrapper>
+  );
+}
+
+export default CategoryNavbar;
+
+const StyledCategoryNavbarWrapper = styled.ul`
+  display: flex;
+  gap: 1.2rem;
+
+  width: 100%;
+  height: 56px;
+
+  padding: 1.8rem 0;
+
+  border-radius: 10px;
+  background: transparent;
+`;

frontend/src/components/CategoryNavbar/index.tsx

@@ -0,0 +1,3 @@
+import CategoryNavbar from '~/components/CategoryNavbar/CategoryNavbar';
+
+export default CategoryNavbar;

frontend/src/components/CelebDropDown/CelebDropDown.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CelebDropDown from './CelebDropDown';
+
+const meta: Meta<typeof CelebDropDown> = {
+  title: 'Selector/CelebDropDown',
+  component: CelebDropDown,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CelebDropDown>;
+
+export const Default: Story = {
+  args: {
+    celebs: [
+      {
+        id: 1,
+        name: '히밥',
+        youtubeChannelName: '@heebab',
+        profileImageUrl:
+          'https://yt3.googleusercontent.com/sL5ugPfl9vvwRwhf6l5APY__BZBw8qWiwgHs-uVsMPFoD5-a4opTJIcRSyrY8aY5LEESOMWJ=s176-c-k-c0x00ffffff-no-rj',
+      },
+      {
+        id: 2,
+        name: '정찬성',
+        youtubeChannelName: '@Korean_zzombi',
+        profileImageUrl:
+          'https://yt3.googleusercontent.com/sL5ugPfl9vvwRwhf6l5APY__BZBw8qWiwgHs-uVsMPFoD5-a4opTJIcRSyrY8aY5LEESOMWJ=s176-c-k-c0x00ffffff-no-rj',
+      },
+      {
+        id: 3,
+        name: '정찬',
+        youtubeChannelName: '@Korean_zzombi',
+        profileImageUrl:
+          'https://yt3.googleusercontent.com/sL5ugPfl9vvwRwhf6l5APY__BZBw8qWiwgHs-uVsMPFoD5-a4opTJIcRSyrY8aY5LEESOMWJ=s176-c-k-c0x00ffffff-no-rj',
+      },
+      {
+        id: 4,
+        name: '정성',
+        youtubeChannelName: '@Korean_zzombi',
+        profileImageUrl:
+          'https://yt3.googleusercontent.com/sL5ugPfl9vvwRwhf6l5APY__BZBw8qWiwgHs-uVsMPFoD5-a4opTJIcRSyrY8aY5LEESOMWJ=s176-c-k-c0x00ffffff-no-rj',
+      },
+      {
+        id: 5,
+        name: '정찬성1',
+        youtubeChannelName: '@Korean_zzombi',
+        profileImageUrl:
+          'https://yt3.googleusercontent.com/sL5ugPfl9vvwRwhf6l5APY__BZBw8qWiwgHs-uVsMPFoD5-a4opTJIcRSyrY8aY5LEESOMWJ=s176-c-k-c0x00ffffff-no-rj',
+      },
+    ],
+  },
+};