# 작업: InsuWiki TOC "살아있는 목차" UX 개선

## 프로젝트
- InsuWiki: `/home/jay/projects/insuwiki/`
- Next.js 앱: `/home/jay/projects/insuwiki/nextapp/`

## 대상 파일
- `/home/jay/projects/insuwiki/nextapp/src/components/TableOfContents.tsx` (474줄)
- `/home/jay/projects/insuwiki/nextapp/src/app/docs/[id]/DocumentClient.tsx` (관련 컴포넌트)
- `/home/jay/projects/insuwiki/nextapp/src/components/__tests__/TableOfContents.test.tsx` (기존 테스트)

## ⚠️ 절대 건드리지 말 것
- TOC level 필터링 (현재 level 1~2만 표시) — 의도된 설계. 수정 금지.

## 수정 사항 (3건)

### 1. 페이지 로드 시 즉시 활성화
**문제**: TOC가 페이지 첫 로드 시 "잠들어 있음". 사용자가 스크롤하거나 TOC를 클릭해야 비로소 활성화됨.

**원인 추정**: IntersectionObserver가 초기화 시점에 현재 보이는 헤딩을 감지하지 못하거나, 초기 active 항목이 설정되지 않음.

**해결**:
- 컴포넌트 마운트 시 즉시 현재 뷰포트에 보이는 첫 번째 헤딩을 찾아서 active로 설정
- IntersectionObserver 초기화 직후 강제 1회 체크 수행
- 페이지 로드 완료 후 TOC의 해당 항목이 하이라이팅된 상태로 시작
- `requestAnimationFrame` 또는 `setTimeout(0)` 등으로 DOM 렌더 완료 후 체크

### 2. TOC가 비어있을 때 가이드 표시
**문제**: 콘텐츠에 헤딩이 없으면 TOC 영역이 그냥 빈 칸. 신규 유저는 TOC가 뭔지도 모름.

**해결**:
- TOC 항목이 0개일 때 안내 메시지 표시:
  - "# 또는 - 로 시작하는 줄을 추가하면 목차가 자동 생성됩니다"
  - 편집 모드일 때만 표시 (뷰 모드에서는 불필요)
- 스타일: `text-xs text-slate-400 italic` 정도로 부담 없이
- 예시:
```jsx
{toc.length === 0 && isEditing && (
  <p className="text-xs text-slate-400 italic px-2 py-4">
    # 제목 또는 - 목록을 추가하면<br/>목차가 자동 생성됩니다
  </p>
)}
```

### 3. 현재 위치 표시 강화
**문제**: 스크롤 시 TOC에서 현재 위치 하이라이팅이 눈에 잘 안 뜀. 실 유저가 "지금 어디 보고 있지?" 파악하기 어려움.

**해결**:
- 현재 active 항목의 시각적 표시를 강화:
  - 좌측에 파란색 세로 바 (border-left 또는 pseudo-element)
  - 배경색 하이라이팅 (bg-blue-50 또는 bg-indigo-50)
  - font-weight: semibold로 강조
  - 비활성 항목과의 대비를 명확히
- TOC 사이드바 자동 스크롤: active 항목이 TOC 뷰포트 밖이면 자동으로 스크롤하여 보이게
- 예시 스타일:
```jsx
<div className={`pl-2 py-1 border-l-2 transition-all duration-200 ${
  isActive
    ? 'border-blue-500 bg-blue-50 font-semibold text-blue-700'
    : 'border-transparent text-slate-600 hover:text-slate-800'
}`}>
```

## 검증
1. 페이지 새로고침 후 TOC에 현재 보이는 섹션이 즉시 하이라이팅 확인
2. 빈 문서에서 편집 모드 진입 시 가이드 메시지 표시 확인
3. 스크롤 시 TOC active 항목이 눈에 띄게 강조되는지 확인
4. 기존 테스트 회귀 없음 (vitest 실행)
5. 빌드 성공 확인 (`npm run build` 또는 `npx next build`)

## 산출물
- TableOfContents.tsx 수정
- DocumentClient.tsx 수정 (필요 시)
- 테스트 추가/수정
- 보고서: `/home/jay/workspace/memory/reports/task-604.1.md`