To Do List

Typescript, React, Recoil을 활용한 사용자 지정 카테고리 To do List 구현

https://lee-yun-pyo.github.io/todolist-by-react/

📌 Using

• react
• recoil
• styled-components
• typescript
• react-hook-form

🎨 UI

1. 초기 화면

2. 카테고리 추가

3. todo 입력

4. 기타: todo를 입력할 카테고리가 없을 때

🗂 Atoms

categoriesState

• 카테고리 객체 (배열)
• 영속성 부여
• default를 ["TO_DO", "DOING", "DONE"] 표기하여 초기 화면에 표시

selectedCategoryState

• 사용자가 클릭을 통해 선택한 카테고리 객체

toDoState

• 사용자가 입력한 todolist들의 객체 (배열)
• 영속성 부여
• text: 사용자로부터 입력받은 값, id: 입력했을때 Date.now() 값, category: selectedCategoryState 의 객체

AddListModalState

• ‘카테고리 추가’ 버튼 클릭 시 모달창 화면 표시 여부 객체 (boolean)

toDoSelector

• toDoState 객체들 중 category가 selectedCategoryState 객체와 일치하는 객체만 return

🧱 Components별 기능

CategoryBtns

• 각 카테고리 별로 toDoState의 category가 각 카테고리와 일치하는 카테고리에 개수 표시 (1 이상일 경우)
• 각 카테고리 클릭 시 해당 카테고리로 selectedCategoryState의 객체 변경

CreateTodo

• input에 register method의 required option 부여 (입력값 없이 submit 시도 시 에러메시지 출력)
• categoriesState의 객체의 길이가 0일 경우 (카테고리 개수가 0인 경우) disabled attribute 부여
• form submit 성공 시 toDoState객체 추가

DeleteBts

• ‘리스트 전체 삭제’ 버튼 클릭 시:
  • toDoState배열 객체 중 selectedCategoryState객체와 같은 카테고리를 가진 객체를 제외한 객체들로 상태 업데이트 ✅ 1
• ‘현재 카테고리 삭제’ 버튼 클릭 시:
  • ✅ 1 동일 기능 수행
  • categoriesState 배열 객체 중 selectedCategoryState 객체와 같은 객체를 제외한 객체들로 상태 업데이트
  • selectedCategoryState 상태 변경

Todo

• ‘카테고리 이름’ 클릭 시
  • toDoState 객체의 해당 todo의 category 변경
• ‘삭제’ 버튼 클릭 시
  • 삭제하려는 todo의 id값을 통해 toDoState 객체에서 삭제

etc/ModalAddList

• text 입력 후 ‘Save’버튼 클릭 시 categoriesState 배열 객체에 추가 및 입력한 텍스트로 selectedCategoryState 상태 변경