관리자 모드의 우측 상단 로그아웃 버튼 추가, 대시보드 디자인 고도화, 그리고 사이트 회원가입/로그인 페이지에 구글 연동 기능을 적용합니다.

User Review Required

IMPORTANT

구글 로그인을 연동하기 위해 Google Cloud Console에서 발급받은 Google OAuth Client ID가 필요합니다. Client ID를 이미 발급받으셨나요? 만약 없으시다면 임시 더미 ID로 구현해 두고 나중에 교체하실 수 있도록 준비하겠습니다.

Open Questions

  • 구글 로그인 연동 방식: 구글 로그인 시 기존 회원과 동일한 이메일일 경우 자동으로 기존 계정에 연동할까요? (기본적으로는 구글 고유 ID로 신규 가입 처리하는 방식을 권장합니다.)
  • 대시보드 차트 적용: 대시보드를 더 생동감 있게 만들기 위해 Chart.js 라이브러리(CDN)를 포함하여 방문자 수 추이 차트 등을 추가해도 괜찮을까요?

Proposed Changes

1. 관리자모드 로그아웃 추가

[MODIFY] 

  • 우측 상단 헤더 영역(.top-right)에 로그아웃 버튼(btn-logout) 마크업 추가.
  • 붉은 계열의 hover 효과가 있는 세련된 로그아웃 버튼 CSS 추가.

2. 대시보드 디자인 고도화

[MODIFY] 

  • 기존의 단순한 카드형 구조를 최신 웹 트렌드(Glassmorphism, Subtle Gradients, Micro-animations)에 맞춰 화려하고 프리미엄 느낌으로 리디자인.
  • CSS 스타일(card-grid, stat-card 등)을 추가하여 시각적 완성도 극대화.
  • 아이콘 활용 및 hover 시 카드 확대/부상(Elevation) 애니메이션 적용.

3. 구글 회원가입 및 로그인 적용

[NEW]  (Migration)

  • users 테이블에 구글 연동을 위한 oauth_provider (VARCHAR), oauth_id (VARCHAR) 컬럼을 추가하는 일회성 DB 변경 스크립트.

[MODIFY] 

[MODIFY] 

  • 최신 Google Identity Services(gsi/client) API를 포함.
  • 디자인된 구글 로그인 / 가입 버튼 렌더링.

[MODIFY] 

  • 구글 버튼 클릭 시 반환되는 JWT(credential)를 수신하고 검증하는 googleAuth() 메서드 추가.
  • 최초 접속이면 User 모델을 통해 회원가입 처리, 기존 회원이면 로그인 처리 및 세션 생성 후 리다이렉트.

[MODIFY] 

  • findByOauthId($provider, $oauthId) 메서드 추가.
  • 회원가입(create()) 시 oauth_provider와 oauth_id를 함께 저장할 수 있도록 파라미터 구조 개선.

Verification Plan

Manual Verification

  • http://localhost/xzine/admin 접속 후 우측 상단의 로그아웃 아이콘/버튼 및 기능 동작 테스트.
  • 관리자 대시보드가 요청된 프리미엄 스타일(그라데이션, 애니메이션)로 출력되는지 확인.
  • http://localhost/xzine/auth/login 접속 후 구글 로그인 버튼이 노출되는지 확인.
  • 임시 Client ID를 사용하거나 발급받은 ID를 적용하여 실제 구글 회원가입 -> 로그인 플로우 검증.