[MBTI 테스트] - 닉네임을 변경했는데 왜 변경사항이 없다고 하죠?

문제 상황

기존의 닉네임을 불러온 상태에서 새로운 닉네임으로 변경하는 로직을 짜고 있었다.

새로운 닉네임으로 변경하는 함수에서도 새로 입력한 닉네임이 콘솔에 잘 출력되고 있었다.

그런데....😵‍💫

 

분명 새로운 닉네임의 값을 잘 받고 있는데도 에러 메시지에 "변경사항이 없습니다."라고 떴다.

도대체 왜 변경사항이 없다고 뜨는 걸까?

 

 

문제 원인 및 해결 과정

💻 기존의 프로필 업데이트 함수

export const updateProfile = async ({ token, nickname }) => {
  console.log(nickname);
  try {
    const response = await authAPI.patch("/profile", nickname, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
    console.log(response);
  } catch (error) {
    toast.error(error.response.data.message);
  }
};

새로 입력한 닉네임값은 잘 전달되는 것을 보니 닉네임을 업데이트 하는 함수에서 문제가 있지 않을까 유추하였다.

 

코드를 보다보니 놓치고 있는 부분을 발견할 수 있었다.

const response = await authAPI.patch("/profile", nickname, {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

이 부분에서 nickname을 그대로 서버에 전달해주고 있었다.

✅ 서버에서 nickname을 객체 형태로 받고 있기 때문에 { nickname }의 형태로 전달해줘야 한다!

 

💻 수정된 프로필 업데이트 함수

export const updateProfile = async ({ token, nickname }) => {
  console.log(nickname);
  try {
    const response = await authAPI.patch(
      "/profile",
      { nickname },
      {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      }
    );
    toast.info(response.data.message);
  } catch (error) {
    toast.error(error.response.data.message);
  }
};

toast.info(response.data.message);

response.data 안에 "프로필이 업데이트되었습니다."라는 message가 있길래

사용자에게도 toast 알림을 통해 알려주었다.

 

 

결과

이제는 닉네임이 수정되는 것을 확인할 수 있다!