97 lines
2.2 KiB
TypeScript
97 lines
2.2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { Section } from './Section'
|
|
|
|
const meta = {
|
|
title: 'Components/Section',
|
|
component: Section,
|
|
args: {
|
|
variant: 'base',
|
|
children: <div>Base 섹션</div>,
|
|
},
|
|
argTypes: {
|
|
variant: {
|
|
control: 'select',
|
|
options: ['base', 'card', 'list', 'searchFilterGray'],
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Section>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Base: Story = {
|
|
args: {
|
|
variant: 'base',
|
|
children: (
|
|
<div>
|
|
<h2 className="text-lg font-bold mb-2">기본 섹션</h2>
|
|
<p>이것은 기본 섹션입니다.</p>
|
|
</div>
|
|
),
|
|
},
|
|
}
|
|
|
|
export const Card: Story = {
|
|
args: {
|
|
variant: 'card',
|
|
children: (
|
|
<div>
|
|
<h2 className="text-lg font-bold mb-2">카드 섹션</h2>
|
|
<p>이것은 카드 형태의 섹션입니다.</p>
|
|
</div>
|
|
),
|
|
},
|
|
}
|
|
|
|
export const List: Story = {
|
|
args: {
|
|
variant: 'list',
|
|
children: (
|
|
<>
|
|
<h2 className="text-lg font-bold">리스트 섹션</h2>
|
|
<ul className="space-y-2">
|
|
<li className="p-2 bg-gray-50 rounded">항목 1</li>
|
|
<li className="p-2 bg-gray-50 rounded">항목 2</li>
|
|
<li className="p-2 bg-gray-50 rounded">항목 3</li>
|
|
</ul>
|
|
</>
|
|
),
|
|
},
|
|
}
|
|
|
|
export const SearchFilterGray: Story = {
|
|
args: {
|
|
variant: 'searchFilterGray',
|
|
children: (
|
|
<>
|
|
<span>필터:</span>
|
|
<select className="border border-gray-300 rounded px-2 py-1">
|
|
<option>전체</option>
|
|
<option>옵션 1</option>
|
|
<option>옵션 2</option>
|
|
</select>
|
|
<input type="text" placeholder="검색어 입력" className="border border-gray-300 rounded px-2 py-1" />
|
|
</>
|
|
),
|
|
},
|
|
}
|
|
|
|
export const AllVariants: Story = {
|
|
render: () => (
|
|
<div className="space-y-4">
|
|
<Section variant="base">
|
|
<div>Base 섹션</div>
|
|
</Section>
|
|
<Section variant="card">
|
|
<div>Card 섹션</div>
|
|
</Section>
|
|
<Section variant="list">
|
|
<div>List 섹션</div>
|
|
</Section>
|
|
<Section variant="searchFilterGray">
|
|
<span>SearchFilterGray 섹션</span>
|
|
</Section>
|
|
</div>
|
|
),
|
|
}
|