1. 구현 조건
- 구현 화면은 위와 같음
- Todo 추가/체크/삭제/검색 기능
2. UI 구현
component 나누기
- 3개의 component로 나눔
- Header
- Editor
- List
기본 레이아웃 설정
Header.jsx
Editor.jsx
- input 태그는 flex: 1로 둬서 부모의 범위를 넘어가지 않는 선에서 최대로 확장되게 구현
List
- 서치바는 width: 100%를 줘서 부모에 가득차게 구현
- 서치바에 padding: 10px 0을 줘서 상하에만 padding 구현
- border-bottom을 기본, focus일 때 구현
- List의 투두리스트는 반복되므로 TodoItem component로 뺌
꾸준🐢