NotificationToast
shell토스트 알림 시스템. ToastProvider + useToast hook 또는 프로그램매틱 toast() API로 전역 알림 관리.
컴포넌트 의존 관계
깊이
100%
기본 사용
테스트 커버리지
2026년 2월 4일4/4 통과
4성공
0실패
4전체
- ToastProvider 컨텍스트를 제공한다
- addToast로 토스트를 추가할 수 있다
- 토스트에 닫기 버튼이 있다
- 닫기 버튼 클릭으로 토스트를 제거할 수 있다
ToastProvider Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 앱 컨텐츠 |
position | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-right" | 토스트 표시 위치 |
defaultDuration | number | 5000 | 기본 표시 시간 (ms) |
useToast Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
returns | { toasts, addToast, removeToast } | — | 토스트 상태 및 제어 함수 |
toast Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
toast.success / error / info / warning | (message: string, options?) => string | — | 훅 없이 어디서든 호출하는 프로그램매틱 API. toast.dismiss(id) / toast.clear()도 제공 |
NotificationToast Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
toast* | ToastMessage | — | 토스트 메시지 객체 |
onDismiss* | () => void | — | 닫기 핸들러 |
Import
tsx
import {
ToastProvider,
useToast,
NotificationToast,
toast,
} from "@reopt-ai/opt-ui";고급 사용법
에러 핸들링과 함께 사용하기, 커스텀 duration 설정 등 고급 패턴은 고급 패턴 가이드를 참고하세요.