KyeongminandClaude Opus 4.8
b836e79ee1
- src: phase_z2 composition/mapper/pipeline/placement_planner/retry, ai_fallback(prompts/schema/validate), mdx_text_atoms 신규 - Front: PipelineTracePanel 신규, FramePanel/SlideCanvas/Home/designAgentApi 등 갱신 + 테스트 4종 추가 - templates/phase_z2: catalog(component_expansion_registry, node_slot_mapping 신규), frames, families, slide_base 갱신 - tests/matching: phase2~26 매칭 실험 스크립트·리포트·온톨로지 전체 (미커밋 진행분) - tests: b4_v4 evidence, task5~28.5 시리즈, regression(imp95 baseline) 등 신규 테스트 대량 추가 - docs/reference: MDX 구조 인벤토리, MDX→Frame 구조 계약 문서 - scripts: mdx 계약/parity/coverage/viewport 체크, gitea comment, run sync 유틸 - .gitignore: tmp*.json, chromedriver, .orchestrator, *.pkl, Front_test* 등 임시/스냅샷 제외 미완성 작업의 보존용 스냅샷 커밋 (2026-07-02) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
116 lines
3.6 KiB
HTML
116 lines
3.6 KiB
HTML
<!-- Phase Z-2 MVP-1 scaffold — MVP-2 이후 정식 Family CSS partial 로 대체. legacy structures/* 는 stylization 참고만. -->
|
|
{# Frame 13 (1171281190) / three_parallel_requirements
|
|
slots: title, pillar_{1,2,3}_{label, body}
|
|
family: list / layout: 3-column / cardinality: 3
|
|
시각 언어 도출 (figma_to_html_agent/blocks/1171281190/index.html 참고) :
|
|
- 3 columns + 각 좌측 color bar (gradient)
|
|
- 색상 : 기술 blue / 사람 orange / 자연 green (Figma 색)
|
|
- 각 col 2 sections (heading + desc) — MVP-1 은 단일 body 로 단순화
|
|
- top/bottom 검정 border (col 외곽)
|
|
MVP-1 단순화 :
|
|
- zoom 안 씀 — 기존 px 직접 (compact scale)
|
|
- 한자 (技/人/天) 안 씀 — 라벨만 #}
|
|
|
|
<style scoped>
|
|
.frame-3par {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
gap: 4px;
|
|
padding: 4px 0;
|
|
}
|
|
.frame-3par__title {
|
|
font-size: var(--font-zone-title);
|
|
font-weight: var(--weight-zone-title);
|
|
line-height: var(--lh-zone-title);
|
|
color: #1e293b;
|
|
padding-left: 4px;
|
|
}
|
|
.frame-3par__cols {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 8px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
.frame-3par__pillar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-top: 1.5px solid #1e293b;
|
|
border-bottom: 1.5px solid #1e293b;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
/* 좌측 color bar (Figma 색상 도출) */
|
|
.frame-3par__bar {
|
|
flex: 0 0 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: var(--font-caption);
|
|
font-weight: 700;
|
|
text-align: center;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: mixed;
|
|
padding: 4px 0;
|
|
line-height: 1.2;
|
|
}
|
|
/* 3 색 — Figma 추출값 */
|
|
.frame-3par__pillar:nth-child(1) .frame-3par__bar {
|
|
background: linear-gradient(180deg, #0D78D0 0%, #023056 100%);
|
|
}
|
|
.frame-3par__pillar:nth-child(2) .frame-3par__bar {
|
|
background: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%);
|
|
}
|
|
.frame-3par__pillar:nth-child(3) .frame-3par__bar {
|
|
background: linear-gradient(180deg, #39BE49 21%, #23742C 100%);
|
|
}
|
|
.frame-3par__body-wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 6px 8px;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
.frame-3par__label {
|
|
font-size: var(--font-sub-title);
|
|
font-weight: var(--weight-sub-title);
|
|
line-height: var(--lh-sub-title);
|
|
color: #1e293b;
|
|
padding-bottom: 3px;
|
|
border-bottom: 1px dashed #94a3b8;
|
|
}
|
|
.frame-3par__pillar:nth-child(1) .frame-3par__label { color: #134D7F; }
|
|
.frame-3par__pillar:nth-child(2) .frame-3par__label { color: #D18B37; }
|
|
.frame-3par__pillar:nth-child(3) .frame-3par__label { color: #23742C; }
|
|
|
|
.frame-3par__body {
|
|
font-size: var(--font-body);
|
|
font-weight: var(--weight-body);
|
|
line-height: var(--lh-body);
|
|
color: #475569;
|
|
overflow: hidden;
|
|
}
|
|
.frame-3par__body ul { padding-left: 14px; margin-top: 2px; }
|
|
.frame-3par__body li { margin-bottom: 2px; }
|
|
.frame-3par__body strong { color: #1e293b; font-weight: 700; }
|
|
</style>
|
|
|
|
<div class="frame-3par" data-frame-id="1171281190" data-template-id="three_parallel_requirements">
|
|
<div class="frame-3par__title">{{ slot_payload.title }}</div>
|
|
<div class="frame-3par__cols">
|
|
{% for pillar in slot_payload.pillars %}
|
|
<div class="frame-3par__pillar">
|
|
<div class="frame-3par__bar">{{ pillar.label }}</div>
|
|
<div class="frame-3par__body-wrap">
|
|
<div class="frame-3par__label">{{ pillar.label }}</div>
|
|
<div class="frame-3par__body">{{ pillar.body | safe }}</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|