주의사항

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

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

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

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

  1. .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/[email protected]/reset.min.css>"
     />
     

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

  3. .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>
     ));