---
{"id":"tree-view","title":"트리 탐색","category":"컴포넌트","order":57,"summary":"파일·폴더의 다단계 계층 탐색의 사용·상태·접근성 계약.","status":"문서 기준 · UI 미검증","references":["components/tree-view/usage"]}
---

# 트리 탐색

## 목적과 사용

파일·폴더의 다단계 계층 탐색에 사용합니다. 한 단계 공개에는 아코디언, 제품 기본 탐색에는 nav를 우선합니다.

## 구성과 변형

분기·말단, 펼침 상태, 선택/포커스, 선택적 로딩. 변형의 외형은 각 제품의 기존 [토큰](tokens.md)을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

## 동작 규칙

- TREE-01 MUST: 펼침과 선택을 서로 다른 행동으로 구분합니다.
- TREE-02 MUST: 자식이 없는 것과 아직 읽지 못한 것을 구분합니다.
- TREE-03 SHOULD: 큰 트리는 필요한 범위만 읽고 기존 위치를 유지합니다.
- TREE-04 MUST: 파일/폴더 권한은 서버가 검사합니다.

## 접근성

tree 역할을 사용하면 방향키 좌우 계층 이동, 위아래 노드 이동, Home/End 등 선택한 패턴의 계약을 구현합니다. 공통 [접근성 기준](accessibility.md)도 함께 적용합니다.

## 콘텐츠 예시

좋음: 접근 불가 폴더를 오류로 설명 / 피함: 빈 폴더인 것처럼 표시.

## 우리 구현과 연결

Panel 파일 탐색에 적용 가능한 기준이며 트리 UI가 현재 구현됐다는 선언은 아닙니다.

제품별 소유 경로는 [WICKEDVPS](product-vps.md), [Panel](product-panel.md), [Blesta](product-blesta.md)와 [소스 근거](source-evidence.md)를 확인합니다. 코드 존재와 모든 사용처의 준수는 다르며, 별도 표시가 없는 제품별 준수 상태는 미검증입니다.

## 상태와 검증

깊은 경로·지연 로드·권한 거절·이름 변경·선택 유지·키보드를 확인합니다.

일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. [검증 체크리스트](testing.md)에 증거를 연결합니다.