Notification Kit

알림 기능 키트. 알림 센터, 토스트, 실시간 알림, 푸시 알림을 포함합니다.

기술 스택

ZustandReact QueryAxiosSSE (Server-Sent Events)TypeScript

기능

  • 알림 벨 아이콘 (읽지 않은 개수 뱃지)
  • 알림 센터 패널 (슬라이드 패널)
  • 알림 아이템 (읽음/읽지않음, 삭제, 액션 버튼)
  • 토스트 알림 (자동 닫기, 수동 닫기)
  • 실시간 알림 수신 (SSE 연결)
  • 알림 설정 (이메일, 푸시, 사운드, 방해금지)
  • 무한 스크롤 목록
  • 알림 일괄 읽음 처리

파일 구조

설치

1. 의존성 설치

2. 코드 복사

아래 코드 탭에서 필요한 파일들을 복사합니다.

3. API 주소 변경

코드

사용 예시

접근성

  • 알림 벨에 aria-label로 읽지 않은 개수 표시
  • 알림 센터 패널은 role="dialog", aria-modal 적용
  • ESC 키로 패널 닫기 지원
  • 토스트는 role="alert", aria-live="polite" 적용
  • 포커스 트랩으로 키보드 네비게이션 지원
  • 삭제/읽음 처리 버튼에 적절한 라벨 제공