찍찍이 #할 일 수정 및 삭제 (로직)

이전 게시물에서 했던 데이터 통합을 통해 할 일 생성에 이어 수정 작업도 진행할 수 있었다.

기존 useTodoModalStore 라는 할일 모달 상태에 관한 저장소에서
useTodoModalStore 코드
모달 타입 (생성, 수정)을 가져온 다음 적용

생성 수정 mutation 커스텀 훅을 작성한 다음
생성 mutation 커스텀 훅
수정 mutation 커스텀 훅

...

const TodoModal = () => {
  const { isOpen, close, todoType } = useTodoModalStore();
  const { resetAll, getCreateTodoData, getModifyTodoData, todoData } =
    useTodoDataStore();
  const { mutate: createTodoMutate } = useCreateTodo();
  const { mutate: modifyTodoMutate } = useModifyTodo();

  const handleClick = () => {
    if (todoType === '생성') {
      createTodoMutate(getCreateTodoData());
    } else {
      modifyTodoMutate({ todoId: todoData.todoId, data: getModifyTodoData() });
    }
  };

  const handleClose = () => {
    close();
    resetAll();
  };

  if (!isOpen) {
    return null;
  }

  return (
    <ModalContainer onClose={handleClose}>
      <motion.div
        variants={todoModalVariants}
        initial="hidden"
        animate="visible"
        className="flex size-full flex-col items-start gap-10 overflow-y-auto bg-custom-white-100 px-16 py-24 sm:h-auto sm:w-520 sm:rounded-12 sm:p-24"
      >
        <div className="flex flex-1 flex-col items-start gap-40 self-stretch">
          <div className="flex flex-col gap-24 self-stretch">
            <TodoModalHeader todoType={todoType} onClose={handleClose} />
            <TodoModalTitle />
            <TodoModalGoal />
            <TodoModalRepeat />
            <TodoModalDocs />
          </div>
          <Button
            size="large"
            primary={true}
            className="mt-auto"
            onClick={handleClick}
            disabled={todoDataValidation(
              todoData.title,
              todoData.goalTitle,
              todoData.startDate,
              todoData.endDate,
            )}
          >
            확인
          </Button>
        </div>
      </motion.div>
    </ModalContainer>
  );
};

export default TodoModal;

삭제는 간단하게 쿼리 파라미터로 할 일에 관한 id만 넣어주면 되어 금방 해결되었다.
대신 invalidateQueries 설정을 까먹지 말고 해줘야할 것.

삭제 mutation 커스텀 훅