EmptyState
보여 줄 내용이 없을 때의 안내다. 옅은 아이콘 타일, 제목, 한 줄 설명, 다음 행동 버튼으로 이루어진다.
- 분류
- 알림과 안내
- 가져오기
import { EmptyState } from '@/ui/feedback'- 코드 위치
apps/mobile/src/ui/feedback.tsx:45
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
자료가 없어요사진을 찍어 첫 자료를 추가해 보세요.
언제 쓰는가#
쓴다
- 목록이나 화면에 데이터가 전혀 없을 때 쓴다. 예: 자료가 하나도 없는 과목.
- 다음에 할 일을
action에 버튼으로 넣는다(예: "자료 추가").
쓰지 않는다
- 데이터가 일부만 없을 때 쓰지 않는다. 그 부분만 안내한다.
- 오류를 알리는 데 쓰지 않는다. 복구 행동이 있는
Notice를 쓴다.
종류#
| 이름 | 설명 |
|---|---|
| 아이콘 타일 | Icon을 주면 옅은 원(96)과 둥근 타일(64) 안에 아이콘(28)을 그린다. 색은 tint. |
| 직접 그림 | icon에 원하는 요소를 넣는다. |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 위아래 32, 좌우 16 | 요소 사이 6, 타일 아래 8. |
상태#
자료가 없어요사진을 찍어 첫 자료를 추가해 보세요.
| 상태 | 모습과 동작 |
|---|---|
| 기본 | 기본 모습이다. |
사용 방법#
기본
기본
import { EmptyState } from '@/ui/feedback';
import { Inbox } from '@/ui/icons';
<EmptyState
icon={<Inbox aria-hidden />}
title="자료가 없어요"
body="사진을 찍어 첫 자료를 추가해 보세요."
action={<PrimaryButton label="자료 추가" arrow={false} onPress={openCapture} />}
/>속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
title | string | — | 필수 | 제목(headline). |
body | string | — | 선택 | 한 줄 설명. 단어가 중간에서 끊기지 않게 처리된다. |
action | ReactNode | — | 선택 | 아래에 놓을 행동 버튼. 폭을 가득 채운다. |
icon | ReactNode | — | 선택 | 아이콘 타일 대신 직접 그릴 요소. |
Icon | IconType | — | 선택 | 아이콘 컴포넌트. 있으면 타일을 그린다. |
tint | string | color.primary | 선택 | 타일 색. 기본 color.primary. |
치수와 토큰#
- 타일
- 바깥 원 96(
tint6%), 둥근 타일 64·모서리 22(tint13%), 아이콘 28 선 2 - 글자
- 제목
headline, 설명smalltextSecondary, 모두 가운데 - 행동
- 위 12(
md), 폭 가득
접근성#
- 제목과 설명이 읽힌다. 아이콘 타일은 장식이다.
- 행동 버튼에는 이름이 있다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 설명 (13px) | textSecondary | bg | 4.13:1 미달7.65:1 통과4.69:1 통과7.96:1 통과 | 4.5:1 (작은 글자) |
잘한 예와 잘못한 예#
과목이 없어요
내용 없음
함께 보는 컴포넌트#
- Notice: 화면 안에 끼워 넣는 한 줄 안내 상자다. 안내(파랑), 주의(주황), 오류(빨강) 세 가지 톤이 있다.
- Skeleton: 내용이 불러와지기 전에 그 자리를 채우는 깜빡이는 막대다.
- PrimaryButton: 서비스 주색 그라데이션으로 채운 알약 모양 버튼이다. 한 화면에서 가장 중요한 행동 하나에 쓴다.