8.1 스토리북 기초

UI 컴포넌트 탐색기는 구현된 UI 컴포넌트를 쉽게 공유할 수 있도록 도와주는 협업 도구.

8.1.1 스토리북 설치

8.1.2 스토리 등록

import { Button } from './Button';

const meta = {
  title: 'Example/Button',
  component: Button,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: <https://storybook.js.org/docs/configure/story-layout>
    layout: 'centered',
  },
  // This component will have an automatically generated Autodocs entry: <https://storybook.js.org/docs/writing-docs/autodocs>
  tags: ['autodocs'],
  // More on argTypes: <https://storybook.js.org/docs/api/argtypes>
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: <https://storybook.js.org/docs/essentials/actions#action-args>
  args: { onClick: fn() },
} satisfies Meta<typeof Button>;

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

// More on writing stories with args: <https://storybook.js.org/docs/writing-stories/args>
export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const Secondary: Story = {
  args: {
    label: 'Button',
  },
};

export const Large: Story = {
  args: {
    size: 'large',
    label: 'Button',
  },
};

export const Small: Story = {
  args: {
    size: 'small',
    label: 'Button',
  },
};

8.1.3 3단계 깊은 병합

모든 스토리에는 ‘Global’, ‘Component’, ‘Story’라는 세 단계의 설정이 깊은 병합 방식으로 적용된다.

• 공통으로 항목을 적절한 스코프에 설정하여 스토리마다 개별적으로 설정해야 하는 작업을 최소화할 수 있다.

Global 단계 : 모든 스토리에 적용할 설정 (.storybook/preview.js)

Component 단계 : 스토리 파일에 적용할 설정(export default)

Story 단계 : 개별 스토리에 적용할 설정(export const)

8.2 스토리북 필수 애드온

add-on으로 필요한 기능을 추가할 수 있다.

기본적으로 추가되는 @storybook/addon-essentials는 필수 애드온.