How to write stories

스토리 작성하는 방법

Storybook에서 스토리는 UI 컴포넌트의 렌더링된 상태를 나타내요. 이는 주어진 인수에 따라 컴포넌트의 동작과 외관을 설명하는 주석이 포함된 객체예요. Storybook에서는 React의 props, Vue의 props, Angular의 @Input 등과 같은 개념을 이야기할 때 일반적으로 '인수(args)'라는 용어를 사용해요.

Where to put stories

스토리를 넣는 위치

컴포넌트의 스토리는 컴포넌트 파일과 함께 있는 스토리 파일에 정의해요. 이 스토리 파일은 개발 전용이며, 프로덕션 번들에는 포함되지 않아요. 파일 시스템에서는 다음과 같이 보일 수 있어요.

components/
├─ Button/
│  ├─ Button.js | ts | jsx | tsx | vue | svelte
│  ├─ Button.stories.js | ts | jsx | tsx | svelte

Component Story Format

컴포넌트 스토리 형식 (CSF)

스토리는 ES6 모듈 기반의 표준인 컴포넌트 스토리 형식(CSF)에 따라 정의해요. 이 형식은 작성하기 쉽고 도구 간에 이식성이 좋아요. 주요 요소는 컴포넌트를 설명하는 기본 내보내기(default export)와 스토리를 설명하는 명명된 내보내기(named exports)예요.

Default export

기본 내보내기

기본 내보내기 메타데이터는 Storybook이 스토리를 나열하는 방법과 애드온에서 사용하는 정보를 제어해요. 예를 들어, Button.stories.js/ts 파일의 기본 내보내기는 다음과 같아요.

import type { Meta } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
};

export default meta;

Storybook 버전 7.0부터는 스토리 제목이 빌드 과정에서 정적으로 분석돼요. 기본 내보내기에는 정적으로 읽을 수 있는 title 속성이나 자동으로 제목을 생성할 수 있는 component 속성이 포함되어야 해요. 스토리 URL을 사용자 지정하기 위해 id 속성을 사용하는 경우에도 정적으로 읽을 수 있어야 해요.

Defining stories

스토리 정의하기

CSF 파일의 명명된 내보내기를 사용하여 컴포넌트의 스토리를 정의해요. 스토리 내보내기에는 UpperCamelCase를 사용하는 것을 권장해요. 다음은 "primary" 상태의 Button을 렌더링하고 Primary라는 스토리를 내보내는 방법이에요:

import type { Meta, StoryObj } from '@storybook/vue3';

import Button from './Button.vue';

const meta: Meta<typeof Button> = {
  component: Button,
};

export default meta;
type Story = StoryObj<typeof Button>;

/*
 *👇 Render functions are a framework specific feature to allow you control on how the component renders.
 * See https://storybook.js.org/docs/api/csf
 * to learn how to use render functions.
 */
export const Primary: Story = {
  render: (args) => ({
    components: { Button },
    setup() {
      return { args };
    },
    template: '<Button v-bind="args" />',
  }),
  args: {
    primary: true,
    label: 'Button',
  },
};

Rename stories

스토리 이름 변경하기

특정 스토리의 이름을 더 정확하게 지정하고 싶을 때가 있어요. 예를 들어, Primary 스토리의 이름을 변경하는 방법은 다음과 같아요.

import type { Meta, StoryObj } from '@storybook/vue3';

import Button from './Button.vue';

const meta: Meta<typeof Button> = {
  component: Button,
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  // 👇 Rename this story
  name: 'I am the primary',
  args: {
    label: 'Button',
    primary: true,
  },
};

이제 스토리가 사이드바에 지정한 이름으로 표시될 거예요.