chakra-ui로 storybook 적용

프로젝트를 하면서 chakra-ui를 사용하며 storybook을 사용함.
UI 스타일이 적용 안되는것을 확인... 찾아보니 addon이 따로 필요하다더라.

chakra-ui로 스토리북 적용

storybook >6.4 일 경우에 필요하다. 아래와 같은 라이브러리가 필요하다.

npm i -D @chakra-ui/storybook-addon

설치 후 .storybook/main.ts로 가서 config 설정에 addon을 추가한다.

module.exports = {
	addons: ['@chakra-ui/storybook-addon'],
}

global parameters를 사용하려면(ChakraProvider와 같은 역할) .storybook/preview.ts로 가서 다음과 같이 추가해준다.

import type { Preview } from "@storybook/react";
import { theme } from "../src/pages/_app";

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

export default preview;

그런 뒤 storybook을 실행하면 스타일이 잘 적용되는것을 알 수 있다!