102 lines
2.9 KiB
TypeScript
102 lines
2.9 KiB
TypeScript
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>
|
|
)
|
|
},
|
|
}
|