구현 목표

• 아래와 같이, 목표에 따른 해야할 작업을 입력 완료 후, 다음 입력을 이어서 할 수 있도록 구현하는 것이 목표였다.

문제 상황 & 원인

• 초기에는 입력 후 엔터를 누르면, 월별 전체 목표 리스트를 최신화하기 위해 쿼리 요청을 보낸다.
• 그 뒤, 선택한 일자에 따라 전체 목표 리스트를 선택한 일자에 해당하는 리스트로 필터링한다.
• 이때 필터링하는 과정은 useEffect에 의해서 진행되는데, 필터링 이후 '목표에 대한 해아할 작업을 입력 중'에 대한 상태 변수가 초기값인 false로 초기화되어 입력필드가 비활성화되는 상황이였다.

해결 순서

• 이를 해결하기 위해, 가장 최근에 추가된 목표의 id를 값으로 가지는 상태 변수를 생성하였다.
• 그리고 해야할 작업을 추가하는 함수 내부에서 작업 추가 동작이 완료되면, 해당 상태 변수를 방금 추가한 목표의 id값을 가지도록 갱신하는 동작을 추가하였다.
• 그리고 선택 일자에 대한 목표 리스트를 필터링 하는 useEffect 내에서, 리스트 중 목표의 id가 해당 상태 변수의 값(방금 할일을 추가한 object의 id)인 분기인 경우 '할일 입력 중' 상태를 나타내는 변수의 값이 true를 가지도록 처리하여 구현하였다.

구현

  /** 최근 추가된 할일의 상위 목표 id */
  const [parentObjectOfRecentTodo, setParentObjectOfRecentTodo] = useState(0);

  /** 할일 추가 함수 */
  const handleAddTodo = async (objectId: number, toDo: TodoInterface) => {
    const requestResult = await handleRequestAddTodo(objectId, toDo.name);

    /** 할일 완료 요청 성공 시, 월별 목표 리스트 호출 및 갱신, 가장 최근 추가된 목표 id 갱신 */
    if (requestResult) {
      const objectList = await handleRequestObjectList(currentMonth);
      setWholeObjectList(objectList.data);
      setParentObjectOfRecentTodo(objectId); // 여기에서 최근 추가된 id로 갱신
    }
  };

  /** 현재 날짜 변경에 따라 목표 리스트 업데이트 */
  useEffect(() => {
    // date가 오늘 날짜(currentDate)와 같은 데이터 필터링
    const filteredData = wholeObjectList
      .filter((item) => {
        const itemDate = item.date;
        return itemDate === currentDate;
      })
      .map((object) => {
        if (object.id === parentObjectOfRecentTodo) {
          return {
            id: object.id,
            name: object.object,
            toDoList: object.toDos,
            isAddingTodo: true,
          };
        } else {
          return {
            id: object.id,
            name: object.object,
            toDoList: object.toDos,
            isAddingTodo: false,
          };
        }
      });

    setObjectList(filteredData);
  }, [wholeObjectList, currentDate]);