Storybook 연동하기

Storybook 연동하기

컴포넌트를 쉽게 확인하고 관리할 수 있는 좋은 방법은 Storybook을 사용하는 것입니다.
이번 포스트에서는 Next.js 14와 Emotion을 활용해 Storybook을 연동하는 방법을 알아보겠습니다.

Storybook 설치

먼저, Storybook을 설치합니다. 아래 명령어를 실행하세요.

npx storybook@latest init

설치가 완료되면 여러 개의 프로토타입 코드와 이미지가 생성됩니다.
이 과정이 끝나면, .storybook 폴더를 제외한 모든 파일을 삭제해 주세요.
단, stories 폴더는 남겨둡니다. 이 폴더에 앞으로 컴포넌트의 Story 파일을 작성할 예정입니다.

• 지금까지 코드 확인하기

Emotion 연동

프로젝트에서 Emotion을 사용 중이라면, Storybook에 Emotion의 ThemeProvider를 연동해야 합니다.
이를 위해 아래 명령어를 실행해 필요한 패키지를 설치합니다.

npx storybook@latest add @storybook/addon-themes

이후, preview.ts 파일에 GlobalStyles 컴포넌트가 생성되며, 이에 대한 작업을 진행해야 합니다.

해야 할 작업 목록

preview.ts 파일에서 아래 작업을 진행해야 합니다.

• 파일 확장자를 .ts에서 .tsx로 변경합니다.
• LIGHT 및 DARK theme를 연동합니다.
• GlobalStyles로 글로벌 CSS 스타일을 적용합니다.

React 컴포넌트가 포함된 파일은 .tsx 확장자를 사용하는 것이 권장되므로 확장자 변경 작업이 필요합니다.
theme을 연동하여야 나중에 storybook에서도 편하게 light, dark 모드 테스트가 가능합니다.
storybook도 독립된 실행환경이기 때문에 global css를 설정해주어야 합니다.

preview.tsx의 최종 코드입니다.

import { css, Global, ThemeProvider } from "@emotion/react";
import { withThemeFromJSXProvider } from "@storybook/addon-themes";
import type { Preview } from "@storybook/react";
import React from "react";
import { DARK_THEME, LIGHT_THEME } from "../src/ThemeContext/theme";

const GlobalStyles = () => (
  <Global
    styles={css`
      /* css code */
    `}
  />
);

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i
      }
    }
  },

  decorators: [
    withThemeFromJSXProvider({
      themes: {
        light: LIGHT_THEME,
        dark: DARK_THEME
      },
      defaultTheme: "light",
      Provider: ThemeProvider,
      GlobalStyles
    })
  ]
};

export default preview;

• 지금까지 코드 확인하기

참고자료

• Emotion 설치 및 연동 가이드

링크

• storybook 기본 설정 추가
• storybook에 emotion 연동하기
• 해당 게시글 최종 코드