Critical Alerts

사용자에게 긴급하거나 중요한 정보를 전달하는 컴포넌트입니다. KRDS 긴급 공지 가이드라인을 준수합니다.

개요

설치

사용법

CriticalAlerts 컨테이너 안에 CriticalAlertItem을 배치합니다. 각 아이템은 variant로 긴급도를 지정합니다.

예제

Variant

variant prop으로 긴급도를 지정합니다: danger(긴급), ok(안전), info(안내)

  • 긴급

    전산 시스템 장애로 인해 서비스 이용이 일시 중단되었습니다.

커스텀 레이블

label prop으로 기본 레이블(긴급/안전/안내)을 변경할 수 있습니다.

  • 재난경보

    지진 발생! 즉시 안전한 곳으로 대피하세요.

배너 스타일

전체 너비 배너 스타일이 필요한 경우 CriticalAlertBanner를 사용합니다.

클릭 핸들러

href 대신 onLinkClick으로 클릭 이벤트를 처리할 수 있습니다.

접근성

WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.

  • role="list", aria-label로 목록 역할 명시
  • 배너 스타일은 role="alert", aria-live="polite" 적용
  • 아이콘은 장식용으로 스크린리더에서 숨김 처리
  • 링크/버튼에 키보드 포커스 스타일 제공