[TodoList] 투두리스트 개발준비

개발 준비: 

 

1. CRA로 앱만들기

2. styled-components와 react-icons 라이브러리 추가

$ npx create-react-app mashup-todolist
$ yarn add styled-components react-icons

color scheme: https://yeun.github.io/open-color/

icons: https://react-icons.netlify.com/#/icons/md (react material design icons)

 

 

3. 컴포넌트 오버뷰: 

TodoTemplate.jsx 투두리스트의 레이아웃. 흰색 박스

 

 

TodoHead.jsx 연도,월,일, 요일, 남은 할일 숫자

 

 

TodoList.jsx map으로 todoItem들을 렌더링

 

TodoItem.jsx 각 할일에 대한 정보를 렌더링. 할일 완료 여부 토글 - 좌측 체크, 텍스트 색상 연하게. / 마우스 오버시 우측 휴지통 아이콘-> 항목삭제

TodoCreate.jsx 초록색 버튼을 렌더링. 인풋 입력 후 엔터 -> 항목 추가, x->취소