[UI 컴포넌트 라이브러리] Storybook

Storybook이란?

스토리북(Storybook)은 UI 컴포넌트를 문서화하여 디자인 시스템을 개발 할 수 있는 React 라이브러리입니다.

UI 컴포넌트 개발은 복잡한 로직 없이 독립적인 환경에서 가능하며, 재사용을 위해 story에서 컴포넌트를 조합하여 테스트할 수 있습니다. 또한, UI 컴포넌트를 미리 체험하고 사용할 수 있으며, UI 컴포넌트의 문서화와 디자인 시스템 구축도 가능합니다. 디자인 시스템에 적용하여 figma 컴포넌트들과 동기화할 수도 있으며, UI 환경을 직접 수정하고 플레이그라운드 형식으로 다양한 컴포넌트를 시도할 수도 있습니다. Usecase 별로 story를 만들고 UI 컴포넌트를 개발하고 테스트하는 데에 유용하게 사용할 수 있으며, 다중 어플리케이션이나 공동으로 사용되는 컴포넌트들을 관리하는 데에 규격을 제공합니다.

 

Story란?

스토리북을 구성하는 기본 구성 단위로 UI 컴포넌트를 어떤식으로 사용해야하는지 예시를 보여줍니다.

하나의 UI 컴포넌트는 하나 이상의 story를 가질 수 있습니다.

다음 예시는 Button이라는 Story입니다.

//index.stories.tsx

import React from 'react';
import { withKnobs } from '@storybook/addon-knobs';

import Modal from '.';

export default {
  title: 'molecules/Modal',
  decorators: [withKnobs],
  parameters: {
    component: Modal,
  },
};

export interface IState {
  primary: boolean;
}

export const Default = (): JSX.Element => {
  const [open, setOpen] = React.useState<IState>({
    primary: false,
  });
  const handleOpen = (key: keyof IState): void => {
    setOpen({ ...open, [key]: true });
  };

  const handleClose = (key: keyof IState): void => {
    setOpen({ ...open, [key]: false });
  };

  const handleRequestOtp = () => {
    alert('request otp number');
  };

  const handleLoginOtp = () => {
    alert('otp login');
  };

  return (
    <div className="modal-stories-default-root">
      <h2># Detail Modal</h2>
      <br />
      <table className="tbl tbl-no-btw-margin">
        <colgroup>
          <col width="200" />
          <col width="360" />
          <col width="auto" />
        </colgroup>
        <thead>
          <tr>
            <th>이름</th>
            <th>내용</th>
            <th>비고</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>모달</td>
            <td>
              <button type="button" onClick={() => handleOpen('primary')}>
                열기
              </button>
              <Modal
                onClose={handleClose.bind(null, 'primary')}
                open={open.primary}
              />
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>

      <div id="modal"></div>
    </div>
  );
};

 

 

Reference

• https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/