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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://taewoongs-organization.gitbook.io/jtwjs-dev-wiki/dev_note/storybook/csf3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.