기존 와이어프레임 박스(테두리 + 투명 fill) 대신 실제 TemplateRenderer
를 mock empty context 로 띄워 transform: scale 로 축소 → 사용자가
빌더에서 그린 그대로의 레이아웃이 카드에서 그대로 읽힘.
- TemplateMiniPreview 컴포넌트 신설:
- DEFAULT empty context (data:[], callbacks no-op) 로 데이터 fetch 0회
- BASE_WIDTH=1200, 16:10 stage → ResizeObserver 로 카드 폭 변화 자동 추종
- pointer-events: none / user-select: none / overflow: hidden
- views 가 비어있으면 기존 TemplateThumbnail (와이어프레임) 폴백
- TemplateLibraryModal 카드 아이콘 자리 교체
- dashboard.css 에 .dash-lib-card-thumb--live / -stage 추가
향후 템플릿 50+ 로 늘어 모달 첫 오픈이 무거워지면 lazy mount(
intersection observer) 또는 background 스크린샷 캐싱으로 전환.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
템플릿 목록 카드의 정적 📋 아이콘을 실제 view 구조 기반의
미니 와이어프레임으로 교체. 사용자가 카드만 보고도 템플릿이
어떤 화면인지(테이블 위주 / 폼 위주 / 단순 버튼 등) 파악 가능.
- backend: getTemplateList SQL 에 VIEWS 컬럼 추가, list 응답 각
row 의 views jsonb 를 객체로 파싱
- frontend: TemplateThumbnail 컴포넌트 신설 — v2(BlockV2.xPct/yPct
/wPct/hPct) 정규화 좌표 우선, v1(order/row) 폴백, 컴포넌트
종류별 색상(table=primary, form=cyan, button=pink)
- TemplateLibraryModal 카드 아이콘 자리 교체
- dashboard.css 에 .dash-lib-card-thumb / -block 스타일 추가
(v5 토큰 준수 — solid + glow, blur 없음)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
johngreen
gbpark