kyeongmin
beb5fd0c61
- 10단계 변환 프로세스 (PROCESS.md) - 수학 공식 레퍼런스 (MATH.md, gradient_math.py) - CSS 보정 규칙 R1~R16 (RULES.md) - 작업 규율 7개 규칙 (PROCESS-CONTROL.md) - 8개 Figma 프레임 1:1 HTML 변환물 (block-tests/) - 8개 Jinja2 템플릿 staging (templates_staging/) - 변환 완료 도서관 + 디자인 인사이트 (blocks_index.md) - 사용법 가이드 (README.md) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
87 lines
2.5 KiB
YAML
87 lines
2.5 KiB
YAML
pattern_id: compare-vs-rows
|
|
category: tables
|
|
version: 0.1.0
|
|
provenance:
|
|
source_frame: "45:20 / Frame 1171281195"
|
|
reference_html: ../block-tests/bim-vs-dx-table.html
|
|
reference_render: ../block-tests/_renders/bim-vs-dx-table.png
|
|
|
|
description: |
|
|
N개의 카테고리별 비교 행. 각 행 = 좌(A 진영) | 중앙(카테고리 라벨 pill) | 우(B 진영).
|
|
+ 헤더(타이틀 + icon, optional) + 메인 pill (A vs. B) + 결론 박스(optional).
|
|
좌/우는 색상으로 대조 (A: brown, B: green).
|
|
|
|
when:
|
|
relation_type:
|
|
- comparison-2way-categorical
|
|
- vs-tabular
|
|
- before-after-multiline
|
|
- approach-comparison
|
|
content_shape:
|
|
rows: { min: 2, max: 20 }
|
|
has_categories: true
|
|
|
|
not_for:
|
|
- single-statement
|
|
- hierarchical-tree
|
|
- cyclic-process
|
|
|
|
slots:
|
|
header:
|
|
type: object
|
|
required: false
|
|
properties:
|
|
title: { type: string, required: true }
|
|
icon: { type: image, required: false }
|
|
|
|
left_label: { type: string, required: true, description: "예: BIM" }
|
|
right_label: { type: string, required: true, description: "예: DX" }
|
|
vs_label: { type: string, default: "vs." }
|
|
|
|
rows:
|
|
type: list
|
|
required: true
|
|
min: 2
|
|
max: 20
|
|
item:
|
|
category: { type: string, required: true }
|
|
left: { type: html_string, required: true, description: "<span class=\"sub\">…</span> 가능" }
|
|
right: { type: html_string, required: true }
|
|
|
|
conclusion:
|
|
type: object
|
|
required: false
|
|
properties:
|
|
arrow: { type: image, required: false }
|
|
segments:
|
|
type: list
|
|
item:
|
|
text: { type: string, required: true }
|
|
highlight: { type: boolean, default: false }
|
|
|
|
# 색상 토큰 (per side)
|
|
left_color: { type: color, default: "#5c3714" }
|
|
right_color: { type: color, default: "#285b4a" }
|
|
pill_bg_from: { type: color, default: "rgb(40,91,74)" }
|
|
pill_bg_to: { type: color, default: "rgb(74,64,38)" }
|
|
conclusion_color: { type: color, default: "#000" }
|
|
conclusion_highlight: { type: color, default: "#ae3607" }
|
|
|
|
tokens:
|
|
block_w: { default: 1280 }
|
|
row_font_size: { default: "1.4rem" }
|
|
cat_pill_w: { default: "16%" }
|
|
|
|
min_size_px: { width: 800, height: 400 }
|
|
max_size_px: { width: 1920, height: 1500 }
|
|
|
|
sub_patterns: []
|
|
priority: 50
|
|
|
|
diff_from_reference:
|
|
- "absolute pixel positions → CSS grid + flex (반응형)"
|
|
- "12 rows hardcoded → {% for row in rows %}"
|
|
- "left/right color → CSS 변수"
|
|
- "헤더/결론 모두 optional"
|
|
- "main pill 텍스트 형식 → 좌/우/vs 별 슬롯"
|