storybook에 emotion globalStyle 설정

이슈

storybook에 globalStyle을 적용하는 도중 아래와 같은 에러가 발생했다

Module parse failed: Unexpected token (16:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

해결

.storybook/preview.cjs 파일의 확장자를 jsx로 변경

• preview.cjs -> preview.jsx

storybook에서 globalStyle 설정

• .storybook/preview.jsx 에서 아래와 같은 코드 추가

import { Global } from "@emotion/react";
import globalStyle from "../src/styles/globalStyle"; // globalStyle.ts

export const decorators = [
  (Story) => (
    <>
      <Global styles={globalStyle} />
      <Story />
    </>
  ),
];

참고

• https://voltnuna.tistory.com/273
• https://github.com/storybookjs/storybook/issues/18641