CSF3
CSF๋?
'Component Story Format'(CSF)๋ ์ปดํฌ๋ํธ์ ์คํ ๋ฆฌ๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ด๋ค.
Storybook v7 ๋ถํฐ CSF3์ ๊ธฐ๋ณธ ํฌ๋งท์ผ๋ก ์ง์ํ๋ค.
์ด์ ๋ฒ์ ๋๋นํด์ ์์ฉ๊ตฌ ์ฝ๋์ ์์ ํฌ๊ฒ ์ค์ฌ ๊ฐ๊ฒฐํจ๊ณผ ์ฌ์ฌ์ฉ์ฑ์ด ์ฆ๊ฐํ์ฌ ์์ฐ์ฑ์ด ํฅ์๋จ
๊ฐ์ ๋์
๊ธฐ๋ณธ ๋ ๋ ํจ์๋ฅผ ์๋ตํด๋ ๋๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก ๊ฐ ์คํ ๋ฆฌ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๊ณ ๋ชจ๋ ์ธ์๋ฅผ ์ ๋ฌํ๋ค.
์คํ ๋ฆฌ ์ฌ์ฌ์ฉ์ฑ์ ์ํด ์คํ๋ ๋ ๋ฌธ๋ฒ์ ์ง์
์ธํฐ๋ ์ ์ ์ํ play ํจ์ ์ง์
์คํ ๋ฆฌ๊ฐ ๋ ๋๋ง ๋ํ ์คํ๋๋ฉฐ, ํ ์คํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์ฌ์ฉ์ ์ํธ์์ฉ์ ์์ฑํ๋ค.
๊ฒฝ๋ก์ ๋ฐ๋ฅธ ์คํ ๋ฆฌ ํ์ดํ ์๋ ์ง์
๋ฃจํธ ๊ฒฝ๋ก๋ฅผ ๊ธฐ์ค์ผ๋ก ์คํ ๋ฆฌ ํ์ผ์ ์์น์ ๋ฐ๋ผ ์ ๋ชฉ์ ์๋์ผ๋ก ๊ฒฐ์ ์ง๋๋ค.
Example
// default exportํ ๊ฐ์ฒด์์ ์คํ ๋ฆฌ๊ฐ ์์ฑํ ์ปดํฌ๋ํธ๋ฅผ ์ ์ธ
const meta: Meta<typeof Button> = {
title: 'Button',
component: Button,
tags: ['autodocs'],
parameters: {
controls: { exclude: ["className", "IconOnly"], expanded: true },
},
decorators: [
Story => (
<StoryLayout className="space-y-2">
<Story />
</StoryLayout>
)
],
}
export default meta;
type Story = StoryObj<typeof Button>;
// ์คํ ๋ฆฌ๋ ๊ฐ์ฒด ํํ๋ก ๊ฐ๋ณ์ ์ผ๋ก export
export const Default: Story = {
args: {
variant: "primary",
size: "md",
disabled: false,
label: "Default Button",
onClick: action('clicked'),
},
}
export const Icon: Story = {
args: {
// ์คํ๋ ๋ ๋ฌธ๋ฒ์ ์ฌ์ฉํ์ฌ ์คํ ๋ฆฌ๊ฐ ์ค๋ณต๋๋ ์ค์ ์ฌ์ฌ์ฉ
...Default.args,
IconOnly: <AiFillGithub />,
label: '๊นํ๋ธ ๋ฐ๋ก๊ฐ๊ธฐ',
},
};
Last updated