WIZ Design System

데모#

상단 상태 컨트롤로 기본·로딩(Skeleton)·빈·오류를 전환해 데이터 테이블의 상태 매트릭스를 검수합니다. 실제 데이터 로드는 없습니다(UI Reference).

상태

조직 사용자 목록
사용자	역할	상태	가입일
김도현dohyun@wiz.team	관리자	활성	2025-11-02
이서연seoyeon@wiz.team	멤버	활성	2026-01-14
박준호junho@wiz.team	멤버	대기	2026-05-30
최유진yujin@partner.io	게스트	비활성	2026-03-09

Admin Console — 사용자 목록(역할·상태 Badge, 행 액션) + 상태 매트릭스

구성#

영역	역할
툴바	화면 제목 + 요약(구성원 수·정책) + 1차 행동(사용자 추가)
테이블	Table의 `render`로 사용자(Avatar+이메일)·역할·상태·액션 셀 구성
역할 Badge	관리자(primary) · 멤버(neutral) · 게스트(info)
상태 Badge	활성(success) · 대기(warning) · 비활성(neutral)

상태·역할은 색 + 텍스트 라벨을 함께 써 색만으로 구분하지 않습니다.

데이터 테이블 규약#

행 키는 rowKey로 명시합니다(인덱스 키는 재정렬 시 위험).
caption을 주면 좁은 화면의 가로 스크롤 래퍼가 키보드 region이 됩니다.
커스텀 셀은 render로 구성하고, 단순 값은 row[key] 기본 렌더에 맡깁니다.
정렬·행 선택·벌크 액션이 필요하면 DataGrid로 에스컬레이션합니다 — Table은 표시 전용(의도된 단순성)입니다.

상태#

데이터 테이블은 행복 경로 하나가 아니라 상태 매트릭스로 다룹니다. 데모의 상태 컨트롤로 전환합니다.

상태	트리거	표현
기본	데이터 있음	Table에 행 렌더
로딩	데이터 페치 중	행 운율을 모사한 Skeleton 행 + 컨테이너 `aria-busy` + 1차 행동 비활성
빈	결과 0건	Table `emptyContent` — 제목 + 다음 행동 안내("사용자 추가")
오류	로드 실패·네트워크	CTA 위 `FormMessage(error)`(Tier 2) + 다시 시도

빈 상태는 막다른 길이 아니라 다음 행동을 제시합니다. 오류는 어느 필드가 아니라 표 전체 범위라 메시지 위계 Tier 2(FormMessage)로 둡니다.

적응형 동작#

데이터 테이블은 적층 대신 가로 스크롤로 좁은 폭에 대응합니다 — 열 구조와 헤더 정렬을 유지하는 것이 데이터 가독성에 유리하기 때문입니다.

컨테이너 폭	동작
넓음	사용자·역할·상태·가입일·액션 열을 한눈에 표시
좁음	`caption` 제공 시 스크롤 래퍼가 키보드 `region`(`tabIndex=0`)이 되어 가로 스크롤(WCAG 2.1.1)

접근성#

계약	구현
표 시맨틱	네이티브 `<table>` — `caption`이 표 이름, `<th>` 헤더는 열 범위
가로 스크롤	`caption` 제공 시 스크롤 래퍼가 `role="region"`·`tabIndex=0`로 키보드 도달(WCAG 2.1.1)
색 비의존	역할·상태는 색 + 텍스트 라벨 병행(Badge) — 색맹 안전(1.4.1)
로딩	컨테이너 `aria-busy="true"`로 보조기술에 진행 중 전달
오류 전달	`FormMessage(error)`가 `role="alert"`로 즉시 낭독
빈 상태	`emptyContent`가 표 흐름 안에서 읽힘(빈 셀 방치 금지)

사용 컴포넌트#

Table(caption·emptyContent) · Avatar · Badge · Skeleton(로딩) · FormMessage(오류, Tier 2) · Button · SegmentedButton(데모 컨트롤). 표는 컴포넌트가 스타일·접근성을 소유하고, 패턴은 툴바·셀 조합과 상태 매트릭스를 더합니다 — 정렬·선택은 DataGrid 소관. 실제 권한 변경은 없습니다(UI Reference).

데모#

사용자 관리

구성#

데이터 테이블 규약#

상태#

적응형 동작#

접근성#

사용 컴포넌트#