Storybook 스토리 파일 생성 방법

CommonButton 예시

import { fn } from "@storybook/test";
import { Meta } from "@storybook/react";
import CommonButton from "./CommonButton";

const meta: Meta<typeof CommonButton> = {
  title: "Button/CommonButton",
  component: CommonButton,
  decorators: [
    (Story) => (
      <div style={{ margin: "3em" }}>
        <Story />
      </div>
    ),
  ],
  parameters: {
    layout: "centered", // 중앙 배치
  },
  tags: ["autodocs"], // 문서 자동 생성
  argTypes: {
    text: { control: "text" },
    disabled: { control: "boolean" },
    color: { control: "select", options: ["Blue", "Red", "Yellow"] },
    onClick: { action: "clicked" },
  },
  args: {
    text: "BUTTON",
    disabled: false,
    color: "Blue",
    onClick: fn(),
  },
};

export default meta;

export const Primary = {};

export const Disable = {
  args: {
    disabled: true,
  },
};

 

 

 

필드 역할

title

• 스토리북의 사이드바에 표시될 때의 경로
• /를 통해 폴더 구조를 정의할 수 있음
  • ex) Button/CommonButton → Button 폴더의 CommonButton 항목

 

component

• 스토리에서 사용하는 기본 컴포넌트

 

decorators

• 스토리에 wrapper를 추가하는 데 사용
• 스토리를 보여주는 데 있어 특정 스타일로 감싸줄 수 있음

 

parameters

• 스토리에 대한 설정
• 레이아웃, 동작, 애드온 설정 등 지정 가능

 

tags

• 스토리의 메타데이터
• 문서화 또는 필터링 도움
  • autodocs
  • dev
  • test
• 각 태그를 통해 스토리를 목적에 맞게 분류하여 관리 가능
• dev, test 태그는 모든 스토리에 기본적으로 자동 적용

 

args

• 스토리에서 기본으로 사용될 인수 값

 

argTypes

• 인수를 설정하고 제어하는 방법 정의
• control 애드온을 사용하여 UI 화면에서 인수 변경 가능

ArgTypes • Storybook docs