fix: 로그아웃 시 logout API 호출 실패 해결 - HeaderNav바에 로그아웃 시 바로 반영이 안되는 문제 해소

[lov-etan]

연관 작업

5

---

작업 개요

로그아웃 메서드 실행 시, Authorization 헤더에 토큰이 포함되지 않아 API 호출이 실패하는 문제를 해결하고, 로그아웃 이후 HeaderNav에서 UI 상태가 즉시 반영되지 않는 문제를 수정하였습니다.

---

주요 변경 사항

1. Authorization 헤더에 토큰 추가

   • 로그아웃 API 호출 시 Authorization 헤더에 access-token을 포함하도록 수정.
   • sessionStorage에서 토큰을 가져와 헤더에 설정하여 백엔드와의 통신 오류를 방지.

2. UI 상태 즉시 반영

   • 로그아웃 시 loginUser 상태를 즉시 null로 초기화.
   • HeaderNav에서 v-if 조건을 통해 상태가 즉시 반영되도록 개선.

3. 예외 처리 강화

   • API 호출 실패 시 에러 메시지를 콘솔에 출력.
   • 실패 원인을 사용자에게 적절한 메시지로 안내.

---

테스트

1. 로그아웃 API 호출

   • 유효한 access-token이 포함된 요청이 서버로 전달되는지 확인.
   • 백엔드에서 Refresh Token 삭제 여부 검증.

2. UI 상태 반영

   • 로그아웃 이후 HeaderNav에서 "로그인" 및 "회원가입" 링크가 즉시 표시되는지 확인.

3. 에러 처리

   • 토큰이 없는 상태에서 로그아웃 API 호출 시 적절한 오류 메시지가 출력되는지 확인.

---

기대 효과

• 로그아웃 시 API 호출 실패 문제 해결로 안정적인 로그아웃 기능 제공.
• UI 상태가 즉시 반영되어 사용자 경험 개선.
• 에러 발생 시 원인 파악 및 디버깅이 용이해짐.

---

리뷰 요청

1. 헤더에 토큰을 포함하는 방식이 적절한지 검토 부탁드립니다.
2. UI 상태 업데이트 로직에서 추가 개선이 필요한지 확인 부탁드립니다.
3. 로그아웃 후 예외 처리 메시지가 사용자 친화적인지 의견 요청드립니다.

---

이번 PR은 로그아웃 기능의 안정성과 UI 반응성을 개선하기 위한 작업입니다. 피드백 부탁드립니다! 😊

[lov-etan]

lgtm