React 프로젝트에 Storybook 설정하기

스토리북이란 무엇인가요?

설치

# For a Vite + React project:
npx storybook@latest init

# This creates:
# .storybook/main.ts
# .storybook/preview.ts
# src/stories/ (example stories)

스토리북 시작하기

npm run storybook
# or
npx storybook dev -p 6006

.storybook/main.ts 구성

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
};

export default config;

.storybook/preview.ts 구성

import type { Preview } from '@storybook/react';
import '../src/index.css'; // global styles

const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'light',
      values: [{ name: 'light', value: '#fff' }, { name: 'dark', value: '#333' }],
    },
  },
  decorators: [
    (Story) => (
      <ThemeProvider theme={defaultTheme}>
        <Story />
      </ThemeProvider>
    ),
  ],
};

export default preview;

컨텍스트용 데코레이터 추가하기

decorators: [
  (Story) => (
    <MemoryRouter>
      <QueryClientProvider client={new QueryClient()}>
        <Story />
      </QueryClientProvider>
    </MemoryRouter>
  ),
],

스토리북 사용자 인터페이스 탐색하기

정적 스토리북 만들기

npm run build-storybook
# Output in storybook-static/

디자인 시스템 문서용 스토리북

핫 모듈 교체

TypeScript 지원

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
};
export default meta;

type Story = StoryObj<typeof Button>;
export const Primary: Story = { args: { label: 'Click me' } };

빠른 확인

요약