← 목록
기타 2026-07-16 5KB 읽기 5분

크라우니 오피스 문서 편집기 — 긴 문서 스크롤 보강

개요

문서 내용이 늘어나 편집영역이 뷰포트보다 커져도 스크롤이 생기지 않아 아래쪽 내용을 볼 수 없던 버그를 수리(상태바 하단고정 수리 작업의 out-of-scope 발견 사항 후속). 앱 번들(bundle/office/app/index.html) 무수정 — crownyBridge.js(섹션 17 확장)만 대상.

진단 (CDP 실측, 1000x700)

editable에서 조상 체인을 전수 측정한 결과, editable.parentElement가 이미 overflow-y:auto를 갖고 있어(구 findEditorScrollContainer 로직이 이걸 스크롤 담당 요소로 오판) 있었지만, 이 요소는 자기 높이가 무제한(자식과 정확히 같은 높이로 계속 자람, clientHeight === scrollHeight 항상 참)이라 overflow:auto가 걸려도 스크롤이 전혀 발생하지 않는 상태였다(상태바 수리 작업이 관찰한 "내부 클리핑 없음" 현상의 원인 확인).

실제로 콘텐츠보다 낮게 고정된 진짜 경계는 appFrame(헤더 46px → 3열 본문 → 상태바 28px)의 "3열 본문" 자리 그 자체 하나뿐: 실측 626px(=700-46-28, 상태바 static일 때) / 654px(=700-46, 상태바가 섹션17 수정으로 fixed가 되어 자리를 반납한 뒤) — 두 경우 다 콘텐츠 실측 6900px대보다 훨씬 작은데도 overflow-y:visible이라 그냥 흘러넘치고, appFrame 자체가 overflow:hidden으로 뷰포트 하단에서 시각적으로 잘라버릴 뿐 스크롤 수단이 없었다.

수리

  1. findEditorScrollContainer(editable) 재작성 — 문서 길이에 따라 값이 달라지는 크기
비교 대신, findStatusBarRow()(콘텐츠 마커 "키 가이드")가 이미 찾아둔 상태바 행의 부모(=appFrame)에서 editable을 포함하는 자식을 구조적으로 짚는다. 문서가 짧든 길든 항상 같은 요소를 가리키는 결정론적 방법(다른 find* 함수와 동일 관용구).
  1. padEditorForStatusBar(row)container.style.overflowY = 'auto' 한 줄 추가 —
이 컨테이너는 앱 원본에서 overflow-y:visible이라 이 한 줄이 수리의 핵심. 기존 상태바 여백 보정(paddingBottom) 로직은 그대로 재사용.
  1. schedule() 매 틱 + resize 리스너에서 기존 applyStatusBarFix() 그대로 재사용
(별도 리사이즈 훅 불필요 — 컨테이너 높이는 JS로 하드코딩하지 않고 CSS flex가 그대로 계산하므로 리사이즈 시 브라우저가 자동 재계산, 실측으로 454px(500px 창)까지 확인).

실측 결과 (CDP, before/after)

항목수리 전수리 후
컨테이너 overflow-yvisibleauto
긴 문서(60문단) clientHeight/scrollHeight654 / 6917 (스크롤 불가)654 / 6945 (스크롤 가능)
appFrame(뷰포트) scrollHeight6963 (콘텐츠 누출)700 (정상 클리핑, 컨테이너 내부로 흡수)
scrollTo(bottom) 후 마지막 문단확인 불가(스크롤 자체 없음)상태바 위 완전 가시(fullyAboveStatusBar: true)
진짜 짧은 문서(한 줄)canScroll: false (정상, 변화 없음)canScroll: false (스크롤바 없음 유지)
개요 클릭 스크롤(scrollIntoView)회귀 대상 아님정상 작동 확인(문단 51개 주입 후 최하단 문단 top 3112→536, 뷰포트 내 진입)
창 리사이즈(700→500)clientHeight 654→454 자동 재계산, paddingBottom 28px 유지

게이트

  • CDP 실측 3종 all PASS: 짧은 문서 스크롤없음 / 긴 문서 스크롤생김(overflow-auto) /
scrollTo(bottom) 마지막줄 상태바 위 완전가시.
  • 회귀 하니스: bash bundle/office/bridge/회귀실행.sh27/27 PASS (수리 전/후 동일
유지, 개요/찾기/서식/댓글/히스토리 전 시나리오 무회귀).
  • 네이티브: ./native/CrownyAI 3초 생존 확인(native 무변경).

관련 파일

  • /Users/ef/crownybrowser/bundle/office/bridge/crownyBridge.js — 섹션 17
findEditorScrollContainer()/padEditorForStatusBar() 재작성. 유일한 수정 파일.
  • /Users/ef/crownybrowser/bundle/office/bridge/회귀하니스.js — 무수정(27개 시나리오 그대로).
  • /Users/ef/crownybrowser/spec/문서-회귀리포트.md — 최신 실행 결과 27/27 PASS.
  • 한선씨 정본: 신규 불요 — 순수 DOM 구조 탐색/CSS 위치 로직으로, 동일 섹션(17)의 직전
상태바 하단고정 수리(2026-07-16-오피스-상태바-하단고정-수리.md)에서 이미 "한선씨 신규 불요, 문서통계.한선 재사용 방침 유지" 판정을 받은 동일 계열 로직.

잔여 이슈

  • 없음(직전 작업의 out-of-scope 발견 사항이 이번 임무로 해소됨).