DescriptionList
먼저 보고, 그다음 계약을 읽습니다
레코드 하나의 필드를 세로로 읽는 키·값 목록(<dl>).
Component intent의도와 경계 읽기
artifact·문서·계약 상세 화면의 '필드명 : 값' 두 열을 담당한다. 루트 <dl> 이 곧 2열 grid 이고 키 열 폭은 --axe-kv-key-w (기본 8.75rem) 로 표면마다 조정한다. 여러 레코드를 행으로 비교하는 DataTable 과 역할이 다르다 — 이쪽은 레코드 하나의 필드를 훑는 용도다. 화면 폭이 30rem 이하로 좁아지면 한 열로 쌓여 값이 눌리지 않는다. React 는 각 행을 <div class="axe-kv__row"> 로 감싸지만 CSS 가 display: contents 로 grid 참여만 넘기므로, 래퍼 없는 평면 dt/dd 마크업도 동일하게 정렬된다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { DescriptionList } from "@axe/ui";<DescriptionList items={[ { id: "kind", term: "kind", value: "decision" }, { id: "visibility", term: "visibility", value: "org" }, { id: "created_at", term: "created_at", value: "2026-07-28 14:02 KST" }, { id: "created_by", term: "created_by", value: "index-agent" }, ]}/>import { DescriptionList } from "@axe/ui";<DescriptionList compact style={{ "--axe-kv-key-w": "5.5rem" } as React.CSSProperties} items={[ { id: "status", term: "상태", value: "결재 대기" }, { id: "requester", term: "기안자", value: "강태훈" }, { id: "due", term: "기한", value: "2026-08-05" }, ]}/><dl class="axe-kv"> <dt class="axe-kv__key">kind</dt> <dd class="axe-kv__value">decision</dd> <dt class="axe-kv__key">visibility</dt> <dd class="axe-kv__value">org</dd></dl>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
items | DescriptionListEntry[] | — | — | 키·값 행 목록. `{ id?: string; term: ReactNode; value: ReactNode }`. id 는 React key 로만 쓰이며 생략 시 배열 인덱스를 쓴다. children 과 함께 주면 items 가 먼저 렌더된다. |
compact | boolean | — | — | 행 간격을 좁힌다(axe-kv--compact). 좁은 context rail 이나 카드 안쪽에서. |
...rest | React.HTMLAttributes<HTMLDListElement> | — | — | className 병합, 나머지는 루트 <dl> 로 전파. ref 도 <dl> 로 forward. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-kv | stable | 루트 <dl>. 키 열(--axe-kv-key-w) + 값 열 2열 grid. |
.axe-kv--compact | stable | 행 간격을 좁히는 밀도 변형. |
.axe-kv__row | stable | dt+dd 한 쌍을 감싸는 선택적 <div>. display: contents 라 박스를 만들지 않는다. |
.axe-kv__key | stable | 키 <dt> — muted 색. |
.axe-kv__value | stable | 값 <dd> — margin 0 + 긴 식별자 줄바꿈(overflow-wrap: anywhere). |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
네이티브 <dl>/<dt>/<dd> 시맨틱을 그대로 쓴다 — 별도 role 불요. 행 래퍼 <div> 는 HTML 명세가 dl 자식으로 허용하는 그룹핑이며, display: contents 여도 dt/dd 의 관계는 유지된다.
상호작용 없는 정적 표면이라 키보드 계약이 없다. 값이 링크나 버튼이면 그 요소 자신의 포커스 계약을 따른다. 좁은 폭에서 한 열로 쌓일 때도 dt 가 dd 앞에 오는 읽기 순서는 그대로다.