WIP: hero-icon-cards_1 블록 + 오답노트 + figma 관련 파일

- hero-icon-cards_1.html: hero-icon-cards 변형 (icon → 소제목+불릿 계층) - compare-detail-gradient.html: 하단 2열 비교 블록 (Figma Frame 4 기반) - 오답노트.md: 절대 하지 말아야 하는 실수 목록 - figma_to_html.py: Figma→HTML 변환 스크립트 - static/figma-assets/: Figma export 이미지 (배지, 화살표) - 주의: compare-detail-gradient CSS 폰트 크기가 임의 수정됨 — 원본 복원 필요 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 17:14:09 +09:00
parent 076aeb0403
commit 05703c8e72
37 changed files with 3536 additions and 0 deletions
--- a/templates/blocks/cards/test-compare-2col-badge.html
+++ b/templates/blocks/cards/test-compare-2col-badge.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>compare-2col-badge 테스트</title>
+<link rel="stylesheet" href="../../../static/tokens.css">
+<link rel="stylesheet" href="../../../static/base.css">
+<style>
+body { background: #f0f0f0; padding: 40px; }
+h2 { margin: 40px 0 16px; font-size: 18px; color: #333; }
+.slide {
+  width: 1280px; height: 720px;
+  background: #fff; padding: 40px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+  margin-bottom: 40px;
+  display: grid;
+  gap: 20px;
+  font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
+}
+</style>
+</head>
+<body>
+
+<h2>Test 1: Figma Frame 3 원본 (Engn. Solution vs DfMA)</h2>
+<div class="slide" style="grid-template-rows: auto 1fr auto;">
+
+<!-- compare-2col-badge 블록 시작 -->
+<div class="block-c2b">
+  <div class="c2b-badge">
+    <span class="c2b-badge-text">정책 달성</span>
+  </div>
+  <div class="c2b-container">
+    <div class="c2b-col c2b-left">
+      <div class="c2b-title" style="color: var(--color-teal, #227582)">Engn. Solution</div>
+      <div class="c2b-body" style="color: var(--color-teal, #227582)">목적 시설물에 대한 설계, 시공, 유지관리 정보를 고객이 쉽고 편리하게 사용하고, 편익이 발생하도록 제공하는 다양한 형태의 정보물과 이를 구현할 수 있는 S/W 및 H/W와 그 기술을 포함하는 서비스</div>
+    </div>
+    <div class="c2b-divider"></div>
+    <div class="c2b-col c2b-right">
+      <div class="c2b-title" style="color: var(--color-teal, #227582)">DfMA</div>
+      <div class="c2b-body" style="color: var(--color-teal, #227582)">Design for Manufacture and Assembly는 공장 생산, 현장조립이 가능한 설계를 의미하며, 현장 중심의 건설에서 공장 생산 방식으로 전환하는 OSC(Off Site Construction) 시스템을 위한 핵심기술</div>
+    </div>
+  </div>
+  <div class="c2b-statement">디지털전환은 <strong>사용자</strong>(발주자, 수급자, 엔지니어)가<br><strong>쉽고, 편하고, 편익</strong>이 있어야만 한다.</div>
+</div>
+<!-- 블록 끝 -->
+
+</div>
+
+<h2>Test 2: 다른 콘텐츠 (범용성 확인)</h2>
+<div class="slide" style="grid-template-rows: auto 1fr;">
+
+<div class="block-c2b">
+  <div class="c2b-badge">
+    <span class="c2b-badge-text">디지털 전환 전략</span>
+  </div>
+  <div class="c2b-container">
+    <div class="c2b-col c2b-left">
+      <div class="c2b-title" style="color: var(--color-warm-brown, #5C3714)">As-Is (현재)</div>
+      <div class="c2b-body" style="color: var(--color-warm-brown, #5C3714)">종이 도면 기반의 업무 프로세스
+수작업 검증과 품질 관리
+분절된 단계별 정보 전달
+개인 경험에 의존하는 의사결정</div>
+    </div>
+    <div class="c2b-divider"></div>
+    <div class="c2b-col c2b-right">
+      <div class="c2b-title" style="color: var(--color-dark-teal, #084C56)">To-Be (미래)</div>
+      <div class="c2b-body" style="color: var(--color-dark-teal, #084C56)">3D 모델 기반의 통합 프로세스
+자동화된 검증과 품질 관리
+연속적인 디지털 정보 흐름
+데이터 기반의 의사결정 지원</div>
+    </div>
+  </div>
+</div>
+
+</div>
+
+<h2>Test 3: 짧은 콘텐츠 (최소 케이스)</h2>
+<div class="slide" style="grid-template-rows: auto 1fr;">
+
+<div class="block-c2b">
+  <div class="c2b-badge">
+    <span class="c2b-badge-text">비교</span>
+  </div>
+  <div class="c2b-container">
+    <div class="c2b-col c2b-left">
+      <div class="c2b-title" style="color: var(--color-teal, #227582)">BIM</div>
+      <div class="c2b-body" style="color: var(--color-teal, #227582)">건축정보모델링</div>
+    </div>
+    <div class="c2b-divider"></div>
+    <div class="c2b-col c2b-right">
+      <div class="c2b-title" style="color: var(--color-teal, #227582)">GIS</div>
+      <div class="c2b-body" style="color: var(--color-teal, #227582)">지리정보시스템</div>
+    </div>
+  </div>
+</div>
+
+</div>
+
+<!-- 블록 자체 스타일 -->
+<style>
+.block-c2b {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+}
+.c2b-badge {
+  background: linear-gradient(135deg, var(--color-dark-teal, #084C56), var(--color-teal, #227582));
+  border-radius: 12px 12px 0 0;
+  padding: 10px 24px;
+  text-align: center;
+}
+.c2b-badge-text {
+  font-size: 18px;
+  font-weight: 700;
+  color: #ffffff;
+  letter-spacing: 0.02em;
+}
+.c2b-container {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-top: none;
+  border-radius: 0 0 16px 16px;
+  padding: 24px 28px;
+  gap: 0;
+}
+.c2b-divider {
+  width: 1px;
+  background: #e2e8f0;
+  margin: 0 24px;
+  align-self: stretch;
+}
+.c2b-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+.c2b-title {
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 1.3;
+  word-break: keep-all;
+}
+.c2b-body {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.7;
+  white-space: pre-line;
+  word-break: keep-all;
+  opacity: 0.85;
+}
+.c2b-statement {
+  margin-top: 16px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+  line-height: 1.6;
+  word-break: keep-all;
+  padding: 0 16px;
+}
+</style>
+
+</body>
+</html>