Alert
사용자에게 중요한 정보를 알리는 정적 메시지 컴포넌트입니다.
개요
Alert는 사용자에게 중요한 정보를 전달하는 정적 메시지 컴포넌트입니다. 정보, 성공, 경고, 오류 네 가지 유형을 지원하며, role 속성으로 스크린리더 동작을 제어할 수 있습니다.
정보
새로운 버전이 출시되었습니다. 업데이트를 확인해주세요.
성공
파일이 성공적으로 저장되었습니다.
설치
사용법
Alert 컴포넌트를 import하고 variant와 title을 지정하여 사용합니다.
예제
유형
info, success, warning, error 네 가지 유형을 지원합니다. 각 유형에 맞는 색상과 기본 아이콘이 적용됩니다.
정보
새로운 버전이 출시되었습니다.
성공
파일이 성공적으로 저장되었습니다.
경고
저장 공간이 부족합니다.
오류
서버 연결에 실패했습니다.
제목만
간단한 메시지는 title만 사용하여 표시할 수 있습니다.
새로운 알림이 있습니다.
작업이 완료되었습니다.
설명만
title 없이 children만 사용하여 상세 설명을 표시할 수 있습니다.
이 페이지는 현재 베타 버전입니다. 피드백을 보내주세요.
비밀번호가 90일 후 만료됩니다. 미리 변경해주세요.
닫기 버튼
closable prop으로 닫기 버튼을 표시하고, onClose 콜백으로 닫기 이벤트를 처리합니다.
닫을 수 있는 알림
이 알림은 닫기 버튼을 클릭하면 사라집니다.
주의
이 작업은 되돌릴 수 없습니다.
커스텀 아이콘
icon prop으로 커스텀 아이콘을 지정하거나 icon={false}로 아이콘을 숨길 수 있습니다.
알림 설정
새로운 알림을 받으려면 설정에서 활성화하세요.
보안 인증 완료
2단계 인증이 성공적으로 설정되었습니다.
빠른 작업
빠른 작업 모드가 활성화되었습니다.
아이콘 없음
아이콘 없이 텍스트만 표시됩니다.
Role 속성
role prop으로 스크린리더의 동작을 제어합니다. alert는 즉시 읽히고, status는 대기 후 읽힙니다.
긴급 알림
시스템 점검이 5분 후 시작됩니다. 작업을 저장해주세요.
상태 업데이트
백그라운드 동기화가 완료되었습니다.
접근성
Alert는 WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
- role 속성: role="alert"는 긴급 메시지에, role="status"는 일반 상태 알림에 사용합니다.
- aria-live: alert는 assertive, status는 polite로 설정되어 스크린리더가 적절히 읽습니다.
- aria-atomic: true로 설정되어 변경 시 전체 내용을 읽습니다.
- 키보드 접근성: 닫기 버튼은 Tab으로 포커스 가능하고 Enter/Space로 활성화됩니다.
- 명도 대비 4.5:1 이상을 준수하여 시각적 접근성을 보장합니다.