주의사항
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/[email protected]/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>
));