[FE] JWT 토큰 관리 및 세션 확장 UI 구현

[jiva-z]

개요

JWT 토큰 관리 및 세션 연장 기능을 구현하고, 사용자에게 토큰 만료 시간을 표시하는 UI를 추가합니다.

현재 상황

• 백엔드에서 JWT 토큰 관리 시스템 구현 완료
• 액세스 토큰과 리프레시 토큰을 사용한 인증 시스템 구축
• 토큰 만료 시간 연장 API 구현 완료

구현 필요 사항

1. 토큰 관리 시스템

• 로그인 시 액세스 토큰과 리프레시 토큰 저장
• 토큰 만료 시간 추적 및 관리
• 자동 토큰 갱신 로직 구현

2. 세션 타이머 UI

• 헤더에 토큰 만료까지 남은 시간 표시
• 사용자가 타이머 표시 여부를 설정할 수 있는 토글 기능
• 5분 전 세션 연장 알림 UI

3. 세션 연장 기능

• 만료 5분 전 연장 버튼 표시
• 연장 버튼 클릭 시 토큰 갱신 요청
• 갱신 성공/실패 시 적절한 피드백 제공

Tasks

• api.js에 토큰 관리 관련 함수 추가

  • 토큰 저장/조회/삭제
  • 토큰 만료 시간 계산
  • 토큰 갱신 요청

• 세션 타이머 컴포넌트 구현

  • 남은 시간 표시 UI
  • 타이머 표시 토글 기능
  • LocalStorage를 사용한 타이머 표시 설정 저장

• 세션 연장 모달 구현

  • 5분 전 알림 모달
  • 연장 버튼 및 연장 처리
  • 연장 결과 피드백

• 전역 상태 관리 설정

  • 토큰 상태 관리
  • 타이머 표시 상태 관리
  • 세션 연장 상태 관리

Expected Results

1. 사용자가 로그인 상태에서 헤더에 만료 시간 타이머 표시
2. 타이머 표시/숨김 설정 가능
3. 만료 5분 전 자동 알림 및 연장 옵션 제공
4. 세션 연장 시 자연스러운 UI/UX 제공

Related Files

• src/services/api.js
• src/components/common/SessionTimer.js (신규)
• src/components/common/SessionExtendModal.js (신규)
• src/components/layout/Header.js
• src/contexts/AuthContext.js

Technical Considerations

• 토큰 만료 시간 계산 시 서버-클라이언트 시간 차이 고려
• 백그라운드에서 자동 토큰 갱신 처리
• 사용자 설정 영구 저장을 위한 LocalStorage 활용