> For the complete documentation index, see [llms.txt](https://taewoongs-organization.gitbook.io/jtwjs-dev-wiki/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://taewoongs-organization.gitbook.io/jtwjs-dev-wiki/dev_note/storybook/csf3.md).

# CSF3

## CSF란?

> 'Component Story Format'(CSF)는 컴포넌트의 스토리를 작성하는 방법이다.

[Storybook v7](https://storybook.js.org/blog/storybook-7-docs/) 부터 CSF3을 기본 포맷으로 지원한다.

이전 버전 대비해서 상용구 코드의 양을 크게 줄여 간결함과 재사용성이 증가하여 생산성이 향상됨

{% hint style="info" %}
**Story란** 컴포넌트의 특정 상태를 의미하며, 각 스토리는 개별적으로 문서화된다.
{% endhint %}

### 개선된점

* **기본 렌더 함수를 생략해도 된다.**
  * 기본적으로 각 스토리는 컴포넌트를 렌더링하고 모든 인자를 전달한다.
* **스토리 재사용성을 위해 스프레드 문법을 지원**
* **인터렉션을 위한 play 함수 지원**
  * 스토리가 렌더링 된후 실행되며, 테스팅 라이브러리로 사용자 상호작용을 작성한다.
* **경로에 따른 스토리 타이틀 자동 지정**
  * 루트 경로를 기준으로 스토리 파일의 위치에 따라 제목을 자동으로 결정짓는다.

### Example

```tsx
// 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: '깃허브 바로가기',
  },
};
```