정보 밀도와 보조 설명을 유지합니다.
PATTERN · NAVIGATION
접히는 탐색 구조
최근 세션, Mattermost, Remote Request API와 프로젝트를 독립된 최상위 영역으로 유지하고 필요한 목록만 펼칩니다.
01 · PURPOSE
무엇을 해결하는가
최근 세션, Mattermost, Remote Request API와 프로젝트를 독립된 최상위 영역으로 유지하고 필요한 목록만 펼칩니다.
02 · USE WHEN
사용 조건
세션과 운영 도구처럼 수량과 계층이 계속 변하는 좌측 탐색을 구성할 때 사용합니다.
- 모든 최상위 그룹은 기본 접힘
- 폴더 아이콘과 텍스트로 영역을 식별
- 생성·검색 같은 보조 action은 44px hit area 유지
03 · STATUS
표준 상태와 버전
- 표준
- proposed
- 도입 버전
- 2026.10.12.3
- 배포
- source-only
04 · LIVE EXAMPLE
실행 예제
Illustrative — 실제 Worker runtime 데이터가 아닙니다.
05 · RESPONSIVE
Desktop · Tablet · Mobile
열을 축소하고 조작 순서를 보존합니다.
320px에서 page overflow 없이 단일 열로 전환합니다.
06 · STATES
상태 변형
defaultexpandedselectedemptyloadingerror
07 · STRESS
콘텐츠 스트레스
- 80자 프로젝트명
- Mattermost 채널 50개
- RRA key 30개와 2단계 session 목록
08 · ACCESSIBILITY
키보드와 보조기술
- disclosure button에 aria-expanded 제공
- 현재 항목에 aria-current 제공
- 아이콘 단독 action에 accessible name 제공
09 · DO / DON'T
선택 기준
- 업무 domain을 최상위로 분리
- 접힘 상태에서도 아이콘과 tooltip 유지
- 최근/외부처럼 의미가 겹치는 중간 depth 추가
- 텍스트 대신 장식용 기호만 사용
10 · CODE
구현 예제
<button class="nav-group" aria-expanded="false"><svg aria-hidden="true">…</svg><span>프로젝트</span><span class="count">6</span></button>11 · VALIDATION
검증 체크리스트
- keyboard disclosure
- 320px minimum stability
- long identifier wrap
- collapsed sidebar
12 · ADOPTION
Worker 채택 상태
- 채택
- not-started
- 소유
- Worker 개발세션
- 실행 증거
- 없음