[240213] 스토리북 찍먹해보기

• <2시간으로 끝내는 프론트엔드 테스트 기본기> 를 듣다가 딴길로 새서…
• 스토리북 공식문서(7.6) 를 참고했습니다.
• 예시들은 모두 next.js + typescript + emotion 환경에서 작성했습니다.

 

스토리북이란?

공식문서

• UI 컴포넌트를 독립적으로 개발하고 문서화할 수 있는 환경을 제공하는 도구
• UI 컴포넌트에 story를 부여해서 렌더링을 테스트하는 것
• 여기서 story는 UI 컴포넌트의 상태

디자인시스템

• 스토리북은 디자인 시스템을 구축하고 유지보수 하는 데 있어 중요한 역할 → 디자인 토큰, 컴포넌트를 문서화
• 코드를 일일이 수정해보지 않아도 props를 테스트 할 수 있다.

 

---

스토리북 설치하기

# npm
npx storybook@latest init

# yarn
yarn berry storybook@latest init

 

---

Storybook with styled-component & emotion

강의를 듣다가 띠용한 지점은, styled-component를 사용한다고 언급하셨는데 기존 사용하던 CSS-in-JS 부분을 수동으로 스토리북에 css 로 옮기는 부분이었다. 스토리북에서도 styled-component 를 그대로 사용하면 좋을 것 같아 찾아보았다. 공식문서를 보니까 emotion도 동일한 방법으로 적용 가능해서 직접 적용해봤다!

1. 설치 및 애드온 추가

yarn add @storybook/addon-themes

// main.ts

const config: StorybookConfig = {
	stories: /* ... */,
	addons: [
    // Other Storybook addons
    '@storybook/addon-themes',
  ],
}

2. 글로벌스타일

// preview.ts

import type { Preview } from '@storybook/react';
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import GlobalStyles from '../src/styles/GlobalStyles.tsx';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export const decorators = [
  withThemeFromJSXProvider({
    GlobalStyles,
  }),
];

export default preview;

3. 테마

// preview.ts

import type { Preview } from '@storybook/react';
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import GlobalStyles from '../src/styles/GlobalStyles.tsx';

import { ThemeProvider } from '@emotion/react';
import { theme } from '../src/styles/theme/theme.tsx';

export const decorators = [
  withThemeFromJSXProvider({
    themes: {
      dark: theme,
    },
    defaultTheme: 'dark',
    Provider: ThemeProvider,
    GlobalStyles,
  }),
];

 

---

스토리북 기본기능

스토리북에서 제공하는 파일들이 무엇을 의미하는지 알아보자.

main.ts

stories를 위한 config 설정들

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

const config: StorybookConfig = {
  // Required(필수)
  // 1. framework: 어떤 프레임워크에서 사용하고 있는가
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  // 2. stories: 어떤 경로의 파일을 스토리로 인식할 것인가
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  // Optional(추가)
  // 1. addons: 스토리북의 기능을 확장할 수 있는 애드온
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-themes',
  ],
  // 2. docs: 스토리북 문서 페이지에 대한 설정
  docs: {
    autodocs: 'tag',
  },
  // 3. staticDirs: 스토리북에서 로드할 정적 파일 경로 설정
  staticDirs: ['../public'],
};

export default config;

더 많은 프로퍼티는 아래에서 확인 가능하다.

Main configuration • Storybook docs

preview.ts

모든 story 들에 글로벌하게 적용될 부분.

• 글로벌스타일
• theme
• argType
  • 이벤트 핸들러 함수들을 나타내는 정규식을 적어주면, Action 탭에서 이벤트가 발생하는 것을 감지할 수 있음

 

---

스토리(컴포넌트의 상태) 만들기

스토리를 작성할 때 두가지를 고려한다!

• 컴포넌트 메타 - 컴포넌트와 해당 스토리를 설명하고 구성
• 스토리 - 해당 컴포넌트의 스토리 중 직접 조작하지 않아도 보여줄 스토리들

meta

// Button/Button.stories.ts
// 1. meta

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta = {
  title: 'Component/Button', // 1-1: title
  component: Button, // 1-2: component
  parameters: {
    layout: 'centered',
  },
  // 1-3: tags
  tags: ['autodocs'],
} satisfies Meta<typeof Button>;

export default meta;

title

스토리북에 띄울 계층구조를 적는다.

component

스토리북에 띄울 컴포넌트를 import해서 넣어준다.

tags

별도의 설정 없이 해당 파일 안의 story들을 바탕으로 스토리북이 docs를 자동 생성해 준다.

story

// Button/Button.stories.ts
// 2. story

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

type Story = StoryObj<typeof meta>;

export const Dark: Story = {
  // 2-1: args
  args: {
    variant: 'dark',
    text: 'Dark Button',
  },
};

export const Yellow: Story = {
  args: {
    variant: 'yellow',
    text: 'Yellow Button',
  },
};

args

해당 스토리에 적용할 props 셋팅을 적는다.

 

---

스토리북 배포

1. 빌드

# npm
npm run build-storybook

# yarn
yarn build-storybook

2. 로컬에서 미리보기

# http-server 설치 후

# npm
npx http-server [./path/to/build]

# yarn
yarn http-server [./path/to/build]

 

---

스토리북을 활용한 웹 접근성 테스트

1. 설치

# npm
npm install @storybook/addon-a11y --save-dev

# yarn
yarn add --dev @storybook/addon-a11y

2. 애드온 추가

// main.ts

const config: StorybookConfig = {
	stories: /* ... */,
	addons: [
    // Other Storybook addons
    '@storybook/addon-a11y', // 👈 The a11y addon goes here
  ],
}

3. Accessibility 탭에서 확인가능