feat: storybook 추가

2026-04-14 10:38:36 +09:00
parent 52f8c30b2e
commit 8d6bff88d6
23 changed files with 1687 additions and 10 deletions
--- a/web-app/app/shared/components/menu/Menu.stories.tsx
+++ b/web-app/app/shared/components/menu/Menu.stories.tsx
@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { Menu, type MenuItemChildrenType } from './Menu'
+
+const meta = {
+  title: 'Components/Menu',
+  component: Menu,
+  args: {
+    items: [],
+    currentPath: '',
+    onSelectionChange: () => {},
+  },
+} satisfies Meta<typeof Menu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleItems = [
+  {
+    id: '1',
+    name: '항공영상 관리',
+    menuUrl: null,
+    children: [
+      { id: '1-1', name: '항공영상 목록', menuUrl: '/imagery/list' },
+      { id: '1-2', name: '항공영상 등록', menuUrl: '/imagery/register' },
+    ],
+  },
+  {
+    id: '2',
+    name: '탐지 관리',
+    menuUrl: null,
+    children: [
+      { id: '2-1', name: '탐지 실행', menuUrl: '/detection/run' },
+      { id: '2-2', name: '탐지 결과', menuUrl: '/detection/result' },
+      { id: '2-3', name: '탐지 이력', menuUrl: '/detection/history' },
+    ],
+  },
+  {
+    id: '3',
+    name: '설정',
+    menuUrl: null,
+    children: [
+      { id: '3-1', name: '시스템 설정', menuUrl: '/settings/system' },
+      { id: '3-2', name: '사용자 설정', menuUrl: '/settings/user' },
+    ],
+  },
+]
+
+export const Default: Story = {
+  render: function Render() {
+    const [currentPath, setCurrentPath] = useState('/imagery/list')
+    const handleSelectionChange = (menu: MenuItemChildrenType) => {
+      setCurrentPath(menu.menuUrl)
+    }
+    return (
+      <div className="w-60 bg-dabeeo-gray-f5">
+        <Menu items={sampleItems} currentPath={currentPath} onSelectionChange={handleSelectionChange} />
+      </div>
+    )
+  },
+}
+
+export const WithDifferentPath: Story = {
+  render: function Render() {
+    const [currentPath, setCurrentPath] = useState('/detection/result')
+    const handleSelectionChange = (menu: MenuItemChildrenType) => {
+      setCurrentPath(menu.menuUrl)
+    }
+    return (
+      <div className="w-60 bg-dabeeo-gray-f5">
+        <Menu items={sampleItems} currentPath={currentPath} onSelectionChange={handleSelectionChange} />
+      </div>
+    )
+  },
+}
+
+export const SingleCategory: Story = {
+  render: function Render() {
+    const singleCategoryItems = [
+      {
+        id: '1',
+        name: '항공영상 관리',
+        menuUrl: null,
+        children: [
+          { id: '1-1', name: '항공영상 목록', menuUrl: '/imagery/list' },
+          { id: '1-2', name: '항공영상 등록', menuUrl: '/imagery/register' },
+          { id: '1-3', name: '항공영상 상세', menuUrl: '/imagery/detail' },
+        ],
+      },
+    ]
+    const [currentPath, setCurrentPath] = useState('/imagery/list')
+    const handleSelectionChange = (menu: MenuItemChildrenType) => {
+      setCurrentPath(menu.menuUrl)
+    }
+    return (
+      <div className="w-60 bg-dabeeo-gray-f5">
+        <Menu items={singleCategoryItems} currentPath={currentPath} onSelectionChange={handleSelectionChange} />
+      </div>
+    )
+  },
+}