공통 컴포넌트: BottomNav

src/app/channel/page.tsx

@@ -0,0 +1,11 @@
+import BottomNav from '@/components/shared/bottom-nav/BottomNav';
+
+function ChannelPage() {
+  return (
+    <div>
+      <BottomNav />
+    </div>
+  );
+}
+
+export default ChannelPage;

src/app/favorite/page.tsx

@@ -0,0 +1,11 @@
+import BottomNav from '@/components/shared/bottom-nav/BottomNav';
+
+function FavoritePage() {
+  return (
+    <div>
+      <BottomNav />
+    </div>
+  );
+}
+
+export default FavoritePage;

src/app/map/page.tsx

@@ -0,0 +1,11 @@
+import BottomNav from '@/components/shared/bottom-nav/BottomNav';
+
+function MapPage() {
+  return (
+    <div>
+      <BottomNav />
+    </div>
+  );
+}
+
+export default MapPage;

src/app/page.tsx

@@ -1,10 +1,13 @@
 import Link from 'next/link';
 
+import BottomNav from '@/components/shared/bottom-nav/BottomNav';
+
 export default function Home() {
   return (
     <div>
-      <h1>Home</h1>
+      <h1 style={{ fontSize: '20px' }}>Home</h1>
       <Link href="/about">About</Link>
+      <BottomNav />
     </div>
   );
 }

src/app/profile/page.tsx

@@ -0,0 +1,11 @@
+import BottomNav from '@/components/shared/bottom-nav/BottomNav';
+
+function ProfilePage() {
+  return (
+    <div>
+      <BottomNav />
+    </div>
+  );
+}
+
+export default ProfilePage;

src/components/icons/Channel.tsx

@@ -0,0 +1,18 @@
+import { Colors, colors } from '@styles/colorPalette';
+
+interface ChannelProps {
+  size?: number
+  color?: Colors
+}
+
+function Channel({ size = 24, color = 'black' }: ChannelProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 27 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M23.7655 2.01842L23.766 2.01855C24.5584 2.23066 25.1828 2.85491 25.3949 3.6471C25.6399 4.56402 25.7756 6.05782 25.8451 7.39402C25.8791 8.0472 25.8963 8.63823 25.9049 9.06603C25.9092 9.2797 25.9114 9.4521 25.9125 9.57051C25.9131 9.6297 25.9134 9.67536 25.9135 9.7059L25.9136 9.74016L25.9137 9.7484L25.9137 9.74992V9.75023V9.75028V9.75057L25.9137 9.75211L25.9136 9.76034L25.9135 9.79459C25.9134 9.82512 25.9131 9.87077 25.9126 9.92995C25.9116 10.0483 25.9095 10.2207 25.9052 10.4344C25.8967 10.8621 25.8798 11.4531 25.8459 12.1062C25.7767 13.4424 25.641 14.9357 25.3952 15.852L25.3951 15.8525C25.183 16.6449 24.5585 17.2693 23.7661 17.4814L23.7655 17.4816C23.3546 17.5918 22.5417 17.6913 21.4695 17.7695C20.4254 17.8457 19.2152 17.897 18.06 17.9314C16.9064 17.9657 15.8157 17.9828 15.0128 17.9914C14.6115 17.9957 14.2827 17.9979 14.0544 17.9989C13.9403 17.9995 13.8513 17.9997 13.7911 17.9999L13.7226 18L13.7054 18L13.7012 18H13.7002H13.7L13.6999 19L13.6999 18H13.6997H13.6987L13.6945 18L13.6772 18L13.6088 17.9999C13.5486 17.9997 13.4596 17.9995 13.3455 17.9989C13.1172 17.9979 12.7884 17.9957 12.3871 17.9914C11.5843 17.9828 10.4935 17.9657 9.3399 17.9314C8.1847 17.897 6.97455 17.8457 5.93046 17.7695C4.85822 17.6913 4.04537 17.5918 3.63438 17.4815L3.63385 17.4814C2.84142 17.2693 2.21701 16.6449 2.00487 15.8525L2.00475 15.852C1.75898 14.9357 1.6233 13.4424 1.55405 12.1062C1.5202 11.4531 1.50324 10.8621 1.49476 10.4344C1.49052 10.2207 1.48841 10.0483 1.48736 9.92995C1.48684 9.87077 1.48658 9.82512 1.48645 9.79459L1.48634 9.76034L1.48632 9.75211L1.48632 9.75028L1.48632 9.75008V9.75006V9.74994V9.74992L1.48632 9.74972L1.48632 9.74789L1.48634 9.73966L1.48645 9.70541C1.48658 9.67488 1.48684 9.62923 1.48736 9.57005C1.48841 9.45166 1.49052 9.27928 1.49476 9.06563C1.50324 8.63787 1.5202 8.04691 1.55405 7.39381C1.6233 6.0576 1.75898 4.56436 2.00475 3.64806L2.00487 3.64758C2.21701 2.8551 2.84143 2.23069 3.63389 2.01855L3.63437 2.01843C4.04536 1.90819 4.85821 1.80873 5.93046 1.73046C6.97455 1.65425 8.1847 1.60297 9.33989 1.56863C10.4935 1.53434 11.5842 1.51717 12.3871 1.50858C12.7884 1.50428 13.1172 1.50214 13.3455 1.50107C13.4596 1.50053 13.5486 1.50027 13.6088 1.50013L13.6772 1.50002L13.6945 1.5L13.6987 1.5L13.6997 1.5H13.6999L13.6999 0.5L13.7 1.5H13.7002L13.7012 1.5L13.7054 1.5L13.7226 1.50002L13.7911 1.50013C13.8513 1.50027 13.9403 1.50053 14.0544 1.50107C14.2827 1.50214 14.6115 1.50428 15.0128 1.50858C15.8157 1.51717 16.9064 1.53434 18.06 1.56863C19.2152 1.60297 20.4254 1.65425 21.4695 1.73046C22.5417 1.80873 23.3546 1.90819 23.7655 2.01842Z" stroke={colors[color]} strokeWidth="2" />
+      <path d="M11.0549 13.7139L17.9206 9.75024L11.0549 5.78655V13.7139Z" fill={colors[color]} />
+    </svg>
+
+  );
+}
+
+export default Channel;

src/components/icons/Favorite.tsx

@@ -0,0 +1,17 @@
+import { Colors, colors } from '@styles/colorPalette';
+
+interface FavoriteProps {
+  size?: number
+  color: Colors
+}
+
+function Favorite({ size = 24, color = 'black' }: FavoriteProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M19.9506 3.51652C19.4508 3.00693 18.8573 2.60268 18.2042 2.32688C17.5511 2.05108 16.851 1.90912 16.144 1.90912C15.437 1.90912 14.737 2.05108 14.0839 2.32688C13.4307 2.60268 12.8373 3.00693 12.3375 3.51652L11.3003 4.57362L10.263 3.51652C9.25345 2.48766 7.8842 1.90965 6.45648 1.90965C5.02876 1.90965 3.65951 2.48766 2.64996 3.51652C1.6404 4.54539 1.07324 5.94082 1.07324 7.39585C1.07324 8.85089 1.6404 10.2463 2.64996 11.2752L3.68721 12.3323L11.3003 20.0909L18.9133 12.3323L19.9506 11.2752C20.4506 10.7658 20.8472 10.1611 21.1179 9.49543C21.3885 8.82981 21.5278 8.11636 21.5278 7.39585C21.5278 6.67535 21.3885 5.9619 21.1179 5.29627C20.8472 4.63065 20.4506 4.02588 19.9506 3.51652Z" stroke={colors[color]} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+  );
+}
+
+export default Favorite;

src/components/icons/Home.tsx

@@ -0,0 +1,18 @@
+import { Colors, colors } from '@/styles/colorPalette';
+
+interface HomeProps {
+  size?: number
+  color: Colors
+}
+
+function Home({ size = 24, color }: HomeProps) {
+  return (
+    <svg width={size} height={size}>
+      <path fillRule="evenodd" clipRule="evenodd" d="M11.8861 1.21065C12.2472 0.929784 12.7528 0.929784 13.1139 1.21065L22.1139 8.21065C22.3575 8.4001 22.5 8.69141 22.5 9V20C22.5 20.7957 22.1839 21.5587 21.6213 22.1213C21.0587 22.6839 20.2957 23 19.5 23H5.5C4.70435 23 3.94129 22.6839 3.37868 22.1213C2.81607 21.5587 2.5 20.7957 2.5 20V9C2.5 8.69141 2.64247 8.4001 2.88606 8.21065L11.8861 1.21065ZM4.5 9.48908V20C4.5 20.2652 4.60536 20.5196 4.79289 20.7071C4.98043 20.8946 5.23478 21 5.5 21H19.5C19.7652 21 20.0196 20.8946 20.2071 20.7071C20.3946 20.5196 20.5 20.2652 20.5 20V9.48908L12.5 3.26686L4.5 9.48908Z" fill={colors[color]} />
+      <path fillRule="evenodd" clipRule="evenodd" d="M8.5 12C8.5 11.4477 8.94772 11 9.5 11H15.5C16.0523 11 16.5 11.4477 16.5 12V22C16.5 22.5523 16.0523 23 15.5 23C14.9477 23 14.5 22.5523 14.5 22V13H10.5V22C10.5 22.5523 10.0523 23 9.5 23C8.94772 23 8.5 22.5523 8.5 22V12Z" fill={colors[color]} />
+    </svg>
+
+  );
+}
+
+export default Home;

src/components/icons/Map.tsx

@@ -0,0 +1,24 @@
+import { Colors, colors } from '@styles/colorPalette';
+
+interface MapProps {
+  size?: number
+  color?: Colors
+}
+
+function Map({ size = 24, color = 'black' }: MapProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_576_5687)">
+        <path d="M17.6 8.33333C17.6 14.1667 10.1 19.1667 10.1 19.1667C10.1 19.1667 2.59998 14.1667 2.59998 8.33333C2.59998 6.3442 3.39015 4.43655 4.79667 3.03003C6.2032 1.6235 8.11085 0.833328 10.1 0.833328C12.0891 0.833328 13.9968 1.6235 15.4033 3.03003C16.8098 4.43655 17.6 6.3442 17.6 8.33333Z" stroke={colors[color]} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10.1 10.8333C11.4807 10.8333 12.6 9.71404 12.6 8.33333C12.6 6.95262 11.4807 5.83333 10.1 5.83333C8.71926 5.83333 7.59998 6.95262 7.59998 8.33333C7.59998 9.71404 8.71926 10.8333 10.1 10.8333Z" stroke={colors[color]} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+      <defs>
+        <clipPath id="clip0_576_5687">
+          <rect width="20" height="20" fill={colors[color]} transform="translate(0.0999756)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default Map;

src/components/icons/Profile.tsx

@@ -0,0 +1,18 @@
+import { Colors, colors } from '@styles/colorPalette';
+
+interface ProfileProps {
+  size?: number
+  color?: Colors
+}
+
+function Profile({ size = 24, color = 'black' }: ProfileProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fillRule="evenodd" clipRule="evenodd" d="M5.36437 15.4645C6.30205 14.5268 7.57382 14 8.8999 14H16.8999C18.226 14 19.4978 14.5268 20.4354 15.4645C21.3731 16.4021 21.8999 17.6739 21.8999 19V21C21.8999 21.5523 21.4522 22 20.8999 22C20.3476 22 19.8999 21.5523 19.8999 21V19C19.8999 18.2044 19.5838 17.4413 19.0212 16.8787C18.4586 16.3161 17.6956 16 16.8999 16H8.8999C8.10425 16 7.34119 16.3161 6.77858 16.8787C6.21597 17.4413 5.8999 18.2044 5.8999 19V21C5.8999 21.5523 5.45219 22 4.8999 22C4.34762 22 3.8999 21.5523 3.8999 21V19C3.8999 17.6739 4.42669 16.4021 5.36437 15.4645Z" fill={colors[color]} />
+      <path fillRule="evenodd" clipRule="evenodd" d="M12.8999 4C11.243 4 9.8999 5.34315 9.8999 7C9.8999 8.65685 11.243 10 12.8999 10C14.5568 10 15.8999 8.65685 15.8999 7C15.8999 5.34315 14.5568 4 12.8999 4ZM7.8999 7C7.8999 4.23858 10.1385 2 12.8999 2C15.6613 2 17.8999 4.23858 17.8999 7C17.8999 9.76142 15.6613 12 12.8999 12C10.1385 12 7.8999 9.76142 7.8999 7Z" fill={colors[color]} />
+    </svg>
+
+  );
+}
+
+export default Profile;

src/components/shared/bottom-nav/BottomNav.module.scss

@@ -0,0 +1,21 @@
+.container {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 44px;
+  padding: 12px 20px 30px;
+
+  ul {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    a {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+}

src/components/shared/bottom-nav/BottomNav.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import BottomNav from './BottomNav';
+
+const meta = {
+  title: 'Shared/BottomNav',
+  component: BottomNav,
+  parameters: {
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+} satisfies Meta<typeof BottomNav>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  args: {
+  },
+};

src/components/shared/bottom-nav/BottomNav.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import classNames from 'classnames/bind';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import Channel from '@components/icons/Channel';
+import Favorite from '@components/icons/Favorite';
+import Home from '@components/icons/Home';
+import Map from '@components/icons/Map';
+import Profile from '@components/icons/Profile';
+import Text from '@shared/text/Text';
+import deleteFirstWord from '@utils/deleteFirstWord';
+
+import styles from './BottomNav.module.scss';
+
+const cx = classNames.bind(styles);
+
+function BottomNav() {
+  const pathName = usePathname();
+  const filteredPathName = deleteFirstWord(pathName);
+
+  return (
+    <nav className={cx('container')}>
+      <ul>
+        <li>
+          <Link href="/map">
+            <Map color={filteredPathName.startsWith('map') ? 'primary' : 'black'} />
+            <Text typography="t7" fontWeight="200" color={filteredPathName.startsWith('map') ? 'primary' : 'black'}>지도</Text>
+          </Link>
+        </li>
+        <li>
+          <Link href="/favorite">
+            <Favorite color={filteredPathName.startsWith('favorite') ? 'primary' : 'black'} />
+            <Text typography="t7" fontWeight="200" color={filteredPathName.startsWith('favorite') ? 'primary' : 'black'}>즐겨찾기</Text>
+          </Link>
+        </li>
+        <li>
+          <Link href="/">
+            <Home color={filteredPathName === '' ? 'primary' : 'black'} />
+            <Text typography="t7" fontWeight="200" color={filteredPathName === '' ? 'primary' : 'black'}>홈</Text>
+          </Link>
+        </li>
+        <li>
+          <Link href="/channel">
+            <Channel color={filteredPathName.startsWith('channel') ? 'primary' : 'black'} />
+            <Text typography="t7" fontWeight="200" color={filteredPathName.startsWith('channel') ? 'primary' : 'black'}>채널</Text>
+          </Link>
+        </li>
+        <li>
+          <Link href="/profile">
+            <Profile color={filteredPathName.startsWith('profile') ? 'primary' : 'black'} />
+            <Text typography="t7" fontWeight="200" color={filteredPathName.startsWith('profile') ? 'primary' : 'black'}>프로필</Text>
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default BottomNav;

src/utils/deleteFirstWord.ts

@@ -0,0 +1,9 @@
+function deleteFirstWord(words: string) {
+  if (words == null || words.length === 0) {
+    return '';
+  }
+
+  return words.slice(1);
+}
+
+export default deleteFirstWord;