스토리북(Storybook) 알아보기

스토리북 (Storybook)

Storybook: Frontend workshop for UI development

 

스토리북이 뭐예요?

스토리북(Storybook)은 컴포넌트를 독립적으로 개발하고 테스트할 수 있게 도와주는 툴

특히 디자인 시스템이나 UI 컴포넌트를 재사용할 일이 많을 때 아주 유용함

 

 

설치

npm create storybook@latest
npm install --save-dev @storybook/nextjs //next버전

 

 

 

 

터미널에 명령어를 입력하고 나면, 기본 스토리 예제를 자동 생성해줄까? 라고 물어보는데

처음이라면 스토리북이 기존 예제 스토리 파일들을 설치해주고, 폴더 구조도 깔끔하게 만들어주기 때문에 

처음 시도해 보는 내용이면 yes를 선택한다!

 

 

 

 

 

 

설치하면, 스토리북 폴더가 생긴다.

스토리북 폴더 안에 main.ts preview.ts 설정 파일도 자동 생성된 것을 확인할 수 있다.

 

 

 

 

src 폴더 안에도 이렇게 기본적인 세팅이 들어가 있는 것을 확인해 볼 수 있다.

 

 

 

stories 폴더 설명

Button.tsx, Header.tsx, Page.tsx	예시용 컴포넌트들
*.stories.ts	위 컴포넌트들에 대한 Storybook 스토리 파일들
*.css	예시 컴포넌트들의 스타일
Configure.mdx	문서형 스토리 (MDX 포맷), 문서 기반 설명 예시
assets/	이미지나 기타 리소스들 (대개 문서에 쓰임)

 

 

 

 

 

실행은 `npm run storybook` 명령어를 실행한다.

포트 6006번에서 스토리북이 열린다고 나와있다.

 

 

 

 

 

`npm run storybook` 명령어를 실행하면, 로컬에서 6006으로 실행할 수 있다고 확인할 수 있다.

 

 

 

 

 

 

6006포트로 들어오면, 이렇게 화면 구성을 볼 수 있다.

왼쪽에 Button, Header, Page의 기본 컴포넌트들이 보이고 있고

중앙에는 설정 가이드 문서가 나와있다.

 

 

폴더 구조 구성

예시로 src/components 폴더 안에 MyButton.tsx 컴포넌트를 만들면, MyButton.stories.tsx 를 같이 만들어준다. 

 

src/
├── components/
│   ├── MyButton.tsx
│   └── MyButton.stories.tsx

 

 

 

왼쪽 사이드바에 스토리북 리스트들이 나와있다.

 

 

 

 

코드로 살펴보기

export default {
  title: "Components/Common/Badge",
  component: Badge,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
  argTypes: {
    title: {
      control: { type: "select" },
      options: Object.keys(BADGE_VARIANTS) as BadgeKey[],
      description: "뱃지 타입을 선택하세요",
    },
  },
} satisfies Meta<typeof Badge>;

 

`title`: 스토리북 파일 경로 설정

`tags` : 스토리북 파일 내의 문서 만들기

`parameters` : `layout` : 스토리북에서 보이는 컴포넌트 정렬 (현재 centered 가운데 정렬)

 

`argTypes` : 문서의 타입 설정

`title` - control : type `select` → 기본 타입은 radio인데, 문서 타입을 select로 바꿔줌

`options` : 옵션 리스트 보여주기

`description` : 문서 description 설명

 

 

 

 

스토리북 예시 화면

 

 

 

 

 

스토리북 예시 코드

import type { StoryObj, Meta } from "@storybook/react-vite";
import Badge from "./Badge";
import { BADGE_VARIANTS } from "./Badge";
import type { BadgeKey } from "./Badge";

export default {
  title: "Components/Common/Badge",
  component: Badge,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
  argTypes: {
    title: {
      control: { type: "select" },
      options: Object.keys(BADGE_VARIANTS) as BadgeKey[],
      description: "뱃지 타입을 선택하세요",
    },
  },
} satisfies Meta<typeof Badge>;

type Story = StoryObj<typeof Badge>;

export const Default: Story = {
  args: {
    title: "BEST",
  },
};

// 각 타입별 스토리
export const Best: Story = {
  args: {
    title: "BEST",
  },
};

export const Urgent: Story = {
  args: {
    title: "URGENT",
  },
};

// 모든 뱃지 타입 보기
export const AllTypes: Story = {
  args: {
    title: "BEST",
  },
  render: () => (
    <div className="flex gap-4 items-center">
      {(Object.keys(BADGE_VARIANTS) as BadgeKey[]).map((key) => (
        <Badge key={key} title={key} />
      ))}
    </div>
  ),
};

 

 

 

 

// 각 타입별 스토리
export const Best: Story = {
  args: {
    title: "BEST",
  },
};

 

`Best`는 스토리북에 보일 이름

`args` : 스토리북에 보일 테스트내용을 넣어준다 (테스트 하고 싶은 내용들을 넣어준다)

 

 

 

 

// 모든 뱃지 타입 보기
export const AllTypes: Story = {
  args: {
    title: "BEST",
  },
  render: () => (
    <div className="flex gap-4 items-center">
      {(Object.keys(BADGE_VARIANTS) as BadgeKey[]).map((key) => (
        <Badge key={key} title={key} />
      ))}
    </div>
  ),
};

 

모든 타입을 보여주려고 할때 `render` 함수를 넣어준다.

`args`는 타입오류가 있기 때문에 기본 필수로 넣어주어야한다.

 

 

 

 

vsCode 확장 포맷터

 

 

 

코드 작성 후, vsCode 에서 Create a Storybook Story를 클릭해주면 해당 컴포넌트에서 같은 경로에 스토리북 파일이 생긴다.

확인하고 저장하면, 파일이 생성된다