← 목록으로
토스트/알림 메시지
토스트 알림
다양한 타입의 토스트 알림을 표시할 수 있습니다. 호버 시 자동 닫힘이 일시 중지됩니다.
다중 토스트
여러 개의 토스트를 동시에 표시할 수 있습니다. (최대 5개)
14. 토스트/알림 메시지
Design a toast notification system:
**Toast Container**:
- Position: fixed, configurable (top-right default)
- Z-index: 9999
- Stack direction: newest on top
- Gap: 12px between toasts
- Max visible: 5 (older ones queue)
**Toast Component**:
- Min-width: 300px, max-width: 420px
- Padding: 16px
- Border-radius: 12px
- Shadow: 0 10px 15px -3px rgba(0,0,0,0.1)
- Background: white (or dark variant)
**Variants**:
- Info: blue-500 accent, info icon
- Success: green-500 accent, check-circle icon
- Warning: amber-500 accent, alert-triangle icon
- Error: red-500 accent, x-circle icon
**Structure**:
- Icon (24px) | Title + Description | Close X
- Title: 14px semibold
- Description: 13px gray-600
- Optional action button (text link style)
**Behavior**:
- Auto-dismiss: 5000ms (configurable)
- Progress bar at bottom showing time remaining
- Hover pauses timer
- Swipe to dismiss on mobile
- Close button always visible
**Animation**:
- Enter: slide in from right + fade
- Exit: slide out to right + fade
- Stack reorder: smooth layout animation
Tech: React + Sonner library (or custom with Framer Motion)