✅ 로그인 버튼 렌더링 문제 해결 정리 (MotionMate)

📌 문제 개요

• 로그인/로그아웃 후에도 로그인 버튼 또는 프로필 카드 UI가 잘못된 상태로 유지됨.
• 로그인 상태 (isLoggedIn)와 UI 상태가 불일치하는 문제 발생.
• 특히, HttpOnly 쿠키 기반 인증으로 전환한 이후부터 문제가 심화됨.

🧨 주요 원인 정리

1. HttpOnly 쿠키 도입 → 클라이언트에서 토큰 접근 불가

• 기존: localStorage 또는 accessToken으로 직접 로그인 상태 확인 가능.
• 변경: HttpOnly 쿠키 사용 → 토큰이 JS로 접근 불가함 → 반드시 서버에 요청해야 로그인 상태를 확인 가능.

2. AuthProvider 초기 로그인 상태 비동기 처리 지연

• useEffect에서 서버에 /users/me 요청하여 isLoggedIn 여부 설정.
• 이 상태가 결정되기 전에 이미 UI는 "비로그인 상태"로 렌더됨.

3. 프로필 카드가 AuthContext와 별도 상태로 관리됨

• useMainPageProfile()에서 isLoggedIn 상태 변화에 반응하지 않음.
• 로그인/로그아웃 후 프로필 UI는 바뀌지 않음.

✅ 해결 과정

✅ AuthProvider 내에서 로그인 상태 초기화