컴포넌트
Toast Progress
자동 닫힘 진행바가 달린 토스트 알림으로, hover나 포커스 시 rAF 기반 타이머가 정확히 일시정지·재개된다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ToastProgress-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| title | string | "저장 완료" | 토스트 제목(굵은 한 줄) |
| description | string | "변경사항이 안전하게 반영되었습니다." | 부가 설명(선택, 두 번째 줄) |
| tone | "info" | "success" | "warning" | "error" | "success" | 토스트 톤(강조색·아이콘 결정, 미지원 값은 info 폴백) |
| duration | number | 4000 | 자동 닫힘까지의 시간(ms). 0 이하이면 자동 닫힘 없음 |
| showProgress | boolean | true | 하단 진행바 노출 여부 |
| pauseOnHover | boolean | true | 마우스 hover / 포커스 시 타이머 일시정지 여부 |