Phase P~S 전체 작업물: 검증 스크립트, 블록 템플릿, 설계 문서, 코드 수정
포함 내용: - Phase P/Q/R/S 설계 문서 (IMPROVEMENT-PHASE-*.md) - 영역별 검증 스크립트 (scripts/verify_*.py, test_*.py) - 블록 템플릿 추가 (cards, emphasis 변형) - 코드 수정: block_search, content_editor, design_director, slide_measurer - catalog.yaml 블록 목록 업데이트 - CLAUDE.md, PROGRESS.md, README.md 업데이트 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
52
templates/blocks/cards/card-icon-desc--compact.html
Normal file
52
templates/blocks/cards/card-icon-desc--compact.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!-- card-icon-desc variant: compact -->
|
||||
<!--
|
||||
📋 card-icon-desc--compact
|
||||
─────────────────
|
||||
용도: 높이가 부족할 때 아이콘 카드를 축소 렌더링
|
||||
슬롯: cards[] (기존과 동일 — icon, title, description)
|
||||
기존 card-icon-desc의 색상/구조 유지, 패딩/아이콘 축소
|
||||
-->
|
||||
<div class="block-card-icon-compact" style="--ci-count: {{ column_override | default(cards|length) }}">
|
||||
{% for card in cards %}
|
||||
<div class="cid-card-c">
|
||||
{% if card.icon %}<div class="cid-icon-c">{{ card.icon }}</div>{% endif %}
|
||||
<div class="cid-title-c">{{ card.title }}</div>
|
||||
{% if card.description %}<div class="cid-desc-c">{{ card.description }}</div>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-card-icon-compact {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--ci-count, 3), 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
.cid-card-c {
|
||||
text-align: center;
|
||||
padding: 8px 8px;
|
||||
background: #f8fafc;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.cid-icon-c {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.cid-title-c {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.cid-desc-c {
|
||||
font-size: 10px;
|
||||
color: #475569;
|
||||
line-height: 1.5;
|
||||
white-space: pre-line;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
60
templates/blocks/cards/card-numbered--horizontal.html
Normal file
60
templates/blocks/cards/card-numbered--horizontal.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!-- card-numbered variant: horizontal -->
|
||||
<!--
|
||||
📋 card-numbered--horizontal
|
||||
─────────────────
|
||||
용도: 같은 구조의 항목 2-3개를 가로로 나란히 비교
|
||||
슬롯: items[] (기존과 동일 — title, description)
|
||||
기존 card-numbered의 색상/스타일 유지, 배치만 가로
|
||||
-->
|
||||
<div class="block-card-num-h" style="--cn-count: {{ items|length }}">
|
||||
{% for item in items %}
|
||||
<div class="cn-item-h">
|
||||
<div class="cn-number-h" style="background: {{ item.color | default('#2563eb') }}">{{ loop.index }}</div>
|
||||
<div class="cn-body-h">
|
||||
<div class="cn-title-h">{{ item.title }}</div>
|
||||
<div class="cn-desc-h">{{ item.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-card-num-h {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--cn-count, 2), 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.cn-item-h {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
padding: 10px 14px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.cn-number-h {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cn-title-h {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.cn-desc-h {
|
||||
font-size: 11px;
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!-- comparison-2col variant: cards-in-container -->
|
||||
<!--
|
||||
📋 comparison-2col--cards-in-container
|
||||
─────────────────
|
||||
용도: 포함 관계 시각화 (A 안에 B, C, D가 포함됨)
|
||||
슬롯: container_label, container_desc, cards[] (각 카드에 letter, label, description)
|
||||
기존 comparison-2col의 색상 계열 활용
|
||||
-->
|
||||
<div class="block-container-cards">
|
||||
<div class="cc-outer">
|
||||
<div class="cc-badge">{{ container_label }}</div>
|
||||
{% if container_desc %}<div class="cc-desc">{{ container_desc }}</div>{% endif %}
|
||||
<div class="cc-grid" style="--cc-count: {{ cards|length }}">
|
||||
{% for card in cards %}
|
||||
<div class="cc-card">
|
||||
{% if card.letter %}
|
||||
<div class="cc-icon">{{ card.letter }}</div>
|
||||
{% endif %}
|
||||
<div class="cc-label">{{ card.label }}</div>
|
||||
{% if card.description %}<div class="cc-text">{{ card.description }}</div>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-container-cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.cc-outer {
|
||||
width: 100%;
|
||||
border: 3px solid #2563eb;
|
||||
border-radius: 14px;
|
||||
padding: 16px 14px 12px;
|
||||
background: linear-gradient(180deg, #eff6ff, #dbeafe);
|
||||
position: relative;
|
||||
}
|
||||
.cc-badge {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
padding: 3px 18px;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cc-desc {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: #1e40af;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.cc-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--cc-count, 3), 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.cc-card {
|
||||
background: #ffffff;
|
||||
border: 2px solid #93c5fd;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.cc-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #93c5fd, #2563eb);
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 6px;
|
||||
}
|
||||
.cc-label {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.cc-text {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!-- dark-bullet-list variant: before-after -->
|
||||
<!--
|
||||
📋 dark-bullet-list--before-after
|
||||
─────────────────
|
||||
용도: 기존 방식 → 새 방식 전환/변화를 보여줄 때
|
||||
슬롯: title (선택), changes[] (각 항목에 label, before, after)
|
||||
기존 dark-bullet-list의 색상/배경/radius 그대로 사용
|
||||
-->
|
||||
<div class="block-dark-bullets">
|
||||
{% if title %}<div class="db-title">{{ title }}</div>{% endif %}
|
||||
<div class="db-changes">
|
||||
{% for item in changes %}
|
||||
<div class="db-change">
|
||||
<div class="db-change-label">{{ item.label }}</div>
|
||||
<div class="db-change-before">{{ item.before }}</div>
|
||||
<div class="db-change-after">→ {{ item.after }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 기존 dark-bullet-list CSS 재사용 */
|
||||
.block-dark-bullets {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
border-radius: 8px;
|
||||
padding: 14px 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.db-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: #93c5fd;
|
||||
}
|
||||
/* variant: before-after 2열 구조 */
|
||||
.db-changes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
.db-change {
|
||||
background: rgba(255,255,255,0.06);
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
border-left: 3px solid #60a5fa;
|
||||
}
|
||||
.db-change-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #93c5fd;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.db-change-before {
|
||||
font-size: 10px;
|
||||
color: #94a3b8;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.db-change-after {
|
||||
font-size: 11px;
|
||||
color: #e2e8f0;
|
||||
font-weight: 500;
|
||||
margin-top: 2px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user