향해99 12기 리액트 숙련 주차 개인 과제 이전 입문과제에서 redux를 사용해 to do 웹 구현
- 간단한 To do list를 생성해주는 웹
- To do 를 생성, 완료, 삭제
...
- 제목과 내용을 입력하고,
추가하기버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성 - Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을
취소, isDone이 false 이면 라벨을완료로 조건부 렌더링 - Todo의 상태가
Working이면 위쪽에 위치하고,Done이면 아래쪽에 위치하도록 구현 - Layout의 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 전체 화면의 가운데로 정렬
- 반복되는 컴포넌트를 분리
- 전역 상태 관리 라이브러리 사용 (Redux)
📦src
┣ 📂components
┃ ┣ 📜AddInput.jsx
┃ ┣ 📜ToDoCards.jsx
┃ ┗ 📜ToDoList.jsx
┣ 📂hook
┃ ┗ 📜useInput.js
┣ 📂redux
┃ ┣ 📂config
┃ ┃ ┗ 📜configStore.js
┃ ┗ 📂modules
┃ ┃ ┗ 📜todos.js
┣ 📜App.jsx
┣ 📜index.css
┗ 📜index.js