Feat: 인증 인가 구현

[hoon-ground]

🔍 PR 요약

어떤 변경을 했는지 간단히 설명해주세요.

• OAuth 기반 소셜 로그인 및 HttpOnly Cookie 인증 흐름을 구현했습니다.
• 인증 상태 확인, 토큰 재발급, 401 처리, 보호 라우팅을 추가했습니다.
• 로그인 화면 레이아웃을 메인 화면과 동일한 max-width/shadow 기준으로 정리하고, 카카오/구글 로그인 버튼 UI를 개선했습니다.

🧾 관련 이슈

이 PR과 관련된 이슈 번호를 명시해주세요.

• close [FEAT] 인증 인가 구현 #3

🛠️ 주요 변경 사항

핵심 변경사항을 bullet point로 나열해주세요.

• OAuth/Auth/User API 엔드포인트 추가
  • /api/oauth/authorize/google
  • /api/oauth/authorize/kakao
  • /api/auth/refresh
  • /api/auth/logout
  • /api/users/me
• localStorage access token 기반 인증 제거
  • Authorization: Bearer 헤더 주입 로직 제거
  • HttpOnly Cookie 기반 인증 흐름으로 전환
• Axios 401 응답 처리 추가
  • 401 발생 시 refresh 요청 후 원 요청 재시도
  • refresh 중복 요청 방지를 위한 queue 처리 추가
  • refresh 실패 시 unauthorized handler 호출
• 내 정보 조회 API 추가
  • getMe
  • MeResponse
• Zustand 기반 인증 상태 스토어 추가
  • checkAuth
  • logout
  • 로그인 여부 및 사용자 정보 관리
• OAuth callback 페이지 추가
  • OAuth 처리 후 인증 상태 확인
  • 성공 시 홈 이동
  • 실패 시 로그인 화면 이동
• 인증 라우팅 적용
  • PublicRoute / ProtectedRoute 추가
  • 미인증 사용자는 로그인 화면으로 이동
  • 인증 사용자는 로그인 화면 접근 시 홈으로 이동
• 401 응답 시 로그인 화면 이동 처리
  • MainLayout에서 unauthorized handler 등록
  • 인증 만료 시 logout 후 /login 이동
• 소셜 로그인 버튼 연동
  • 카카오 로그인 버튼 클릭 시 Kakao OAuth authorize endpoint로 이동
  • Google 로그인 버튼 클릭 시 Google OAuth authorize endpoint로 이동
  • 카카오 로그인 버튼 이미지 적용
  • Google Identity Services 기반 버튼 렌더링 구조 추가
• 로그인 화면 UI 정리
  • 메인 레이아웃과 동일한 max-w-120 적용
  • 동일한 app shell shadow 적용
  • 소셜 로그인 버튼 크기 및 정렬 통일

🧠 의도 및 배경

왜 이 변경이 필요했는지, 어떤 문제를 해결했는지 작성해주세요.

• 백엔드 인증 방식에 맞춰 HttpOnly Cookie 기반 흐름으로 구현했습니다.
• OAuth 로그인 이후 사용자의 인증 상태를 안정적으로 확인하기 위해 /api/users/me 기반의 인증 체크 로직을 추가했습니다.
• 인증이 필요한 페이지 접근을 제어하고, 인증 만료 시 자동으로 로그인 화면으로 이동하도록 라우팅과 401 처리 흐름을 정리했습니다.