Tree View

SEED 에는 나무가 없다 — Accordion 은 중첩 · 고르기를 다루지 않는다. groo 는 WAI-ARIA APG Treeview 를 따른다 — 나무 전체가 Tab 정지점 하나, ↑ ↓ 로 보이는 항목 사이, → ← 로 펼치고 접으며 하위 · 부모로, Home · End 로 다닌다(2026-10-10 사용자 결정 8A). 누르는 자리는 줄 전체다 — 잎은 누르면 고르고, 부모 줄은 누르면 고르면서 펴고 접으며(펼친 부모를 고르면 하위가 접힌다), 꺾쇠는 표시만이다(16D — SEED Accordion "터치 영역은 Chevron 아이콘뿐만 아니라 Trigger 전체"). Enter · Space 는 누르기와 같고, → ← 는 고르지 않고 펴고 접기만 한다. 노드의 동작은 나무 밖 ⋮ 하나가 고른 항목에 건다. 줄의 값은 Side Navigation 항목(44 · 패널 가장자리 8 · 모서리 10 · 14 / 19 · 지금 항목 바탕)과 List 의 누름이다 — 나무는 250 남짓한 패널(1280 에서 본문 992 의 25% = 248 — Resizable) 안의 탐색 목록이라 같은 자리의 사이드바 줄과 크기가 같다. groo 에 처음 두는 스펙이다 — DESIGN.md 의 옛 Treeview 절(v73)을 대신한다.

수치 원본은 tree-view.yaml이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다 — GitHub 에서는 그 파일 · 그림 코드로 가는 링크로 보인다.

직접 골라 보기제목 링크 복사

나무를 눌러 초점을 두고 ↑ ↓ → ← Home End Enter 를 눌러 보거나 "키보드 재생" 을 누르면, 옆 글이 초점 · 읽기(이름 · 단계 · 위치 · 펼침 · 고름) · 고른 부서 · Tab 정지점 수를 따라간다. 부모 줄을 누르면 고르면서 펴고 접고, 잎을 누르면 고른다 — → ← 는 펴고 접기만 한다.

<TreeView
  aria-labelledby="department-title"
  nodes={departments}
  icon={<Building2 />}
  selectedId={selectedId} // "ops"
  onSelectedChange={setSelectedId}
  defaultExpandedIds={parentIds}
/>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

줄제목 링크 복사

줄은 Side Navigation 항목과 같다 — 높이 44(이름이 줄을 바꾸면 늘어난다), 위아래 12 · 좌우 8, 모서리 10, 이름 14 / 19 · 400 fg-neutral. 나무는 패널 가장자리에서 8 들어온다. 단계마다 20 을 들여 하위 꺾쇠가 부모의 꺾쇠 · 아이콘 사이에 선다 — 줄 왼쪽 여백 = 8 + (단계 − 1) × 20. 꺾쇠 칸 20 · 아이콘 16 · 이름 사이는 6 이고, 이름이 여러 줄이면 꺾쇠 · 아이콘은 첫 줄에 맞춘다. List 줄(16 / 22 · 좌우 24)보다 작은 것은 나무가 사이드바처럼 좁은 패널 안의 탐색 목록이어서다.

나무

줄

콘텐츠 층

아이콘

이름

꺾쇠 · 펼침제목 링크 복사

하위가 있는 항목만 꺾쇠(lucide chevron-right 16 · fg-neutral-subtle)를 둔다 — 접혀 있으면 오른쪽, 펼치면 아래로 90° 돈다. 하위 묶음은 높이로 펼치고 접힌다 — 둘 다 300ms motion-ease-easing(Accordion 과 같다, 사용자 결정 3A), 모션 줄이기면 150ms 서서히. 하위가 없는 항목은 꺾쇠 칸을 같은 폭으로 비워 같은 단계의 이름이 같은 자리에 선다. 꺾쇠는 표시만이다 — 따로 누르는 자리를 두지 않고, 부모 줄 전체가 누르는 자리다(아래 "누르기"). 처음 펼침은 화면이 정한다 — 부서 나무는 모두 펼친 채 연다(지금과 같다).

펼침

꺾쇠

누르기 — 줄 전체제목 링크 복사

누르는 자리는 줄 전체(줄 폭 × 44 이상)다 — 꺾쇠만 누르는 작은 자리를 두지 않는다(2026-10-10 사용자 결정 16D — SEED Accordion "터치 영역은 Chevron 아이콘뿐만 아니라 Trigger 전체", Apache-2.0). 잎을 누르면 고른다. 부모 줄을 누르면 그 항목을 고르면서 접힌 하위는 펴고 펼친 하위는 접는다 — 꺾쇠를 눌러도 같다. Enter · Space 는 누르기와 같고, → ← 는 고르지 않고 펴고 접기만 한다.

누르기

늘 펼친 나무(fixed)제목 링크 복사

접지 않는 화면(부서 사용자 — 부서를 고르고 사용자를 옮기는 자리)은 꺾쇠를 그리지 않고 꺾쇠 칸도 빼며 aria-expanded 를 두지 않는다 — 들임만으로 단계를 보인다. → 는 첫 하위로, ← 는 부모로 옮기기만 한다. 줄을 누르면(Enter · Space 도) 고르기만 한다 — 접히지 않는다. 접히지 않는데 꺾쇠 · "펼쳐짐" 이 남으면 누를 수 있는 것처럼 보인다. 줄 · 들임 · 고른 바탕은 접고 펴는 나무와 같다.

늘 펼친 나무

고름제목 링크 복사

고른 항목은 Side Navigation 의 지금 항목과 같은 바탕 bg-neutral-weak-pressed 다(사용자 결정 2026-10-08 — 면 위 1.15 · 다크 1.56). 한 번에 하나만 고르고, 고른 항목은 마우스를 올리거나 눌러도 바탕이 그대로다(더 짙은 불투명 역할이 없다). 보조 기술에는 aria-selected 로 알린다.

고름

고름 — 올리거나 누를 때

노드 동작 — ⋮ 하나제목 링크 복사

노드마다 단추를 두지 않는다 — 항목 안에 단추를 넣으면 단추 안 단추가 되고 Tab 정지점이 늘어난다. 추가 · 수정 · 삭제는 나무 밖 패널 머리의 ⋮ 하나(Button ghost · iconOnly · medium — 보이는 40 · 누르는 44 · 아이콘 18)가 고른 항목에 건다. 이름은 "{고른 부서} 더보기" — 고른 부서가 바뀌면 이름도 바뀐다. 1280 이상은 Menu, 미만은 Menu Sheet 다. 패널 머리는 나무의 이름(제목 16 / 22 · 700 — 구역 제목과 한 벌, 글자 역할 D3)과 ⋮ 한 줄이고, 제목은 나무 줄의 글과 같은 16 에서 시작한다.

패널 머리

패널 머리 제목

동작 단추

State제목 링크 복사

상태

모션

Guidelines제목 링크 복사

언제 쓰나제목 링크 복사

부모 줄은 고르면서 펴고 접는다제목 링크 복사

부모 줄은 Accordion 트리거처럼 줄 전체가 누르는 자리다 — 누르면 그 부서를 고르면서 하위를 펴고 접는다. 꺾쇠만 눌러야 펴지는 나무는 누르는 자리가 31 남짓이라 손가락 · 마우스로 맞히기 어렵다. 그 대가로 펼친 부모를 고르면 하위가 접힌다 — 사용자가 알고 골랐다(16D). 하위를 편 채 부모를 고르려면 한 번 더 누르거나 → 로 편다. 키보드로 고르지 않고 펴고 접으려면 → ← 다. 꺾쇠에 줄과 다른 일을 맡기지 않는다 — 꺾쇠를 눌러도 줄을 누른 것과 같다.

키보드 — Tab 한 번, 화살표로제목 링크 복사

나무 전체가 Tab 정지점 하나다 — 들어오면 고른 항목(없으면 첫 항목)에 초점이 오고, 다시 Tab 하면 나무를 나간다. 부서 20개를 화살표로 다 다닌다. 화살표를 처음 쓰는 사람을 위해 나무의 이름(패널 제목)을 분명히 두고, 낭독이 단계 · 위치 · 펼침을 알린다(트리 관례).

이름은 줄을 바꾼다제목 링크 복사

긴 이름은 말줄임 없이 줄을 바꿔 다 보인다(사용자 결정 8A · 10A) — 가장 긴 뿌리 이름 "가람누리 디지털혁신본부 클라우드 플랫폼 운영 그룹" 도 248 패널에서 줄을 바꿔 다 읽힌다. 앞부분이 같은 부서가 말줄임으로 구별되지 않는 일을 막는다. title 말풍선으로 대신하지 않는다.

머리말을 두지 않는다제목 링크 복사

항목마다 머리말(h3)을 두지 않는다 — 부서 이름은 문서의 절이 아니다. 단계 · 위치는 aria-level · aria-setsize · aria-posinset 이 알린다.

글제목 링크 복사

나무의 이름은 무엇의 나무인지("부서"), 동작 단추는 "{고른 부서} 더보기", 메뉴 줄은 동사로("하위 부서 추가" · "수정" · "삭제") 쓴다.

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/tree-view.tsx 를 쓴다(새 부품). 아래 미리보기는 스펙 값으로 그린 모습이다.

• TreeView — 나무. nodes(TreeNode[] — { id, label, children? }) · aria-label 또는 aria-labelledby(필수) · selectedId · onSelectedChange(id) · expandedIds · defaultExpandedIds · onExpandedChange(ids) · icon(모든 항목의 앞 아이콘 — 부서는 Building2) · collapsible(기본 true — false 면 늘 펼친 나무: 꺾쇠 · aria-expanded 없음). role="tree" · treeitem(aria-level · aria-setsize · aria-posinset · aria-expanded · aria-selected) · group, roving tabindex 와 키보드(↑ ↓ → ← Home End Enter Space)를 나무가 맡는다. 줄 전체가 누르는 자리다 — 잎은 고르고, 부모는 고르면서 펴고 접는다(onSelectedChange · onExpandedChange 가 함께 불린다, Enter · Space 도 같다). → ← 는 펴고 접기만 한다. 꺾쇠는 표시만이라 따로 누르는 자리 · 이벤트가 없다. collapsible={false} 면 누르기는 고르기만.
• 노드 동작은 나무 밖 — Button ghost · iconOnly + Menu 의 ResponsiveMenu(1280 이상 Menu · 미만 Menu Sheet).

부서 나무 — 패널 머리의 ⋮ 하나제목 링크 복사

import { Building2, EllipsisVertical } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  ResponsiveMenu,
  ResponsiveMenuContent,
  ResponsiveMenuGroup,
  ResponsiveMenuItem,
  ResponsiveMenuTrigger,
} from "@/components/ui/menu"
import { TreeView } from "@/components/ui/tree-view"

<div className="flex items-center justify-between">
  <h2 id="department-title">부서</h2>
  {/* 노드마다 단추를 두지 않는다 — 고른 부서에 거는 ⋮ 하나 */}
  <ResponsiveMenu>
    <ResponsiveMenuTrigger asChild>
      <Button variant="ghost" layout="iconOnly" aria-label={`${selected.label} 더보기`}>
        <EllipsisVertical />
      </Button>
    </ResponsiveMenuTrigger>
    <ResponsiveMenuContent title={selected.label}>
      <ResponsiveMenuGroup>
        <ResponsiveMenuItem label="하위 부서 추가" onSelect={addChild} />
        <ResponsiveMenuItem label="수정" onSelect={edit} />
      </ResponsiveMenuGroup>
      <ResponsiveMenuGroup>
        <ResponsiveMenuItem label="삭제" tone="critical" onSelect={askDelete} />
      </ResponsiveMenuGroup>
    </ResponsiveMenuContent>
  </ResponsiveMenu>
</div>
<TreeView
  aria-labelledby="department-title"
  nodes={departments}
  icon={<Building2 />}
  selectedId={selected.id}
  onSelectedChange={setSelectedId}
  defaultExpandedIds={parentIds}
/>

늘 펼친 나무 — 부서 사용자제목 링크 복사

import { Building2 } from "lucide-react"
import { TreeView } from "@/components/ui/tree-view"

{/* 접지 않는다 — 꺾쇠 · aria-expanded 없이 들임만 */}
<TreeView aria-label="부서" nodes={departments} icon={<Building2 />} collapsible={false} selectedId={selectedId} onSelectedChange={setSelectedId} />

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 여러 단계에서 하나를 고르는 자리에 — 고른 내용은 옆 패널에.
• 나무는 Tab 하나 + 화살표 — 줄 전체를 누르는 자리로(부모는 고르면서 펴고 접기), → ← 는 펴고 접기만.
• 노드 동작은 나무 밖 ⋮ 하나 — 이름은 "{고른 항목} 더보기".
• 긴 이름은 줄을 바꿔 다 보인다.

❌ Don't제목 링크 복사

• 꺾쇠만 누르는 작은 자리(31 × 44) · 꺾쇠와 줄에 다른 일을 맡기기.
• 잎을 div 로 두어 키보드로 닿지 않게 · 노드마다 루트를 따로 두어 화살표가 다음 노드로 가지 않게.
• 항목마다 머리말 · 항목 안에 단추(단추 안 단추).
• 이름 말줄임 · title 로 대신하기.
• 접지 않는 나무에 꺾쇠 · aria-expanded 를 남기기.

Specification제목 링크 복사

tree-view.yaml 의 규칙을 하나도 빼지 않고 조건마다 그린다 — 웹이 Tree View 를 만들 때 이 값을 그대로 쓴다. 조건이 없는 Base 가 모든 조합에 걸리고, 뒤의 규칙이 앞의 같은 값을 덮는다. 상태는 enabled 에서 바뀌는 값만 적었다.