Storybook + twin.macro 설정을 통해 배운점

시작하며

최근에 nextjs(v13)+typescript+twin.macro+storybook+테스팅라이브러리 환경의 프로젝트를 시작하였다. 이전에는 storybook을 제외하였지만 이번에는 TDD + CDD 기반을 다지며 프로젝트를 진행하고싶었기에 storybook을 추가로 도입한 것이다.

여기서 트러블슈팅이 생기게 되었는데 바로 storybook + twin.macro 호환과 관련된 문제였다. 공식문서와 영상들을 참조하였지만 내가 원하는 마땅한 결과물을 얻기가 힘들었고, 결국 오랜시간동안 여러 코드들을 테스트하였다.

최근에 nextjs에서 SWC를 사용하며 twin.macro 설정에만 babel을 적용하는 방법에 대해 공부했었다. 본질적으로 storybook의 설정파일에서 문제를 해결해야겠다는 방식으로 접근하게 되었고, storybook 설정 파일(.storybook/main.ts)에서 babel을 적용하는 방법을 찾아 nextjs에 적용했던 방법을 그대로 테스팅 해보았다.

그 결과 storybook에 twin.macro가 적용되어 문제없이 동작하는 결과를 얻을 수 있었고, 이 결과에 대해 찾아낸 방법을 기록하려고 글을 남기게 되었다.

기존의 nextjs(v13)+typescript+twin.macro 환경에서 storybook 환경 구성에 대해서만 기록했으며 전체코드에는 컴포넌트 코드들도 추가하였다.

storybook + twin.macro 환경구성

install

npx sb init --builder webpack5
npm i -D @storybook/cli@next @emotion/babel-plugin-jsx-pragmatic @babel/plugin-transform-react-jsx

.storybook/main.ts

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

const path = require('path');

const config: StorybookConfig = {
  ...
  // babel 설정 커스터마이징
  babel: async (config) => ({
    ...config,
    presets: [['next/babel']],
    plugins: [
      'babel-plugin-macros',
      [
        '@emotion/babel-plugin-jsx-pragmatic',
        {
          export: 'jsx',
          import: '__cssprop',
          module: '@emotion/react',
        },
      ],
      [
        '@babel/plugin-transform-react-jsx',
        {
          pragma: '__cssprop',
        },
        'emotion-css-prop',
      ],
    ],
  }),
};

export default config;