[storybook] 리액트 프로젝트에서 스토리북 사용하기

프로젝트 환경

- react: 18.2.0 (vite 5.0.8.)

- SCSS

- storybook: 8.0.2.

 

참고

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

Storybook Tutorials

 

 

스토리북?

프로젝트의 컴포넌트들을 문서화하여 협업을 할 때 컴포넌트가 잘 만들어졌는지,

구성이 어떠한지 한눈에 알아볼 수 있게 도움을 주는 라이브러리 (UI 테스트)

 

스토리북 사용 방법

// 스토리북 설치
npx storybook@latest init

// 스토리북 실행
npm run storybook

 

실행하면 아래 사진처럼 작성한 컴포넌트의 스토리가 나타난다.

 

 

 

스토리북을 설치하면 .storybook 폴더와 stories 폴더가 생성된다.

.storybook 폴더에는 위 사진처럼 main.ts, preview.ts 파일이 있고

stories 폴더에는 예시 스토리 파일들이 저장되어 있다.

설치된 예시처럼 스토리 파일을 별도로 stories 폴더에 한번에 저장을 해두려다가

해당하는 컴포넌트 폴더 하위에 저장하는 것이 관리가 편할 것 같아서 아래 사진처럼 해두었다.

 

 

main.ts

메인 파일은 스토리북 설정파일이다.

메인 파일은 크게 변경한 부분 없이 기본설정 그대로 사용하였다.

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'],
  core: {
    builder: '@storybook/builder-vite',
  },

  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
}
export default config

 

preview.ts

프리뷰 파일은 스토리가 그려질 화면에 관한 파일이다.

스토리북 화면에서 컴포넌트들이 중앙정렬되었으면 좋겠어서

layout: 'centered'를 추가해주었다.

import type { Preview } from '@storybook/react'

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

export default preview

 

 

스토리 작성

import { Meta, StoryObj } from '@storybook/react'
import LinkButton from './LinkButton'
import { BrowserRouter } from 'react-router-dom'

const meta = {
  title: 'Components/common/LinkButton',
  component: LinkButton,
  parameters: {
    componentSubtitle: '링크 버튼 컴포넌트는 페이지 이동 시 사용하는 버튼입니다.',
    docs: {
      description: {
        component: `<li>link: 이동할 경로를 입력합니다.</li><li>label: 버튼 텍스트를 입력합니다.</li><li>primary: 버튼 스타일 값으로 <span class='css-o1d7ko css-in3yi3'>'true' | 'false'</span> 중 하나를 선택할 수 있습니다.</li>
        `,
      },
    },
  },
  decorators: (story) => (
    <BrowserRouter>
      <div style={{ width: '600px' }}>{story()}</div>
    </BrowserRouter>
  ),
  tags: ['autodocs'],
} satisfies Meta<typeof LinkButton>

export default meta

type Story = StoryObj<typeof meta>

export const Primary: Story = {
  args: {
    link: '/mumukji',
    label: '페이지 이동 버튼',
    primary: true,
  },
}

export const Secondary: Story = {
  args: {
    link: '/mumukji',
    label: '페이지 이동 버튼',
    primary: false,
  },
}

 

 

title에 입력한 내용으로 스토리북의 사이드바 메뉴가 구성된다.

 

tags: ['autodocs']를 추가해야 자동으로 해당 컴포넌트의 docs를 만들어준다.

parameters 객체의 값들은 스토리북 docs에 설명으로 추가된다.

 

 

decorators는 스토리 컴포넌트를 감싸는 부모컴포넌트를 추가할 수 있다.

LinkButton 컴포넌트는 Link태그로 작성하여서 스토리북에 단독으로 보여지게 되면

BrowserRouter를 입력하라는 오류가 계속해서 나타나는데

데코레이터 기능 덕분에 해당 오류를 해결했다.

 

 

 

 

Primary, Secondary 객체는 스토리북에서 보여지는 구성요소이다.

args에 입력한 값이 기본값으로 보여지고 controls 탭에서 테스트해 볼 수 있다.

 

 

 

별다른 설정없이 스토리 파일만 입력하면

사이트 형태로 가독성 좋게 컴포넌트를 확인할 수 있다는 점이 좋았고,

스토리북이 피그마 파일에도 연동이 가능하다고 해서 디자이너와 소통하기에도 좋을 것 같다.