[UI] Chakra와 Storybook 연동하기

안녕하세요 :) 개발자 Sean입니다.

 

 

이번주 새로운 프로젝트를 시작하며 아키텍쳐와 사용할 라이브러리에 대해 고민하고, 
기본 틀을 세팅하는 시간을 가져보았습니다. 

이번에는 ui 라이브러리로 chakra를 이용해 약간의 커스터마이징을 하고,
storybook을 통해 컴포넌트 단위로 테스팅과 유지보수를 하도록 만들려고 합니다. 

회사에서 기존에 만들었던 웹어플의 경우 잦은 디자인 변경과 담당자 교체로 인해
수많은 ui 파일들이 생겨나는 문제가 발생했습니다. 문제는 어떤 ui가 사용되고 있는지 모르기 때문에 좀비처럼 폴더안에 살아있는 문제가 발생했습니다.

이를 해결하기 위해 이번 프로젝트는 처음부터 디자인을 확실히하여 위의 문제가 발생하지 않도록 하려 합니다. 

# 1. "@chakra-ui/storybook-addon" 설치

yarn add @chakra-ui/storybook-addon

위 코드를 통해 우선 에드온을 다운 받습니다. 

 

# 2. 에드온 추가

그리고 .storybook/main.ts 파일에 들어가 아래와 같이 addons 배열에 위의 차크라 애드온을 추가해 줍니다. 

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-create-react-app", "@storybook/addon-interactions", "@storybook/addon-mdx-gfm", "@storybook/addon-mdx-gfm", "@chakra-ui/storybook-addon"],
  framework: {
    name: "@storybook/react-webpack5",
    options: {}
  },
  docs: {
    autodocs: true
  },
  staticDirs: ["../public"],
  webpackFinal: async (config: any) => {
    config.resolve.plugins.push(new TsconfigPathsPlugin({}));
    return config;
  },
};
export default config;

하지만 이부분에서 버전차이로 인한 상충이 발생합니다. 따라서 아래 방법으로 웹팩 버전을 맞춰주어야 합니다.

 

# 3. 웹팩 설치

yarn add @storybook/builder-webpack5

위의 웹팩을 설치하고 아래부분에 "core" 설정을 해주면 됩니다. 

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-create-react-app", "@storybook/addon-interactions", "@storybook/addon-mdx-gfm", "@storybook/addon-mdx-gfm", "@chakra-ui/storybook-addon"],
  framework: {
    name: "@storybook/react-webpack5",
    options: {}
  },
  docs: {
    autodocs: true
  },
  staticDirs: ["../public"],
  core: {
    builder: '@storybook/builder-webpack5',
  },
  webpackFinal: async (config: any) => {
    config.resolve.plugins.push(new TsconfigPathsPlugin({}));
    return config;
  },
};
export default config;

이후 yarn storybook을 실행해보면 잘 연동되어 동작하는 것을 확인할 수 있습니다.