Storybook 적용 (next.js, typescript)

MyungjuKang (강명주)·2023년 5월 17일

sns 프로젝트에서 공통 컴포넌트 작업을 맡게 되었다. 팀원들에게 내가 구현한 컴포넌트 사용법을 잘 공유할 수 있는 방법을 찾다가 storybook을 적용하게 되었다.

storybook은?

UI 컴포넌트를 분리해서 개발하여 테스트하고 문서화할 수 있는 개발 도구인데 다른 개발자, 디자이너와 협업하고 유지보수를 진행하는 것을 편리하게 한다.
컴포넌트의 상태 변화 및 이벤트 등을 시각적으로 확인할 수 있어 개발자의 작업 효율성을 높여주는 장점이 있다.

1. 라이브러리 설치

yarn add -D sb

2. storybook 초기 셋팅

npx storybook@next init

.storybook 디렉터리 자동 생성
main.ts

import type { StorybookConfig } from '@storybook/nextjs';
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
};
export default config;

preview.ts
💡 globals.scss import 하기

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

import '../src/styles/globals.scss'; 

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

3. Button.stories.tsx 생성

import React from 'react';
import { StoryFn, Meta } from '@storybook/react';
import Button from '../components/common/Button';

export default {
  title: 'stories/Button',
  component: Button,
} as Meta<typeof Button>;

const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;

// 예시
export const Primary = Template.bind({});
Primary.args = {
  variant: 'primary',
  size: 'md',
  isEnglish: true,
  isFull: true,
  color: 'white',
  children: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
};