챌린지가 8월 말로 종료됐지만 결과물을 더 업그레이드 하고자 UI 리팩토링과 기존 구현 사항에는 없는 부가 기능을 추가하려고 한다. UI와 관련된 부분은 챌린지가 끝난 이후 조금 조금씩 진행 중이고, 그 외의 기능적인 부분으로 할 일 완료하기/삭제하기 기능을 추가했다.

API도 직접 추가해야 했는데, Node-js로 구현된 API Server Repository를 뜯어보고 작동 방식을 이해하면서 API와 관련된 코드를 작성해볼 수 있는 경험이 됐다.

1. 완료한 할 일 기능 추가하기

(1) Server Repository에 API 추가하기

기존에 deleteTodo라는 개별 투두 삭제 API가 있었만 내부 코드를 살펴보니 개별 투두 삭제 API에 완료된 투두 삭제 기능을 추가하게 되면 한 API에서 두 가지 기능을 담당해버리기 때문에 deleteDoneTodos라는 이름을 가진 독립된 API를 만들었다.

server repository를 살펴보니 새로운 API 작성을 위해 수정이 필요한 부분은 크게 다섯 파트였고, 추가한 코드는 다음과 같다.

• 1) server/types/todos.ts
  - type interface를 설정해주는 부분.
  - Todo interface에 완료 여부를 알려주기 위해 'isDone' 키를 추가했다.
  

• 2) server/services/todoService.ts
  - db에 접근하여 db에 저장된 todo를 수정하는 함수
  - deleteDoneTodos라는 함수를 정의하고 1번에서 정의한 'isDone' 키가 'false' (완료되지 않은 투두)만 뽑아내서 db에 저장하는 코드를 작성했다. (=완료된 투두는 제외하고 저장)
  

• 3) server/controllers/todoController.ts
  - client로부터 request를 받아 action을 수행하고 response를 보내는 함수
  - client에서 API 요청 시 body로 보내온 투두 리스트를 받아 완료된 할일의 개수를 체크하고, 완료된 할일의 개수(길이)가 0인 경우 삭제할 할 일이 없다는 error를 발생시킨다. 삭제할 할 일이 있다면 2번에 작성한 함수를 호출한다.
  

• 4) server/routes/todoRouter.ts
  - 3번에서 정의된 함수의 router 설정
  

• 5) server/utils/validator.ts
  - 에러 발생 시 에러 메세지 설정
  - 3번에서 error response로 보내는 에러 메세지를 설정해준다.
  

(2) Client Repository에서 API 호출하기

이제 작성한 API를 client에서 호출할 차례다. 수정하고 추가한 부분은 다음과 같다.

• 1) client/service/todoService.ts
  - axios를 통해 API와 통신하는 함수
  - 새로 추가한 API인 deleteDoneTodos를 호출하는 async 함수를 작성했다.
  - body로 투두 리스트를 보낸다.
  

• 2) client/hooks/query/todo.ts
  - react-query 통신을 관리
  - useDeleteDoneTodos 함수를 추가했다. 콜백 함수를 이용해서 에러 발생 시 모달 닫기/열기를 제어한다. error response로 받은 메세지를 errorState에 담아 return한다
  

• 3) client/components/todo/TodoListFooter.ts
  - 할 일 추가하기와 완료된 할 일 삭제하기 버튼이 들어가는 푸터 컴포넌트
  - useDeleteDoneTodos 쿼리를 호출하고 useModal Custom hooks에서 받아온 modalOpen 함수를 useDeleteDoneTodos의 콜백함수로 전달해준다. 에러 발생 시 modalOpen이 실행되면서 모달 창이 열린다.
  
  - 푸터 컴포넌트에서 제어하는 에러 메세지는 '할 일 추가'와 '완료된 할 일 제거' 두 개로 이 둘을 구분하기 위해 modalKey state를 선언했다.
  - '할 일 추가' 버튼을 누르면 modalKey가 'add'로 세팅되고, '완료된 할 일 제거'버튼을 누르면 modalKey가 'delete'로 세팅된다.
  - 렌더링하는 부분에서 modalOpen 상태가 되면 (에러가 발생하면) modalKey가 'add'(할 일 추가와 관련된 에러)인지, 'delete'(완료된 할 일 삭제에 관련한 에러)인지 구분하여 에러 메세지를 변화시킨다.
  
  

(3) UI 변경

사용자 인터랙션에 따라 isDone의 key값을 변화시키는 함수를 선언하고 todo의 isDone key값이 'true'면 line-through style을 설정해주고, check icon을 활성화시켰다.