모노레포 프론트엔드 스토리북 적용하기

컴포넌트의 상태 별 UI를 관리하기 위해 프로젝트에 스토리북을 적용해보기로 결정했습니다.

 

npx storybook@latest init

프로젝트의 루트 디렉토리에서 스토리북을 설치합니다.

 

위 명령어를 이용하면 루트 디렉토리에 .storybook 폴더와 stories 폴더가 생성됩니다.

프로젝트의 구조입니다. ui 패키지에 존재하는 컴포넌트를 blog, lab 서비스에서 가져다가 사용하는 방식입니다.

따라서 ui 패키지 내에 존재하는 컴포넌트들을 스토리북으로 관리해줘야 합니다.

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

import { join, dirname } from 'path';

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')));
}
const config: StorybookConfig = {
  stories: [
    '../stories/**/*.mdx',
    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
    '../packages/ui/src/*.stories.ts', // 스토리 경로 추가
  ],
  addons: [
    getAbsolutePath('@storybook/addon-onboarding'),
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@chromatic-com/storybook'),
    getAbsolutePath('@storybook/addon-interactions'),
  ],
  framework: {
    name: getAbsolutePath('@storybook/nextjs'),
    options: {},
  },
};
export default config;

루트 디렉토리의 .storybook 폴더 내에 존재하는 main.ts 파일입니다.

config에서 stories에 ui 패키지 내 스토리가 저장될 경로를 추가로 추가해줍니다.

packages/ui/src 폴더 내에는 컴포넌트 파일인 tsx 파일과 스토리 파일인 stories.ts 파일이 공존하고 이를 바탕으로 스토리북을 활용할 수 있게 됩니다.