[next js] storybook

보알라·2024년 2월 1일

next js storybook

next 제대로 시작해보자 고

목록 보기

2/5

storybook

컴포넌트 단위의 ui개발 환경 지원 도구
사내 ui 라이브러리의 문서화, 디자인 시스템 개발 등 다양하게 사용 가능

storybook 설치

npm install --save-dev sb

storybook 설정

main.ts: 전반적인 스토리북 설정
.preview.ts: 미리보기 화면 설정

.storybook 폴더의 main.ts 파일에서 stories에서 Story로 인식할수 있는 파일들의 경로 설정
addons 에서 제공되는 addon들을 사용하면 다양한 기능 사용 가능

이를 통해 컴포넌트들을 원하는 폴더 구조로 생성 가능

stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],

아래와 같이 설정하면 src 폴더 안에 있는 stories 파일들을 인식

"...src/**/*/*.stories.@(js|jsx|mjs|ts|tsx)"

컴포넌트 생성

Button.tsx 파일 생성하여 커스텀 컴포넌트 작성

// Button props type
interface ButtonProps {
  backgroundColor?: string;
  ...types
}

// button component
export const Button = ({
  backgroundColor,
  ...props
}: ButtonProps) => {
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button
      type="button"
      {...props}
    >
      {label}
      <style jsx>{`
        button {
          background-color: ${backgroundColor};
        }
      `}</style>
    </button>
  );
};

story 추가

생성한 컴포넌트를 Story로 작성
.stories.ts 파일 안에 컴포넌트 예시들를 함수 형태로 작성

// Button.stories.ts
const meta = {
  title: 'Example/Button', // storybook에서의 컴포넌트 경로
  component: Button, // 사용 컴포넌트
  parameters: { // story 에서 설정할 추가 옵션
    layout: 'centered',
  },
  // 자동 문서화 
  tags: ['autodocs'],
} satisfies Meta<typeof Button>;

export default meta;

// 스토리 타입
type Story = StoryObj<typeof meta>;

// Primary 의 이름으로 컴포넌트 story 생성
export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

// Secondary 의 이름으로 컴포넌트 story 생성
export const Secondary: Story = {
  args: {
    label: 'Button',
  },
};