CrownyDoc Office — 신셸 디자인 잔여 이슈 3건 표적 수리
개요
docs.crowny.org/office 새 셸(od-topbar 8탭 + od-statusbar)에 대한 적대 디자인검증이 남긴 3건
(+ 여력분 1건)을 편집 허용 범위 4파일(index.html, office-shell.js, office-design-tokens.css,
office-shell.한선)만으로 표적 수리했다. 서버 재기동 불필요(정적 서빙), 그 외 파일(72모듈·서버·
게이트웨이) 일체 무접촉.
무엇을 했는지
이슈#1 [critical] 레거시 편집모드 토글이 od-topbar를 덮어 8번째 탭('플랜') 가림
- 원인:
collab-phase3.js(CrownyEditMode, 편집 허용범위 밖)가 DOMContentLoaded 시점에
#crowny-em-bar(자유/추적/잠금 토글)를
position:fixed;top:14px;left:50% 로
document.body에
직접 부착 — od-topbar(46px) 중앙 위에 겹쳐 8번째 탭을 가림.
- 수정: 소스를 고칠 수 없으므로 DOM만 이동.
office-shell.js에 MutationObserver를 달아
#crowny-em-bar가 body에 나타나는 순간
.od-editmode-slot(od-topbar 안, 검색창 앞)으로
appendChild — 요소를 지우지 않으므로 onclick 등 기존 바인딩이 그대로 유지되어 기능 회귀 없음.
위치 CSS는
office-design-tokens.css의
.od-editmode-slot #crowny-em-bar 스코프 규칙(더 높은
특정성 + 일부
!important)이 fixed/top/left/transform을 해제하고 topbar 안에 맞는 작은 칩으로
재스타일. 부수적으로 앵커를 잃는
#crowny-em-status 안내 툴팁(장식용, pointer-events:none)은
이동 시점에 숨김 처리.
이슈#2 [high] 레거시 .title-bar(36px 2번째 행) od-topbar와 중복
- 수정:
문서명(#doc-title)/저장(#btn-save)/공유(#btn-share)/사이드바(#btn-sidebar-toggle) 는
id 유지한 채 마크업을
.od-topbar 안으로 물리 이동(정적 HTML 재배치, DOM 삭제 아님) — 이 id들을
참조하는 export-*.js/file-compat.js/import.js/office-learn.js/최근문서.js 등은 전부 호출 시점
getElementById 조회라 위치 이동에 영향받지 않음(사전 확인 완료).
.title-bar 자체는
style='display:none'으로 숨기되 DOM 보존(로고 span +
#user-avatar만 남음 — 로고는 od-topbar
좌측 'C' 마크가 대체,
#user-avatar는 collab-client.js가 툴팁 title만 갱신하는 장식용이라 숨겨도
무해).
office-design-tokens.css에
.od-topbar .doc-name/
.od-topbar .tb-btn 스코프 규칙을
추가해 다크 브랜드 바 위에서 보이도록 재스타일(새 클래스 추가 없이 기존 클래스명 재사용).
이슈#3 [high] 상태바 기본 라벨 미렌더
- 수정:
office-shell.js에 renderDefaultStatus()(좌측 #shell-status-left = "문서 N개 ·
동기화됨", N=
collectDocIndex().length, localStorage
crowny-docindex / 우측
#shell-status-right-text = "모든 변경사항 저장됨") 추가, 초기화 시 1회 호출.
setStatus(text)는
좌측에 일시 메시지를 띄운 뒤 3초 후 기본값으로 자동 복원(
setTimeout + 재호출 시 이전 타이머
clear). 신규
setStatusRight(text)를
window.CrownyShell API에 추가.
index.html 상태바에
.od-status-right(dot + text) 마크업 추가, 기존
.zoom-controls의
margin-left:auto(crowny-office.css)와 우측정렬 경합하지 않도록
office-design-tokens.css에서
.od-statusbar .zoom-controls{margin-left:0}로 무효화.
autosave 훅 연동: grep으로 확인한 결과
common.js의
CrownyOffice.autoSave._updateStatus(state)
가 실제 훅(state: unsaved/saving/saved/error)이나 원래
#autosave-status란 미존재 엘리먼트를
찾다 no-op되던 것 — index.html 인라인 스크립트에서 이 함수를 감싸(monkey-patch) 같은 state를
상태바 우측에도 반영(저장 중… / 모든 변경사항 저장됨 / 저장되지 않은 변경사항 / 저장 실패 —
재시도 중…).
이슈#4 [low, 여력분] 활성 탭 모듈 식별색 인디케이터
office-design-tokens.css에 .od-tab{position:relative} + .od-tab.is-active::after(하단 2px
바) + 탭 마크업에 이미 있는
data-mod 속성으로 8개 attr 셀렉터 매칭(
--od-mod-* 토큰 재사용,
마크업 변경 없음).
관련 파일
/Users/ef/CrownyDoc/한선씨/정적/index.html — od-topbar 컨트롤 이관, .title-bar 숨김,
상태바 우측 슬롯 마크업, autosave 훅 monkey-patch
/Users/ef/CrownyDoc/한선씨/정적/office-shell.js — _relocateEditModeBar/_watchLegacyEditMode,
renderDefaultStatus/
defaultLeftStatus/
setStatus(3초 복원)/
setStatusRight
/Users/ef/CrownyDoc/한선씨/정적/office-design-tokens.css — 이슈#1~#4 스코프 CSS 오버라이드/Users/ef/CrownyDoc/한선씨/정적/office-shell.한선 — 상태바 기본라벨/setStatus 복원/autosave
연동의 순수 로직 동반(DOM 무의존 부분만 재현, 기존 파일 컨벤션 그대로 따름) —
CROWNY_STRICT=1
재컴파일 + 자체시험 22/22 ALL_PASS(신규 검증 8건 포함)
검증
node --check office-shell.js OK, index.html 인라인 스크립트 추출 후 node --check OK- 헤드리스 Chrome 1600×1000 스크린샷(
--dump-dom 동시 캡처) — 8탭 전부 보임(플랜 가림 해소),
단일 상단바 한 줄, 상태바 좌("문서 0개 · 동기화됨")/우("● 모든 변경사항 저장됨") 라벨 렌더 확인,
활성 탭(문서) 하단에
--od-mod-doc(파란색) 인디케이터 확인
--dump-dom grep: #crowny-em-bar가 #shell-editmode-slot(od-topbar 내부)로 정상 이동,
#crowny-em-status display:none,
#legacy-title-bar display:none(DOM 보존)
- 콘솔 치명 에러 0건(
--enable-logging=stderr 3회 실측)
- 저장/공유/사이드바 버튼 클릭 경로: id 유지로 기존 바인딩(office-learn.js, index.html 인라인
onclick) 코드상 그대로 연결 확인(
#btn-share는 원래도 미배선 상태 — 이번 이동으로 인한 회귀 아님)
잔여 이슈
- 첫 headless 실행에서 외부 CDN 웹폰트(jsdelivr/fonts.googleapis) 로딩이 스크립트 실행 순서를
지연시켜, 별개 프로세스 호출 간
--virtual-time-budget 타이밍에 따라
#crowny-em-bar 렌더
완료 시점이 달라지는 현상 관찰(같은 프로세스에서 screenshot+dump-dom 동시 캡처하면 항상 정상
렌더 확인됨) — 페이지 구조상 선행 특성이며 이번 4파일 범위의 결함은 아님. 참고용으로만 남김.
#btn-share는 여전히 클릭 핸들러 미배선(사전 존재 상태, 이번 작업 범위 밖).2026-07-13-오피스-검증이슈3건-재수리.md에 남은 "동시접속 시 스크립트 로딩 정지"(게이트웨이/
서버 영역)는 이번 작업 범위 밖이라 손대지 않음(중복 아님, 별개 이슈).