스타일링 : Chakra UI
info
스타일링은 mark-up 과 css 작업을 포함하고 있습니다.
구현을 1 순위로 하되, 유지보수 하기 좋은 컴포넌 트 구조와 컴포넌트 네이밍을 신경써서 작업해 주세요.
목적
- Charka 를 사용한 퍼블리싱 경험
- Chakra Theme Settting 에 대한 경험
- Chakra SVG Icon 에 대한 경험
- Chakra Multiple Component 에 대한 경험
- Chakra 반응형 스타일링 경험 // 준비중
해야 할 일
- page setting
- page 폴더로 route 관리하기
- layout setting
- components/@Layout 폴더에서 layout 관련 컴포넌트 작성
- containers/[page-name] 폴더에서 해당 페이지를 랜더링하는 컴포넌트 작성
- theme setting
- primary 컬러의 500, 600, 700 색상 세팅
- sm, md, lg 에 해당하는 font-size 세팅
- button component 의 variants 세팅 (outline, flushed)
- 세부 사항 구현
- 사용되는 각 컴포넌트 구현
- svg ⇒ chakra Icon Component 로 바꿔서 사용해 보기
- 공통적으로 사용되는 컴포넌트와, 지역적으로 사용되는 컴포넌트 구분하여 관리하기
- 공통 컴포넌트 : components
- 지역 컴포넌트 : containers/[page-name]/components