toast
화면 아래에 잠깐 떴다 사라지는 짧은 확인 메시지다. 함수 한 번 호출로 띄운다. 되돌리기 같은 행동 하나를 붙일 수 있다.
- 분류
- 알림과 안내
- 가져오기
import { ToastHost } from '@/ui/toast'- 코드 위치
apps/mobile/src/ui/toast.tsx:28
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
자료를 삭제했어요
언제 쓰는가#
쓴다
- 저장, 삭제, 복사처럼 일이 끝났다는 것을 짧게 알릴 때 쓴다.
- 삭제 뒤에는 되돌리기 행동을 붙여 6초 동안 보여 준다.
쓰지 않는다
- 꼭 읽어야 하는 오류에는 쓰지 않는다. 사라져 버린다.
Notice나dialog를 쓴다. - 한 번에 둘 이상 띄우지 않는다. 새 토스트가 이전 것을 대신한다.
- 긴 문장을 넣지 않는다. 한 줄이다.
종류#
| 이름 | 설명 |
|---|---|
| toast.done | 완료. 체크 원(success)과 글자. |
| toast.info | 안내. 정보 아이콘과 글자. |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 좌우 16, 최소 높이 50 | 탭 바 위 76 + 안전 영역 위에 뜬다. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 나타남 | 아래에서 위로 스프링(damping 18)으로 떠오른다. |
| 표시 | 행동이 없으면 2400ms, 행동(되돌리기)이 있으면 6000ms. |
| 사라짐 | 160ms 동안 내려가며 사라진다. |
사용 방법#
앱 맨 위에 한 번 놓기
앱 맨 위에 한 번 놓기
import { ToastHost } from '@/ui/toast';
<ToastHost />띄우기
띄우기
import { toast } from '@/ui/toast';
toast.done('저장했어요');
toast.done('자료를 삭제했어요', { label: '되돌리기', onPress: restore });
toast.info('오프라인이에요');속성(props)#
| 함수 | 형태 | 설명 |
|---|---|---|
toast.done | (text: string, action?: Toast['action']) | 완료 토스트. 두 번째 인자로 행동 { label, onPress }를 줄 수 있다. |
toast.info | (text: string, action?: Toast['action']) | 안내 토스트. 같은 형식이다. |
속성이 없다.
ToastHost는 속성이 없다. 앱 루트와 시트(Sheet) 안에 한 번씩 둔다. 시트는 앱 루트를 가리기 때문에 시트 안에서 띄운 토스트는 시트가 자기 ToastHost로 그린다.
치수와 토큰#
- 모양
- 모서리 18, 좌우 16, 위아래 13, 최소 높이 50,
shadow(2) - 바탕
- 라이트
text(진한 색), 다크cardStrong. 색이 아니라 한 줄 막대다 - 글자
smallStrong, white. 행동 글자는 앱이#8DB8FF를 직접 지정한다(웹에서는primaryLine을 쓴다)- 아이콘
- 18px, 완료는
success채운 원 - 위치
- 아래 = max(안전 영역, 12) + 76
접근성#
accessibilityLiveRegion="polite", 역할alert라서 나타나면 읽어 준다.- 사라지는 시간이 짧으므로(2.4초) 중요한 정보를 토스트에만 두지 않는다.
- 행동 글자는
hitSlop10으로 눌리는 영역을 넓힌다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 토스트 글자 (13px 굵게) | white | text | 17.15:1 통과1.14:1 미달16.48:1 통과1.30:1 미달 | 4.5:1 (작은 글자) |
잘한 예와 잘못한 예#
삭제했어요되돌리기
저장 실패를 2초 토스트로만 알림