스토리북 설정 참고사항

주의사항

emotion의 css를 사용하면 storybook에서 오류가 난다

⇒ style과 css각각 다르게 import해야 함


import style from '@emotion/styled';
import {css} from '@emotion/react'

storybook에서도 app의 설정과 동일하게 setting하기

.storybook/preview-head.html에 style관련 link추가


// preview-head.html

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
/>

.storybook/index.css파일 생성 후 전역 스타일 코드 작성

.storybook/preview.js 에 index.css를 import하고 라우터 관련 코드 추가


//  preview.js

import './index.css';
import React from 'react';
import { addDecorator } from '@storybook/react';
import { MemoryRouter } from 'react-router-dom';

addDecorator(story => (
  <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
));