상태 · uyoolabs ui

상태

진행 · 승인 상태는 모양으로, 접속 상태는 네 가지 점 모양으로 말합니다. 색은 거들 뿐입니다.

비어 있으면 시작 전 · 대기, 채워져 있으면 완료 · 승인, 체크는 완료 이후, 사선은 실패 · 차단입니다. 채움 정도로 단계를 구분하므로 색을 구분하기 어려운 사용자도 상태를 알 수 있습니다. 글리프와 점은 장식(aria-hidden)이고 상태 이름은 옆의 글자가 말합니다.

import: import { StatusGlyph, StatusLabel, PresenceDot } from "@uyoolabs/ui/ui";
쓰는 경우: 작업 표 · 변경 요청 · 결제 처리의 상태는 StatusLabel 로, 채널 멤버 · 메시지 머리 · 프로필의 접속 상태는 PresenceDot(아바타 위는 Avatar 의 presence)으로 씁니다.
쓰지 않는 경우: 버튼 · 메뉴 항목의 동작 아이콘으로 쓰지 않습니다. 한 행에 상태 글리프를 둘 이상 두지 않습니다. 반려 · 방해 금지 · 자리 비움에 빨강을 쓰지 않습니다. className 으로 색 · 크기를 덮지 않고 size 를 씁니다.

StatusGlyph · StatusLabel

9가지 kind. 진행형은 원, 승인형은 마름모입니다.

kind	상태	색	터미널	쓰는 경우
todo	시작 전	muted	○	예약 · 대기 중인 처리
in-progress	진행 중	info	◔	처리 중. 진행률을 알면 채움 비율로 표시합니다
done	완료	ok	●	처리가 끝남
blocked	실패 · 차단	bad	⊘	오류로 멈췄거나 선행 조건이 막힘
draft	초안	faint	◌	아직 검토 요청 전
pending	승인 대기	warn	◇	검토 · 승인 · 수락을 기다림
approved	승인됨	fg	◆	결정이 내려짐
approved-done	승인 후 완료	ok	◆	승인된 내용의 처리까지 끝남
rejected	반려	neutral	◈	거절됨. 오류가 아니라 사람의 결정이라 빨강이 아닙니다

진행 중완료반려

진행 상태 표현 규칙

무엇을 말하는지에 따라 꼴을 고릅니다.

무엇	꼴
처리 단계(가져오기 · 결제 처리)	진행형 원 + 글자. 진행률을 알면 채움
사람의 결정(검토 · 승인)	승인형 마름모 + 글자
진행률(업로드 · 가져오기 %)	막대 + 숫자(%)
카드 · 상세 머리의 요약	배지 하나(Badge · StatusBadge)
실패 · 차단	빨강은 여기에만. 반려 · 방해 금지 · 나빠짐은 빨강이 아닙니다

PresenceDot

회색으로 봐도 갈리는 네 모양입니다. 다른 사람의 접속 변화는 알리지 않습니다.

온라인online꽉 찬 원 · ok

자리 비움away초승달 · warn

방해 금지dnd빼기 원 · 진한 글자색

오프라인offline빈 고리 · faint

키보드

키보드 동작이 없습니다. 포커스를 받지 않는 정적 그림입니다. 아이콘만 쓰는 자리는 포커스를 받는 부모(버튼 · 행)가 이름과 툴팁을 갖습니다.

props

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

StatusGlyph

prop	타입	기본값	설명
kind필수	"todo" \| "in-progress" \| "done" \| "blocked" \| "draft" \| "pending" \| "approved" \| "approved-done" \| "rejected"	—
progress	number	0.5	in-progress 의 채움 비율(0~1). 진행률을 알 때만 준다. 모르면 기본값 0.5 로 둔다.
size	"sm" \| "md" \| "lg"	"sm"	sm 14 · md 16 · lg 20
label	string	—	아이콘만 쓰는 자리의 이름. 주면 role="img" 로 읽힌다. 옆에 상태 글자가 있으면 주지 않는다
className	string	—	배치용. 색 · 크기를 덮지 않는다

StatusLabel

prop	타입	기본값	설명
kind필수	"todo" \| "in-progress" \| "done" \| "blocked" \| "draft" \| "pending" \| "approved" \| "approved-done" \| "rejected"	—
progress	number	—
size	"sm" \| "md"	"sm"	sm 13 · md 14
className	string	—
children필수	ReactNode	—	상태 이름(필수). 색 · 모양만으로 말하지 않는다

PresenceDot

prop	타입	기본값	설명
status필수	"online" \| "away" \| "dnd" \| "offline"	—
size	"sm" \| "md" \| "lg" \| "xl"	"md"	sm 8 · md 10 · lg 12 · xl 16(아바타 24 · 32 · 40 · 64 와 짝)
label	boolean \| string	—	true 면 labels[status] 를 옆에 글자로, 문자열이면 그 글자
lang	"ko" \| "en" \| "ja"	—
labels	Partial<PresenceLabels>	—
className	string	—