컴포넌트
AlertBanner
상단에서 아래로 슬라이드다운되며 등장하는 경고 배너로, 심각도별 색상/아이콘과 닫기 버튼을 제공한다. autoDismissMs를 지정하면 hover/focus 시 일시정지되는 자동 닫힘 진행 바가 함께 표시된다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/AlertBanner-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| severity | "info" | "success" | "warning" | "danger" | "warning" | 배너 심각도. 강조색과 아이콘을 결정한다. 미지원 값은 info로 폴백. |
| title | string | "연결이 불안정합니다" | 굵게 표시되는 제목 줄. 비우면 제목 줄이 생략된다. |
| message | string | "네트워크 상태를 확인한 뒤 다시 시도해 주세요." | 본문 메시지 텍스트. |
| dismissible | boolean | true | 닫기(X) 버튼 노출 여부. |
| autoDismissMs | number | 0 | 자동 닫힘까지의 시간(ms). 0 이하이면 자동 닫힘 비활성화(수동 닫기만). 양수이면 진행 바가 표시되고 hover/focus 시 일시정지된다. |
| actionLabel | string | undefined | 우측 액션 버튼 라벨. 비우면 액션 버튼이 숨겨진다. |