# task-533.1 완료 보고서: InsuWiki TOC 편집모드 스크롤/하이라이트 동기화

## SCQA

**S**: InsuWiki 문서 편집 페이지에서 TipTap 에디터 기반 편집 모드가 동작하고 있으며, 뷰 모드에서는 TOC(목차) 사이드바가 IntersectionObserver 기반으로 스크롤 동기화를 지원한다.

**C**: 편집 모드(`isEditing=true`)에서는 `{!isEditing && <TableOfContents>}` 조건으로 TOC가 완전히 숨겨져 있어, 긴 문서 편집 시 목차 네비게이션을 사용할 수 없다.

**Q**: 편집 모드에서도 TOC를 표시하고, 에디터 스크롤 동기화 + TOC 클릭 네비게이션 + 독립 스크롤을 구현할 수 있는가?

**A**: `TableOfContents.tsx`에 편집모드 분기를 추가하여 4가지 요구사항을 모두 구현했다. TypeScript 컴파일 에러 0건, 변경 파일 2개(114줄 추가, 27줄 삭제). 뷰 모드 기존 동작은 `isEditing` 가드로 보호하여 regression 없음.

## 변경 파일 목록

- `nextapp/src/components/TableOfContents.tsx` (272줄 → 352줄)
  - Props 확장: `isEditing`, `editContent` 추가
  - 편집모드 TOC 파싱: `editContent` 기반 마크다운 파싱 (기존 로직 재활용)
  - 편집모드 스크롤 감지: `scroll-container` 스크롤 이벤트 + rAF throttle → `.ProseMirror` h1/h2의 BoundingClientRect 비교 → activeId 업데이트
  - TOC 클릭 핸들러: `handleEditingClick()` - heading DOM 찾아 scrollIntoView
  - 독립 스크롤: `overscroll-contain` 클래스 추가
  - IntersectionObserver: `isEditing` 시 비활성화 가드 추가

- `nextapp/src/app/docs/[id]/DocumentClient.tsx`
  - 데스크톱 TOC (567행): `!isEditing` 조건 제거, `isEditing`/`editContent` props 전달
  - 모바일 TOC (506행): `!isEditing` 조건 제거, `isEditing`/`editContent` props 전달
  - 에디터 wrapper: `overscroll-contain` 클래스 추가

## 요구사항 충족 매핑

- R1 독립 스크롤: TOC `overscroll-contain` + 에디터 wrapper `overscroll-contain` → 각 영역 독립 스크롤
- R2 편집창→TOC 하이라이트: scroll 이벤트 + rAF throttle + BoundingClientRect 기반 heading 감지
- R3 TOC 클릭→편집창 이동: `handleEditingClick()` → heading DOM `scrollIntoView({ behavior: 'smooth', block: 'start' })`
- R4 편집모드 TOC 표시: `!isEditing` 조건 제거 (데스크톱 + 모바일 양쪽)

## 검증 결과

- TypeScript 빌드: `npx next build` → "Compiled successfully in 14.2s" (컴파일 에러 0건)
- 페이지 생성 단계: Firebase API key 미설정으로 실패 (worktree 환경 이슈, 코드 변경 무관)
- 변경 범위: 지정된 2개 파일만 수정 (scope 준수)

## 발견 이슈

1. **같은 text heading 중복 매칭**: 편집모드에서 동일 텍스트의 h1/h2가 여러 개 있을 경우, text+level 매칭은 첫 번째만 찾음. 대부분의 문서에서는 heading 텍스트가 유니크하므로 실질적 문제 가능성 낮음.
2. **모바일 편집모드 TOC**: 모바일에서 편집모드 TOC의 스크롤 동기화는 데스크톱과 동일 로직 사용. 모바일 특화 UX 개선은 추후 고려 가능.
3. **heading 동적 업데이트 딜레이**: `editContent` (마크다운 문자열)가 변경될 때마다 TOC 재파싱되므로, 타이핑 중 약간의 렌더링 비용 발생. 현재 heading 파싱은 regex 기반 경량 로직이므로 성능 영향 미미.

## 머지 판단

- **머지 필요**: Yes
- **브랜치**: task/task-533.1-dev1
- **워크트리 경로**: /home/jay/projects/insuwiki/.worktrees/task-533.1-dev1
- **머지 의견**: TypeScript 컴파일 에러 0건. 변경 범위 2파일(114+/27-). 뷰 모드 regression 없음 (isEditing 가드). 배포 후 런타임 동작 확인 권장 (편집모드 스크롤 동기화, TOC 클릭 네비게이션, 모바일 TOC).