StoryBook 설치하기

사전에 생성한 리액트 프로젝트에 storybook 패키지를 다운받는다.

vite로 빌드된 프로젝트에 storybook을 다운받았다.

다음 스크립트를 터미널에 입력한다.

npx storybook init --builder vite 

이 명령어는 vite에 최적화된 Storybook 설정을 프로젝트에 추가함

기본적인 설정 파일과 예제 스토리도 함께 생성됨

StoryBook 실행하기

npm run storybook

다음 스크립트를 통해 storybook을 실행할 수 있다.

기본적으로 http://localhost:6006 에서 열림

Storybook 간단습

Storybook에 간단한 컴포넌트 추가하기

프로젝트 src 폴더 아래 Button.tsx와 Button.stories.tsx 를 추가한다.

Button.tsx

type ButtonProps = {
  label: string;
  onClick: () => void;
  primary?: boolean;
};

const Button = ({ label, onClick, primary = false }: ButtonProps) => {
  return (
    <button
      onClick={onClick}
      style={{
        backgroundColor: primary ? "blue" : "gray",
        color: "white",
        padding: "10px 20px",
        border: "none",
        borderRadius: "4px",
      }}
    >
      {label}
    </button>
  );
};

export default Button;

Button.stories.tsx