[FEAT] 실시간 알림 시스템 연동 (SSE)

[DDINGJOO]

개요

백엔드 알림 시스템과 프론트엔드를 SSE(Server-Sent Events)로 연동합니다.

구현 내용

1. 알림 타입 정의

• NotificationType 타입 정의
• 각 알림별 Payload 인터페이스 정의
  • BADGE_EARNED (배지 획득)
  • DAILY_COMPLETE (일일 학습 완료)
  • STREAK_REMINDER (연속 학습 리마인더)
  • TEST_COMPLETE (단어 테스트 완료)
  • NEWS_QUIZ_COMPLETE (뉴스 퀴즈 완료)
  • GAME_END (게임 종료)
  • GAME_STREAK (게임 연속 정답)
  • OPIC_COMPLETE (OPIc 연습 완료)

2. SSE 연결 Hook

• useNotifications 훅 구현
• EventSource API를 사용한 SSE 연결
• 자동 재연결 로직
• Heartbeat 처리

3. 알림 Context/Provider

• NotificationContext 생성
• 알림 목록 상태 관리
• 타입별 알림 처리 로직

4. UI 컴포넌트

• 알림 센터 (드롭다운)
• 토스트 알림
• 읽지 않은 알림 배지

5. 환경 변수

• VITE_NOTIFICATION_URL 추가

참고 문서

• BE_Repository/docs/frontend-notification-integration-guide.md

체크리스트

• 타입 정의
• useNotifications 훅
• NotificationContext
• 알림 센터 UI
• 토스트 알림
• 환경 변수 설정
• 테스트

[github-actions]

Jira: MESP-286

[github-actions]

Closed by PR #198