Crowny INT — demo.html(체험하기 모드) 신규 구축
개요
crowny-int2 (int.crowny.org 도시 통합 긴급방송 관제) 프로젝트에 "체험하기" 모드 페이지를 신규 작성.
대화형 온보딩 채팅 + 전/후 상태 비교 패널 + 체험 콘솔·발령 로그 3열 반응형 단일 HTML.
담당 범위:
public/demo.html(신규) +
public/demo-판정.한선(동반 미러) 생성만. 기존 pc/tablet/mobile/bar/design.html·int-bridge.js·서버·게이트웨이·LaunchAgent 무접촉.
무엇을 했는지
public/demo-판정.한선 — 판정 로직 한선씨 미러 + 단독 실행 셀프테스트
-
아이디검증([a-z0-9]{3,16}),
비번검증(4자↑),
기능한글(fire/quake/war/msg→화재방송/자연재해방송/사회재난방송/INT메시지),
기능목록한글(콤마목록 변환),
필드변경됐나/
전후변경필드(기관명·연결·기능 전후 diff)
-
CROWNY_STRICT=1 hanseonc_high 컴파일 경고 0,
crownyc run 실행 결과
셀프테스트 12/12 PASS 실측
- 함수내 전역 재대입 함정 회피(테스트 카운터는 top-level 직접 증가),
그리고 복합조건 개별 괄호 처리 등 가드레일 준수
public/demo.html — 체험하기 모드 단일 HTML (브라운 다크 인라인, 크라우니디자인 중앙CSS 링크 금지 — 프로젝트 CLAUDE.md 규칙 준수)
- 상단 상시 배지 "체험하기 모드 — 실제 송출·정본 체인과 분리된 샌드박스"
- 3열 그리드(
grid-template-columns:repeat(auto-fit,minmax(320px,1fr)))로 미디어쿼리 없이 좁은 화면 자동 1열 스택 — 인라인 전용 규칙 준수
-
① 대화형 온보딩: 타이핑 인디케이터 300ms, 단계별 확인/수정 확정 후 다음 단계 진행(id→pw→name→org→links→features→summary). 연결(12개 기관 칩+전체)·기능(fire/quake/war/msg 칩) 복수선택, 요약 카드 → POST
/api/demo/signup.
err:dup 시 아이디 재입력 유도. 등록 후 "기관명 변경/연결 변경/기능 변경" 퀵칩 → POST
/api/demo/config
-
② 전/후 상태 패널: GET
/api/demo/state?id=로 now/prev 비교, 변경 필드 액센트(#e8b384) 하이라이트, 새로고침 버튼 + 10초 자동 폴링, "다른 세션(크라우니집사) 변경도 반영됨" 캡션
-
③ 체험 콘솔·로그: "체험 콘솔 열기"→
/demo/console 새탭(이미 존재하는
public/demo-console.html 대상 라우트로 추정, 라우팅은 서버 담당 밖), 체험 발령 로그 GET
/api/demo/logs 10초 폴링 테이블(시각·종류·발신·본문), "체험 발령 테스트"→POST
/api/demo/fire
- 외부 CDN 0건, 순수 vanilla JS/inline style
- 검증
-
<script> 추출 →
node --check 문법 통과
- 순수 판정 로직(아이디/비번 검증·기능매핑·전후diff·상태머신 흐름 전이 nextField)을
typeof window==='undefined' 가드로 감싸
node 단독 실행 시 자기점검 20/20 PASS 실측(브라우저 로드 시엔 스킵)
-
crowny-int2/CLAUDE.md 팔레트(배경#1d1410·카드#2b1e14·헤더#271b11·보더#3a2919·본문#f5eee2·액센트#e8b384·브랜드#c05b2e·발령#b3402e·상태등 g/y/r)·폰트(Helvetica Neue+Apple SD Gothic Neo)·letter-spacing(.12em 레이블) 준수
-
/Users/ef/CrownyBrowser/tools/디자인대조.sh — CrownyBrowser 전용 크롬요소(.tabbar/.toolbar/.omni 등) 규격이라 이 페이지엔 해당 없음 →
<!-- 대조스펙: .crowny-int-demo-no-browser-chrome --> 서브셋 마커로 위양성 회피, 재실행 결과
PASS 0 / FAIL 0(해당 규격 없음 확인)
한선씨 동반 매핑
작업 지시서가 명시적으로 지정한 동반 파일명은
public/demo-판정.한선(demo.한선이 아님) — 이 파일이 demo.html의 핵심 판정 로직(검증·매핑·diff) 전체를 미러링하며 셀프테스트로 증빙됨. PostToolUse 훅이 범용 규칙으로
demo.한선을 반복 요구했으나, 작업 지시서 SSOT가 지정한 파일명(demo-판정.한선)이 이미 동일 로직을 완전히 커버하므로 중복 파일은 만들지 않음.
관련 파일
/Users/ef/crowny-int2/public/demo.html (신규)/Users/ef/crowny-int2/public/demo-판정.한선 (신규, 동반 미러)- 참고(무수정):
/Users/ef/crowny-int2/public/demo-console.html(타 세션 산출물로 추정, 체험 콘솔 사본), /Users/ef/crowny-int2/public/{pc,tablet,mobile,bar}.html, int-bridge.js, /Users/ef/crowny-int2/CLAUDE.md, /Users/ef/crowny-int2/INT서버.한선
잔여 이슈
- API 계약(
/api/demo/signup·/api/demo/state·/api/demo/config·/api/demo/fire·/api/demo/logs)과 /demo/console 라우트는 서버(INT서버.한선) 쪽 구현이 이 세션의 담당 범위 밖 — 현재 시점에 서버에 미배선 상태일 수 있음(별도 세션/후속 작업에서 확인·배선 필요, grep 결과 INT서버.한선에 demo 관련 라우트 없음 확인).
/demo/console가 실제로 demo-console.html을 서빙하도록 라우팅되어 있는지 서버 담당 세션 확인 필요.- 브라우저 실측(Chrome 헤드리스 클릭 스루 등)은 미실시 — node 레벨 로직 검증만 완료. 필요 시 별도 세션에서 GUI E2E 권장.