빈 상태 · 기다림

비었음 · 결과 없음 · 권한 없음 · 실패를 같은 자리에서 이유별로 말하고, 기다릴 때는 도착할 모양으로 기다립니다.

빈 자리는 파인 홈입니다. 그림 · 일러스트 대신 아이콘을 담은 파인 칸과 제목 한 줄, 설명, 다음에 할 일 하나(또는 둘)를 둡니다. 뼈대는 불투명도로만 숨 쉬고(1600ms), 번쩍이는 그라데이션은 쓰지 않으며 줄인 모션에서는 멈춥니다.

import: import { Empty, Skeleton, SkeletonRegion, Spinner } from "@uyoolabs/ui/ui";
쓰는 경우: 표 · 카드 · 목록 자리가 비었을 때 Empty(kind 로 이유를), 처음 불러올 때 Skeleton · SkeletonRegion, 보내는 중 · 새로 고침에 Spinner 를 씁니다.
쓰지 않는 경우: 빈 상태에 그림 · 일러스트를 두지 않습니다. primary 동작은 first-use 에만 둡니다. 권한 없음에 빨강을 쓰지 않습니다. 화면 전체를 덮는 스피너를 쓰지 않습니다. 첫 화면의 빈 상태는 announce 로 알리지 않습니다.
알림: 결과 수의 변화는 목록을 가진 쪽이 role=status 로 알립니다. Empty 는 포커스를 받지도 옮기지도 않습니다. SkeletonRegion 은 뼈대가 보일 때 한 번 '불러오는 중' 을 알리고, 내용이 오면 알리지 않습니다.

Empty

kind 4가지 × size 3가지(page · inline · line).

아직 채널이 없습니다

채널을 만들어 팀과 대화를 시작합니다.

결과가 없습니다

검색어를 바꾸거나 필터를 풉니다.

볼 권한이 없습니다

관리자에게 접근을 요청합니다.

작업을 불러오지 못했습니다

연결을 확인하고 다시 시도합니다.
오류 503 · req_8KQ2

아직 고정한 메시지가 없습니다.

막대 높이와 농도는 도착할 글을 따릅니다(body 10 · title 12 · value 20).

누른 동작 · 새로 고침 · 보내는 중을 기다릴 때. sm 14 · md 16 · lg 20.

보내는 중…

기다림 · 비었음 · 실패의 표현.

키	동작
`Tab`	Empty 의 동작 버튼만 포커스를 받습니다. 다시 시도를 누른 뒤에도 포커스는 그 버튼에 남습니다.

소스의 타입과 JSDoc 에서 생성한 표입니다. 컴포넌트를 고치면 pnpm gen 으로 다시 만듭니다.

prop	타입	기본값	설명
kind	"first-use" \| "no-results" \| "no-access" \| "error"	—	이유. 없으면 중립(아이콘도 없다)
icon	ReactNode	—	없으면 kind 의 기본 아이콘(hash · search · lock · alert). null 이면 아이콘 없음
title	ReactNode	—	제목 한 줄(14/600 · page 16)
description	ReactNode	—	설명(13 보조색, 최대 폭 360)
code	string	—	error 의 코드(req id). 작게 mono
actions	ReactNode	—	버튼들(sm). primary 는 first-use 에만
onRetry	() => void	—	error 이고 actions 가 없을 때 '다시 시도' secondary 를 그린다
size	"page" \| "inline" \| "line"	"inline"	page: 화면 전체 · inline: 카드 · 표 자리 · line: 좁은 자리 한 문장
announce	boolean	—	사용자가 시작한 요청의 실패일 때만 role="alert" 로 알린다
lang	"ko" \| "en" \| "ja"	—
labels	Partial<EmptyLabels>	—
className	string	—
children	ReactNode	—	v1 호환: title 이 없으면 children 을 설명으로 그린다(아이콘 없이)

prop	타입	기본값	설명
shape	"line" \| "circle" \| "block"	"line"	line(높이 10 · 반경 3) · circle · block
size	"body" \| "title" \| "value"	"body"	line 의 글자 높이. body 10 · title 12 · value 20
width	number \| string	—	줄 길이. 마지막 줄은 60% 안팎으로 짧게 둔다
height	number \| string	—	circle · block 의 높이(circle 은 width 가 없으면 같은 값)
className	string	—
style	CSSProperties	—

prop	타입	기본값	설명
loading필수	boolean	—	false 가 되면 children(진짜 내용)을 그린다
fallback필수	ReactNode	—	도착할 모양의 뼈대
delay	number	300	이 안에 오면 뼈대를 그리지 않는다(ms)
minDuration	number	400	한 번 그린 뼈대를 유지하는 최소 시간(ms)
lang	"ko" \| "en" \| "ja"	—
labels	Partial<SkeletonRegionLabels>	—
children필수	ReactNode	—

이 밖에 <div> props(children 제외)를 그대로 받습니다.