phase z catalog: Step 7-A (layouts) + 8-A (regions/display) 박힘
사용자 lock 2026-05-07 — catalog data 는 yaml/HTML 에서 사람이 보고 modify 가능 (= hardcoded dict 위배 제거). 추가: - templates/phase_z2/layouts/layouts.yaml — 8 preset (single / horizontal-2 / vertical-2 / top-1-bottom-2 / top-2-bottom-1 / left-1-right-2 / left-2-right-1 / grid-2x2). 기존 hardcoded LAYOUT_PRESETS dict (src/phase_z2_composition.py) → catalog 이전. backward compat (load_layout_presets() 가 같은 dict shape). 필드: zones / topology / positions / css_areas / css_cols / css_rows / render_ready / default_selection / candidate_when. (Step 7-A) - templates/phase_z2/layouts/layouts_preview.html — 8 preset 시각 검증. - templates/phase_z2/regions/region_layouts.yaml — Internal Region 6 entry (region-single / vertical-stack / horizontal-split / main-support / preview-details / grid-2x2). SPEC §2.5 의 sequential first-match decision tree. region-vertical-stack only default_fallback. (Step 8-A) - templates/phase_z2/regions/display_strategies.yaml — display 4 entry (inline_full / inline_preview_with_details / details_only / dropped). applies_to / forbidden_for / detail_trigger.placement: top-right. 사용자 절대 lock: text/table/image/details 절대 dropped X (forbidden_for). - templates/phase_z2/regions/regions_preview.html — 6 region + 4 display 카드 시각 검증 (axis 분리 lock — region structure ≠ display policy). axis 분리 lock (사용자 2026-05-07): - region (structure axis) ≠ display (policy axis) → 두 catalog 분리. - preserves_original 은 display_strategies 의 single source of truth. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
166
templates/phase_z2/regions/regions_preview.html
Normal file
166
templates/phase_z2/regions/regions_preview.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Phase Z Child Zone / Internal Region Catalog Preview</title>
|
||||
<style>
|
||||
body { font-family: 'Pretendard', 'Noto Sans KR', sans-serif; padding: 24px; max-width: 1400px; margin: 0 auto; background: #f1f5f9; color: #1e293b; }
|
||||
h1 { border-bottom: 2px solid #333; padding-bottom: 8px; margin-top: 0; }
|
||||
h2 { margin-top: 40px; padding: 8px 12px; background: #1e293b; color: #fff; border-radius: 4px; }
|
||||
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px; }
|
||||
.card { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
|
||||
.card h3 { margin-top: 0; font-size: 17px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
|
||||
.badge.fallback { background: #fef3c7; color: #92400e; }
|
||||
.badge.normal { background: #e0e7ff; color: #3730a3; }
|
||||
.badge.danger { background: #fecaca; color: #991b1b; border: 1px solid #f87171; }
|
||||
.badge.safe { background: #dcfce7; color: #166534; }
|
||||
.meta { font-size: 13px; color: #64748b; margin-bottom: 12px; }
|
||||
.meta code { background: #f1f5f9; padding: 1px 6px; border-radius: 3px; }
|
||||
.preview { width: 100%; aspect-ratio: 16/9; border: 1px solid #94a3b8; background: #fafafa; padding: 8px; box-sizing: border-box; }
|
||||
.region { background: #dbeafe; border: 2px solid #3b82f6; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #1e40af; padding: 4px; box-sizing: border-box; }
|
||||
.region:nth-child(2) { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
|
||||
.region:nth-child(3) { background: #dcfce7; border-color: #16a34a; color: #166534; }
|
||||
.region:nth-child(4) { background: #fce7f3; border-color: #db2777; color: #9f1239; }
|
||||
.when, .applies, .forbidden { margin-top: 12px; font-size: 13px; }
|
||||
.when strong, .applies strong, .forbidden strong { color: #475569; }
|
||||
.forbidden-block { background: #fef2f2; border: 2px solid #f87171; padding: 10px 12px; border-radius: 6px; margin-top: 8px; }
|
||||
.forbidden-block strong { color: #991b1b; display: block; margin-bottom: 4px; font-size: 13px; }
|
||||
.forbidden-block code { background: #fff; color: #991b1b; padding: 2px 6px; border-radius: 3px; font-weight: 600; }
|
||||
.strategy-card { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
|
||||
.strategy-card h3 { margin-top: 0; font-size: 17px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.strategy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px; }
|
||||
.strategy-card.dropped-card { border: 2px solid #f87171; background: #fef2f2; }
|
||||
.trigger-demo { position: relative; background: #f8fafc; border: 1px dashed #94a3b8; padding: 12px 16px; margin-top: 12px; border-radius: 4px; font-size: 12px; color: #475569; min-height: 70px; }
|
||||
.trigger-btn { position: absolute; top: 6px; right: 6px; background: #2563eb; color: #fff; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; }
|
||||
.trigger-info { font-size: 11px; color: #64748b; margin-top: 6px; }
|
||||
.trigger-info code { background: #fff; padding: 1px 5px; border-radius: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Phase Z Child Zone / Internal Region Catalog</h1>
|
||||
<p>source: <code>region_layouts.yaml</code> + <code>display_strategies.yaml</code> / 사람이 두 axis (구조 + 정책) 시각 검증.</p>
|
||||
<p>SPEC: <code>docs/architecture/PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md §2.5</code> (region 6 entry, display 4 entry)</p>
|
||||
|
||||
<h2>1. Region Layouts (zone 안 분할 구조 — 6 entry)</h2>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<div class="card">
|
||||
<h3>region-single <span class="badge normal">1 region</span></h3>
|
||||
<div class="meta">topology: single / region_count: 1</div>
|
||||
<div class="preview" style="display:grid; grid-template-areas:'r1'; grid-template-columns:1fr; grid-template-rows:1fr; gap:8px;">
|
||||
<div class="region" style="grid-area:r1;">single region</div>
|
||||
</div>
|
||||
<div class="when"><strong>candidate_when:</strong> region_count = 1</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>region-vertical-stack <span class="badge fallback">default fallback</span></h3>
|
||||
<div class="meta">topology: vertical / region_count: 2+</div>
|
||||
<div class="preview" style="display:grid; grid-template-areas:'r1' 'r2'; grid-template-columns:1fr; grid-template-rows:1fr 1fr; gap:8px;">
|
||||
<div class="region" style="grid-area:r1;">region 1 (top)</div>
|
||||
<div class="region" style="grid-area:r2;">region 2 (bottom)</div>
|
||||
</div>
|
||||
<div class="when"><strong>candidate_when:</strong> region_count >= 2 AND flow_type = sequential. Default fallback when no other rule matches.</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>region-horizontal-split <span class="badge normal">2 region</span></h3>
|
||||
<div class="meta">topology: horizontal / region_count: 2 / has_visual_element: true</div>
|
||||
<div class="preview" style="display:grid; grid-template-areas:'r1 r2'; grid-template-columns:1fr 1fr; grid-template-rows:1fr; gap:8px;">
|
||||
<div class="region" style="grid-area:r1;">region 1 (left)</div>
|
||||
<div class="region" style="grid-area:r2;">region 2 (right)</div>
|
||||
</div>
|
||||
<div class="when"><strong>candidate_when:</strong> region_count = 2 AND visual element (image / diagram) in content_type_mix</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>region-main-support <span class="badge normal">2 region weighted</span></h3>
|
||||
<div class="meta">topology: weighted / ratios: [0.7, 0.3]</div>
|
||||
<div class="preview" style="display:grid; grid-template-areas:'r1 r2'; grid-template-columns:7fr 3fr; grid-template-rows:1fr; gap:8px;">
|
||||
<div class="region" style="grid-area:r1;">main (0.7)</div>
|
||||
<div class="region" style="grid-area:r2;">support (0.3)</div>
|
||||
</div>
|
||||
<div class="when"><strong>candidate_when:</strong> region_count = 2 AND role = [primary, supporting] AND ratio max/min >= 2</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>region-preview-details <span class="badge normal">preview + popup</span></h3>
|
||||
<div class="meta">topology: preview-details / preserves_original: true</div>
|
||||
<div class="preview" style="display:grid; grid-template-areas:'r1 r2'; grid-template-columns:2fr 1fr; grid-template-rows:1fr; gap:8px;">
|
||||
<div class="region" style="grid-area:r1;">preview (inline)</div>
|
||||
<div class="region" style="grid-area:r2;">details / popup</div>
|
||||
</div>
|
||||
<div class="when"><strong>candidate_when:</strong> details_presence = true OR large_table (>=5 rows) OR long_text. <strong style="color:#16a34a;">User lock: 원문 무손실 보존.</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>region-grid-2x2 <span class="badge normal">4 region</span></h3>
|
||||
<div class="meta">topology: grid / region_count: 4</div>
|
||||
<div class="preview" style="display:grid; grid-template-areas:'r1 r2' 'r3 r4'; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:8px;">
|
||||
<div class="region" style="grid-area:r1;">region 1</div>
|
||||
<div class="region" style="grid-area:r2;">region 2</div>
|
||||
<div class="region" style="grid-area:r3;">region 3</div>
|
||||
<div class="region" style="grid-area:r4;">region 4</div>
|
||||
</div>
|
||||
<div class="when"><strong>candidate_when:</strong> region_count = 4 AND content type 4 equal items</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h2>2. Display Strategies (콘텐츠 처리 정책 — 4 entry)</h2>
|
||||
|
||||
<div class="strategy-grid">
|
||||
|
||||
<div class="strategy-card">
|
||||
<h3>inline_full <span class="badge safe">all content types</span></h3>
|
||||
<div class="meta">Content fully inline — entire content rendered within region.</div>
|
||||
<div class="applies"><strong>applies_to:</strong> <code>text_block</code> <code>table</code> <code>image</code> <code>details</code> <code>decorative_element</code></div>
|
||||
<div class="applies"><strong>preserves_original:</strong> true (all inline = original is inline)</div>
|
||||
</div>
|
||||
|
||||
<div class="strategy-card">
|
||||
<h3>inline_preview_with_details <span class="badge safe">popup preserved</span></h3>
|
||||
<div class="meta">Partial inline preview + remaining in details/popup. <strong style="color:#16a34a;">User lock: 원문 popup 보존.</strong></div>
|
||||
<div class="applies"><strong>applies_to:</strong> <code>text_block</code> <code>table</code> <code>details</code></div>
|
||||
<div class="applies"><strong>preserves_original:</strong> true (popup 안에 보존)</div>
|
||||
<div class="trigger-demo">
|
||||
<div class="trigger-btn">details</div>
|
||||
<div>preview content (일부 inline)</div>
|
||||
<div>preview content ...</div>
|
||||
</div>
|
||||
<div class="trigger-info"><strong>detail_trigger:</strong> <code>placement: top-right</code> / <code>label: details</code> / 버튼은 원문 대체 X — 원문 전체 진입문</div>
|
||||
</div>
|
||||
|
||||
<div class="strategy-card">
|
||||
<h3>details_only <span class="badge safe">popup preserved</span></h3>
|
||||
<div class="meta">Summary inline only, full content in popup. <strong style="color:#16a34a;">User lock: 전체 popup 보존.</strong></div>
|
||||
<div class="applies"><strong>applies_to:</strong> <code>text_block</code> <code>table</code> <code>details</code></div>
|
||||
<div class="applies"><strong>preserves_original:</strong> true (popup)</div>
|
||||
<div class="trigger-demo">
|
||||
<div class="trigger-btn">details</div>
|
||||
<div>summary inline only</div>
|
||||
</div>
|
||||
<div class="trigger-info"><strong>detail_trigger:</strong> <code>placement: top-right</code> / <code>label: details</code> / 전체 원문 popup 안 보존</div>
|
||||
</div>
|
||||
|
||||
<div class="strategy-card dropped-card">
|
||||
<h3>dropped <span class="badge danger">decorative only</span></h3>
|
||||
<div class="meta">Decorative element omitted due to space constraints.</div>
|
||||
<div class="applies"><strong>applies_to:</strong> <code>decorative_element</code></div>
|
||||
<div class="forbidden-block">
|
||||
<strong>FORBIDDEN_FOR (절대 금지):</strong>
|
||||
<code>text_block</code> <code>table</code> <code>image</code> <code>details</code><br>
|
||||
<span style="font-size:12px; color:#7f1d1d; margin-top:4px; display:block;">
|
||||
User lock — 사용자 절대 룰. 텍스트 / 표 / 이미지 / details 콘텐츠는 절대 dropped X.<br>
|
||||
오답노트 #5 / IMPROVEMENT-REDESIGN.md §3.6 line 110 — 원문 무손실 보존.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user