Storybook 실전 가이드: Claude Code 활용 가이드

Storybook개발をClaude Code로 효율화하기

StorybookはUI컴포넌트を独立して개발・테스트・문서化できるツールです。Claude Code를 활용하면 ストーリーの생성からインタラクション테스트まで効率よく進められます。

ストーリーの생성

Button컴포넌트のストーリー

> Button컴포넌트の全バリエーションをStorybookに등록して。
> サイズ・컬러・状態の組み合わせを網羅して。

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

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'outline', 'ghost'],
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
    },
    disabled: { control: 'boolean' },
    loading: { control: 'boolean' },
  },
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'ボタン',
  },
};

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'ボタン',
  },
};

export const AllSizes: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      <Button size="sm">小</Button>
      <Button size="md">中</Button>
      <Button size="lg">大</Button>
    </div>
  ),
};

export const Loading: Story = {
  args: {
    loading: true,
    children: '送信中...',
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
    children: '無効',
  },
};

インタラクション테스트

사용자操作の테스트

> 폼컴포넌트のインタラクション테스트를 추가해줘。
> 입력→유효성 검사→전송のフローを검증。

import { within, userEvent, expect } from '@storybook/test';

export const FormSubmission: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    // 폼입력
    await userEvent.type(
      canvas.getByLabelText('名前'),
      'テストユーザー'
    );
    await userEvent.type(
      canvas.getByLabelText('メールアドレス'),
      '[email protected]'
    );

    // 전송
    await userEvent.click(canvas.getByRole('button', { name: '送信' }));

    // 성공メッセージの확인
    await expect(canvas.getByText('送信が完了しました')).toBeInTheDocument();
  },
};

アクセシビリティチェック

Storybookの @storybook/addon-a11y を활용すると、각컴포넌트のアクセシビリティ問題を自動検出할 수 있습니다。Claude Code에「a11yアドオンを설정して」と依頼する만으로도입완료です。

문서自動생성

Storybookの autodocs 機能で、컴포넌트のProps情報や샘플コードを含む문서を自動생성할 수 있습니다。JSDoc댓글を적절하게書くと、より상세な문서が생성されます。

interface ButtonProps {
  /** ボタンのバリエーション */
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  /** ボタンのサイズ */
  size?: 'sm' | 'md' | 'lg';
  /** 読み込み中の状態 */
  loading?: boolean;
  /** クリック時のコールバック */
  onClick?: () => void;
}

Chromatic연동

ビジュアルリグレッション테스트にはChromaticが便利です。Claude Code에「Chromaticを도입して、PRごとにビジュアル테스트を実行する설정をして」と依頼すれば、GitHub Actionsとの통합설정も含めて생성してくれます。

정리

Claude Code를 활용하면 Storybookのストーリー생성からインタラクション테스트、문서생성まで効率よく進められます。デザインシステム구축やアクセシビリティ대응도 함께 참고하세요.

Storybook의 상세 정보는Storybook공식 문서를 참고하세요.