crowny-trader dc 핸드오프 → 바닐라 단일 HTML 픽셀포팅
개요
/Users/ef/Downloads/design_handoff_trading/작업_dc앱_slim.html (React 기반 dc 컴포넌트, 52KB)를
의존성 0의 바닐라 JS 단일 HTML로 변환해
/Users/ef/crowny-trader/public/index.html에 배포.
기존 index.html은 이미 landing.html로 백업 이전된 상태였음.
무엇을 했는지
- 원본 마크업(발견/차트/훈련/체크/내 결 5탭)과 로직(state, profile, frame, settle, enter, draw, renderVals)을
React 클래스 → 순수 함수 + 전역
state/
App 네임스페이스로 이식. 수식·초기값·상수(volMult=1.272818,
spikeRate=0.028, demoRest=true) 한 글자도 변경 없음.
sc-if/sc-for/{{ }} 템플릿 문법 → JS 템플릿 리터럴(${cond?...:''}, ${list.map(...).join('')})로
기계적 변환. 전사 오류(곡선따옴표 “ ” ‘ ’, em-dash —, 가운뎃점 ·, 마이너스 기호 − 등) 방지를 위해
원본 파일에서 sed로 정확한 바이트 블록을 추출한 뒤 Python 스크립트(ASCII 앵커만 사용, 한글 텍스트는
절대 재입력하지 않음)로 치환하는 방식을 사용.
sc-camel-on-click → data-action/data-arg 속성 + 단일 이벤트 위임(delegated click listener)으로 대체.- 캔버스는 매 250ms 재렌더에도 고정 DOM 노드(
chartCanvas)를 재사용 — 렌더 시 placeholder
#canvas-slot을
replaceWith()로 교체해 비트맵·크기 상태 보존.
- Pretendard/JetBrains Mono는 CDN link로 대체(React/CDN 스크립트는 사용 안 함).
검증
{{/sc-if/sc-for/sc-camel-on-click/hint-placeholder 잔재 grep 0건- doctype/charset/viewport 골격 확인
node --check로 추출 스크립트 문법 검증 통과- Node vm으로 DOM 스텁 얹어 실제 로직 실행: init/frame/enter/settle/renderVals/doM2Win/doM2Loss/
doSaveCheck 전부 정상 동작 확인 (가격틱 생성, 세션 라벨, 레벨/스타, m2 사다리, m3 계정 수, 체크 로그 등)
- 서버 :7741 재기동 없이 정적 파일 갱신, HTTP 200 확인
관련 파일
- 산출물:
/Users/ef/crowny-trader/public/index.html (약 50KB)
- 원본:
/Users/ef/Downloads/design_handoff_trading/작업_dc앱_slim.html
- 스펙 문서:
/Users/ef/Downloads/design_handoff_trading/크라우니 트레이딩 설계서.md,
크라우니 트레이딩 개발자 문서.md
- 빌드 스크래치(1회성, 저장소 밖):
/private/tmp/.../scratchpad/{transpile.py,transpile_logic.py,assemble.py}
잔여 이슈 / 예외 사항
- 산출물이 브라우저 단일 HTML(JS/DOM/canvas)이라 태스크 지시(바닐라 JS, React/CDN 프레임워크 금지)와
한선씨 우선 원칙이 직접 충돌 — 브라우저 실행 도메인은 "외부 시스템 호환" 예외로 판단해 한선씨 동반 없이
진행. 빌드용 1회성 Python 스크립트(scratchpad, 저장소 밖)도 동일 사유로 한선씨 미동반.
- 다음 단계(주간 거래장 리플레이·모드3 계정별 실시간 P&L 등)는 설계서 §6 "다음 단계" 참고, 이번 작업 범위 밖.