컴포넌트
Toast
화면 모서리에서 슬라이드 인 하며 자동 소멸하는 토스트 알림 컴포넌트. 성공·에러·정보 타입별 색상/아이콘, 스택 정렬, 진행바, 닫기 버튼을 지원한다. rAF 등장 트랜지션과 setTimeout 자동 소멸, CSS 스코프 키프레임 진행바로 자작했으며 외부 라이브러리 코드나 URL을 쓰지 않는다. role=status/alert·aria-live·키보드 닫기·useReducedMotion·SSR 안전·타이머 cleanup을 갖춘다.
- 분류
- 컴포넌트
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Toast-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | ToastItem[] | DEFAULT_ITEMS (3개 샘플) | 초기 토스트 목록. 각 항목은 type(success|error|info)·title·description·duration을 가진다. |
| position | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-right" | 토스트 스택이 붙는 화면 모서리 위치. 위치에 따라 슬라이드 방향과 스택 순서가 결정된다. |
| duration | number | 4000 | 자동 소멸 시간(ms). 개별 항목의 duration이 우선한다. |
| showProgress | boolean | true | 남은 시간을 시각화하는 하단 진행바 표시 여부. |
| transition | number | 360 | 슬라이드 인/아웃 전환 시간(ms). reduced motion에서는 0으로 처리. |
| maxVisible | number | 4 | 동시에 표시할 최대 개수. 초과 시 오래된 항목부터 퇴장 처리. |
| gap | number | 10 | 스택 항목 간 세로 간격(px). |
| accentFrom | string | "#C084FC" | 그라데이션 시작 강조 색상 (Vivid Kit 퍼플). |
| accentTo | string | "#EC4899" | 그라데이션 끝 강조 색상 (Vivid Kit 핑크). |
| surfaceColor | string | "#16121F" | 토스트 카드 표면 배경 색상. |
| borderColor | string | "#2A2440" | 토스트 카드 보더 색상. |
| onDismiss | (item: ToastItem) => void | undefined | 토스트가 완전히 닫힐 때 호출되는 콜백. |
| contained | boolean | false | true면 position:absolute로 부모 컨테이너 기준 배치(데모/프리뷰용), false면 fixed로 뷰포트 고정. |
| className | string | "" | 스택 컨테이너에 추가할 CSS 클래스. |