리액트 투두리스트 앱 - TODO List App (React.js)

---

📌- React.js

---

링크

• https://kim-todolist.netlify.app/

---

설명

[할 일 관리]

- [+] 아이콘을 클릭하면 입력창이 나옵니다.

- 입력창에 할 일을 입력한 후 Enter키를 누르면 할 일이 추가됩니다.

- 할 일을 체크하면 목록별로 남은 할 일들이 최신화됩니다.

- 할 일에 마우스를 올리고 🗑 아이콘을 누르면 할 일이 삭제됩니다.

[목록 관리]

- 목록 추가 버튼을 누르면 입력창이 나옵니다.

- 입력창에 목록명을 입력한 후 Enter키를 누르면 목록이 추가됩니다.

- 목록을 클릭하면 해당 목록이 활성화됩니다. - 활성화된 목록에 ✖버튼을 누르면 목록이 삭제됩니다.

[할 일 검색]

- 우측상단 검색창에 검색어를 입력하면 검색됩니다.

- 실시간으로 해당 검색 키워드와 일치하는 할 일들이 보여집니다.

- 검색된 결과를 클릭하면 해당 목록으로 이동합니다.

[기타]

• state 관리는 useReducer와 Context API를 이용하여 전역관리를 해주었습니다.
• 컴포넌트 스타일링은 css-module을 이용하였습니다.