storybook에 theme/GlobalStyle 적용하기 (styled-component)

🎀 문제 상황

storybook에도 css를 reset해주어야 함.

🎀 해결 방법 1

npx storybook@latest add @storybook/addon-themes

스토리북에서 styled-component 사용할 수 있도록 위 명령어를 통해 라이브러리 설치해 준다.

.storybook/preview.ts

export const decorators = [
  withThemeFromJSXProvider({
    themes: theme, // 따로 파일로 분리했던 theme을 가져온다.
    Provider: ThemeProvider, // themeProvider를 불러온다.
    GlobalStyles: GlobalStyle, // 따로 분리했던 GlobalStyle을 가져온다.
  }),
];

마지막으로 위와 같은 코드를 작성해 주면 적용이 잘 된다~

마지막으로 주의할 점은

절대경로로 불러오면 인식되지 않는다는 점이다. 무조건 상대경로로 해야함.

🎀 해결 방법 2

preview.ts를 preview.tsx로 변경하고 아래 코드와 같이 일반 컴포넌트에 불러오는 것 처럼 작성하면 된다.

import type { Preview } from '@storybook/react';
import { ThemeProvider } from 'styled-components';
import { theme } from '../src/shared/ui/styles/theme/theme';
import GlobalStyle from '../src/shared/ui/styles/GlobalStyle';

import React from 'react';

const preview: Preview = {
  parameters: {
     ...
  },

  decorators: [
    (Story, context) => {
      return (
        <ThemeProvider theme={theme}>
          <GlobalStyle />
          <Story {...context} />
        </ThemeProvider>
      );
    },
  ],
};

export default preview;

여기서 주의할 점은 React를 꼭 import 해와야 한다는 것!!! 또 상대경로로 불러와야 함!!!!