[React/TS] axios-mock-adapter 사용하여 PUT 요청 모킹하기

import MockAdapter from 'axios-mock-adapter';

const axiosInstance = axios.create({
  baseURL: '/api', // 기본 URL 설정
  timeout: 5000, // 타임아웃 설정 (ms)
});

// PUT 요청 모킹
// 1. 가짜 PUT mock 생성
//  - 업데이트할 객체 생성
//  - 위 객체로 res 반환
 mock.onPut(`/hospitals/${formData._id}`).reply((config) => {
      // put 요청 중 data만 추출
      const recordForm = config.data;

      // 업데이트된 정보의 객체를 만들어준다. 이 정보로 response를 보내줄 것임!
      const updatedRecord = {
        _id: formData._id,
        doctorName: recordForm.get('doctorName'),
        address: recordForm.get('address'),
        isConsultation: recordForm.get('isConsultation'),
        consultationDate: recordForm.get('consultationDate'),
        hospitalizationStatus: recordForm.get('hospitalizationStatus'),
        disease: recordForm.get('disease'),
        symptom: recordForm.get('symptom'),
        treatment: recordForm.get('treatment'),
        memo: recordForm.get('memo'),
        deletedAt: recordForm.get('deletedAt'),
        updatedAt: new Date(),
      };

      return [200, updatedRecord];
    });
    
// 수정하기 모달에서, 수정하기 버튼을 클릭하였을 때 실행되는 함수 
const handleEditSubmit = async () => {
    // 2. 위 정보로 상태 업데이트
    axiosInstance
    .put(`/hospitals/${formData._id}`, formData)
    // response 데이터로 정보를 업데이트 해주는 코드를 작성해준다!
    .then()
    ...

  };

 

 

 지금은 전체 폼데이터를 모두 전송해주고 있다!

서버에서 업데이트 정보만 비교하는 로직이 있나 문의 후에 없다면 업데이트 된 필드만 비교해서 해당 필드만 보내주는 로직도 생각해보자!