# 컴포넌트 라이브러리 개발(storybook)

앞서 리엑트 컴포넌트 라이브러리를 개발/배포까지 하는 과정을 거쳤습니다. 이번엔 개발한 라이브러리를 보여주고 설명하는 디자인 가이드를 제공하기 위해 스토리북(storybook)을 이용한 웹 페이지를 개발, 배포하는 과정을 설명하겠습니다.

## 스토리북(storybook)

[storybook](https://storybook.js.org/)

> 스토리북은 비즈니스 로직과 맥락(context)으로부터 분리된 UI 컴포넌트를 만들 수 있도록 도와줍니다

스토리북은 디자이너와 프론트 개발자를 연결하는 디자인 시스템을 손쉽게 개발할 수 있는 프레임워크입니다. 프레임워크에 국한되지 않고 개발한 컴포넌트를 스토리(story) 단위로 관리 캔버스(canvas)에 그려주며 애드온(addon)을 통해 접근성 검사 등 다양한 개발 편의 기능을 제공합니다.


앞서 개발한 프로젝트 루트 디렉토리에서 아래 명령어를 실행하여 storybook 환경을 기존 프로젝트에 붙입니다.

npx storybook init

.storybook 디렉토리가 생기고 내부에 preview.js, main.js가 생성되었을 것입니다. main.js는 빌드와 관련된 설정을 포함하고 preview.js는 보여지는 화면 설정을 포함합니다.

아래 명령어를 실행하면 스토리북을 실행할 수 있습니다.

npm run storybook

스토리북은 애드온을 통하여 개발에 도움이 되는 기능을 사용할 수 있습니다. 최신 버전(6)의 스토리북은 기본적으로 docs, actions, controls를 포함하고 있습니다. 이중 docs는 스토리북 문서를 작성하는데 도움을 주는 애드온입니다. 앞으로 docs를 통해 문서를 작성할 것입니다.

별도의 addon을 활용하려면 패키지 설치 후 main.js의 addon에 작성하여 사용합니다.

module.exports = {
  ...
  "addons": [
    "@storybook/addon-docs",
    ...
    /** new addon */
  ]
} 

## 프로젝트에 맞춰 커스텀하기

`@seolim/react-ui`의 디렉토리 구조는 아래와 같습니다.

## **스토리북 관련 추가**
├── .circleci
│   └── config.yml
├── component
│   ├── index.tsx
│   └── ...components...
├── package.json
├── package.deploy.json
├── tsconfig.json
├── **.storybook**
└── **.stories**
    ├── component.stories.mdx
    └── ...stories.mdx

stories 디렉토리는 스토리북 페이지에서 보여질 docs를 설정하는 스크립트를 모아둡니다. mdx 포맷은 마크다운(markdown)과 jsx를 합친 포맷으로 스토리북의 docs탭을 그릴 수 있습니다.

stories 디렉토리와 파일 패턴, React를 스토리북 빌드에 포함시키기 위해 main.js를 아래와 같이 설정합니다.

module.exports = {
  ...
  "stories": [
    "../stories/*.stories.mdx",
  ],
  "framework": "@storybook/react",
  ...
}

`@seolim/react-ui` 는 docs 페이지만을 설정하므로 docs페이지가 canvas보다 먼저 표시되게끔 preview.js를 아래와 같이 설정합니다.

export const parameters = {
  ...
  viewMode: 'docs',
  ...
}

아래는 예시로 작성한 mdx 파일입니다. 이를 참고하여 본인만의 docs를 작성할 수 있도록 합시다. docs addon에 대한 자세한 내용은 하단의 북마크를 참조하시기 바립니다.

import { Meta, Story, Description, ArgsTable, Canvas } from '@storybook/addon-docs';
import Button from '../../component/button/button';

<Meta title="component/Button" component={Button} />

# Button

버튼(Button)은 유저의 액션에 반응하여 동작을 실행할 수 있습니다.

아래와 같이 사용합니다.

~~~
import { Button } from '@seolim/react-ui';

const Component = () => (
  <Button>Button</Button>
);
~~~

버튼은 3가지 테마(`color`)를 제공합니다.

<Canvas>
  <Story name="normal"
    parameters={{
      layout: 'centered'
    }}>
    <Button color="normal">normal</Button>
  </Story>
  <Story name="alert"
    parameters={{
      layout: 'centered'
    }}>
    <Button color="alert">alert</Button>
  </Story>
  <Story name="semantic"
    parameters={{
      layout: 'centered'
    }}>
    <Button color="semantic">semantic</Button>
  </Story>
</Canvas>

[storybook docs-addon](https://storybook.js.org/docs/react/writing-docs/introduction)

## 마무리

자신만의 라이브러리, 디자인 시스템의 개발은 디자인적 통일성을 확보하고 개발 패턴을 가지게 합니다. 또한 개발 사고적으로컴포넌트의 다양성, 재사용성을 확보하기 위해 무엇을 고민해야하고 어떤 패턴을 가져야하는지 고민하게끔 도와줍니다.

[@seolim/react-ui](https://deploy-storybook--6333d80e63299bb883b10717.chromatic.com/)