Next.js + 스토리북 활용하기

스토리북이란 ?

UI 컴포넌트와 페이지를 독립적으로 생성하여, 직접 접근하기 어려운 state나 엣지 케이스를 애플리케이션 전체를 살피지 않고도 쉽게 개발하고 공유하도록 해주는 도구

시작하기

npx storybook@latest init

수정한 storybook 코드 업데이트하기

npx storybook@latest upgrade

framework가 안깔려져있으면

npm install --save-dev @storybook/nextjs

 

여기까지해서 폴더 구조를 보면 .storybook이라는 폴더가 생긴다.

 

import type { StorybookConfig } from "@storybook/nextjs";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],

  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
    "@storybook/addon-mdx-gfm"
  ],

  framework: {
    name: "@storybook/nextjs",
    options: {},
  },

  staticDirs: ["..\\public"],

  docs: {},

  typescript: {
    reactDocgen: "react-docgen-typescript"
  }
};
export default config;

 

공식문서에는 이렇게 하라고 했는데, 위의 명령어를 다 하고나니까 이미 다 완료되어있었음.

 

.storybook/main.ts

import { StorybookConfig } from '@storybook/nextjs';
 
const config: StorybookConfig = {
  // ...
  // framework: '@storybook/react-webpack5', 👈 Remove this
  framework: '@storybook/nextjs', // 👈 Add this
};
 
export default config;

import { StorybookConfig } from '@storybook/nextjs';
 
const config: StorybookConfig = {
  // ...
  addons: [
    // ...
    // 👇 These can both be removed
    // 'storybook-addon-next',
    // 'storybook-addon-next-router',
  ],
};
 
export default config;

storybook 실행하기

npm run storybook

 

하면 이렇게 나올 것이다.

 

stories 여기를 잘 살펴야하는데 이 폴더가 우리가 사용할 storybook이다.

 

여기서 .stories.ts 파일 부분

예시를 들어 

const meta: Meta<typeof Button> = {
  title: "Components/Button",
  component: Button,
  argTypes: {
    intent: {
      control: { type: "select" },
      options: ["primary", "secondary", "danger", "default"],
    },
    size: {
      control: { type: "select" },
      options: ["sm", "md", "lg"],
    },
  },
};

meta : 스토리의 메타 정보를 정의

title : "Components/Button" : 현재 스토리의 제목을 정의한다. 이는 Storybook에서 스토리의 위치 및 구조를 결정하는데 사용된다. / 로 스토리 간 계층 구조를 설정할 수 있다.

component: Button : 현재 스토리에서 사용되는 컴포넌트를 지정한다.

argTypes: { ... } : 컴포넌트의 인자(Props)를 직접 조작할 수 있도록 설정할 수 있다.

export const Primary = { ... };

export const Primary: Story = {
  args: {
    children: "Primary Button",
    intent: "primary",
    size: "md",
  },
};

 

Primary 라는 스토리를 정읳나다

args :{ ... } : Primary 스토리의 기본 인자를 정의한다. 즉, Button 컴포넌트에 전달되는 Props값이다. 

 

argTypes Control Types

1. Boolean : 사용자에게 체크박스를 제공하며, true/false 값을 토글 할 수 있게 한다.

예) { control : { type : "boolean" } }

 

2. Text : 문자열을 입력할 수 있는 텍스트 필드를 제공한다.

예) { control : { type : "text" } }

 

3. Number : 숫자를 입력 할 수 있는 필드를 제공한다. 최솟값,최댓값,스텝(증감 단위)를 옵션으로 설정할 수 있다.

예) { control: { type: 'number', min: 0, max: 100, step: 5 } }

 

4.Color : 색상 선택기를 제공한다. 사용자가 컴포넌트의 색상을 쉽게 변경 할 수 있게 해준다.

예) { control: { type: 'color' } }

 

5. Object : 객체를 JSON 형태로 입력 할 수 있는 텍스트 영역을 제공한다. 복잡한 객체 구조를 props로 전달할 때 유용한다.

예) { control: { type: 'object' } }

 

6. Select : 사용자가 목록에서 여러 옵션 중 하나를 선택할 수 있게 하는 드롭다운 메뉴를 제공한다.

예) { control: { type: 'select', options: ['Option 1', 'Option 2'] } }

 

7. Radio : 여러 옵션 중 하나를 선택할 수  있는 라디오 버튼을 제공한다. select와 유사하지만 UI가 다르다.

예) { control: { type: 'radio', options: ['Option 1', 'Option 2'] } }

 

8. InlineRadio : 라디오 버튼을 인라인(수평)으로 표시한다. 선택옵션을 옆으로 나열한다.

예) { control: { type: 'inline-radio', options: ['Option 1', 'Option 2'] } }

 

9. Check : 사용자가 여러 옵션을 선택할 수 있는 체크박스 그룹을 제공한다.

예) { control: { type: 'check', options: ['Option 1', 'Option 2'] } }

 

10. InlineCheck : 체크박스를 인라인(수평)으로 표시한다. 여러 옵션을 옆으로 나열한다.

예) { control: { type: 'inline-check', options: ['Option 1', 'Option 2'] } }

 

11. Range : 슬라이더를 통해 숫자 값을 선택할 수 있는 컨트롤을 제공한다. 최솟값, 최댓값,스텝을 설정할 수 있다.

예) { control: { type: 'range', min: 0, max: 100, step: 5 } }

 

12. Date : 날짜를 선택할 수 있는 달력 UI를 제공한다.

예) { control: { type: 'date' } }

 

13. File : 파일을 업로드할 수 있는 입력 필드를 제공한다. 허용하는 파일 타입을 설정할 수 있다.

예) { control: { type: 'file', accept: '.png,.jpg' } }

mdx 파일

storybook 세팅을 할 때 이런 질문들을 받을 것이다.

yes를 하다보면 mdx파일이 생기는데, MDX는 Markdown 기반의 문서를 확장한 것으로, React 컴포넌트를 포함할 수 있는 마크다운 문서 형식이다.

MDX파일은 Javascript와 JSX코드를 포함하여 더 동적이고 인터렉티브 한 콘텐츠를 작성할 수 있게 해준다. 주로 문서, 블로그 포스트, 프로젝트의 사용설명서 등을 작성할 때 사용된다. 스토리북 환경은 자체적으로 실행되기 때문에 특정 라이브러리를 사용한 컴포넌트를 스토리로 만드려할 때 오류가 발생할 수 있다. 그럴 때 다른 문서화 프레임워크를 사용하지 않고 mdx 형식을 이용해 스토리북 환경 내에서 문서를 확인할 수 있도록 한다.

예시)

출처)

스토리북 공식문서 : https://storybook.js.org/docs

타 블로그 참고 : https://velog.io/@pyotato/NextjsStorybook-%EC%A0%81%EC%9A%A9%EA%B8%B0, https://lasbe.tistory.com/196