크라우니캔버스 P1 — 해시라우터 + 네비배선 + 폼팩터 자동감지
개요
canvas.crowny.org(:9620) 설계서(dc.html) 9화면을 dc-런타임.js만 개조해 상호이동 가능한 앱으로 전환.
설계 CSS/DOM 불변, 이벤트·라우팅만 추가. index.html 무수정.
무엇을 했는지
- 라우터화: 기존 "1화면만 남기고 destroy"를 "9화면 전부 detach 보존(화면들[label]=element), 활성 1개만 body에 appendChild"로 교체. hashchange로 재라우팅.
- 라우트맵: #today→1a #page→1b #approval→1c #reward→1d #dayclose→1e #모바일→2a #바타입→2b라이트 #바타입다크→2b다크 #태블릿→2c. ?화면= 파라미터·레거시 별칭(데스크탑/위키/결재함…) 유지.
- 데스크탑(1a/1b/1c)=사이드바고정+컨텐츠스크롤(min-width 1160 래퍼, 1회 멱등). 비데스크탑=고정크기, 뷰포트≥폭이면 center 아니면 flex-start.
- 네비배선: 활성화면 안에서 설계 DOM을 직접텍스트(자식요소 제외 텍스트노드) 매칭으로 탐지해 클릭핸들러 부착. Today→#today, 결재함→#approval, "2026 신제품 개발 기획서"→#page, "결재함에서 처리"→#approval, "결재 대기"(stat)→#approval, 검색=no-op(커서만). 못 찾으면 조용히 스킵. 스타일 불변.
- 폼팩터 자동감지: 해시·파라미터 없으면 innerWidth로 ≤767→모바일 · 768~1280→태블릿 · >1280→today. resize 시 자동모드일 때만 재판정(명시 라우트는 정렬만 갱신).
- 폰트: index.html이 jsDelivr Pretendard + Noto Serif KR 로드 확인(mail.crowny.org 통일). 전 화면 헤드리스 렌더서 세리프 제목·CRD 치환 확인.
검증(실측)
- node --check dc-런타임.js → PASS
- 동반 dc-런타임.한선 STRICT 컴파일 OK + 셀프테스트 28/28 PASS(라우트맵·자동감지·데스크탑앱판정·네비라우트 파리티)
- 헤드리스 Chrome 10캡처 육안검증: #today=1a데스크탑 · #approval=1c결재함 · #page=1b편집 · #모바일=2a · #바타입=2b · #태블릿=2c · 루트1440=1a(자동데스크탑) · 루트400=2a(자동모바일). 전부 {{ }} 없음, 폰트 로드.
관련 파일
- /Users/ef/crowny-canvas/앱/dc-런타임.js (개조)
- /Users/ef/crowny-canvas/한선씨/dc-런타임.한선 (동반, 라우트맵 파리티+셀프테스트)
- /Users/ef/crowny-canvas/앱/index.html (무수정, 참조만)
잔여 이슈
- P2: 인터랙션→백엔드 커맨드 배선(iot.toggle, erp.approve 등). P3: 라이브 데이터 주입.
- 모바일 2a 하단 탭바(홈/검색/결재)·1c 결재행 클릭은 P1 범위 밖(미배선).