[#361] BottomNavigation 컴포넌트

src/stories/Base/BottomNavigation.stories.tsx

@@ -0,0 +1,72 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import BottomNavigation from '@/ui/Base/BottomNavigation';
+
+const meta: Meta<typeof BottomNavigation> = {
+  title: 'Base/BottomNavigation',
+  component: BottomNavigation,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BottomNavigation>;
+
+export const Default: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: '/bookarchive',
+      },
+    },
+  },
+  render: () => {
+    return <BottomNavigation />;
+  },
+};
+
+export const Search: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: '/book/search',
+      },
+    },
+  },
+  render: () => {
+    return <BottomNavigation />;
+  },
+};
+
+export const Group: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: '/group',
+      },
+    },
+  },
+  render: () => {
+    return <BottomNavigation />;
+  },
+};
+
+export const Profile: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: '/profile/me',
+      },
+    },
+  },
+  render: () => {
+    return <BottomNavigation />;
+  },
+};

src/ui/Base/BottomNavigation.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import {
+  IconBookarchive,
+  IconDiscover,
+  IconGroup,
+  IconProfile,
+} from '@public/icons';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const icons = [
+  {
+    icon: <IconBookarchive />,
+    label: '북카이브',
+    href: '/bookarchive',
+  },
+  {
+    icon: <IconDiscover />,
+    label: '도서 검색',
+    href: '/book/search',
+  },
+  {
+    icon: <IconGroup />,
+    label: '독서 모임',
+    href: '/group',
+  },
+  {
+    icon: <IconProfile />,
+    label: '내 프로필',
+    href: '/profile/me',
+  },
+];
+
+const BottomNavigation = () => {
+  const pathname = usePathname();
+
+  const getIconColorClasses = (href: string) => {
+    return href === pathname
+      ? 'fill-main-900 text-main-900'
+      : 'fill-placeholder text-placeholder';
+  };
+
+  return (
+    <div className="border-top-[0.05rem] fixed bottom-0 flex h-[6.4rem] w-full max-w-[39.3rem] justify-between border-black-200 bg-white px-[2.6rem] pb-[1.2rem] pt-[0.8rem]">
+      {icons.map(({ icon, label, href }) => (
+        <Link key={label} type="button" href={href}>
+          <div
+            className={`flex h-[4.4rem] w-[4.6rem] flex-col items-center justify-center text-xs font-bold ${getIconColorClasses(
+              href
+            )}`}
+          >
+            <div className="h-[2.6rem] w-[2.6rem] text-placeholder">{icon}</div>
+            {label}
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default BottomNavigation;

tailwind.config.js

@@ -41,7 +41,8 @@ module.exports = {
         kakao: '#FEE102',
         kakaotext: '#191600',
         black: {
-          200: '#F4F4F4',
+          100: '#F4F4F4',
+          200: '#E9E9E9',
           300: '#ECECEC',
           400: '#D9D9D9',
           500: '#8D8D8D',