1. rem 단위만 사용하기

10px === 1rem

ex) 112px → 11.2rem

2. icon(svg) 추가 & 사용방법

  1. src 폴더 > assets 폴더 > svg 폴더 > svg 파일 추가

Untitled

  1. src 폴더 > icons 폴더 > index.ts 에 다음과 같이 추가
import IcUp from './ic_up.svg?react';
import IcTime from './ic_time.svg?react';

export {
  IcUp,
  IcTime,
...};
  1. 컴포넌트에서 사용하는 법
import { IcUp, IcTime } from '../../assets/icons';

<IcUp />
<IcTime />

3. asset 네이밍 규칙

아마 피그마 보면 디자인 선생님들이 아이콘은 ic_~~~ 형식으로 컴포넌트 이름을 정해줬을 것!! 아이콘은 그 형식에 맞춰 ic_~.svg로 저장하고, 에셋 import할때는 이걸 PascalCase로 바꿔 Ic~로 import

(ex) IcArrowLeft)