feat : 내비게이션 페이지 이동 구현 (#101)

src/components/Common/NavigationBar/NavigationBar.stories.tsx

@@ -1,11 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { NavigationBar } from './NavigationBar';
+import { MemoryRouter } from 'react-router-dom';
 
 const meta: Meta<typeof NavigationBar> = {
     component: NavigationBar,
     title: 'molecule/NavigationBar',
     tags: ['autodocs'],
+    decorators: [
+        (Story) => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ],
     argTypes: {}
 };
 export default meta;

src/components/Common/NavigationBar/NavigationBar.tsx

@@ -1,18 +1,21 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { NavigationItem } from './NavigationItem';
 
 import { IoMdHome, IoIosSend } from 'react-icons/io';
 import { IoMap } from 'react-icons/io5';
 import { FaUserCircle } from 'react-icons/fa';
 
 export const NavigationBar = () => {
-    const [activeIndex, setActiveIndex] = useState(0);
-
     const navItems = [
-        { id: 0, icon: <IoMdHome />, label: '홈' },
-        { id: 1, icon: <IoIosSend />, label: '편지쓰기' },
-        { id: 2, icon: <IoMap />, label: '지도' },
-        { id: 3, icon: <FaUserCircle />, label: '마이페이지' }
+        { id: 0, icon: <IoMdHome />, label: '홈', path: '/' },
+        {
+            id: 1,
+            icon: <IoIosSend />,
+            label: '편지쓰기',
+            path: '/letter/create'
+        },
+        { id: 2, icon: <IoMap />, label: '지도', path: '/mapexplorer' },
+        { id: 3, icon: <FaUserCircle />, label: '마이페이지', path: '/mypage' }
     ];
 
     return (
@@ -22,8 +25,7 @@ export const NavigationBar = () => {
                     <NavigationItem
                         icon={item.icon}
                         label={item.label}
-                        isActive={activeIndex === item.id}
-                        onClick={() => setActiveIndex(item.id)}
+                        path={item.path}
                     />
                 </div>
             ))}

src/components/Common/NavigationBar/NavigationItem.stories.tsx

@@ -1,39 +1,33 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NavigationItem } from './NavigationItem';
 import { FaReact } from 'react-icons/fa';
+import { MemoryRouter } from 'react-router-dom';
 
 const meta: Meta<typeof NavigationItem> = {
     component: NavigationItem,
     title: 'atoms/NavigationItem',
     tags: ['autodocs'],
+    decorators: [
+        (Story) => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ],
     argTypes: {
-        icon: {
-            description: '아이콘입니다.'
-        },
-        label: {
-            description: '탭을 설명하는 타이틀 입니다.'
-        },
-        isActive: {
-            description: '선택 상태'
-        }
+        icon: { description: '아이콘입니다.' },
+        label: { description: '탭을 설명하는 타이틀 입니다.' },
+        path: { description: '페이지 경로 입니다.' }
     }
 };
 export default meta;
 
 type Story = StoryObj<typeof NavigationItem>;
 
-export const deactive: Story = {
+export const Deactive: Story = {
     args: {
         icon: <FaReact />,
-        label: 'title',
-        isActive: false
-    }
-};
-
-export const active: Story = {
-    args: {
-        icon: <FaReact />,
-        label: 'title',
-        isActive: true
+        label: '설명',
+        path: '/'
     }
 };

src/components/Common/NavigationBar/NavigationItem.tsx

@@ -1,29 +1,24 @@
 import React from 'react';
+import { NavLink } from 'react-router-dom';
 
 type NavigationItemProps = {
     icon: React.ReactNode;
     label: string;
-    isActive: boolean;
-    onClick: () => void;
+    path: string;
 };
 
-export const NavigationItem = ({
-    icon,
-    label,
-    isActive,
-    onClick
-}: NavigationItemProps) => {
+export const NavigationItem = ({ icon, label, path }: NavigationItemProps) => {
     return (
-        <button
-            className={`flex flex-col items-center justify-center p-2 ${
-                isActive ? 'text-blue-500' : 'text-gray-400'
-            }`}
-            onClick={onClick}
+        <NavLink
+            to={path}
+            className={({ isActive }) =>
+                `flex flex-col items-center justify-center p-2 ${
+                    isActive ? 'text-blue-500' : 'text-gray-400'
+                }`
+            }
         >
-            <div className={`${isActive ? 'fill-blue-500' : 'fill-gray-400'}`}>
-                {icon}
-            </div>
+            <div>{icon}</div>
             <span className="text-sm">{label}</span>
-        </button>
+        </NavLink>
     );
 };