# 260210-23.25-hierarchical-outliner-system

> **일시**: 2026-02-10 23:25
> **주제**: 계층형 번호 체계(TC-8) 및 아웃라이너 강제 모드(TC-9) 통합 설계
> **관련 Task**: TC-8, TC-8-1, TC-9, TC-9-1

---

## 1. 개요
InsuWiki의 지식 체계화를 위해 문서의 모든 구조를 리스트 기반의 계층형 아웃라이너로 전환함. 법조문 스타일의 자동 번호 생성과 에디터의 구조적 제약을 통해 데이터의 정형성을 확보하는 것이 목적임.

## 2. 상세 설계 및 구현 내역

### 2.1. 계층형 번호 시스템 (TC-8, TC-8-1, TC-8-2, TC-8-4, TC-8-7, TC-8-8)
- **기능**: 불렛(`•`) 대신 `1.`, `1.1.`, `1.1.1.` 등 자동 번호 매기기 지원.
- **범위**: 최대 5단계(`1.1.1.1.1.`)까지 확장 지원.
- **통합 레이아웃 고도화 (TC-8-8)**:
  - **화면 동기화**: 편집창(`.ProseMirror`)과 조회 화면(`.prose`)의 레이아웃 CSS를 100% 동일하게 적용.
  - **들여쓰기 축소**: 계층별 들여쓰기(`margin-left`)를 **스페이스 4개 수준**(약 `1.5rem`)으로 대폭 축소하여 가로 공간 효율성 증대.
  - **'2스페이스' 간격**: 번호(`.`) 뒤 여백을 모든 화면에서 **`0.6rem`**(2스페이스 수준)으로 고정하여 밀착도 강화.
  - **정렬 교정**: 조회 화면에서 번호와 텍스트의 수직/수평 정렬이 어긋나는 현상 완벽 해결.
- **레이아웃 정밀 교정 (TC-8-7)**:
  - **수직 정렬**: `top: 0.15rem`과 `line-height` 조정을 통해 베이스라인 일치.
- **레이아웃 재교정 (TC-8-4)**:
  - **번호 규칙**: 사용자의 명시적 요청에 따라 모든 번호 뒤에 마침표(`.`)를 유지 (`1.`, `1.2.` 등).
- **스타일 (CSS)**:
  - CSS 카운터(`insu-ol`)를 활용하여 뎁스별 번호를 동적으로 생성.
  - 빈 리스트 항목에서 숫자 없이 점만 남는 '유령 점' 현상 방지 (`content: none` 조건 강화).

### 2.2. 아웃라이너 강제 모드 (TC-9, TC-9-1)
- **기능**: 편집창 진입 시 항상 리스트 구조로 시작하며, 구조 파괴를 방지함.
- **제약 조건**:
  - 신규 문서 작성 및 전체 삭제 시 기본값으로 `1. ` (Ordered List) 생성.
  - 첫 번째 리스트 항목의 번호를 `Backspace`로 지울 수 없도록 Tiptap 익스텐션 커스텀 적용.
- **오류 수정**: 초기화 시 HTML 태그 대신 마크다운 포맷(`1. `)을 주입하여 에디터 내 태그 노출 버그 해결.

### 2.3. 목차(TOC) 연동
- **파싱**: 문서 내 헤더(`#`)뿐만 아니라 5단계 리스트 항목을 모두 감지하여 목차 평탄화.
- **네비게이션**: 목차 클릭 시 각 리스트 아이템의 고유 ID(`li-{depth}-{index}`)로 스무스하게 스크롤 이동.
- **모바일 지원**: 좁은 화면을 위한 TOC 드로어 및 상단 토글 버튼 구현.

## 3. 기대 효과
- 지식의 구조적 정립을 통한 가독성 및 탐색 효율 극대화.
- 사용자 실수로 인한 문서 체계 파손 방지.