Toast
사용자에게 일시적인 알림 메시지를 표시하는 컴포넌트입니다. Radix UI 기반으로 접근성이 보장됩니다.
개요
Toast는 작업 완료, 오류, 경고 등 사용자에게 일시적인 피드백을 제공합니다. useToast 훅을 통해 프로그래밍 방식으로 표시할 수 있습니다.
설치
사용법
ToastProvider로 앱을 감싸고, useToast 훅으로 toast 함수를 호출합니다. Toaster 컴포넌트는 Toast를 렌더링합니다.
예제
Action
action prop으로 Toast에 버튼을 추가할 수 있습니다.
Duration
duration prop으로 Toast 표시 시간을 조절할 수 있습니다. 기본값은 5000ms입니다.
Static Toast
Toast 컴포넌트를 직접 렌더링하여 정적인 알림을 표시할 수 있습니다.
오른쪽 하단에 떠있는 toast 를 보시오.
Position
ToastProvider의 position prop으로 Toast 표시 위치를 지정할 수 있습니다.
현재 페이지는 bottom-right 위치를 사용합니다.
top-left
top-center
top-right
bottom-left
bottom-center
bottom-right (기본값)
접근성
WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
ARIA 속성
aria-live="polite": 스크린리더에 변경 사항 알림role="status": 상태 메시지임을 명시- 닫기 버튼에
aria-label="닫기"적용
사용자 제어
- 마우스 호버 시 타이머 일시 정지
- 스와이프로 닫기 지원 (모바일)
F8키로 Toast 영역에 포커스 → 액션 버튼 접근duration: Infinity로 자동 닫힘 비활성화 가능
키보드 지원
| 키 | 동작 |
|---|---|
F8 | Toast 영역으로 포커스 이동 |
Tab | Toast 내 버튼으로 포커스 이동 (액션 → 닫기) |
Enter / Space | 버튼 활성화 |
Escape | Toast 닫기 |
키보드 접근 흐름: F8 → Toast 영역 포커스 → Tab → 액션/닫기 버튼 포커스. F8은 브라우저와 충돌하지 않는 키로, hotkey prop으로 변경 가능합니다.