이 계획서는 프레임(레이어) 크기 조절 시 세로 크기가 가변적으로 불안정하게 임의로 커지는 버그를 해결하고, 본문 텍스트가 위쪽 프레임에서 사라지고 아래쪽 프레임으로만 몰려 비어버리는 현상을 수정하며, 본문 편집/이동 시 안정성을 대폭 향상시키기 위한 작업 계획입니다.

문제 원인 분석 (Root Cause)

  1. 위쪽 프레임이 비어버리고 아래쪽 프레임으로 텍스트가 쏠리는 버그:

    • reflowText 함수 내에서 본문 프레임에 텍스트가 넘치는지 판단하는 기준 코드가 아래와 같았습니다: if (f.scrollHeight > f.clientHeight || wrapper.scrollHeight > f.clientHeight)
    • 여기서 f는 레이어 프레임 자체(.layer-element)입니다. 이 레이어 프레임은 내부에 크기 조절 핸들(resize-handle, bottom: -8px 등)과 회전 핸들 등의 UI 요소를 자식으로 포함하고 있으며, overflow: visible 상태입니다.
    • 이로 인해 텍스트가 전혀 없거나 아주 조금만 들어있어도, 하단에 튀어나온 조절 핸들 등의 위치 때문에 f.scrollHeight가 항상 f.clientHeight보다 큰 상태가 유지되었습니다.
    • 그 결과 이진 탐색(binary search) 연산이 오동작하여 첫 프레임에는 0글자만 넣어도 오버플로우가 발생했다고 판단하게 되고, 결국 첫 프레임은 빈 프레임이 되고 모든 텍스트가 마지막 프레임(아래쪽 프레임)으로 쏠려버리는 치명적인 버그가 유발되었습니다.

  2. 해결 방법:

    • 핸들 등 외곽 UI 요소를 포함하는 부모 프레임 f 대신, 순수하게 텍스트 단락들만 담고 있는 .text-content-wrapper(wrapper)의 scrollHeight만을 프레임 높이(f.clientHeight)와 비교하도록 수정합니다.
    • if (wrapper.scrollHeight > f.clientHeight)
    • 이와 함께 CSS에서 .text-content-wrapper에 height: 100% !important;를 설정하여, 텍스트 래퍼의 높이가 부모 프레임 크기를 초과하여 임의로 늘어나지 않도록 견고하게 제어합니다.

  3. 인라인 편집 시 백스페이스로 인한 프레임 삭제 버그:

    • 인라인 편집기(contentEditable=true) 상태에서 사용자가 백스페이스를 누를 때, activeElement가 DIV이므로 일반 입력 필드로 인식되지 못하고 레이어 삭제 이벤트가 트리거되던 문제를 방지합니다.

  4. 확대 배율(Zoom)과 크기 조절/이동의 좌표 충돌:

    • getBoundingClientRect()의 확대 픽셀값 대신 unscaled 고유 레이아웃 값(offsetWidth, offsetHeight 등)을 사용하여 120% 줌 상태에서도 튐 현상 없이 안정적으로 크기가 조절되도록 보정합니다.

Proposed Changes (제안된 변경 사항)

[Views Component]

[MODIFY] 

  • CSS 규칙 변경 (약 455라인):

    css
     
    .layer-element[data-type="bodytext"] .text-content-wrapper {
    overflow: hidden;
    height: 100% !important; /* 항상 부모 레이어 프레임 크기 내에 고정되도록 제약 */
    }

  • Mousedown 이벤트 리스너 수정 (리사이즈 및 드래그 시작) (약 3026, 3072라인 부근):

    • getBoundingClientRect() 사용 부분을 제거하고 layer.offsetWidth, layer.offsetHeight, layer.offsetLeft, layer.offsetTop을 사용하여 드래그 타겟 데이터를 빌드합니다.

  • Mousemove 이벤트 리스너 수정 (Resizing 및 Dragging 처리) (약 3333, 3435라인 부근):

    • 마우스 무브 변화율(dx, dy) 계산 및 부모의 너비/높이 계산(parentEl.offsetWidth/offsetHeight)을 교정하여 페이지 하단 경계를 초과하지 못하도록 최종 제한합니다.

  • Keydown 삭제 감지 및 삭제 로직 보정 (약 2030, 2039라인 부근):

    • deleteSelectedLayer() 및 keydown 핸들러를 수정하여, isContentEditable 편집 상태에서는 백스페이스/Delete 삭제 단축키가 작동하지 않도록 방어하고, 프레임 삭제 시 체인 링크를 자동 복구하고 텍스트 유실 없이 리플로우를 수행합니다.

  • Reflow 텍스트 높이 판단 조건 수정 (약 2405, 2437라인 부근):

    • reflowText 함수 내 이진 탐색 및 오버셋 표시 여부 결정 시, 핸들 위치에 영향받는 부모 높이 비교(f.scrollHeight)를 제외하고 순수한 텍스트 높이 비교(wrapper.scrollHeight > f.clientHeight)만 수행하도록 교정합니다.

Verification Plan (검증 계획)

수동 검증 및 시나리오

  1. 프레임 간 텍스트 자동 분배 검증:

    • 2개 이상의 본문 프레임을 연결한 상태에서 첫 번째 프레임의 위치를 옮기거나 크기를 변경해 봅니다.
    • 첫 번째 프레임에 설정한 세로 크기 한도만큼 텍스트가 정상적으로 남고, 초과하는 분량만 다음 프레임으로 자연스럽게 넘어가는지 확인합니다. 첫 번째 프레임이 텅 비어버리는 현상이 완벽하게 해결되었는지 검증합니다.

  2. 글자 지우기(Backspace) 작동 확인:

    • 본문 텍스트 프레임 내부에서 백스페이스로 글자를 지울 때 프레임이 제거되지 않는지 확인합니다.

  3. 프레임 하단 경계 제한 및 리사이즈 조작 확인:

    • 크기 조절 시 프레임의 하단 경계선이 페이지 밖으로 나가지 않고 걸리며, 조작감이 가변적으로 튀지 않고 1px 단위로 견고하게 고정/조절되는지 검증합니다.