feat: NavItem 컴포넌트 스토리 추가

packages/ui/src/components/NavItem/NavItem.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import folderImageUrl from "../../assets/folder.svg";
+import homeImageUrl from "../../assets/home.svg";
+import Navbar from ".";
+
+const meta = {
+  title: "Client/Navbar",
+  component: Navbar,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "Navbar 컴포넌트",
+  },
+  argTypes: {
+    imageUrl: {
+      control: false,
+    },
+  },
+} satisfies Meta<typeof Navbar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    href: "studies",
+    imageUrl: homeImageUrl,
+    alt: "home-icon",
+    name: "개설된 스터디",
+  },
+};
+
+export const WithSubItems: Story = {
+  args: {
+    href: "studies",
+    imageUrl: homeImageUrl,
+    alt: "home-icon",
+    name: "개설된 스터디",
+    items: [
+      {
+        href: "basic-web-study",
+        imageUrl: folderImageUrl,
+        alt: "folder-icon",
+        name: "기초 웹 스터디",
+      },
+      {
+        href: "dev-beginner-study",
+        imageUrl: folderImageUrl,
+        alt: "folder-icon",
+        name: "개발 입문 스터디",
+      },
+      {
+        href: "basic-mobile-study",
+        imageUrl: folderImageUrl,
+        alt: "folder-icon",
+        name: "기초 모바일 스터디",
+      },
+    ],
+  },
+};

packages/ui/src/components/NavItem.tsx → packages/ui/src/components/NavItem/index.tsx

@@ -7,7 +7,7 @@ import Link from "next/link";
 import { useSelectedLayoutSegments } from "next/navigation";
 import { useState } from "react";
 
-import arrowImageUrl from "../assets/arrow.svg";
+import arrowImageUrl from "../../assets/arrow.svg";
 
 /**
  * @description 내비게이션 바에서 사용하는 내비게이션 아이템 컴포넌트입니다.
@@ -19,7 +19,7 @@ import arrowImageUrl from "../assets/arrow.svg";
  * @param {Array<{href: string, imageUrl: string, alt: string, name: string}>} [items] - 서브 내비게이션 아이템 배열
  * @returns {JSX.Element} 내비게이션 아이템 컴포넌트
  */
-interface NavItemProps {
+export interface NavItemProps {
   href: string;
   imageUrl: string;
   alt: string;

packages/ui/src/components/index.ts

@@ -1 +1 @@
-export { default as NavItem } from "./NavItem";
+export { default as NavItem } from ".";