Storybook: 컴포넌트 문서화

pnpm dlx storybook@latest init

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

const meta = {
  title: 'UI/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger', 'ghost'],
    },
    size: {
      control: 'radio',
      options: ['sm', 'md', 'lg'],
    },
    onClick: { action: 'clicked' },
  },
} satisfies Meta<typeof Button>;

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

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: '클릭',
  },
};

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: '취소',
  },
};

export const Danger: Story = {
  args: {
    variant: 'danger',
    children: '삭제',
  },
};

export const AllSizes: Story = {
  render: (args) => (
    <div style={{ display: 'flex', gap: '1rem' }}>
      <Button {...args} size="sm">Small</Button>
      <Button {...args} size="md">Medium</Button>
      <Button {...args} size="lg">Large</Button>
    </div>
  ),
};

export const Disabled: Story = {
  args: {
    variant: 'primary',
    children: '비활성',
    disabled: true,
  },
};

// SignupForm.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { userEvent, within, expect } from '@storybook/test';
import { SignupForm } from './SignupForm';

const meta = {
  title: 'Forms/SignupForm',
  component: SignupForm,
} satisfies Meta<typeof SignupForm>;

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

export const Default: Story = {};

// 자동 인터랙션 테스트 + 시각화
export const FilledIn: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    await userEvent.type(
      canvas.getByLabelText(/이메일/i),
      'alice@example.com'
    );
    await userEvent.type(
      canvas.getByLabelText(/비밀번호/i),
      'Pass1234'
    );

    expect(canvas.getByRole('button', { name: /가입/i })).toBeEnabled();
  },
};

export const ValidationError: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.type(canvas.getByLabelText(/이메일/i), 'invalid');
    await userEvent.tab();
    expect(await canvas.findByText(/올바른 이메일/i)).toBeInTheDocument();
  },
};

// stories/DesignSystem.stories.tsx
const meta = {
  title: 'Design System / Overview',
} satisfies Meta;
export default meta;

export const Colors = () => (
  <div>
    <h2>Colors</h2>
    {Object.entries({
      primary: '#6366f1',
      secondary: '#8b5cf6',
      success: '#10b981',
      warning: '#f59e0b',
      danger: '#ef4444',
    }).map(([name, color]) => (
      <div key={name} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 50, height: 50, background: color }} />
        <span>{name}: {color}</span>
      </div>
    ))}
  </div>
);

export const Typography = () => (
  <div>
    <h1>Heading 1 — 2.5rem</h1>
    <h2>Heading 2 — 2rem</h2>
    <h3>Heading 3 — 1.5rem</h3>
    <p>Body — 1rem</p>
    <small>Small — 0.875rem</small>
  </div>
);

# 정적 빌드
pnpm build-storybook

# Chromatic (자동 배포 + 시각 회귀)
pnpm dlx chromatic --project-token=<token>

# 또는 Vercel/Netlify에 storybook-static/ 배포