✨ feat: 바텀 네비게이션바 구현 및 스토리북 추가 #15

src/layout/Mobile/NavigationBar/NavigationBar.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import MobileLayout from "../MobileLayout";
+import NavigationBar from "./NavigationBar";
+
+const meta: Meta<typeof NavigationBar> = {
+  title: "NavigationBar",
+  component: NavigationBar,
+  parameters: {
+    layout: "centered",
+  },
+
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <MobileLayout className="mb-[60px]">
+      <div className="h-[100px] w-full bg-blue-100"></div>
+      <NavigationBar />
+    </MobileLayout>
+  ),
+  args: {},
+};

src/layout/Mobile/NavigationBar/NavigationBar.tsx

@@ -0,0 +1,60 @@
+import * as NM from "@radix-ui/react-navigation-menu";
+
+import {
+  CalendarCheckIcon,
+  ChatBubbleDotsIcon,
+  HomeIcon,
+  PinLocationIcon,
+  UserIcon,
+} from "@/components/icons";
+import { cn } from "@/utils/cn";
+
+import NavigationBarButton from "./NavigationBarButton";
+
+const navigations = [
+  { name: "홈", slug: "/", icon: <HomeIcon width={20} height={20} /> },
+  {
+    name: "캘린더",
+    slug: "/calendar",
+    icon: <CalendarCheckIcon width={20} height={20} />,
+  },
+  {
+    name: "지역",
+    slug: "/map",
+    icon: <PinLocationIcon width={20} height={20} />,
+  },
+  {
+    name: "채팅",
+    slug: "/chat",
+    icon: <ChatBubbleDotsIcon width={20} height={20} />,
+  },
+  { name: "MY", slug: "/mypage", icon: <UserIcon width={20} height={20} /> },
+];
+
+const NavigationBar = () => {
+  return (
+    <NM.Root
+      className={cn(
+        "w-full h-[60px] px-[26px] py-[12px] rounded-t-[24px] max-w-none lg:max-w-[450px]",
+        "fixed bottom-0",
+        "bg-gray-scale-0",
+      )}
+    >
+      <NM.List className="flex  h-full w-full  items-center justify-between ">
+        {navigations.map((nav) => (
+          <NM.Item
+            key={nav.name}
+            className="flex w-[36px] items-center justify-center text-caption1-medium-nav"
+          >
+            <NavigationBarButton href={nav.slug}>
+              {nav.icon}
+              {nav.name}
+            </NavigationBarButton>
+          </NM.Item>
+        ))}
+      </NM.List>
+    </NM.Root>
+  );
+};
+
+export default NavigationBar;

src/layout/Mobile/MobileBottomNavLink.tsx → src/layout/Mobile/NavigationBar/NavigationBarButton.tsx

@@ -12,11 +12,11 @@ const NavLink = ({
   const isActive = href === pathname;
 
   return (
-    <NM.Link asChild active={isActive}>
+    <NM.Link asChild active={isActive} className="flex flex-col">
       <NextLink
         href={href}
         prefetch
-        className={` ${isActive ? "text-red-600" : ""}`}
+        className={`flex flex-col items-center justify-center gap-[3px] ${isActive ? "text-gray-scale-900" : "text-gray-scale-400"}`}
         {...props}
       />
     </NM.Link>