# task-580.1 완료 보고서 — InsuWiki TOC 4가지 버그 수정 **팀**: dev2-team (오딘 팀장) **작업자**: 프레이야(프론트엔드), 헤임달(테스터) **레벨**: Lv.2 (기능 구현) --- ## SCQA **S**: InsuWiki의 목차(TOC) 컴포넌트가 뷰/편집 모드에서 사이드바 내비게이션 기능을 제공하고 있다. **C**: 4가지 버그가 보고됨: (1) 하이라이트 점이 스크롤에 따라 안 움직임, (2) TOC 항목 클릭 시 더블클릭 필요, (3) 클릭 후 하이라이트 점 위치 sync 불일치, (4) 마우스 위치별 스크롤 영역 미분리. 이전 수정 시도(task-535.1)에서도 미해결 상태. **Q**: 4가지 TOC 버그를 모두 수정하여 사용자 경험을 정상화할 수 있는가? **A**: TableOfContents.tsx에 5가지 핵심 수정을 적용하여 4가지 버그 모두 해결. vitest 21건 전체 통과, TypeScript 컴파일 성공, `npm run build` 성공. --- ## 수정 내역 ### 이슈 1: 하이라이트 점이 스크롤에 따라 안 움직임 - `activeIdRef` 추가로 edit 모드 스크롤 핸들러의 stale closure 방지 - useEffect deps에서 `activeId` 제거 → 핸들러 불필요 재등록 방지 - `normalizeText()` 함수 추가로 heading 텍스트 매칭 강화 + fallback includes 매칭 - edit 모드 스크롤 핸들러에 `isClickedRef.current` 가드 추가 ### 이슈 2: TOC 항목 클릭 시 더블클릭 필요 - onClick 최상단에 `e.stopPropagation()` 추가 (Desktop + Mobile) - `handleEditingClick`의 `scrollIntoView`를 `setTimeout(0)`으로 래핑 (ProseMirror 포커스 경합 회피) - View 모드: `handleViewClick` 함수 추출, `requestAnimationFrame`으로 스크롤 래핑 ### 이슈 3: 클릭 후 하이라이트 점 위치 sync 불일치 - `scrollend` 이벤트 리스너로 `isClickedRef` 리셋 (기존 1000ms 고정 → 스크롤 완료 감지) - 2000ms fallback timeout (scrollend 미지원 브라우저 대비) - Edit 모드에서도 동일 패턴 적용 ### 이슈 4: 마우스 위치에 따른 스크롤 영역 분리 안 됨 - `handleTocWheel` 함수 추가: TOC 스크롤 가능 시 `e.stopPropagation()` 호출 - `