컬렉션 상태 화면
하나의 목록 영역에서 loading, 결과, empty, error 상태를 일관되게 설명합니다.
- 카테고리
- 시스템 상태
- 사용 컴포넌트
paneltableitempaginationskeletonempty-statealertstatus-labelbutton
실제 미리보기
문서 목록
공개 상태와 최근 수정일을 확인합니다.
사용할 때
사용 기준
표나 목록이 비동기 데이터를 기다리고 여러 결과 상태를 가질 때 사용합니다.
사용하지 않을 때
즉시 표시되는 정적 콘텐츠나 단일 폼 제출 결과에는 사용하지 않습니다.
구조
컬렉션 이름과 범위
현재 상태의 본문
상태별 다음 동작
결과가 있을 때의 페이지 이동
상태
loading고정 예시최종 목록 구조와 같은 Skeleton으로 공간을 유지합니다.
문서 목록
공개 상태와 최근 수정일을 확인합니다.
populated고정 예시실제 비교 가능한 열과 상태, 페이지 이동을 표시합니다.
문서 목록
공개 상태와 최근 수정일을 확인합니다.
문서 상태 수정일 운영 정책 발행됨 2026-10-07 릴리스 안내 초안 2026-10-06 운영 정책
수정일 2026-10-07
발행됨릴리스 안내
수정일 2026-10-06
초안empty고정 예시빈 이유와 가능한 첫 행동을 설명하고 가짜 결과를 만들지 않습니다.
문서 목록
공개 상태와 최근 수정일을 확인합니다.
표시할 문서가 없습니다.
첫 문서를 만들면 이 목록에 표시됩니다.
error고정 예시오류와 복구 가능한 재시도 동작을 목록 맥락 안에 둡니다.
문서 목록
공개 상태와 최근 수정일을 확인합니다.
문서 목록을 불러오지 못했습니다.
연결을 확인한 뒤 다시 시도해 주세요.
반응형 동작
작은 화면에서는 비교에 필요한 열만 유지하고 나머지는 Item 행으로 재배치합니다.
상태 제목과 재시도 동작은 가로 overflow 밖으로 숨기지 않습니다.
접근성
상태 제목과 다음 동작을 텍스트로 제공하고 loading과 error를 중복 발표하지 않습니다.
사용 예시
import {
Item,
ItemActions,
ItemContent,
ItemTitle,
} from "@/components/ui/item"
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
} from "@/components/ui/pagination"
import { Panel, PanelContent, PanelHeader, PanelTitle } from "@/components/ui/panel"
import { StatusLabel } from "@/components/ui/status-label"
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table"
<Panel aria-label="populated document collection">
<PanelHeader>
<PanelTitle>Documents</PanelTitle>
</PanelHeader>
<PanelContent>
<Table>
<TableBody>
<TableRow>
<TableCell>Operations policy</TableCell>
<TableCell>
<StatusLabel tone="success">Published</StatusLabel>
</TableCell>
</TableRow>
</TableBody>
</Table>
<Item>
<ItemContent>
<ItemTitle>Operations policy</ItemTitle>
</ItemContent>
<ItemActions>
<StatusLabel tone="success">Published</StatusLabel>
</ItemActions>
</Item>
<Pagination aria-label="Document pages">
<PaginationContent>
<PaginationItem>
<PaginationLink href="#" isCurrent>1</PaginationLink>
</PaginationItem>
</PaginationContent>
</Pagination>
</PanelContent>
</Panel>관련 문서
소스 경로
components/design-system/recipes/collection-state-surface-demo.tsx소스 보기