📚Storybook 사용 예시

storybook 사용법 참고

컴포넌트 제작

src/components/Sample.tsx

interface SampleProps {
  variant: "plain" | "text";
}

export default function Sample({ variant }: SampleProps) {
  if (variant === "plain") {
    return <div className="rounded-circle bg-light-accent-bold h-10 w-10" />;
  }
  return <div className="bg-light-accent-bold">hi</div>;
}

Story 파일 제작

src/stories/Sample.stories.tsx

import Sample from "../components/Sample";

export default {
  component: Sample,
  title: "Sample",
  tags: ["autodocs"],
  excludeStories: /.*Data$/,
};

export const Default = {
  args: {
    variant: "plain",
  },
};

export const Text = {
  args: {
    variant: "text",
  },
};

• component -- 컴포넌트 자체
• title -- 스토리북 사이드바에서 컴포넌트를 그룹화하거나 분류하는 방법
• tags -- 컴포넌트에 대한 문서를 자동으로 생성하기 위한 태그
• excludeStories -- 스토리에 필요하지만 스토리북에서 렌더링되지 않아야 하는 추가 정보
• args -- 컴포넌트가 사용자 정의 이벤트를 모킹하기 위해 기대하는 액션 [args](https://storybook.js.org/docs/essentials/actions#action-args)를 정의

  💡 [Actions](https://storybook.js.org/docs/essentials/actions)는 UI 컴포넌트를 독립적으로 만들 때 상호작용을 확인하는 데 도움을 줍니다. 종종 앱의 컨텍스트에서 사용하는 함수나 상태에 접근할 수 없을 때가 있습니다. 이때 fn()을 사용해 해당 함수들을 임시로 대체하세요.