디자인 공통 결정 사항

폰트

Google Fonts: IBM Plex Sans KR

• h1 - (본문 강조 - 카테고리 헤더 이름) → 28px / Regular 400/ SemiBold 600
• h3 - (모달창 제목) → 20px / Bold 700
• paragraph - (본문, 좌측 카테고리 헤더) → 16px / Regular 400/ SemiBold 600
• small (네비게이션 등 작은 글씨)→ 10px / Regular 400/ SemiBold 600

사용하는 라이브러리

• material tailwind(https://www.material-tailwind.com/) 주로 사용

  Material Tailwind Components (Community)

• material tailwind 없는 것(테이블, date picker)에 대해서 MUI(https://mui.com/)

  MUI 테이블 - https://mui.com/material-ui/react-table/

  MUI date picker(날짜선택) - https://mui.com/x/react-date-pickers/getting-started/

아이콘

react icons(https://react-icons.github.io/react-icons/)에서 나름 sharp한 느낌의 아이콘인

• VS Code Icons 얘를 우선으로 씁시다!
• Github Octicons icons
• Material Design icons

세가지에서 사용하고 있고, 위에 위치한 아이콘 위주로 쓰되 마땅한 아이콘이 없는 경우 다음 아이콘으로 넘어가 그중에서 찾아 사용하는 식으로 사용하고 있습니다.

아래 피그마에 아이콘들 모아 넣어 두었습니다.

heroicons (Community)

로고