kyeongmin
360cd8e44c
수정: - compare-2col-badge, compare-detail-gradient, hero-icon-cards 개선 신규 블록: - cards: category-strip-table, system-2col-center, hero-icon-cards_1 - emphasis: checklist-dark - visuals: cycle-orbit - new/: cards-3col-persona, compare-vs-rows, cycle-3way-intersect 등 8개 - redesign/: card_hero-icon-cards_1 - svg/: arc_left, arrow_conclusion, arrow_down, line_divider - BEPs: process-product-2col SVG + 테스트 catalog.yaml 전면 재정비 (슬롯 스키마, height_cost, 카테고리 정리) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
95 lines
4.1 KiB
HTML
95 lines
4.1 KiB
HTML
<!-- 순환 궤도 다이어그램: 3D 원 Z축 기울임 → 2D 투영, N개 노드 순환 -->
|
||
<!--
|
||
📋 cycle-orbit
|
||
─────────────────
|
||
용도: N개 요소가 순환 관계를 이루는 다이어그램. 3D 원 투영 궤도 + 노드 + 화살표.
|
||
슬롯: title, nodes[] (각 노드에 icon, label, sub_label, desc_title, bullets[])
|
||
+ 파이프라인이 계산해서 전달하는 값: ellipse, node_positions[], arrow_positions[]
|
||
Figma 원본: Page 4 / Frame 1 (DX 시행을 위한 필수 요건, 1076x292)
|
||
|
||
핵심 수학 (파이프라인에서 계산):
|
||
3D 원: R=400, Z축 기울임 θ=80°
|
||
투영: project(α) = (cx + R×cos(α), cy + R×sin(α)×cos(80°))
|
||
타원: cx=500, cy=200, rx=400, ry=69
|
||
N개 노드: 하단 중심(90°) 기준 ±(360/N × 1/3)으로 배치, 사람(270°) 고정
|
||
사이각 축소: 기본 간격의 2/3 → 앞쪽 노드들이 가까워짐
|
||
화살표: 호 위 1/3, 2/3 지점에 » 마커, 접선 방향으로 회전
|
||
|
||
텍스트 배치 규칙 (Figma 원본 분석):
|
||
좌측 노드 (node_x < cx): 설명이 이름 좌측에 (text-anchor: end)
|
||
우측/상단 노드 (node_x >= cx): 설명이 이름 우측에 (text-anchor: start)
|
||
설명 제목은 노드 라벨과 같은 Y 높이, 불릿은 제목 아래 들여쓰기
|
||
-->
|
||
<div class="block-co">
|
||
{% if title %}
|
||
<div class="co-title">{{ title }}</div>
|
||
{% endif %}
|
||
|
||
<svg class="co-svg" viewBox="0 0 {{ viewbox_w | default(1000) }} {{ viewbox_h | default(380) }}" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<marker id="co-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto">
|
||
<path d="M0,1 L9,5 L0,9" fill="none" stroke="#aaa" stroke-width="1.5"/>
|
||
</marker>
|
||
</defs>
|
||
|
||
<!-- 타원 궤도 (3D원 투영) -->
|
||
<ellipse cx="{{ ellipse.cx }}" cy="{{ ellipse.cy }}" rx="{{ ellipse.rx }}" ry="{{ ellipse.ry }}"
|
||
fill="none" stroke="#c0c0c0" stroke-width="1.5"/>
|
||
|
||
<!-- 화살표 >> (접선 방향 회전) -->
|
||
{% for arrow in arrows %}
|
||
<text x="{{ arrow.x }}" y="{{ arrow.y + 4 }}" text-anchor="middle" font-size="14" fill="#999"
|
||
transform="rotate({{ arrow.rotation }},{{ arrow.x }},{{ arrow.y }})">»</text>
|
||
{% endfor %}
|
||
|
||
<!-- 노드들 -->
|
||
{% for node in nodes %}
|
||
<!-- 노드: {{ node.label }} ({{ node.angle }}°) ({{ node.x }}, {{ node.y }}) -->
|
||
<circle cx="{{ node.x }}" cy="{{ node.y }}" r="26" fill="#e9e8e8" stroke="#818181" stroke-width="2.5"/>
|
||
{% if node.icon %}<text x="{{ node.x }}" y="{{ node.y + 6 }}" text-anchor="middle" font-size="18">{{ node.icon }}</text>{% endif %}
|
||
<text x="{{ node.x }}" y="{{ node.y + 44 }}" text-anchor="middle" font-size="13" font-weight="900" fill="#1e293b">{{ node.label }}</text>
|
||
{% if node.sub_label %}<text x="{{ node.x }}" y="{{ node.y + 58 }}" text-anchor="middle" font-size="9" fill="#64748b">({{ node.sub_label }})</text>{% endif %}
|
||
|
||
<!-- 설명 텍스트 (좌측 노드→좌측에, 우측/상단 노드→우측에) -->
|
||
{% if node.desc_title %}
|
||
<text x="{{ node.desc_x }}" y="{{ node.desc_y }}" text-anchor="{{ node.desc_anchor }}" font-size="12" font-weight="700" fill="#1e293b">{{ node.desc_title }}</text>
|
||
{% endif %}
|
||
{% if node.bullets is defined %}
|
||
{% for b in node.bullets %}
|
||
<text x="{{ node.bullet_x }}" y="{{ node.desc_y + 15 * (loop.index) }}" text-anchor="{{ node.desc_anchor }}" font-size="10" fill="#64748b">• {{ b }}</text>
|
||
{% endfor %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
</svg>
|
||
</div>
|
||
|
||
<style>
|
||
/*
|
||
3D 원 투영 순환 궤도
|
||
파이프라인에서 모든 좌표를 계산하여 전달
|
||
이 템플릿은 좌표를 받아 SVG로 렌더링만 함
|
||
*/
|
||
.block-co {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.co-title {
|
||
font-size: 18px;
|
||
font-weight: var(--weight-black, 900);
|
||
color: var(--color-primary, #1e293b);
|
||
text-align: center;
|
||
margin-bottom: 8px;
|
||
padding-bottom: 6px;
|
||
border-bottom: 2px solid var(--color-accent, #2563eb);
|
||
}
|
||
|
||
.co-svg {
|
||
width: 100%;
|
||
max-width: 900px;
|
||
font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
|
||
}
|
||
</style>
|