오늘 구현한 내용

리뷰 등록 버튼 라우팅

예약 상세 페이지에서 이용 완료된 예약에 한하여 리뷰 등록 버튼을 눌렀을 때 리뷰 작성 페이지로 이동하게 라우팅했다.
(리뷰를 이미 등록했다면 버튼을 없애거나 리뷰 수정 버튼으로 바꿔야 할 것 같다.)

예약 취소 버튼 라우팅

예약 상세 페이지에서 이용 예정인 예약에 한하여 예약 취소 버튼을 눌렀을 때 결제 취소 페이지로 이동하게 라우팅했다.

결제 취소 페이지를 담당하신 팀원분께서 프론트에서 api를 호출하는 코드, 커스텀 훅을 작성해서 보내주셔서 금방 진행할 수 있었다.

문제 발생

그런데 자꾸 예약 취소에 실패했다고 에러가 떠서 확인해보니, ‘올바르지 않은 형식의 Access Token입니다.’라는 에러가 발생하고 있었다.
코드를 살펴봐도 뭐가 문제인지 모르겠고, 내가 라우팅을 하는 부분에서 코드를 잘못 짰나 싶어서 이건 팀장님한테 물어보면 해결할 수 있을 것 같아 도움을 요청했다.
셋이서 뭐가 문제인지 보다가 팀장님이 "PATCH로 요청을 하고 있는데 보내주는 데이터가 없어서 문제인 것 같다. axios에서 두 번째 인자로 빈 리스트라도 추가해줘야 할 것 같다. 추가해보자."고 하셔서 추가한 후에 다시 테스트를 해보니 잘 동작했다.

원인과 해결

두 번째 인자로 보내는 데이터가 필요한데 그걸 안 넣어주니 세 번째 인자로 들어가야 했던(두 번째 인자로 보내고 있던) auth 관련 부분이 보내는 데이터로 인식되고 있어서 Access Token을 찾지 못하던 것이었다.

const fetchReserveForCancel = async (reserveId) => {
  console.log(`/api/v1/cashLog/${reserveId}/cancel`);
  return await axios.patch(`/api/v1/cashLog/${reserveId}/cancel`, {},
  {
    ...axios.defaults,
    useAuth: true,
  });
};