Storybook으로 디자인 시스템 테스팅하기

// 1. Meta — 컴포넌트 등록 + 컨트롤 설정
const meta: Meta<typeof Paper> = {
  title: "Design System/Paper", // 좌측 사이드바 경로
  component: Paper, // 대상 컴포넌트
  argTypes: {
    // Controls 패널에서 조작할 props
    variant: {
      control: "select",
      options: ["default", "outlined", "elevated"],
    },
    padding: { control: "select", options: ["none", "sm", "md", "lg", "xl"] },
  },
};
export default meta;

// 2. Story — 컴포넌트의 특정 상태를 정의
export const Default: Story = {
  args: { children: <p>내용</p> },
};

// 3. 복합 스토리 — render 함수로 여러 컴포넌트 조합
export const AllSizes: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      {["sm", "md", "lg"].map((size) => (
        <Paper key={size} size={size}>
          ...
        </Paper>
      ))}
    </div>
  ),
};

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(ts|tsx)"],
  framework: "@storybook/react-vite",
  viteFinal: async (config) => {
    const { default: tailwindcss } = await import("@tailwindcss/vite");
    config.plugins = [...(config.plugins || []), tailwindcss()];
    return config;
  },
};