# Grid

많은 행을 페이지 단위로 보여주는 데이터 테이블입니다. 헤더는 고정되고, 컬럼은 정렬·이동·너비 조절·고정·필터를 지원합니다.

> 원본: `03_ASSET_GUIDE/catalog/grid.js` · CSS: `03_ASSET_GUIDE/styles/elements/grid.css`
> kind `component` · category `display` · status `stable` · specSource `measured`
> 함께 쓰는 블록: [Pagination](./pagination.md) (Footer 중앙) · [Select](./select.md) (Page size · 필터 조건) · [Text Input](./text-input.md) · [Multi Select](./multi-select.md) Option · [Button](./button.md) (필터 popover)

> [!NOTE]
> **출처는 `GRID_기능정의.pptx` 입니다**
> `WG2 작업폴더/디벨럭스/김유진/GRID_기능정의.pptx` (2026-08-25, 슬라이드 2장)에 정의된
> GRID 기능 ①~⑥ 과 Column 기능 Ⓐ~Ⓕ 를 그대로 옮겼습니다. 문구(`총 건수 : %NUM%` ·
> `로딩중입니다` · `조회된 데이터가 없습니다`)와 동작 규칙(정렬 순서, 페이지 번호 10개 상한,
> Row 개수 기본 100)은 원본 그대로이고, 치수·토큰은 `styles/elements/grid.css` 에서
> 실측했습니다. seed · Codeit 에는 대응 항목이 없습니다.

**기능 정의 대응표**

| 원본 | 이 문서 | 비고 |
| --- | --- | --- |
| ① 총 건수 : %NUM% | [총 건수](#총-건수) | 숫자 FORMATTER 적용. Footer 좌측 |
| ② PAGINATION | [Pagination](#pagination) | 처음 / 이전 / 번호 최대 10 / 다음 / 마지막. Footer 중앙. 별도 컴포넌트로 분리 |
| ③ Grid row 개수 설정 | [Page size](#page-size) | Default 100, Option 100·500·1000. Footer 우측, 컨트롤은 Select |
| ④ 헤더 고정 · 가로 스크롤 | [헤더 고정 · 가로 스크롤](#헤더-고정--가로-스크롤) | |
| ⑤ 데이터 조회시 로딩화면 | [로딩](#로딩) | `로딩중입니다` |
| ⑥ 데이터가 없는 CASE | [조회 결과 없음](#조회-결과-없음) | `조회된 데이터가 없습니다` |
| Ⓐ ROW CHECKBOX | [행 선택](#행-선택) | HEADER CHECKBOX → 전체 행 |
| Ⓑ COLUMN MOVE | [컬럼 이동](#컬럼-이동) | 드래그로 순서 변경 |
| Ⓒ 정렬 | [정렬](#정렬) | 내림차 → 오름차 → 기본값 |
| Ⓓ COLUMN RESIZE | [컬럼 너비 조절](#컬럼-너비-조절) | 드래그로 너비 조절 |
| Ⓔ COLUMN PINNED | [컬럼 고정](#컬럼-고정) | 가로 스크롤 고정 |
| Ⓕ COLUMN FILTER | [컬럼 필터](#컬럼-필터) | 텍스트 필터 + 데이터 필터 popover. 원본에 세부 설명이 없어 구성은 이 문서에서 정의 |

---

## 1. 구성

위에서 아래로 **Header** · **Body** · **Footer** 세 층입니다. 스크롤은 Header 와 Body 를
감싸는 영역에만 걸리고, Footer 는 그 바깥에 남아 항상 보입니다.

```
┌─ ⓪ atom-grid ────────────────────────────────────────────────┐
│┌─ __scroll ─────────────────────────────────────────────────┐│
││ [■] │ 항목명 ▾ ┆ │ 상태 ⏷ ┆ │ 수량 ▴▾ │  ← ① Header (sticky)  ││
││ [✓] │ 항목 A-01 │ 사용중   │   1,240 │  ← ④ Body row (선택)   ││
││ [ ] │ 항목 A-02 │ 대기     │       0 │                       ││
││  ②      ③ Pinned column                                     ││
│└────────────────────────────────────────────────────────────┘│
│ 총 건수 : 1,284      « ‹ 1 2 3 › »                 [100 ▾]    │
│   ⑤ Footer 좌             ⑥ Footer 중앙             ⑦ Footer 우  │
└──────────────────────────────────────────────────────────────┘
```

| # | 요소 | 필수 | 클래스 | 설명 |
|---|---|---|---|---|
| ⓪ | Container | 필수 | `atom-grid` | `data-state` 와 크기 modifier 를 가집니다. 높이를 주면 `__scroll` 이 남는 공간을 채웁니다. |
| — | Scroll | 필수 | `atom-grid__scroll` | 세로·가로 스크롤 영역. 안에 `__table` · `__overlay` · `__empty` 가 들어갑니다. |
| ① | Header | 필수 | `atom-grid__thead` · `__th` · `__th-inner` · `__th-label` | 컬럼 이름과 정렬·필터·너비 조절·이동 컨트롤이 모두 여기 붙습니다. (`__th-sort` · `__th-filter` · `__th-grip` · `__th-resize`) |
| ② | Row checkbox | 선택 | `atom-grid__th--check` · `__td--check` · `__check` | 행 선택입니다. Header 의 체크박스는 전체 선택을 담당합니다. |
| ③ | Pinned column | 선택 | `atom-grid__th--pinned` · `__td--pinned` | 가로 스크롤에서 제자리에 남는 컬럼입니다. |
| ④ | Body row | 필수 | `atom-grid__tbody` · `__tr` · `__td` | 선택되면 배경이 바뀝니다. |
| ⑤ | Footer 좌 | 필수 | `atom-grid__footer` · `__count` · `__count-value` | 총 건수입니다. |
| ⑥ | Footer 중앙 | 필수 | `atom-pagination` | [Pagination](./pagination.md). 처음 / 이전 / 번호 / 다음 / 마지막입니다. |
| ⑦ | Footer 우 | 필수 | `atom-grid__page-size` | Page size. 한 페이지에 담을 행 수입니다. |
| — | Loading overlay | `loading` 일 때 | `atom-grid__overlay` · `__spinner` · `__overlay-text` | 표 위에 덮는 오버레이입니다. |
| — | Empty | `empty` 일 때 | `atom-grid__empty` · `__empty-text` | Body 자리에 놓이는 안내 문구입니다. |
| — | Filter popover | 필터를 열 때 | `atom-grid__filter-popover` · `__filter-group` · `__filter-title` · `__filter-row` · `__filter-list` · `__filter-divider` · `__filter-actions` | `__scroll` 바깥, `.atom-grid` 기준으로 배치합니다. |

계층을 켜면 컬럼 하나에 부품이 셋 더 붙습니다. [트리](#트리) 에서 다룹니다.

| # | 요소 | 필수 | 클래스 | 설명 |
|---|---|---|---|---|
| — | Tree cell | `treeData` 일 때 | `atom-grid__td--tree` · `__tree-cell` · `__tree-label` | 캐럿과 이름을 담는 셀 안의 행입니다. 계층을 지는 컬럼에만 있습니다. |
| — | Tree caret | `treeData` 일 때 | `atom-grid__tree-caret` (잎: `--empty`) | 가지를 여닫는 버튼입니다. 잎에서는 자리만 남고 글리프가 사라집니다. |
| — | Tree count | 선택 | `atom-grid__tree-count` | 부모 행 뒤의 자손 수입니다. 끌 수 있습니다. |

---

## 2. 종류 / 크기

### Footer 구성

**총 건수 · Pagination · Page size** 를 한 줄에 왼쪽부터 순서대로 둡니다. 셋 다 조회
상태를 다루므로 Footer 한 곳에 모읍니다.

| 위치 | 요소 | 역할 |
| --- | --- | --- |
| 좌 | `__count` | 지금 조회된 전체 결과 수 |
| 중앙 | `atom-pagination` | 페이지 이동. Grid 와 별개인 독립 블록입니다 |
| 우 | `__page-size` | 한 페이지에 담을 행 수 |

> [!NOTE]
> **Pager 는 Grid 기준으로 가운데입니다**
> 양옆 요소 사이의 남는 공간이 아닌 Grid 전체 폭을 기준으로 중앙에 둡니다. 총 건수의
> 자릿수가 바뀌어도 페이지 번호 위치가 유지됩니다.

### 총 건수

Footer 왼쪽 끝에 놓입니다. 필터와 검색이 적용된 뒤의 **전체 결과 수**입니다. 현재 페이지에 그려진 행 수가 아닙니다.
숫자에는 천 단위 구분 포맷터를 적용하고, 자리수가 흔들리지 않도록 `tabular-nums` 로
렌더합니다.

> [!NOTE]
> **0 건도 숫자로 씁니다**
> 결과가 없을 때도 `총 건수 : 0` 을 그대로 보여줍니다. 건수 줄이 없으면 조회 실패와 결과
> 없음을 구분할 수 없습니다.

### Pagination

Footer 가운데입니다. 처음 / 이전 / 페이지 번호 / 다음 / 마지막 다섯 부분이고, 번호는
**한 번에 최대 10개**까지만 노출합니다.

[Pagination](./pagination.md) 컴포넌트를 그대로 씁니다. 컨트롤별 동작과 비활성 조건,
번호 창이 넘어가는 규칙은 그쪽 문서에 있습니다. Grid 에서 정하는 규칙은 두 가지입니다.
**Footer 가운데에 둡니다.** **결과가 0건이어도 `1` 을 비활성으로 남깁니다.**

### Page size

Footer 오른쪽 끝입니다. 값이 셋뿐인 단일 선택이므로 컨트롤은 [Select](./select.md) 를
그대로 씁니다. 기본값은 `100`, 선택지는
`100` · `500` · `1000` 입니다.

> [!WARNING]
> **Select 마크업을 그대로 씁니다**
> `atom-select` 는 블록 요소여야 폭을 가지고, `__trigger` 는 `<button type="button">` 이어야
> 초점과 키보드 조작을 받습니다. `<span>` 으로 바꿔 쓰면 폭이 0으로 무너지고 탭으로 닿지
> 않습니다.

값을 바꾸면 페이지 인덱스를 0으로 되돌립니다. 3페이지에서 100 을 1000 으로 바꾸면 원래 보던
행이 어디에 있는지 알 수 없기 때문입니다.

### 헤더 고정 · 가로 스크롤

세로로 스크롤해도 Header 는 자리에 남습니다. 컬럼이 많아 폭을 넘으면 가로 스크롤이 생기고,
고정 컬럼은 그때도 제자리를 지킵니다.

> [!WARNING]
> **스크롤은 Grid 안에서 끝냅니다**
> 세로 스크롤을 페이지에 맡기면 Header 가 붙을 기준이 사라집니다. `.atom-grid` 에 높이를
> 주면 `__scroll` 이 남는 공간을 그대로 받아 그 안에서 스크롤합니다.

### 로딩

데이터를 조회하는 동안 `data-state="loading"` 으로 두고 표 위에 오버레이를 덮습니다. 표는
지우지 않습니다. 컬럼 구성이 보여야 어떤 데이터를 조회 중인지 알 수 있습니다.

### 조회 결과 없음

`data-state="empty"` 는 Body 를 숨기고 안내 문구를 그 자리에 둡니다. Header 는 남겨서
다음 조회 조건을 정할 때 참고하게 합니다.

### 행 선택

행의 체크박스를 켜면 그 행이 선택 상태가 됩니다. Header 의 체크박스는 현재 페이지 전체를
켜고 끄며, 일부만 켜져 있을 때는 중간 상태로 표시합니다.

> [!WARNING]
> **전체 선택의 범위를 밝힙니다**
> Header 체크박스가 켜는 것은 **현재 페이지**입니다. 검색 결과 전체를 대상으로 삼는 기능이
> 필요하면 별도 컨트롤로 분리하고 몇 건이 선택됐는지 함께 보여주세요. 이 구분이 없으면
> 의도보다 많은 건수에 작업이 적용될 수 있습니다.

### 컬럼 이동

헤더를 드래그해 컬럼 순서를 바꿉니다. 잡는 곳(grip)은 평소에는 숨어 있다가 헤더에 커서가
올라오면 나타나고, 놓을 자리는 세로선으로 표시합니다.

### 정렬

헤더를 누를 때마다 **내림차 → 오름차 → 기본값** 순으로 순환합니다. 세 번째 클릭이 정렬을
해제하고 원래 순서로 돌아갑니다.

> [!WARNING]
> **첫 클릭이 내림차입니다**
> 대부분의 테이블은 오름차로 시작하지만, 이 Grid 는 최신 데이터나 큰 값을 먼저 보는 조회가
> 많아 내림차부터 시작합니다. 다른 화면의 정렬과 섞어 쓸 때 방향이 어긋나지 않도록
> 확인하세요.

### 컬럼 너비 조절

헤더 경계를 드래그해 폭을 바꿉니다. 잡는 영역은 그려지는 선보다 넓게 두어 마우스로 집을 수
있게 합니다.

### 컬럼 고정

지정한 컬럼을 시작 방향 가장자리에 고정해, 가로로 스크롤해도 계속 보이게 합니다. 고정 컬럼과
나머지 사이의 그림자는 **실제로 옆으로 밀렸을 때만** 나타납니다.

> [!WARNING]
> **고정 셀의 배경은 불투명해야 합니다**
> 행의 hover 색 `--atom-bg-nav-hover` 는 브랜드색 **4%** 의 반투명 색입니다. 일반 셀은
> 아래가 고정된 표면이라 문제가 없지만, 고정 셀 아래로는 스크롤된 컬럼이 지나갑니다.
> 고정 셀의 불투명한 `--atom-bg-layer` 를 이 반투명 색으로 바꾸면 스크롤된 글자가 비쳐
> 두 글자가 겹칩니다.
>
> 그래서 고정 셀은 표면을 background **color** 로 남기고 hover 색을 그 위의 **image** 로
> 칠합니다 (`linear-gradient` 한 겹). 선택 행은 `--atom-bg-informative-weak` 가 이미
> 불투명해서 겹칠 필요가 없고, 일반 셀과 같은 순서로 hover 보다 선택이 우선합니다.

### 컬럼 필터

헤더의 깔때기 아이콘을 누르면 popover 가 열립니다. 한 컬럼을 거르는 방법은 두 가지이고,
둘 다 **한 popover 안에 함께** 둡니다. 컬럼에 따라 문자열과 값 목록 중 편한 쪽을 popover
안에서 고릅니다.

| 영역 | 구성 | 쓰는 때 |
| --- | --- | --- |
| 텍스트 필터 | 조건 [Select](./select.md) (일치 · 불일치 · 포함) + 검색어 입력 | 값의 종류가 많아 목록으로 고르기 어려울 때 |
| 데이터 필터 | 체크박스 목록 — [Multi Select](./multi-select.md) 의 Option 과 같은 요소 | 값의 종류가 적고 그중 몇 개만 볼 때 |

두 영역은 **AND** 로 결합합니다. 텍스트 조건과 체크된 값을 모두 만족하는 행만 남습니다.
아래쪽 `초기화` 는 이 컬럼의 두 영역을 함께 비웁니다.

> [!NOTE]
> **focus-out 이나 Esc 로 닫습니다**
> popover 바깥으로 초점이 나가면(`focusout` 이 popover 밖을 향할 때) 닫고, Esc 로도 닫습니다.
> 닫을 때 초점은 열었던 깔때기 아이콘으로 되돌립니다. 값 목록을 스크롤하거나 입력칸을 오가는
> 동안에는 초점이 popover 안에 머무르므로 닫히지 않습니다.

필터가 걸린 컬럼은 아이콘 색으로 표시해, 결과가 적은 이유를 헤더만 보고 알 수 있게 합니다.
popover 가 열려 있는 동안에는 `aria-expanded="true"` 로 아이콘 배경이 함께 바뀝니다.

> [!WARNING]
> **popover 는 `__scroll` 바깥에 그립니다**
> `__scroll` 은 자기 넘침을 잘라내므로, popover 를 헤더 셀 안에 두면 헤더보다 길어질 때
> 잘립니다. `.atom-grid` 를 기준으로 절대 배치하거나 상위 레이어로 portal 하고, 위치는 헤더
> 셀의 rect 에서 계산하세요.

### 트리

행에 부모·자식 관계가 있으면 한 컬럼이 그 계층을 집니다. 나머지 컬럼은 일반 셀로
남습니다.

[ag-Grid Tree Data](https://www.ag-grid.com/react-data-grid/tree-data/) 의 구조를
따랐습니다. 계층을 지는 컬럼 하나에 캐럿·들여쓰기·자식 수를 모두 담고, 다른 컬럼은
건드리지 않는 방식입니다.

> [!NOTE]
> **행은 여전히 평평한 `<tr>` 입니다**
> 표는 중첩할 수 없습니다. `<tbody>` 안에 `<tbody>` 를 넣으면 표 구조가 깨집니다.
> 그래서 계층은 **행의 순서와 깊이 값**으로만 표현하고, 접힌 가지의 자손 행은 CSS 로
> 숨기지 않고 **렌더하지 않습니다.** [Tree](./tree.md) 는 반대로 DOM
> 중첩(`role="group"`)이 의미를 나르므로, 두 컴포넌트의 마크업은 서로 다릅니다.

#### 깊이는 커스텀 프로퍼티로

깊이는 인라인 커스텀 프로퍼티 `--atom-grid-tree-depth` 로 지정합니다.

```html
<td class="atom-grid__td atom-grid__td--tree" style="--atom-grid-tree-depth: 2">
```

[Tree](./tree.md) 와 같은 방식이며, 이유는 `tree.css` 에 적혀 있습니다.
`--depth_1 … --depth_9` 같은 클래스를 두면 **스타일시트에 정의된 단계까지만 깊이를
표현할 수 있습니다.**

한 단계는 **20px** 입니다. Tree 의 `--atom-tree-indent` 와 같은 값이므로, 두 컨트롤을
한 화면에 함께 두어도 같은 계층이 같은 깊이로 보입니다. `--size_small` 에서는 16px 로
줄어듭니다.

들여쓰기는 셀의 `padding` 입니다. 내용에 `margin` 을 주면 hover·선택 채움이
들여쓴 지점부터 시작해서, 행들이 서로 떨어진 상자처럼 보입니다.

> [!NOTE]
> **`--atom-grid-tree-*` 는 토큰이 아니라 로컬 커스텀 프로퍼티입니다**
> `tokens.css` 에 없습니다. `--atom-grid-tree-indent` 는 `grid.css` 가
> 자기 안에서 선언하고, `--atom-grid-tree-depth` 는 행마다 마크업이 인라인으로 답니다.
> [Tree](./tree.md) 의 `--atom-tree-indent` · `--atom-tree-depth` 도 같은 방식입니다.
> 한 엘리먼트 안에서만 쓰는 값이므로 전역 토큰으로 두지 않습니다.
> 둘 다 `var(…, 0)` · `var(…, 20px)` 처럼 **폴백과 함께 읽습니다.** 가상 스크롤이
> 행을 `.atom-grid` 없는 평평한 컨테이너에 그릴 수 있고, 깊이가 없는 행도 그려져야 합니다.

#### 펼침과 접힘

상태는 행의 `aria-expanded` 가 지닙니다. 캐럿은 그 값을 따라 90도 돕니다.

| 행 | 속성 | 캐럿 |
| --- | --- | --- |
| 자식이 있고 펼쳐짐 | `aria-expanded="true"` | 90도 회전 |
| 자식이 있고 접힘 | `aria-expanded="false"` | 기본 방향 |
| 잎 (자식 없음) | 속성 없음 | 자리는 지키고 글리프만 감춥니다 |

**잎도 캐럿 자리를 비워둡니다.** 자리를 없애면 잎이 형제보다 16px 왼쪽으로 당겨져
들여쓰기가 어긋납니다.

처음 펼칠 깊이는 `defaultExpandedDepth` 가 정합니다. `0` 이면 최상위만 보이고,
`-1` 이면 전부 펼칩니다. ag-Grid 의 `groupDefaultExpanded` 와 같은 규칙입니다.

#### 자식 수

부모 행 이름 뒤의 `(3)` 은 **직계 자식이 아니라 자손 전체**의 수입니다. 접힌 가지의
크기를 펼치지 않고 확인할 수 있습니다. `showChildCount: false` 로 끕니다.

숫자는 `tabular-nums` 입니다. 가지를 여닫을 때마다 숫자 폭이 달라지면 이름이 좌우로
흔들립니다.

#### 행 선택 (트리)

`selectsChildren` 을 켜면 부모를 고를 때 자손이 함께 선택됩니다.

| 자손 선택 상태 | 부모 체크박스 |
| --- | --- |
| 전부 선택 | `data-state="checked"` |
| 일부만 선택 | `data-state="indeterminate"` |
| 아무것도 안 됨 | 상태 없음 |

접힌 가지 안에서 일어난 선택도 부모의 indeterminate 로 표시합니다. 그래야 가지를 접은
상태에서도 선택 여부를 알 수 있습니다.

`totalCount` 와 선택 수를 셀 때 **부모 행을 포함할지 정해야 합니다.** 분류가 묶음
역할만 한다면 세지 않습니다.

#### 정렬과 필터

둘 다 **계층을 유지한 채** 각 레벨 안에서 동작합니다.

| 기능 | 트리에서의 동작 |
| --- | --- |
| 정렬 | 형제끼리만 자리를 바꿉니다. 부모·자식 관계는 그대로입니다 |
| 필터 | 조건에 맞는 행의 **조상은 남깁니다.** 남기지 않으면 맞은 행이 표에서 사라집니다 |
| 총 건수 | 필터를 통과한 행 수입니다. 맥락으로 남은 조상은 빼고 셉니다 |

조상을 남기지 않는 동작이 필요하면 `excludeAncestorsWhenFiltering` 을 켭니다.
결과가 평평한 목록이 되므로 기본값은 꺼짐입니다.

### Size

원본 Properties 에 별도 축은 없고, Props 의 `size` 가 행 높이와 폰트 크기를 정합니다 (`grid.css` 실측).

| Size | Header 높이 · 폰트 | Body 행 높이 | 본문 폰트 | 체크 컬럼 | 트리 들여쓰기 |
|---|---|---|---|---|---|
| `medium` | 44px · 13px | 44px | 14px | 44px | 20px |
| `small` | 36px · 12px | 36px | 13px | 36px | 16px |

### 클래스 계약

`styles/elements/grid.css` 헤더와 원본 `registry.json` `css.blocks` 기준입니다. 클래스가 없는 값(—)은 기본 스타일 그대로입니다.

| Prop | 값 | 클래스 |
|---|---|---|
| `size` | `small` · `medium` | `atom-grid--size_small` · — |
| `columns[].align` | `start` · `end` · `center` | — · `__th--align_end` + `__td--align_end` · `__th--align_center` + `__td--align_center` |
| `columns[].pinned` | `true` | `__th--pinned` + `__td--pinned` |
| `sort.direction` | `desc` · `asc` | `__th--sorted_desc` · `__th--sorted_asc` (헤더에만) |
| `selectable` | `true` | `__th--check` + `__td--check` |
| `treeData` | `true` | `__td--tree` (본문 셀에만) |
| (잎 행의 캐럿) | — | `__tree-caret--empty` |

상태 선택자: `.atom-grid[data-state="ready|loading|empty"]` · `.atom-grid[data-scrolled-x]` ·
`__tr[aria-selected="true"]` · `__tr[aria-expanded="true"]` · `__check[data-state="checked|indeterminate"]` ·
`__th-filter[data-active]` · `__th-filter[aria-expanded="true"]` · `__th[data-dragging]` · `__th[data-drop-target]` ·
`__th-resize[data-dragging]` · `__filter-popover[data-state="closed"]` · `:hover` · `:focus-visible`

로컬 커스텀 프로퍼티: `--atom-grid-tree-indent` (`grid.css` 가 선언) · `--atom-grid-tree-depth` (행마다 인라인)

> [!NOTE]
> 원본 registry 문제: `--empty`(`__tree-caret--empty`) 와 `--tree`(`__td--tree`) modifier 는 CSS 에 정의되어 있으나 CSS 헤더 주석의 클래스 계약에는 없습니다(`css-defined-not-declared`).
> `__tree-label` 파트도 헤더 목록에 빠져 있습니다. 구현은 CSS 에 정의된 대로 씁니다.

---

## 3. 상태

| State | 표현 | 선택자 |
|---|---|---|
| `ready` | 행 표시 (기본) | `[data-state="ready"]` |
| `loading` | `--atom-bg-scrim` 오버레이 + 스피너 + `로딩중입니다`. 직전 행은 유지 | `[data-state="loading"]` |
| `empty` | Body 숨김, `조회된 데이터가 없습니다` | `[data-state="empty"]` |
| 가로 스크롤됨 | 고정 컬럼 오른쪽 그림자 | `[data-scrolled-x]` |
| 행 hover | `--atom-bg-nav-hover` (고정 셀은 image 로 겹침) | `__tr:hover` |
| 행 선택 | `--atom-bg-informative-weak` | `__tr[aria-selected="true"]` |
| 체크박스 | checked · indeterminate · unchecked | `__check[data-state]` |
| 정렬됨 | 활성 방향 화살표만 진하게 | `__th--sorted_desc` · `__th--sorted_asc` |
| 필터 적용됨 | 깔때기 `--atom-fg-brand` | `__th-filter[data-active]` |
| 필터 열림 | 깔때기 배경 `--atom-bg-layer` | `__th-filter[aria-expanded="true"]` |
| 컬럼 드래그 중 · 놓을 자리 | 헤더 배경 · 시작쪽 2px 브랜드 선 | `__th[data-dragging]` · `__th[data-drop-target]` |
| 너비 조절 중 | 경계선 2px `--atom-fg-brand` | `__th-resize[data-dragging]` · `:hover` |
| 트리 펼침 | 캐럿 90도 회전 | `__tr[aria-expanded="true"]` |

`loading` 과 `empty` 는 동시에 성립하지 않습니다 — [상태는 하나만 켭니다](#상태는-하나만-켭니다).

---

## 4. Props

| Prop | Type | Default | 필수 | 설명 |
|---|---|---|---|---|
| `columns` | `Array<{ key, label, width?, align?, sortable?, filterable?, resizable?, movable?, pinned? }>` | | ● | 컬럼 정의입니다. |
| `rows` | `object[]` | | ● | 현재 페이지에 그릴 행 데이터입니다. |
| `totalCount` | `number` | | ● | 필터가 적용된 전체 결과 수입니다. 현재 페이지의 행 수가 아닙니다. |
| `state` | `"ready" \| "loading" \| "empty"` | `"ready"` | | 표의 표시 상태입니다. |
| `pageIndex` | `number` | `0` | | 현재 페이지 인덱스입니다. 0부터 시작합니다. |
| `pageSize` | `100 \| 500 \| 1000` | `100` | | 한 페이지에 담을 행 수입니다. |
| `maxPageButtons` | `number` | `10` | | Pagination 에 한 번에 노출할 번호 개수입니다. |
| `selectedKeys` | `string[]` | `[]` | | 선택된 행의 키입니다. |
| `selectable` | `boolean` | `false` | | 행 체크박스 컬럼을 추가합니다. |
| `sort` | `{ key: string, direction: "desc" \| "asc" } \| null` | `null` | | 현재 정렬입니다. `null` 이 기본값 순서입니다. |
| `filters` | `Record<string, { text?: { mode, value }, values?: string[] }>` | `{}` | | 컬럼별 필터입니다. `text` 와 `values` 는 AND 로 결합합니다. |
| `filterTextModes` | `Array<"eq" \| "neq" \| "contains">` | `["eq", "neq", "contains"]` | | 텍스트 필터의 조건 선택지입니다. 일치 · 불일치 · 포함. |
| `treeData` | `boolean` | `false` | | 계층 표시를 켭니다. 켜면 표가 `role="treegrid"` 가 됩니다. |
| `getRowPath` | `(row) => string[]` | | | 행의 계층 경로입니다. ag-Grid 의 `getDataPath` 와 같습니다. |
| `treeColumnKey` | `string` | 첫 컬럼 | | 계층을 지는 컬럼입니다. 이 컬럼에만 캐럿과 들여쓰기가 붙습니다. |
| `defaultExpandedDepth` | `number` | `0` | | 처음 펼칠 깊이입니다. `-1` 은 전부 펼침. |
| `expandedKeys` | `string[]` | | | 펼쳐진 행의 키입니다. 주면 펼침 상태가 제어됩니다. |
| `showChildCount` | `boolean` | `true` | | 부모 행 뒤에 자손 수 `(3)` 을 붙입니다. |
| `selectsChildren` | `boolean` | `false` | | 부모를 고르면 자손도 함께 선택됩니다. `selectable` 과 함께 씁니다. |
| `excludeAncestorsWhenFiltering` | `boolean` | `false` | | 필터에서 조상 행을 맥락으로 남기지 않습니다. |
| `onExpandedChange` | `(keys: string[]) => void` | | | 가지를 여닫을 때 호출됩니다. |
| `size` | `"small" \| "medium"` | `"medium"` | | 행 높이와 폰트 크기를 결정합니다. |
| `height` | `number \| string` | | | Grid 전체 높이입니다. 주면 `__scroll` 이 남는 공간을 채웁니다. |
| `maxHeight` | `number \| string` | `420` | | `height` 가 없을 때 스크롤 영역의 높이 상한입니다. |
| `emptyText` | `string` | `"조회된 데이터가 없습니다"` | | 결과가 없을 때 보일 문구입니다. |
| `loadingText` | `string` | `"로딩중입니다"` | | 조회 중 오버레이에 보일 문구입니다. |
| `onSortChange` | `(sort) => void` | | | 정렬이 바뀔 때 호출됩니다. 3번째 클릭에서는 `null` 이 전달됩니다. |
| `onFilterChange` | `(key: string, filter: object \| null) => void` | | | 필터를 적용하거나 초기화할 때 호출됩니다. |
| `onPageChange` | `(pageIndex: number) => void` | | | 페이지가 바뀔 때 호출됩니다. |
| `onPageSizeChange` | `(pageSize: number) => void` | | | 페이지 크기가 바뀔 때 호출됩니다. 페이지 인덱스는 0으로 되돌립니다. |
| `onSelectionChange` | `(keys: string[]) => void` | | | 행 선택이 바뀔 때 호출됩니다. |
| `onColumnOrderChange` | `(keys: string[]) => void` | | | 컬럼 순서가 바뀔 때 호출됩니다. |
| `onColumnResize` | `(key: string, width: number) => void` | | | 컬럼 너비가 바뀔 때 호출됩니다. |

구현 메모:

- `pageIndex` · `pageSize` · `selectedKeys` · `sort` · `filters` · `expandedKeys` 는 주면 controlled, 생략하면 위 Default 로 시작하는 uncontrolled 입니다.
- 구현 추가: `getRowKey?: (row, index) => string` (기본 `row.key` → `row.id` → 트리 경로 `a/b/c` → 인덱스), `columns[].render?: (row) => ReactNode`. `aria-label` · `aria-labelledby` 는 `<table>` 에 붙습니다.
- `rows` 는 현재 페이지분입니다. 정렬·필터는 받은 행에 다시 적용합니다(이미 처리된 행에 다시 적용해도 결과가 같습니다). 트리의 형제 정렬 · 조상 유지 필터가 이 규칙으로 동작합니다.

### Parts (compound)

| Part | 요소 | 설명 |
|---|---|---|
| `Grid` | `<div class="atom-grid">` | 위 Props 를 받습니다. `__scroll` > `<table>` · 오버레이 · 빈 상태, `__scroll` 바깥의 필터 popover, Footer(총 건수 · [Pagination](./pagination.md) · [Select](./select.md))를 모두 렌더합니다. 파트는 없습니다. |

---

## 5. Component tokens

| 대상 | 속성 | Token | Value |
|---|---|---|---|
| Scroll 컨테이너 | border | `{color.border.subtle}` | inset 1px |
| Scroll 컨테이너 | radius | `{radius.r2}` | 8px |
| Header | background | `{color.bg.neutral-weak}` | |
| Header | border-bottom | `{color.border.default}` | 1px |
| Header | height | — | 44px (`small` 36px) |
| Body cell | background | `{color.bg.layer}` | |
| Body cell | border-bottom | `{color.border.subtle}` | 1px |
| Row hover | background | `{color.bg.nav-hover}` | 브랜드 4% |
| Row selected | background | `{color.bg.informative-weak}` | 불투명 |
| Pinned cell (hover) | background-color · image | `{color.bg.layer}` + `{color.bg.nav-hover}` | 반투명 hover 색을 표면 위에 겹친다 |
| Resize handle (활성) | background | `{color.fg.brand}` | 2px |
| Filter (적용됨) | color | `{color.fg.brand}` | |
| Checkbox (checked) | background | `{color.bg.neutral-solid}` | |
| Loading overlay | background | `{color.bg.scrim}` | |
| Spinner | border-top | `{color.fg.brand}` | 3px |
| Tree cell | gap | `{space.x2}` | 8px — 캐럿과 이름 사이 |
| Tree indent | 단계당 | — | 20px (`small` 은 16px) · Tree 의 `--atom-tree-indent` 와 같은 값 |
| Tree caret | size | — | 상자 16px · 글리프 14px — Tree 의 `__caret` 과 같습니다 |
| Tree caret | color | `{color.fg.neutral-muted}` | 펼치면 90도 회전 |
| Tree count | color | `{color.fg.neutral-muted}` | `tabular-nums` |

```json
{
  "grid": {
    "scroll": {
      "border": { "$type": "color", "$value": "{color.border.subtle}" },
      "radius": { "$type": "dimension", "$value": "{radius.r2}" },
      "max-height": { "$type": "dimension", "$value": "420px" }
    },
    "header": {
      "bg": { "$type": "color", "$value": "{color.bg.neutral-weak}" },
      "border": { "$type": "color", "$value": "{color.border.default}" },
      "height": { "$type": "dimension", "medium": { "$value": "44px" }, "small": { "$value": "36px" } }
    },
    "cell": {
      "bg": { "$type": "color", "$value": "{color.bg.layer}" },
      "border": { "$type": "color", "$value": "{color.border.subtle}" },
      "height": { "$type": "dimension", "medium": { "$value": "44px" }, "small": { "$value": "36px" } },
      "padding-inline": { "$type": "dimension", "$value": "{space.x3}" }
    },
    "row": {
      "bg-hover": { "$type": "color", "$value": "{color.bg.nav-hover}" },
      "bg-selected": { "$type": "color", "$value": "{color.bg.informative-weak}" }
    },
    "resize-active": { "$type": "color", "$value": "{color.fg.brand}" },
    "filter-active": { "$type": "color", "$value": "{color.fg.brand}" },
    "check-checked": { "$type": "color", "$value": "{color.bg.neutral-solid}" },
    "overlay-bg": { "$type": "color", "$value": "{color.bg.scrim}" },
    "spinner": {
      "color": { "$type": "color", "$value": "{color.fg.brand}" },
      "duration": { "$type": "duration", "$value": "{duration.slow}" }
    },
    "tree": {
      "gap": { "$type": "dimension", "$value": "{space.x2}" },
      "indent": { "$type": "dimension", "medium": { "$value": "20px" }, "small": { "$value": "16px" } },
      "caret-color": { "$type": "color", "$value": "{color.fg.neutral-muted}" },
      "count-color": { "$type": "color", "$value": "{color.fg.neutral-muted}" }
    },
    "filter-popover": {
      "bg": { "$type": "color", "$value": "{color.bg.layer-raised}" },
      "radius": { "$type": "dimension", "$value": "{radius.r3}" },
      "shadow": { "$type": "shadow", "$value": "{shadow.s3}" },
      "width": { "$type": "dimension", "$value": "280px" }
    }
  }
}
```

---

## 6. 접근성

- **구조** — 실제 `<table>` · `<thead>` · `<tbody>` · `<th>` · `<td>` 로 작성합니다. `div` 로
  흉내 내면 스크린리더가 행과 열의 관계를 읽지 못합니다.
- **정렬** — 정렬 가능한 헤더는 `aria-sort` 를 `descending` · `ascending` · `none` 으로
  갱신합니다.
- **필터** — 필터 아이콘은 `aria-haspopup="dialog"` 와 `aria-expanded` 를 가지고, popover 에는
  `role="dialog"` 와 컬럼 이름을 담은 `aria-label` 을 답니다. Tab 으로 popover 밖으로 나가면
  닫히고, Esc 로도 닫으며 초점은 깔때기 아이콘으로 되돌립니다.
- **선택** — `<tr aria-selected>` 와 실제 `<input type="checkbox">` 를 함께 씁니다.
  체크박스에는 `홍길동 행 선택` 처럼 어느 행인지 밝히는 `aria-label` 을 답니다.
- **중간 상태** — Header 체크박스는 일부만 켜졌을 때 `indeterminate` 를 설정합니다. 색만
  바꾸면 스크린리더에는 전달되지 않습니다.
- **키보드** — 너비 조절과 컬럼 이동은 마우스 전용이 되지 않게, 헤더에 초점을 준 상태에서
  키보드로도 조작할 수 있어야 합니다.
- **로딩** — `aria-busy="true"` 를 Grid 에 걸고, 완료되면 건수를 `aria-live="polite"` 로
  알립니다.
- **스크롤** — 가로 스크롤 영역은 `tabindex="0"` 을 주어 키보드로도 스크롤할 수 있게 합니다.
- **대비** — 선택 행 배경(`--atom-bg-informative-weak`) 위 본문 텍스트가 4.5:1 을 넘도록
  확인합니다. 배경만으로 선택을 알리지 말고 체크박스 상태를 함께 둡니다.

### 트리

- **역할** — 계층을 켜면 `<table>` 이 `role="treegrid"` 가 됩니다.
  `grid` 인 채로 두면 보조기술이 행 사이의 부모·자식 관계를 알 수 없습니다.
- **행** — `aria-level` 이 1부터 시작하는 깊이, `aria-expanded` 가 펼침
  상태입니다. **잎에는 `aria-expanded` 를 달지 않습니다.** `false` 를 달면
  "닫혀 있고 열 수 있는" 행으로 읽힙니다.
- **형제 위치** — 같은 부모 아래 행에 `aria-posinset` 과 `aria-setsize` 를
  답니다. 접힌 가지 때문에 DOM 순서만으로는 "3개 중 2번째" 를 알 수 없습니다.
- **키보드** — 셀 이동은 표와 같고, 계층 조작이 더해집니다.

| 키 | 동작 |
| --- | --- |
| `→` | 접혀 있으면 펼칩니다. 이미 펼쳐져 있으면 첫 자식으로 이동합니다 |
| `←` | 펼쳐져 있으면 접습니다. 이미 접혀 있으면 부모로 이동합니다 |
| `Enter` | 가지를 토글합니다 |

- **캐럿은 `tabindex="-1"`** — 캐럿마다 탭 정지점이 생기면 표를 지나는 데 Tab 을 행
  수만큼 눌러야 합니다. 초점은 행이 갖고, 캐럿은 화살표 키로 조작합니다.
- **자식 수** — `(3)` 은 이름 뒤에 그대로 읽힙니다. 숫자만으로 뜻이 불분명하면
  행에 `aria-label` 로 "분류 A, 하위 3건" 을 함께 답니다.
- **선택 연동** — `selectsChildren` 에서 부모의 부분 선택은 `aria-checked="mixed"`
  입니다. 시각적 indeterminate 만으로는 전달되지 않습니다.

### 구현의 키보드 경로

원본은 "정렬·필터·이동·너비 조절 모두 키보드 경로 필요" 까지만 정합니다. 구현은 아래 키를 씁니다.

| 초점 | 키 | 동작 |
| --- | --- | --- |
| 헤더 셀 (`sortable` · `movable` · `resizable` 이면 `tabindex="0"`) | `Enter` · `Space` | 정렬 순환 (내림차 → 오름차 → 기본값) |
| 헤더 셀 | `Alt + ←/→` | 컬럼을 한 칸 이동 (`onColumnOrderChange`) |
| 헤더 셀 | `Shift + ←/→` | 너비 ∓10px (`onColumnResize`) |
| 깔때기 버튼 | `Enter` · `Space` | popover 열기 — 첫 컨트롤로 초점 이동 |
| 데이터 필터 목록 | `↑` `↓` · `Space` · `Enter` | 활성 값 이동 · 체크 토글 (`aria-activedescendant`) |
| 체크박스 (`role="checkbox"`) | `Space` · `Enter` | 행 / 현재 페이지 전체 선택 토글 |
| 트리 행 (roving `tabindex`) | `↑` `↓` `Home` `End` · `→` `←` `Enter` · `Space` | 행 이동 · 위 표 · 선택 토글 |

---

## 7. 사용 가이드

### 계층이 실제로 있을 때만 트리로

트리를 켜면 행마다 어느 가지에 속하는지 함께 읽어야 합니다. 계층이 실제로 필요한
데이터에만 켭니다.

깊이가 한 단계 늘 때마다 이름 컬럼의 폭이 20px 씩 줄어듭니다. 4단계면 80px 이
들여쓰기에 쓰여 이름이 잘립니다.

- ✅ **Do** 2~3단계로 끝나는 계층에 씁니다. 접힌 가지에는 자식 수를 함께 보여줍니다.
- ❌ **Don't** 4단계를 넘겨 이름 컬럼이 들여쓰기로 채워지게 하지 않습니다.
- ⚠️ **Caution** 계층이 한 단계뿐이면 트리 대신 정렬이나 [컬럼 필터](#컬럼-필터) 를 씁니다.

### 기본 펼침 깊이는 화면이 정합니다

1,000행짜리 트리를 전부 펼치면 스크롤이 길어지고, 원하는 가지를 찾으려면 다시 접어야
합니다.

- ✅ **Do** 최상위만 펼쳐 두고(`defaultExpandedDepth: 0`) 사용자가 필요한 가지를 엽니다.
- ✅ **Do** 가지가 서너 개뿐이면 전부 펼칩니다(`-1`).
- ❌ **Don't** 행이 수백 개인데 전부 펼친 채로 열지 않습니다.

### 숫자는 오른쪽으로

숫자 컬럼은 오른쪽 정렬하고 `tabular-nums` 를 함께 적용합니다. 자리수가 맞아 세로로
크기를 비교하기 쉽습니다.

- ✅ **Do** 숫자는 오른쪽 정렬하고 자리수를 맞춥니다.
- ❌ **Don't** 텍스트와 같이 왼쪽에 붙이지 않습니다.

### 고정 컬럼은 한둘까지

고정 컬럼이 늘어날수록 스크롤할 수 있는 폭이 줄어듭니다. 행을 식별하는 컬럼(이름, 코드)
하나만 고정합니다. 체크박스를 포함하면 둘까지입니다.

- ✅ **Do** 행을 식별하는 컬럼 하나만 고정합니다.
- ❌ **Don't** 고정 컬럼이 화면 절반을 차지하게 두지 않습니다.

### 상태는 하나만 켭니다

`loading` 과 `empty` 는 동시에 성립하지 않습니다. 조회 중에는 이전 결과를 그대로 두고
오버레이만 덮었다가, 응답이 온 뒤에 건수를 보고 `ready` 인지 `empty` 인지 정하세요.

| 상태 | Body | 총 건수 | 보이는 것 |
| --- | --- | --- | --- |
| `ready` | 행 표시 | 1 이상 | 데이터 |
| `loading` | 직전 내용 유지 | 직전 값 유지 | 오버레이 + 로딩중입니다 |
| `empty` | 숨김 | 0 | 조회된 데이터가 없습니다 |

### List 와 구분하기

| 상황 | 쓸 컴포넌트 |
| --- | --- |
| 여러 속성을 컬럼으로 비교하고, 정렬·필터·페이징이 필요하다 | **Grid** |
| 항목 하나가 제목과 부가정보로 끝나고 세로로 훑는다 | List |
| 한 행씩 펼쳐 상세를 보여준다 | [Accordion](./accordion.md) |

### 관련 컴포넌트

- [Pagination](./pagination.md) — Footer 가운데의 페이지 이동 컨트롤.
- [Select](./select.md) — Page size 와 필터 조건에 그대로 씁니다.
- [Multi Select](./multi-select.md) — 필터 popover 의 값 목록이 이 Option 과 같은 요소입니다.
- [Checkbox](./checkbox.md) — 행 선택 컨트롤의 원형.
- [Section Title](./section-title.md) — 표 위의 제목 줄.

---

## 8. 예시

```tsx
const columns: GridColumn[] = [
  { key: "name", label: "항목명", width: 180, pinned: true, sortable: true, resizable: true },
  { key: "status", label: "상태", width: 140, filterable: true, movable: true },
  { key: "qty", label: "수량", align: "end", sortable: true },
];

<Grid
  aria-label="항목 목록"
  columns={columns}
  rows={pageRows}
  totalCount={1284}
  height={300}
  pageIndex={page}
  onPageChange={setPage}
  selectable
  selectedKeys={keys}
  onSelectionChange={setKeys}
  onSortChange={setSort}
  onFilterChange={(key, filter) => refetch({ [key]: filter })}
/>

<Grid
  columns={columns}
  rows={rows}
  totalCount={5}
  treeData
  getRowPath={(row) => row.path as string[]}
  defaultExpandedDepth={1}
  selectable
  selectsChildren
/>
```

```html
<div class="atom-grid" data-state="ready" style="height: 300px">
  <div class="atom-grid__scroll" tabindex="0">
    <table class="atom-grid__table">
      <thead class="atom-grid__thead">
        <tr>
          <th class="atom-grid__th atom-grid__th--check">…</th>
          <th class="atom-grid__th atom-grid__th--pinned
                     atom-grid__th--sorted_desc" aria-sort="descending">
            <span class="atom-grid__th-inner">
              <span class="atom-grid__th-grip">…</span>
              <span class="atom-grid__th-label">항목명</span>
              <span class="atom-grid__th-sort">…</span>
              <button class="atom-grid__th-filter" type="button"
                      aria-haspopup="dialog" aria-expanded="false">…</button>
              <span class="atom-grid__th-resize"></span>
            </span>
          </th>
        </tr>
      </thead>
      <tbody class="atom-grid__tbody">
        <tr class="atom-grid__tr" aria-selected="true">
          <td class="atom-grid__td atom-grid__td--check">…</td>
          <td class="atom-grid__td atom-grid__td--pinned">항목 A-01</td>
        </tr>
      </tbody>
    </table>

    <div class="atom-grid__overlay">
      <span class="atom-grid__spinner"></span>
      <span class="atom-grid__overlay-text">로딩중입니다</span>
    </div>
    <div class="atom-grid__empty">
      <span class="atom-grid__empty-text">조회된 데이터가 없습니다</span>
    </div>
  </div>

  <!-- __scroll 바깥. 위치는 헤더 셀 rect 에서 계산합니다. -->
  <div class="atom-grid__filter-popover" data-state="open"
       role="dialog" aria-label="상태 필터">
    <div class="atom-grid__filter-group">
      <span class="atom-grid__filter-title">텍스트 필터</span>
      <div class="atom-grid__filter-row">
        <div class="atom-select atom-select--size_small">…</div>
        <label class="atom-text-input atom-text-input--size_small">
          <input class="atom-text-input__control" type="text" />
        </label>
      </div>
    </div>

    <div class="atom-grid__filter-divider"></div>

    <div class="atom-grid__filter-group">
      <span class="atom-grid__filter-title">데이터 필터</span>
      <div class="atom-grid__filter-list">
        <div class="atom-multi-select__option" role="option"
             aria-selected="true">…</div>
      </div>
    </div>

    <div class="atom-grid__filter-actions">
      <button class="atom-button atom-button--size_xsmall
                     atom-button--variant_ghost">초기화</button>
      <button class="atom-button atom-button--size_xsmall
                     atom-button--variant_brand-solid">적용</button>
    </div>
  </div>

  <div class="atom-grid__footer">
    <span class="atom-grid__count">
      총 건수 : <span class="atom-grid__count-value">1,284</span>
    </span>
    <nav class="atom-pagination" aria-label="페이지">…</nav>
    <div class="atom-grid__page-size">
      <div class="atom-select atom-select--size_small">
        <button class="atom-select__trigger" type="button">…</button>
      </div>
    </div>
  </div>
</div>
```

계층을 켰을 때입니다. 표가 `role="treegrid"` 가 되고, 각 행이 자기 깊이와
펼침 상태를 답니다.

```html
<table class="atom-grid__table" role="treegrid">
  <tbody class="atom-grid__tbody">
    <!-- 부모 — 자식이 있으므로 aria-expanded 를 답니다 -->
    <tr class="atom-grid__tr" aria-level="1" aria-expanded="true">
      <td class="atom-grid__td atom-grid__td--tree"
          style="--atom-grid-tree-depth: 0">
        <span class="atom-grid__tree-cell">
          <button class="atom-grid__tree-caret" type="button"
                  tabindex="-1" aria-label="접기">
            <svg aria-hidden="true"><use href="#atom-i-chevron-right" /></svg>
          </button>
          <span class="atom-grid__tree-label">분류 A</span>

          <!-- 직계가 아니라 자손 전체의 수입니다 -->
          <span class="atom-grid__tree-count">(3)</span>
        </span>
      </td>
      <td class="atom-grid__td">사용중</td>
    </tr>

    <!-- 잎 — aria-expanded 가 없고, 캐럿은 자리만 지킵니다 -->
    <tr class="atom-grid__tr" aria-level="2">
      <td class="atom-grid__td atom-grid__td--tree"
          style="--atom-grid-tree-depth: 1">
        <span class="atom-grid__tree-cell">
          <span class="atom-grid__tree-caret atom-grid__tree-caret--empty"
                aria-hidden="true">
            <svg aria-hidden="true"><use href="#atom-i-chevron-right" /></svg>
          </span>
          <span class="atom-grid__tree-label">항목 A-01</span>
        </span>
      </td>
      <td class="atom-grid__td">사용중</td>
    </tr>
  </tbody>
</table>
```