storybook으로 버튼 컴포넌트 만들기

스토리북 튜토리얼을 보고 따라해보려고 했으나 생각보다 어려웠고, 그냥 스토리북 프로젝트 생성하면 나오는 예제 참고해서 뚝딱뚝딱 연습해봤다. 

---

 

스토리북 프로젝트 생성

반드시 기존 프로젝트 위에 생성할 필요는 없다. 그래서 난 독립적으로 생성

 npx -p @storybook/cli sb init

 

 

개발환경 선택

 

6006포트에 스토리북 페이지가 열린다. 이제 여기서 UI 컴포넌트를 확인하고 테스트하면 된다. 

// 실행
npm run storybook

 

.storybook 이라는 폴더가 생성된다. 그 안에 두 가지 파일이 있다.

⬇

 

main.ts

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

앞으로 추가하는 addon은 여기에도 등록을 해줘야 한다. 

그 외에도 아주 많은 세팅을 설정할 수 있다.

Configure Storybook • Storybook docs

 

 

preview.ts

import type { Preview } from "@storybook/react";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

preview(미리보기) 화면에 대한 설정

 

---

 

 

버튼 컴포넌트 생성

스토리북에서 컴포넌트 UI 를 생성하기 위해서는 컴포넌트 파일 + stories 파일 두 가지가 필요

컴포넌트 파일(jsx, tsx)는 기존 방식대로 생성하면 된다.

 

CommonBtn.tsx

interface Props {
  children: string;
  disabled: boolean;
  color: string;
  onClick: () => void;
}

export default function CommonBtn({
  children,
  disabled,
  color,
  onClick,
}: Props) {
  return (
    <button
      disabled={disabled}
      style={{ backgroundColor: color }}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

 

 

---

스토리 파일 생성

CommonBtn.stories.ts

기본 버전 (아래에 업그레이드된 버전 있음 !)

import { fn } from "@storybook/test";
import CommonBtn from "./CommonBtn";

export default {
  title: "CommonBtn",
  component: CommonBtn,
  parameters: {
    layout: "centered", // 중앙 배치
  },
  tags: ["autodocs"], // 문서 자동 생성
  args: { children: "BUTTON", disabled: false, color: "blue", onClick: fn() },
};

export const Default = {};

 

stories 파일의 각각 요소에 대해 알아보자.

 

 

args

• dynamically change props, slots, styles, inputs, etc
• 컴포넌트에 사용되는 유효한 value 값과 동일한 string key 사용

 

argTypes

• args에 대한 설정 정의
• 타입, 기본값, controls 등 설정

argTypes: {
  children: { control: 'text' }, // label Prop을 텍스트로 제어 가능하도록 설정
  disabled: { control: 'boolean' }, // disabled Prop을 불리언으로 제어 가능하도록 설정
  onClick: { action: 'clicked' }, // onClick Prop에 액션을 추가하여 클릭 이벤트를 추적
},

 

 

parameters

• 스토리의 메타데이터
• https://storybook.js.org/docs/api/parameters#available-parameters
• layout : 컴포넌트를 어디에 배치할 것인지
• options

 

decorators

• 스토리북 테스트 UI에서 렌더링 시 스타일을 지정해줌

decorators: [
  (Story) => (
    <div style={{ margin: '3em'}}><Story /></div>
  )
],

※ html 요소를 추가하고 싶으면 파일 확장자명을 js, ts가 아니라 jsx, tsx로 사용해야 한다. 

 

 

 

 

위의 내용을 추가하면 이런 느낌 → CommonBtn.stories.tsx

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

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

export default meta;

export const Primary = {
  args: {
    disabled: false,
    color: "blue",
  },
};

export const Warning = {
  args: {
    disabled: false,
    color: "red",
  },
};

 

 

---

결과

다만 스타일을 하나도 안 줘서 기본 스타일인건 눈감아주자

 

 

Docs

 

 

 

Controls

args에 적어준 값들

 

 

Actions

이벤트 발생 시 action이 잘 감지된다