feat: 소셜 로그인 기능 구현

[lov-etan]

📌 PR 내용: 소셜 로그인 기능 구현

📋 주요 변경 사항

1. 소셜 로그인 API 연동

   • Google OAuth 인증을 통해 소셜 로그인 구현.
   • 백엔드 API를 호출하여 AccessToken 및 RefreshToken을 생성.

2. loginStore 주요 기능 추가

   • 사용자 로그인, 로그아웃, 상태 복구, 프로필 조회 등 기능 추가.
   • 로그인 상태와 사용자 정보를 Pinia store(loginStore)에서 관리.
   • 사용자 정보는 sessionStorage에 저장되어 새로고침 시에도 복구 가능.

3. 로그인 후 토큰 및 사용자 정보 저장

   • AccessToken, RefreshToken, 사용자 정보(user-info)를 sessionStorage에 저장.
   • 상태 복구(restoreSession)를 통해 새로고침 시에도 로그인 상태 유지.

4. Logout API 호출 및 상태 초기화

   • 로그아웃 시 백엔드 API 호출로 RefreshToken 삭제.
   • sessionStorage와 loginStore 초기화 후 Home 페이지로 리다이렉트.

---

✅ 체크리스트

• [x] 소셜 로그인 시 AccessToken 및 사용자 정보 정상 저장 확인.
• [x] sessionStorage를 이용한 로그인 상태 복구 확인.
• [x] 로그아웃 시 RefreshToken 삭제 및 상태 초기화 테스트 완료.
• [x] 네트워크 장애 및 API 호출 실패 시 예외 처리 확인.
• [x] 소셜 로그인 후 calendar 페이지로 리다이렉트 테스트 완료.

---

📂 변경된 파일

프론트엔드 소스코드

• src/stores/userStore.js: 사용자 상태 관리 및 API 통신 기능 구현.
• src/router/index.js: 로그인 후 페이지 라우팅 로직 추가.

---

📊 테스트 결과

• 로그인 테스트
  • Google OAuth를 통해 백엔드에서 AccessToken 및 사용자 정보를 성공적으로 수신.
  • 로그인 후 calendar 페이지로 정상 리다이렉트.
• 상태 복구 테스트
  • restoreSession 호출 시 sessionStorage에서 사용자 정보 및 AccessToken 복원 성공.
  • 새로고침 후에도 로그인 상태 유지 확인.
• 로그아웃 테스트
  • Logout API 호출 후 sessionStorage 및 loginStore 초기화 확인.
  • Home 페이지로 정상 리다이렉트.

---

🔍 참고 사항

• Google OAuth Redirect URI는 백엔드와 협의하여 환경 변수로 설정 필요.
• 추가 기능 제안
  • 토큰 만료 시 자동 갱신 로직 구현.
  • 사용자 프로필 이미지 업로드 및 설정 기능 추가.
  • UI/UX 개선을 위한 사용자 알림 메시지 추가.

[joeholee]

아리스토텔레스가 그랬죠. 인간은? 사회적 동물이라고. 그대의 노력 덕에 지구촌 70억 인구가 모두 한마음 한뜻으로 이토리 유저가 되었습니다. 감사한 일이네요. 💯