crowny-cloudpick UI + 파리티 (에이전트B분)
개요
crowny-cloudpick(cloudpick.crowny.org:9623) — 크라우니 파트너용 클라우드 선택·관리 서비스의 프론트엔드(public/index.html)와 그 순수 로직 파리티 동반 파일(앱.한선)을 작성. 서버.한선·추천엔진.한선·data/는 에이전트A가 동시 작업(무접촉 준수).
무엇을 했는지
public/index.html(529줄): 스펙 §디자인 화면 ①~④ 전부 구현
① 홈: 11 프로바이더 비교 그리드(/api/providers fetch 렌더, 하드코딩 없음) + 목적 12칩 단일선택 + 예산/한국리전/무료우선 필터 → /api/recommend 4상 배지(티#2e7d46/옴#c05b2e/타#7c6e5d/음#b3362b)
② 프로바이더 상세(강점·약점·가입URL 버튼, 카드 클릭 진입)
③ 로그인/가입(아이디 영숫자 3~20, 토큰 localStorage)
④ 내 서비스(카드 목록 + 등록/수정 .dlg 모달, 상태 4값 배지, 호스트 있으면 "관제에서 보기"→https://vps.crowny.org)
넥서스 디자인 토큰 그대로 사용(crowny-nexus-app/public/erp/index.html 실측): radial-gradient #efe9dd→#e4ddce, 카드 #faf9f5/#ddd3c2, 액센트 #c05b2e, Helvetica Neue, 로고칩 32px/9px
<html data-crowny> + 중앙CSS link + <!-- 대조스펙: .dlg --> 마커 + body{font-weight:500}. 모달은 overlay visibility 토글(display:none 미사용) — .dlg{max-width:400px}
외부 CDN 0 (중앙CSS 제외), POST 본문은 스펙대로 1줄 PSV(필드.join('|'))
앱.한선(271줄): index.html 순수 로직 파리티 — 위상배지색·상태유효성/상태배지색·원화환산(1450원/$)·예산검증파싱·예산통과여부·칩토글(목적태그 단일선택)·목적태그유효성(표준 12종)·아이디검증(영숫자3~20)·비용포맷(천단위 콤마)·내서비스카드요약·관제링크표시여부. top-level 셀프테스트 42 assert.
크라우니코드: lookup HIT 0건 / MISS 다수(신규 도메인 로직, crownycode-learn.sh search 사전조회 결과 무매치로 확인) — 학습 add는 신규 세션 정책상 생략(패턴 재사용성 낮은 1회성 도메인 매핑 위주).게이트 실측 원문
- 컴파일:
CROWNY_STRICT=1 ./hanseonc_high 앱.한선 > /tmp/cp-app.toau → exit 0, STRICT 경고 0줄(stderr에 파싱/토큰/큐브 정보 로그만).
실행:
crownyc run /tmp/cp-app.toau →
파리티 42/42 PASS
- 디자인대조:
/Users/ef/CrownyBrowser/tools/디자인대조.sh public/index.html → 대조: PASS 1 / FAIL 0 (.dlg width=400 실측 일치)
- 정적 열람: 임시
python3 -m http.server(포트 충돌 회피 위해 19342 사용, 종료 확인 완료) + headless Chrome --dump-dom 검증 — API 미기동 상태에서 /api/providers fetch 실패 시 "프로바이더 목록을 불러올 수 없습니다" 우아한 빈 상태로 정상 표시, view-home에 active 클래스 적용·12개 목적 칩 렌더 확인(= init()/goto() 등 JS 전체가 예외 없이 실행됨). Chrome 내부 히스토그램/네트워크 로그 외 애플리케이션 레벨 에러 없음.
관련 파일 경로
- /Users/ef/crowny-cloudpick/public/index.html
- /Users/ef/crowny-cloudpick/앱.한선
- /Users/ef/crowny-cloudpick/스펙.md (SSOT, 미수정)
- 레퍼런스: /Users/ef/crowny-nexus-app/public/erp/index.html
발견 함정
- 로컬 검증용 임시 포트 9891이 이미 다른 crownyc 서비스(pid 2013)에 IPv4로 점유돼 있어 python http.server(IPv6 바인딩)를 띄워도 curl이 기존 서비스의 JSON 404를 받는 포트충돌 오진 위험 —
lsof -nP -iTCP:<port> -sTCP:LISTEN으로 실제 바인딩 확인 후 미사용 포트(19342)로 전환해 해결. crowny-ports.sh free 범위 제안과 함께 실사용 전 lsof 재확인 권장.
- 자체 작성 중 함수명에 한자 内(U+5185)를 한글 내(U+B0B4) 대신 오타로 사용(자기 파일 내에서는 참조 일관돼 동작은 정상이었으나 가독성/일관성 문제) — perl로 즉시 정정, 재검증(디자인대조 재실행 PASS 유지).
잔여 이슈
/api/providers·/api/recommend·/api/my/* 응답의 실제 JSON 키 이름(예: 한글명 vs name)이 에이전트A 작업본에서 아직 확정되지 않아, index.html은 pick() 헬퍼로 한글/영문 키 별칭을 모두 시도하는 방어적 파싱을 채택함. 서버 완성 후 실제 키와 1회 대조 검증 필요(현재는 무접촉 원칙상 서버.한선/추천엔진.한선/data/ 미열람).- 크라우니코드 학습(add) 미실시 — 필요 시 후속 세션에서 도메인 특화 함수(비용포맷 콤마 등) 재사용성 판단 후 학습 고려.