react-toastify 를 storybook에 출력 시키기

react-toastify를 사용하시는 경우 storybook에서 출력하는데 곤란함을 겪는 분들이 계실 거 같아 자문자답 올려둡니다!

• package.json

    "react-toastify": "^10.0.4"
    "@types/react": "^18.3.12",
    "@storybook/react": "^8.3.0",

• .storybook/preview.tsx ( ts가 아닌 tsx )

  • 17버전 이상이라 import React from 'react'가 안되서 아래와 같이 @jsxImportSource 추가

   

/** @jsxImportSource react */
import type { Preview } from '@storybook/react';


// react-toastify 관련 import
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Modal.setAppElement('#storybook-root');

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: [
    Story => (
      <>
        <Story />
        <ToastContainer
          position="bottom-right"
          autoClose={3000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
          theme="light"
        />
      </>
    ),
  ],
};

export default preview;

• tsconfig.json

{
  "compilerOptions": {   
     "jsx": "react-jsx",
  }
}