📚 GlobalStyle 적용하기

📖 사건발생

Storybook 설정중에 variant값을 변경해도 색이 바뀌지 않는 현상이 발생했다.

확인해보니 globalstyle로 설정한 값을 읽지못하는듯했다.

---

📕 해결과정

storybook은 전체적인 설정을 적용하려면 storybook/main.ts 와 storybook/preview.ts에서 설정을 해줘야한다.

📖 방법 1. decorator(해결)

storybook 튜토리얼에 있는대로 .storybook/preview.js 에 decorators 추가해보았지만 에러가 발생하며 안되는 줄 알았다.

하지만 문제를 해결했다.

preview.ts 파일 확장자를 tsx로 바꾸자 정상적으로 작동한다.

이유는 JSX 구문을 사용하고 있기 때문에 파일 확장자를 .tsx로 변경해야 TypeScript가 JSX 구문을 올바르게 인식하고 처리할 수 있다.

import React from "react";

export const decorators = [
   Story => (
     <>
       <GlobalStyle />
       <Story />
     </>
   ),
 ];

📖 방법 2. ThemeProvider(해결X)

갓구글에 검색해서 가장 많이 보이던 ThemeProvider을 추가해서 해결하는 방법은 제대로 동작하지 않았다.

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

📖 방법 3. addon-themes 설치(해결)

storybook의 공식문서에 있는 방법으로 해결하였다.

addon-themes 설치

npx storybook@latest add @storybook/addon-themes

.storybook/preview.ts

import type { Preview } from "@storybook/react";
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { ThemeProvider } from 'styled-components'
import { GlobalStyles } from '../src/style/GlobalStyles';
import { theme } from '../src/style/theme';


const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export const decorators = [
  withThemeFromJSXProvider({
    themes: {
      light: theme,
      dark: theme,
    },
    defaultTheme: "light",
    Provider: ThemeProvider,
    GlobalStyles: GlobalStyles,
  }),
];

export default preview;

theme는 추후에 구현할 예정이라 적당히 style 폴더에 theme를 만들어주고 export만 해주고 비워두었다.

---

📕 결과

1, 3번 방법 둘다 해결이 되었다.

아직 Theme를 도입하지 않았기 때문에 좀 더 코드가 깔끔한 1번 방법으로 적용하였다.

Storybook에서 globalstyle을 읽어 색과 폰트 사이즈가 정상적으로 변경됨을 확인하였다.