크라우니 오피스 슬라이드 punch #1 — 캔버스 데이터 구동 + 텍스트 편집 영속화

개요

크라우니 오피스 ModuleSlides(DCLogic/React 앱 번들, 4.2MB, 무수정)의 편집 캔버스를 슬라이드 데이터 구동으로 바꾸고, 제목·본문 contentEditable 편집을 slide 객체에 writeback해 영속화했다. 앱 번들 무수정 원칙 — 전부 crownyBridge.js 런타임 몽키패치 + DOM-fixup(시트 §19 대칭 신규 §20).

무엇을 했는지 (판정표 punch #1)

• 캔버스 데이터 구동: 편집 캔버스 본문이 kind별 하드코딩 HTML이었다(slides[cur] 미참조).

brdige가 캔버스 카드 DOM에 slides[cur]의 제목/본문을 주입 → slide[0]≠slide[1] 실내용 렌더.

• 텍스트 편집 영속화: 제목(전 kind)·부제(title kind)·불릿(bullets kind) contentEditable에

input(라이브 writeback, 재렌더 억제)·blur(setState 동기화) 배선 → 전환 후 복귀해도 유지.

• 슬라이드별 독립 + 복제 내용복제: 원본 th.dup의 {...arr[i]} spread가 신규 body 필드까지

자동 복제. 추가/복제/삭제(기존 실작동)와 정합.

• 썸네일 갱신: renderVals 몽키패치가 title-kind 썸네일 innerText를 실제 제목으로 반영.

핵심 함정 / 발견

• renderVals는 캔버스 제목/본문에 {{ }} 바인딩이 아예 없어(note만 바인딩) 값 교체로 못 고침 →

시트 grid-template-columns를 DOM-fixup으로 고친 것과 동형으로 캔버스 DOM 직접 주입.

• dc 앱=React. renderVals 몽키패치는 재렌더가 나야 __crownySlideSelf를 채워 진입 직후 캔버스가

하드코딩으로 남는다 → **카드의 __reactFiber$*에서 .return을 타고 stateNode.logic(state.slides+ setState)을 walk**해 인스턴스를 즉시 획득(ERP 브릿지 "StreamableComponent.logic" 소견 동형). 이걸로 진입 즉시 데이터 구동.

• contentEditable 편집 중 재렌더로 커서 유실 방지 = 멱등 서명(data-crowny-slide-sig) + 포커스중

카드 skip. 실사용 blur는 슬라이드 전환보다 먼저 발생 → 항상 올바른 slide에 커밋(합성 blur로 포커스 미해제 시에만 오슬라이드 누수 — CDP 테스트 아티팩트, 네이티브 blur로 해소).

관련 파일

• /Users/ef/crownybrowser/bundle/office/bridge/crownyBridge.js (§20 installSlideBridge 신규)
• /Users/ef/crownybrowser/bundle/office/bridge/슬라이드편집.한선 (정본, hanseonc_high 20/20)
• /Users/ef/crownybrowser/spec/슬라이드기능-판정표.md (punch #1)

게이트 결과

• 한선 슬라이드편집.한선 hanseonc_high 컴파일+run 20/20 PASS
• ./CrownyAI 3초 생존 PASS
• 라이브 실측(CDP :9334) 14/14 PASS(①캔버스 데이터구동 slide0≠slide1·②편집 전환후복귀 유지·

본문 불릿 편집영속·③추가 편집독립·④복제 내용(body)까지 복제·⑤썸네일 갱신)

• 문서 회귀 27/27 PASS(무회귀 — 슬라이드는 신규 섹션, ModuleDocs/Sheets/Home 무영향)

잔여 이슈 (후속 punch)

• 발표자 노트 편집(punch #2)·드래그 재정렬(#3)·레이아웃 실적용(#4)·슬라이드쇼+키보드(#5) 미착수.
• split/chart kind 본문은 구조적이라 제목만 데이터구동(본문 블록 편집은 #8 블록삽입에서).