Storybook에서 styled-components의 ThemeProvider 사용하기

❗️ 문제

yarn start를 했을 때는 theme이 적용된 컴포넌트가 잘 보이는데 storybook에서는 오류가 나면서 프리뷰가 나오지 않는 문제가 있었다.

${({ theme }) => css`
  color: ${theme.COLOR.TEXT.WHITE};

처음엔 theme을 잘못 설정한 줄 알고 style 쪽 코드를 계속 수정했지만 해결되지 않았다.

 

🔎 원인

생각해 보니 dev server에서는 잘 나오기 때문에 style 쪽 문제는 아니었다.

App.tsx에서는 ThemeProvider가 사용되고 있어서 dev server에서는 문제가 없었지만, storybook에 ThemeProvider를 따로 적용해 주지 않아서 발생한 오류였다.

컴포넌트만 공유하고 번들링부터 아예 따로 동작하기 때문에 필요한 설정이 있으면 .storybook 폴더에 있는 설정 파일에 따로 적용해주어야 한다.

 

🎉 해결

Storybook에서 styled-components의 ThemeProvider를 사용하기 위해서 preview.js에 decorators를 설정해 주었다.

import { ThemeProvider } from "styled-components";

import GlobalStyle from "@src/@styles/GlobalStyle";
import { LIGHT_MODE_THEME } from "@src/@styles/theme";

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

export const decorators = [
  (Story) => (
    <ThemeProvider theme={LIGHT_MODE_THEME}>
      <GlobalStyle />
      <Story />
    </ThemeProvider>
  ),
];

decorators에서는 Story 컴포넌트를 매개변수로 받을 수 있다.

GlobalStyle과 ThemeProvider를 적용해서 리턴해줬다. (아직 dark mode는 설정하지 않았다.)

 

다음엔 storybook과 dev server가 따로 동작한다는 걸 이해하고 각각 필요한 설정을 따로 적용시켜 줘야겠다.