디자인 시스템 뼈대 구현

[danbileee]

To-do

• 디자인 시스템의 기본 UI 요소를 구현합니다. 아직 디자인 작업 전이므로 스타일 제외하고 필수로 요구되는 인터페이스 위주로 기능이 구현되면 좋을 것 같습니다.
• 스토리북을 설정하여 UI 테스트 환경을 구현합니다.

구현할 요소

• 타이포그래피
  • h1~h6, p, span 등의 태그를 어디까지 개별 컴포넌트로 구분하고 어디까지 동적으로 대응할지
  • 스타일 variation을 어디까지 열어둘지
• 이미지
  • lazy loading 지원 + placeholder 로직 구현
• 아이콘
  • unicon 도입 (https://github.com/Iconscout/unicons)
• VStack, HStack 등의 컨테이너
  • flex, grid 등 레이아웃 관련한 반복적인 스타일 컴포넌트 구현

[danbileee]

• 아이콘 라이브러리 전체를 불러오다 보니 빌드 사이즈가 너무 큼
  • 아이콘 파일을 S3 등에 올려 사용? -> 스토리지 비용이 필요함
  • svg 대신 폰트로 사용? -> stylesheet link 추가해야 함 & color, size 등의 prop 활용 불가

[danbileee]

• Layout 컴포넌트에 spacing 속성 추가