like/unlike 사가 오류 질문

안녕하세요 현영님!

좋아요 기능 구현 실습하면서 다음과 같은 오류가 발생했습니다.

오류 메시지를 통해서 사가쪽에서 발생하는 오류라는 것은 알 수 있었는데, 현영님 깃헙과 비교하면서 찾아봐도 어디서 잘못됐는지 확인할 수 없어서 질문드립니다ㅠ

• 사가 코드

import axios from "axios";
import { call, put, fork, takeLatest, all, throttle } from "redux-saga/effects";
import {
  ADD_POST_PENDING,
  ADD_POST_SUCCESS,
  ADD_POST_ERROR,
  ADD_COMMENT_PENDING,
  ADD_COMMENT_SUCCESS,
  ADD_COMMENT_ERROR,
  REMOVE_POST_PENDING,
  REMOVE_POST_SUCCESS,
  REMOVE_POST_ERROR,
  LOAD_POSTS_PENDING,
  LOAD_POSTS_ERROR,
  LOAD_POSTS_SUCCESS,
  LIKE_POST_PENDING,
  LIKE_POST_SUCCESS,
  LIKE_POST_ERROR,
  UNLIKE_POST_PENDING,
  UNLIKE_POST_SUCCESS,
  UNLIKE_POST_ERROR
} from "../reducers/post";
import { ADD_POST_TO_ME, REMOVE_POST_OF_ME } from "../reducers/user";

//--------------------------------------------
function loadPostsAPI() {
  return axios.get("/posts");
}
function* loadPosts(action) {
  try {
    const result = yield call(loadPostsAPI);
    yield put({
      type: LOAD_POSTS_SUCCESS,
      data: result.data
    });
  } catch (err) {
    yield put({
      type: LOAD_POSTS_ERROR,
      data: err.response.data
    });
  }
}
function* watchLoadPosts() {
  yield throttle(5000, LOAD_POSTS_PENDING, loadPosts);
}

function addPostAPI(data) {
  return axios.post(`/post`, { content: data });
}
function* addPost(action) {
  try {
    console.log("addPost 함수 실행");
    const result = yield call(addPostAPI, action.data);
    // const id = shortId.generate();
    console.log("axios 통신을 마쳤습니다.", result);
    yield put({
      type: ADD_POST_SUCCESS,
      data: result.data
    });
    yield put({
      type: ADD_POST_TO_ME,
      data: result.data.id
    });
  } catch (err) {
    yield put({
      type: ADD_POST_ERROR,
      data: err.response.data
    });
  }
}
function* watchAddPost() {
  console.log("watchAddPost 실행");
  yield takeLatest(ADD_POST_PENDING, addPost);
}

function removePostAPI(data) {
  return axios.delete(`/post/${data}`);
}
function* removePost(action) {
  try {
    console.log(action.data);
    const result = yield call(removePostAPI, action.data);
    yield put({
      type: REMOVE_POST_SUCCESS,
      data: result.data // id
    });
    yield put({
      type: REMOVE_POST_OF_ME,
      data: action.data
    });
  } catch (err) {
    yield put({
      type: REMOVE_POST_ERROR,
      data: err.response.data
    });
  }
}
function* watchRemovePost() {
  yield takeLatest(REMOVE_POST_PENDING, removePost);
}
//--------------------------------------------
function addCommentAPI(data) {
  return axios.post(`/post/${data.postId}/comment`, data);
}
function* addComment(action) {
  try {
    const result = yield call(addCommentAPI, action.data);
    yield put({
      type: ADD_COMMENT_SUCCESS,
      data: result.data
    });
  } catch (err) {
    console.error(err);
    yield put({
      type: ADD_COMMENT_ERROR,
      data: err.response.data
    });
  }
}
function* watchAddComment() {
  yield takeLatest(ADD_COMMENT_PENDING, addComment);
}
//--------------------------------------------
function likePostAPI(data) {
  axios.patch(`/post/${data}/like`);
}

function* likePost(action) {
  try {
    console.log("좋아요 사가 액션 데이터", action.data);
    const result = yield call(likePostAPI, action.data);
    console.log("좋아요 사가 result 데이터", result.data);
    yield put({
      type: LIKE_POST_SUCCESS,
      data: result.data // {PostId, UserId} 11, 2
    });
  } catch (err) {
    console.error(err);
    yield put({
      type: LIKE_POST_ERROR,
      data: err.response.data
    });
  }
}
function* watchLikePost() {
  yield takeLatest(LIKE_POST_PENDING, likePost);
}
//--------------------------------------------

function unlikePostAPI(data) {
  axios.delete(`/post/${data}/like`);
}

function* unlikePost(action) {
  try {
    console.log("좋아요 취소 사가 액션 데이터", action.data);
    const result = yield call(unlikePostAPI, action.data);
    console.log("좋아요 취소 사가 result 데이터", result.data);
    yield put({
      type: UNLIKE_POST_SUCCESS,
      data: result.data
    });
  } catch (err) {
    console.error(err);
    yield put({
      type: UNLIKE_POST_ERROR,
      data: err.response.data
    });
  }
}

function* watchUnlikePost() {
  yield takeLatest(UNLIKE_POST_PENDING, unlikePost);
}
//--------------------------------------------
export default function* postSaga() {
  yield all([
    fork(watchLikePost),
    fork(watchUnlikePost),
    fork(watchAddPost),
    fork(watchAddComment),
    fork(watchRemovePost),
    fork(watchLoadPosts)
  ]);
}

PS.

1. 서버쪽에서는 요청을 받아서 성공적으로 응답을 보내주고, DB에도 좋아요가 잘 추가가 됩니다.

• 터미널 로그

• DB 좋아요 테이블

2. 브라우저에서는 위의 오류가 발생하고 새로고침하면 좋아요 기능이 적용되어 있습니다.