rhwp-studio: 각주 삭제 기능 구현 (편집 영역에서 각주 선택 → 삭제)

[edwardkim]

배경

크롬 확장 사용자들의 별점 리뷰에서 각주 삭제 기능 요청이 다수 접수되었습니다.

현재 rhwp-studio 는 각주 삽입만 구현되어 있고, 삽입된 각주를 편집 영역에서 선택하여 삭제하는 기능이 없습니다.

한컴 정합 UX 명세

본 기능은 한컴 워드프로세서의 각주 동작과 동일하게 구현합니다.

1. 본문 각주 마커 hit test → 각주 영역으로 커서 이동

• 본문 각주 마커를 클릭하면, 페이지 하단 각주 영역 (footnote zone) 내 해당 번호 위치로 커서 이동
• 한컴의 본문 → 각주 영역 네비게이션 동작 정합

2. 커서 이동 단위에 각주 마커 포함

• 본문에서 좌우 화살표로 커서를 이동할 때, 각주 마커도 한 개의 이동 단위로 처리
• 즉 각주 마커를 가로질러 커서가 한 칸 단위로 이동 (현재는 건너뜀)

3. 각주 삭제 — 양방향 + 확인창 (양쪽 동일 UI)

한컴은 본문 각주 마커의 앞/뒤 양쪽에서 키 입력으로 삭제 가능하며, 두 경우 모두 동일한 확인 다이얼로그를 띄웁니다.

3-A. 각주 앞 위치 + Delete 키

• 본문에서 글자와 글자 사이에 각주가 정의된 경우, 각주 마커 바로 앞에 커서가 있을 때 Delete 누르면
• "각주를 삭제하시겠습니까?" 확인창 표시
• 확인 누르면 각주 마커 + 각주 영역의 해당 footnote 모두 제거

3-B. 각주 뒤 위치 + Backspace 키

• 본문에서 각주 마커 바로 뒤에 커서가 있을 때 Backspace 누르면
• 3-A 와 동일한 확인창 표시 ("각주를 삭제하시겠습니까?")
• 확인 누르면 동일하게 각주 마커 + 각주 영역의 해당 footnote 제거

4. 각주 번호 재계산

• 삭제 후 후속 각주 번호 자동 재정렬

5. Undo/Redo 지원

• 삭제 후 Ctrl+Z 로 복원 (commands/undo.ts 정합)

현재 결함 (관찰된 동작)

A. 본문 각주 마커 hit test 미구현

• 본문 영역에서 각주 마커를 클릭해도 hit 으로 인식되지 않음 → 각주 영역으로 커서 이동 동작 자체가 없음
• (참고: wasm-bridge.ts:673~686 의 hitTestFootnote / hitTestInFootnote 는 각주 영역 zone 내부 처리에 사용 중. 본문 인라인 각주 마커 hit test 는 별도 미구현 영역)

B. 커서가 본문의 각주 마커를 건너뜀

• 좌우 화살표로 본문 커서 이동 시, 각주 마커가 한 칸 단위로 처리되지 않고 글자와 글자 사이의 각주를 건너뜀
• 한컴 정합 동작과 불일치 (한컴은 각주 마커 1 char_offset 단위 통과)
• 본 동작이 정합되어야 "각주 앞/뒤 위치에서 Delete/Backspace" 라는 한컴 정합 삭제 UX 의 전제 조건이 성립

현재 구현 상태

구현됨

• 각주 삽입: rhwp-studio/src/command/commands/insert.ts:94 (insert:footnote 명령) → WasmBridge.insertFootnote() (rhwp-studio/src/core/wasm-bridge.ts:636)
• 각주 영역 (zone) 내부 hit test / 커서 처리: hitTestFootnote / hitTestInFootnote / getCursorRectInFootnote (wasm-bridge.ts:673~686) — 각주 영역 안쪽 동작
• 각주 페이지 정보 조회: getPageFootnoteInfo (wasm-bridge.ts:666)

미구현

• 본문 각주 마커 hit test (위 결함 A) — hit 시 각주 영역으로 커서 이동
• 본문 커서 이동 단위에 각주 마커 포함 (위 결함 B)
• Delete 처리 분기 — 각주 마커 바로 앞 위치에서 Delete 키 → 확인창 → 각주 삭제
• Backspace 처리 분기 — 각주 마커 바로 뒤 위치에서 Backspace 키 → 확인창 → 각주 삭제 (Delete 와 동일 UI)
• 삭제 확인 다이얼로그 — "각주를 삭제하시겠습니까?" UI (rhwp-studio/src/dialog/ 정합 패턴, 양방향 호출 시 동일 컴포넌트)
• WASM 측 각주 삭제 API (예: WasmBridge.deleteFootnote(sec, para, controlIdx) — Document IR 에서 footnote control 제거 + 본문 inline 마커 제거 + 후속 번호 재계산)

작업 범위

영역	변경
WASM (src/)	(1) 본문 각주 마커 hit test API 추가 — hit 시 각주 영역 내 해당 번호 좌표 반환 (2) delete_footnote API 추가 — Document IR control 제거 + 본문 텍스트 동기화 + 후속 각주 번호 재계산
WasmBridge (rhwp-studio/src/core/wasm-bridge.ts)	본문 각주 마커 hit test 메서드 + deleteFootnote(sec, para, controlIdx) 메서드 추가
커서 이동 (rhwp-studio/src/engine/cursor.ts)	좌우 이동 시 각주 마커를 한 개 이동 단위로 처리 (현재 건너뜀 → 정합 처리)
마우스 처리 (engine/input-handler-mouse.ts)	본문 각주 마커 클릭 시 hit 분기 → 각주 영역 내 해당 번호 위치로 커서 이동 (getCursorRectInFootnote 재사용 가능)
입력 처리 (engine/input-handler-keyboard.ts)	(1) Delete 처리에 "직후 char 가 각주 마커" 분기 추가 → 확인창 → delete:footnote (2) Backspace 처리에 "직전 char 가 각주 마커" 분기 추가 → 확인창 → delete:footnote (Delete 와 동일 컴포넌트 호출)
다이얼로그 (rhwp-studio/src/dialog/)	"각주를 삭제하시겠습니까?" 확인 다이얼로그 신규 추가 — 단일 컴포넌트, 양방향 호출 정합
명령 (rhwp-studio/src/command/commands/)	delete:footnote 신규 명령 + Undo 통합

검증

• 단위 테스트: 각주 삽입 → 삭제 라운드트립 (cargo test)
• e2e 테스트 (rhwp-studio/e2e/):
  • 각주 삽입 → 본문 각주 마커 클릭 → 페이지 하단 각주 영역 해당 번호로 커서 이동
  • 좌우 화살표로 각주 마커 가로질러 이동 (한 칸 단위, 건너뛰지 않음)
  • 각주 앞 커서 위치에서 Delete → 확인창 표시 → 확인 → 각주 삭제 + 페이지 재렌더링
  • 각주 뒤 커서 위치에서 Backspace → 동일 확인창 표시 → 확인 → 각주 삭제
  • 확인창에서 취소 누르면 삭제되지 않음 (양방향 모두 검증)
  • Ctrl+Z → 각주 복원
• 시각 판정 (★ 게이트): 각주 영역 후속 번호 재정렬 정합 (한컴 비교) + 확인창 UI 가 Delete/Backspace 양쪽에서 동일하게 보이는지 검증

사용자 출처

크롬 확장 (Chrome Web Store) 별점 리뷰에서의 사용자 요청. 각주 작성 후 잘못 삽입한 각주를 제거할 수 없는 점이 워크플로우 차단 요인으로 지적됨.

마일스톤

M100 (v1.0.0) — v1.0.0 진입 전 해결.

컨트리뷰터 안내

본 이슈는 외부 컨트리뷰터의 PR 을 환영합니다. 작업 시작 전 댓글로 의향 알려주시면 메인테이너가 assignee 지정 + base 동기화 (devel 기준) 안내드립니다.

진행 시 참고

• 한컴 (한컴오피스 2010 / 2022) 의 본문 각주 마커 hit test + 커서 이동 + 삭제 동작이 본 이슈의 권위 기준입니다. 한컴 환경 미보유 시 작업지시자에게 시각 판정 요청.
• 본 이슈는 (1) hit test (2) 커서 이동 단위 (3) Delete/Backspace 삭제 + 확인창 — 3 영역의 통합 작업입니다. 한 PR 에 묶을 수도, 여러 단계로 분리할 수도 있습니다 (단계 분리 시 (1)+(2) → (3) 순서 권장).
• 확인 다이얼로그는 단일 컴포넌트로 구현하여 Delete/Backspace 양쪽에서 동일하게 호출해야 합니다. 두 분기 별로 다른 다이얼로그 인스턴스를 만들지 않습니다.
• WASM 측 delete_footnote 구현은 src/ 의 footnote 관련 모듈 검색 권장 (insert 측과 동일 영역)
• rhwp-studio 측은 commands/insert.ts:94~115 의 insert:footnote 패턴 참고
• 본문 → 각주 영역 커서 이동은 기존 getCursorRectInFootnote (wasm-bridge.ts:683) 재사용 가능
• 확인 다이얼로그는 본 환경의 기존 dialog 패턴 (rhwp-studio/src/dialog/) 정합 권장
• 본 프로젝트 워크플로우는 CLAUDE.md 참조 (이슈 → 브랜치 → 계획서 → 단계별 보고서)

[postmelee]

안녕하세요. 이 이슈 기여 의향이 있어 현재 코드 기준으로 구현 가능성과 범위를 1차 검토했습니다.

확인한 현재 상태는 다음과 같습니다.

• 각주 삽입 경로는 이미 존재합니다: insert_footnote_native / WasmBridge.insertFootnote() / insert:footnote 명령
• 각주 영역 내부 편집과 hit test는 이미 존재합니다: hitTestFootnote, hitTestInFootnote, getCursorRectInFootnote, getPageFootnoteInfo
• 본문 렌더링에는 FootnoteMarker 렌더 노드가 이미 생성되고 있어, 본문 각주 마커 bbox 기반 hit test를 추가할 기반이 있습니다.
• 다만 현재 본문 커서 이동 쪽에서는 Control::Footnote가 네비게이션 가능한 1칸 단위로 취급되지 않는 것으로 보입니다. navigable_text_len, classify_navigable, navigate_next_editable, 본문 cursor rect 계산 쪽 보정이 필요해 보입니다.

작업은 한 PR에 모두 묶기보다, 위험도를 낮추기 위해 다음 두 덩어리로 나눠 진행하려고 합니다.

1. 본문 각주 마커 hit test + 커서 이동 단위 정합

   • 본문 FootnoteMarker bbox hit test API 추가
   • 본문 각주 마커 클릭 시 각주 영역 해당 번호 위치로 커서 이동
   • 좌우 방향키에서 각주 마커를 1칸 이동 단위로 처리
   • 관련 WASM/WasmBridge/cursor/mouse 처리 및 e2e 추가

2. 각주 삭제 API + UI/Undo 통합

   • WASM delete_footnote API 추가: footnote control 제거, control data 동기화, char offset 보정, 번호 재계산, 리플로우/페이지네이션
   • WasmBridge deleteFootnote 추가
   • Delete/Backspace 양방향 삭제 분기 추가
   • 기존 confirm dialog 패턴을 재사용하여 동일 확인 UI 적용
   • SnapshotCommand 기반 Undo/Redo 통합
   • 삭제/취소/복원 e2e 추가

assignee 지정 및 base 동기화 안내를 받으면, devel 기준으로 브랜치를 만들고 프로젝트 워크플로우에 맞춰 수행계획서와 구현계획서부터 작성해 승인 요청 후 진행하겠습니다.

[edwardkim]

감사합니다. 크롬 익스텐션 리뷰에서 각주 삭제 요청이 자주 보여서 이슈로 등록했습니다. 오늘 보니 크롬 익스텐션 다운로드 수가 100K 가 되었습니다. 다음 패치에서는 각주 삭제 기능이 포함되겠네요 ^^

[postmelee]

@edwardkim 10만명이라니.. 대단합니다 축하드려요.
제가 한글 파일 편집가능한 한컴 유료버전은 없어서 크롬 익스텐션 환경에서 최대한 검증 후 "한컴 환경 미보유 시 작업지시자에게 시각 판정 요청" 준수하여 작업 완로 후 시각 판정 요청 드리겠습니다.

[edwardkim]

mydocs/manual/dev_environment_guide.md
87라인부터 100라인까지 로컬 웹서버로 확인하는 방법을 사용하는 방법도 있습니다. 크롬 익스텐션으로 테스트 할 경우 더 번거로와 전 로컬 웹서버로 테스트 중입니다.

[postmelee]

@edwardkim 표현을 잘 못 했네요. 네 로컬 웹서버 띄워서 테스트를 말하는 거였습니다. 정정 감사합니다.

[postmelee]

현재 PR #642 최신 head 7e5b763 기준으로 #598 요구사항 충족도를 다시 점검해 업데이트합니다.

결론

• 작업 범위: 충족
• 검증: 충족
• 컨트리뷰터 안내 > 진행 시 참고: 충족
• PR open / Ready for review 전 점검: 완료

한컴 2010/2022 직접 비교 환경은 보유하지 못해 직접 대조는 수행하지 못했습니다. 대신 이슈의 진행 안내에 맞춰 로컬 웹서버/e2e/수동 검증 자료를 정리했고, PR 본문에 메인테이너가 한컴 환경에서 확인하기 쉬운 판정 포인트를 남겼습니다.

작업 범위 체크

• 본문 각주 마커 hit test API 추가
• 본문 각주 마커 클릭 시 각주 편집 모드 진입
• 좌/우 커서 이동에서 각주 마커를 1칸 cursor unit 으로 처리
• Delete/Fn+Delete: 각주 마커 앞 위치에서 삭제 분기
• Backspace: 각주 마커 뒤 위치에서 삭제 분기
• Delete/Backspace 양쪽에서 동일한 "각주를 삭제하시겠습니까?" 확인 다이얼로그 표시
• 확인창 취소 시 삭제하지 않음
• 확인 시 본문 각주 마커 + 하단 각주 본문 동시 제거
• 후속 각주 번호 재계산
• WASM getFootnoteAtCursor / deleteFootnote API 추가
• SnapshotCommand 기반 Undo/Redo 통합
• 각주 앞 Backspace 일반 텍스트 삭제 시 marker anchor 및 Undo 복원 보정

검증 체크

• cargo test --test issue_598_footnote_marker_nav (4 passed)
• cargo test wasm_api::tests::test_save_text_only --lib -- --nocapture
• cargo test --lib (1135 passed, 0 failed, 2 ignored)
• cargo build
• docker-compose --env-file .env.docker run --rm wasm
• cd rhwp-studio && npm run build
• CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" node e2e/footnote-delete-confirm.test.mjs --mode=headless
• git diff --check
• GitHub Checks 통과: Build & Test, Analyze(js/python/rust), Canvas visual diff, CodeQL

E2E에서 추가로 확인한 흐름:

• ArrowRight/ArrowLeft 로 본문 각주 마커를 한 칸 단위로 통과
• 본문 각주 마커 클릭 후 각주 편집 모드 진입 및 원본 문단/컨트롤/각주 인덱스 연결
• Delete 경로 확인창/취소
• Backspace 경로 동일 확인창/확인 삭제
• 삭제 후 후속 각주 재번호화
• Ctrl+Z 로 각주 마커/본문/번호 복원

진행 시 참고 대응

• 한컴 직접 비교는 미수행이지만, 이슈 안내에 따라 로컬 웹서버에서 수동 검증하고 PR 본문에 확인 기준과 첨부 자료 위치를 정리했습니다.
• 최초 계획처럼 (1) hit test + 커서 이동, (2) 삭제 API/UI 순서로 구현했고, 최종 PR은 이슈에서 허용한 대로 한 PR에 통합했습니다.
• 확인 다이얼로그는 Delete/Fn+Delete와 Backspace 양쪽 모두 동일 showConfirm() 경로를 사용합니다.
• WASM 삭제 구현은 footnote 관련 command/API 쪽에 배치했고, rhwp-studio는 기존 command/snapshot 흐름에 맞췄습니다.
• 프로젝트 워크플로우에 맞춰 계획서/단계별 보고서/최종 보고서를 mydocs/에 작성했습니다.

현재 기준으로 PR #642는 #598의 작업 범위와 검증 요구를 충족한다고 판단합니다.