알림 디자인 스펙¶

요지¶

GNB의 알림센터와 분류별 알림 설정 화면의 흐름·상태를 다룬다. 아래 화면·컴포넌트·상태는 확정 디자인이 없어 기획(prd) 흐름에서 역산한 1차 골격이다.

🚧 내용 추가 필요

알림센터·설정 토글 전용 Figma 미입수. 디자이너가 확정 시 — 데스크탑 드롭다운 vs 모바일 풀스크린/시트 레이아웃·미확인 배지 디자인·알림 항목 카드(읽음/미읽음 구분)·마스터 ALL + 분류 토글 연쇄 비활성 시안을 본문에 명세. 아래는 그 전까지의 정책 기반 골격.

상위 PRD (링크)¶

기획(트리거 7종·SSE·분류별 설정·90일 보관)은 prd, 구현은 frd.

사용자 플로우¶

GNB 알림 아이콘(미확인 배지)
  └─ 알림센터(최신순)
       ├─ 항목 클릭 → 대상 화면(질문/수업노트/과제…) (targetMetadata 기반)
       ├─ 모두 읽음 처리
       └─ 설정 → 마이페이지 알림 설정(토글)

GNB 알림 아이콘(미확인 배지) → 알림센터 패널/페이지 → 항목 클릭 → targetMetadata 기반 대상 화면 이동.
마이페이지 > 알림 설정: 마스터 ALL + 분류별 토글.

화면 · 컴포넌트 (Figma 링크)¶

알림 아이콘: 미확인 수 배지(0이면 미표시).
알림 항목: message·category·시간(regDate)·읽음 여부를 시각 구분.
알림센터: 최신순 목록, "모두 읽음 처리" 액션, 개별 삭제.
설정 토글: 마스터 ALL + 6개 분류 토글. ALL off 시 하위 분류 비활성(연쇄).
에셋·Figma 미확정. 아이콘·토글·뱃지 토큰은 design-system.

인터랙션 · 상태¶

실시간 수신(SSE): 배지·목록 자동 갱신.
액션: "모두 읽음 처리", 개별 삭제, 항목 클릭 이동.
상태: 로딩 / 빈 목록 / 미읽음 강조 / 읽음 / 삭제.
설정 연쇄: ALL off → 하위 분류 비활성.

접근성¶

배지·읽음 상태에 색 외 보조 표식(아이콘/볼드) 병행.
알림 항목 키보드 포커스·스크린리더 라벨(message + 시간).

개발 핸드오프 노트¶

모바일 알림센터는 풀스크린/시트, 데스크탑은 드롭다운 패널. 브레이크포인트 공통 규칙 responsive.
항목 카드·배지·토글 상태와 category/targetMetadata 매핑 규약은 dev-handoff, API 구조는 frd §2.