프로젝트 셋업 Boot!

• 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/reset-css@5.0.1/reset.min.css"
/>

 
1. .storybook/index.css파일 생성 후 전역 스타일 코드 작성
2. .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>
));

mui icon 사용법

import React from 'react';
import HomeIcon from '@material-ui/icons/Home'; // 원하는 아이콘을 import한다
import styled from '@emotion/styled';

const StyledHomeIcon = styled(HomeIcon)` 
  color: red;
  size: 16px;
`; //원하는 스타일을 입힌다

const App = () => <StyledHomeIcon />; // 사용한다

export default App;