[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에 입력한 내용으로 스토리북의 사이드바 메뉴가 구성된다.

 

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

 

 

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

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

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

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

 

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

 

 

 

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

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

 

 

 

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

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

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