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/BEPs/detail-button.html
+++ b/templates/blocks/BEPs/detail-button.html
@@ -0,0 +1,29 @@
+<!-- 상세보기 버튼: 그라데이션 배경 + 둥근 모서리 -->
+<!--
+  📋 detail-button
+  ─────────────────
+  용도: 팝업 또는 상세 페이지로 이동하는 버튼
+  슬롯: label (기본: "상세보기")
+  Figma 원본: Frame 1171276068
+  색상: 배경 그라데이션 #fff → #e3d8bf, 텍스트 #ffffff
+-->
+<div class="block-detail-btn">
+  <span class="db-label">{{ label | default('상세보기') }}</span>
+</div>
+
+<style>
+.block-detail-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(90deg, #ffffff, #e3d8bf);
+  border-radius: 7px;
+  padding: 4px 16px;
+  cursor: pointer;
+}
+.db-label {
+  font-size: var(--font-caption, 11px);
+  font-weight: 700;
+  color: #ffffff;
+}
+</style>
--- a/templates/blocks/BEPs/engn-solution-dfma.html
+++ b/templates/blocks/BEPs/engn-solution-dfma.html
@@ -0,0 +1,73 @@
+<!-- Engn. Solution / DfMA 설명 + 정책 달성 -->
+<!--
+  📋 engn-solution-dfma
+  ─────────────────
+  용도: Engn. Solution과 DfMA 개념 설명 + 정책 달성 연결
+  슬롯:
+    items[]: 항목 목록
+      - title: 제목 (예: "Engn. Solution", "DfMA")
+      - description: 설명 텍스트
+      - color: 제목 색상 (예: "#217581")
+    main_text: 하단 메인 텍스트
+    policy_label: 정책 달성 라벨
+  Figma 원본: Frame 1171276070
+-->
+<div class="block-engn">
+  <div class="engn-items">
+    {% for item in items %}
+    <div class="engn-item">
+      <div class="engn-title" style="color: {{ item.color | default('#217581') }}">{{ item.title }}</div>
+      <div class="engn-desc">{{ item.description }}</div>
+    </div>
+    {% endfor %}
+  </div>
+  {% if main_text %}
+  <div class="engn-main">{{ main_text }}</div>
+  {% endif %}
+  {% if policy_label %}
+  <div class="engn-policy">{{ policy_label }}</div>
+  {% endif %}
+</div>
+
+<style>
+.block-engn {
+  padding: 16px 20px;
+}
+.engn-items {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 16px;
+}
+.engn-item {
+  flex: 1;
+}
+.engn-title {
+  font-size: var(--font-subtitle, 16px);
+  font-weight: 900;
+  margin-bottom: 6px;
+}
+.engn-desc {
+  font-size: var(--font-caption, 12px);
+  font-weight: 700;
+  color: #217581;
+  line-height: var(--line-height-ko, 1.7);
+}
+.engn-main {
+  font-size: var(--font-body, 14px);
+  font-weight: 700;
+  color: #000;
+  line-height: var(--line-height-ko, 1.7);
+  text-align: center;
+  margin-top: 16px;
+}
+.engn-policy {
+  background: #1a365d;
+  color: #fff;
+  font-size: var(--font-body, 14px);
+  font-weight: 700;
+  padding: 8px 20px;
+  text-align: center;
+  border-radius: 6px;
+  margin-top: 12px;
+}
+</style>
--- a/templates/blocks/BEPs/image-placeholder.html
+++ b/templates/blocks/BEPs/image-placeholder.html
@@ -0,0 +1,25 @@
+<!-- 이미지 플레이스홀더: 이미지 슬롯만 있는 프레임 -->
+<!--
+  📋 image-placeholder
+  ─────────────────
+  용도: 이미지만 배치되는 프레임 (텍스트 없음)
+  슬롯: src (이미지 경로), alt (대체 텍스트), width, height
+  Figma 원본: Frame 1171276071 (949x275, 이미지만)
+-->
+<div class="block-img-ph">
+  <img src="{{ src }}" alt="{{ alt | default('') }}" style="width:100%;height:100%;object-fit:contain;">
+</div>
+
+<style>
+.block-img-ph {
+  width: 100%;
+  height: 100%;
+  background: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.block-img-ph img {
+  border-radius: var(--radius, 6px);
+}
+</style>
--- a/templates/blocks/BEPs/policy-direction.html
+++ b/templates/blocks/BEPs/policy-direction.html
@@ -0,0 +1,87 @@
+<!-- 정책방향: 좌측 설명 + 우측 항목/이미지 -->
+<!--
+  📋 policy-direction
+  ─────────────────
+  용도: 인프라 건설산업의 정책방향 설명 (좌측 텍스트 + 우측 구조도)
+  슬롯:
+    title: 대제목 (예: "인프라 건설산업의 정책방향")
+    description: 설명 텍스트
+    sub_sections[]: 하위 섹션 목록
+      - title: 섹션 제목
+      - bullets[]: 불릿
+    questions[]: 질문 목록 (좌하단)
+      - text: 질문 텍스트
+  Figma 원본: Frame 1171276067
+-->
+<div class="block-policy">
+  <div class="pol-header">
+    <div class="pol-title">{{ title }}</div>
+    {% if description %}
+    <div class="pol-desc">{{ description }}</div>
+    {% endif %}
+  </div>
+  <div class="pol-content">
+    {% for section in sub_sections %}
+    <div class="pol-section">
+      <div class="pol-section-title">{{ section.title }}</div>
+      {% for bullet in section.bullets %}
+      <div class="pol-bullet">• {{ bullet }}</div>
+      {% endfor %}
+    </div>
+    {% endfor %}
+  </div>
+  {% if questions %}
+  <div class="pol-questions">
+    {% for q in questions %}
+    <div class="pol-q">{{ q.text }}</div>
+    {% endfor %}
+  </div>
+  {% endif %}
+</div>
+
+<style>
+.block-policy {
+  padding: 16px 20px;
+}
+.pol-header {
+  margin-bottom: 14px;
+}
+.pol-title {
+  font-size: var(--font-subtitle, 16px);
+  font-weight: 700;
+  color: #000;
+  margin-bottom: 6px;
+}
+.pol-desc {
+  font-size: var(--font-caption, 12px);
+  font-weight: 500;
+  color: #000;
+  line-height: var(--line-height-ko, 1.7);
+}
+.pol-section {
+  margin-bottom: 12px;
+}
+.pol-section-title {
+  font-size: var(--font-body, 13px);
+  font-weight: 700;
+  color: #000;
+  margin-bottom: 4px;
+}
+.pol-bullet {
+  font-size: var(--font-caption, 11px);
+  color: #333;
+  line-height: var(--line-height-ko, 1.7);
+  padding-left: 8px;
+}
+.pol-questions {
+  margin-top: 16px;
+  border-top: 1px solid #ccc;
+  padding-top: 12px;
+}
+.pol-q {
+  font-size: var(--font-body, 13px);
+  font-weight: 700;
+  color: #c41e3a;
+  margin-bottom: 4px;
+}
+</style>
--- a/templates/blocks/BEPs/process-product-2col.html
+++ b/templates/blocks/BEPs/process-product-2col.html
@@ -0,0 +1,187 @@
+<!-- Process/Product 2단 비교: 좌측 과정의 혁신 + 우측 결과의 혁신 -->
+<!--
+  📋 process-product-2col
+  ─────────────────
+  용도: Process 혁신과 Product 변화를 좌우 2단으로 비교
+  슬롯:
+    left_title, right_title: 좌/우 제목
+    left_sections[], right_sections[]: 섹션 목록 (title + bullets[])
+    left_compare: As-is → To-be 비교 (선택, title + left_items[] + right_items[])
+  Figma 원본: Frame 1171276073 (3848x1487 → 1280x495)
+  색상 (Figma에서 추출):
+    좌 배경: linear-gradient(180deg, #ffffff 46%, #39311e 100%)
+    우 배경: linear-gradient(0deg, #296b55 0%, #ffffff 56%)
+    좌 제목바: linear-gradient(270deg, #a4a096, #39311e)
+    우 제목바: linear-gradient(0deg, #296b55, #022017)
+    좌 제목텍스트: gradient(#296b55→#123328) + solid #3e3523
+    우 제목텍스트: gradient(#296b55→#123328) + solid #225e4a
+    좌 중제목: #5c3614, 16.6px/900
+    우 중제목: #084c56, 16.6px/900
+    본문: #000000, 13.3px/700, lineH=23.3px
+-->
+<div class="block-pp2">
+  <div class="pp2-col pp2-left">
+    <div class="pp2-header-bar pp2-header-bar--left">
+      <span class="pp2-header-text pp2-header-text--left">{{ left_title }}</span>
+    </div>
+    <div class="pp2-body">
+      {% if left_compare %}
+      <div class="pp2-mid-title pp2-mid-title--left">{{ left_compare.title }}</div>
+      <div class="pp2-compare">
+        <div class="pp2-compare-col">
+          {% for item in left_compare.left_items %}
+          <div class="pp2-body-text">• {{ item }}</div>
+          {% endfor %}
+        </div>
+        <div class="pp2-compare-arrow">
+          <img src="{{ arrow_image | default('') }}" alt="→" class="pp2-arrow-img">
+        </div>
+        <div class="pp2-compare-col">
+          {% for item in left_compare.right_items %}
+          <div class="pp2-body-text">• {{ item }}</div>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+      {% for section in left_sections %}
+      <div class="pp2-mid-title pp2-mid-title--left">{{ section.title }}</div>
+      {% for bullet in section.bullets %}
+      <div class="pp2-body-text">• {{ bullet }}</div>
+      {% endfor %}
+      {% endfor %}
+    </div>
+  </div>
+  <div class="pp2-col pp2-right">
+    <div class="pp2-header-bar pp2-header-bar--right">
+      <span class="pp2-header-text pp2-header-text--right">{{ right_title }}</span>
+    </div>
+    <div class="pp2-body">
+      {% for section in right_sections %}
+      <div class="pp2-mid-title pp2-mid-title--right">{{ section.title }}</div>
+      {% for bullet in section.bullets %}
+      <div class="pp2-body-text">• {{ bullet }}</div>
+      {% endfor %}
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+<style>
+.block-pp2 {
+  display: flex;
+  gap: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.pp2-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 495px;
+}
+
+/* 좌측 배경: Figma gradient 180deg #fff 46% → #39311e 100% */
+.pp2-left {
+  background: linear-gradient(180deg, #ffffff 46%, #39311e 100%);
+}
+
+/* 우측 배경: Figma gradient 0deg #296b55 0% → #fff 56% */
+.pp2-right {
+  background: linear-gradient(0deg, #296b55 0%, #ffffff 56%);
+}
+
+/* 제목 바: height=47.2px, top=20.6px → padding-top으로 처리 */
+.pp2-header-bar {
+  height: 47px;
+  margin-top: 21px;
+  display: flex;
+  align-items: center;
+}
+
+/* 좌 제목바: 우측 둥글게, 그라데이션 우→좌 */
+.pp2-header-bar--left {
+  background: linear-gradient(270deg, #a4a096 0%, #39311e 100%);
+  border-radius: 0 24px 24px 0;
+  justify-content: center;
+}
+
+/* 우 제목바: 좌측 둥글게, 그라데이션 좌→우 */
+.pp2-header-bar--right {
+  background: linear-gradient(90deg, #296b55 0%, #022017 100%);
+  border-radius: 24px 0 0 24px;
+  padding-left: 71px;
+}
+
+/* 제목 텍스트: 23.3px/900, letterSpacing=1.2px */
+.pp2-header-text {
+  font-size: 23.3px;
+  font-weight: 900;
+  letter-spacing: 1.2px;
+  line-height: 33.7px;
+}
+
+/* 좌 제목: Figma solid fill #3e3523 */
+.pp2-header-text--left {
+  color: #3e3523;
+}
+
+/* 우 제목: Figma solid fill #225e4a */
+.pp2-header-text--right {
+  color: #225e4a;
+}
+
+/* 본문 영역 */
+.pp2-body {
+  padding: 10px 27px;
+  flex: 1;
+}
+
+/* 중제목: 16.6px/900, lineH=31.6px */
+.pp2-mid-title {
+  font-size: 16.6px;
+  font-weight: 900;
+  line-height: 31.6px;
+  margin-top: 8px;
+}
+.pp2-mid-title:first-child {
+  margin-top: 0;
+}
+.pp2-mid-title--left {
+  color: #5c3614;
+}
+.pp2-mid-title--right {
+  color: #084c56;
+}
+
+/* 본문: 13.3px/700, lineH=23.3px */
+.pp2-body-text {
+  font-size: 13.3px;
+  font-weight: 700;
+  color: #000000;
+  line-height: 23.3px;
+}
+
+/* As-is → To-be 비교 */
+.pp2-compare {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 10px;
+}
+.pp2-compare-col {
+  flex: 1;
+}
+.pp2-compare-arrow {
+  flex-shrink: 0;
+  width: 84px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pp2-arrow-img {
+  width: 84px;
+  height: 30px;
+  object-fit: contain;
+}
+</style>
--- a/templates/blocks/BEPs/process-product-2col.svg
+++ b/templates/blocks/BEPs/process-product-2col.svg
--- a/templates/blocks/BEPs/process-product-2col_svg_test.html
+++ b/templates/blocks/BEPs/process-product-2col_svg_test.html
--- a/templates/blocks/BEPs/process-product-2col_test.html
+++ b/templates/blocks/BEPs/process-product-2col_test.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html><html><head><meta charset="UTF-8">
+<style>
+*{margin:0;padding:0;box-sizing:border-box;}
+body{background:#e5e5e5;padding:10px;font-family:'Pretendard Variable','Noto Sans KR',sans-serif;word-break:keep-all;}
+
+.block-pp2 {
+  display: flex;
+  gap: 0;
+  width: 1280px;
+  height: 495px;
+}
+.pp2-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.pp2-left {
+  background: linear-gradient(180deg, #ffffff 46%, #39311e 100%);
+}
+.pp2-right {
+  background: linear-gradient(0deg, #296b55 0%, #ffffff 56%);
+}
+.pp2-header-bar {
+  height: 47px;
+  margin-top: 21px;
+  display: flex;
+  align-items: center;
+}
+.pp2-header-bar--left {
+  background: linear-gradient(270deg, #a4a096 0%, #39311e 100%);
+  border-radius: 0 24px 24px 0;
+  justify-content: center;
+}
+.pp2-header-bar--right {
+  background: linear-gradient(90deg, #296b55 0%, #022017 100%);
+  border-radius: 24px 0 0 24px;
+  padding-left: 71px;
+}
+.pp2-header-text {
+  font-size: 23.3px;
+  font-weight: 900;
+  letter-spacing: 1.2px;
+  line-height: 33.7px;
+}
+.pp2-header-text--left {
+  color: #3e3523;
+}
+.pp2-header-text--right {
+  color: #225e4a;
+}
+.pp2-body {
+  padding: 10px 27px;
+  flex: 1;
+}
+.pp2-mid-title {
+  font-size: 16.6px;
+  font-weight: 900;
+  line-height: 31.6px;
+  margin-top: 8px;
+}
+.pp2-mid-title:first-child {
+  margin-top: 0;
+}
+.pp2-mid-title--left {
+  color: #5c3614;
+}
+.pp2-mid-title--right {
+  color: #084c56;
+}
+.pp2-body-text {
+  font-size: 13.3px;
+  font-weight: 700;
+  color: #000000;
+  line-height: 23.3px;
+}
+.pp2-compare {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 10px;
+}
+.pp2-compare-col {
+  flex: 1;
+}
+.pp2-compare-arrow {
+  flex-shrink: 0;
+  width: 84px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: #5c3614;
+}
+</style></head><body>
+
+<div class="block-pp2">
+  <div class="pp2-col pp2-left">
+    <div class="pp2-header-bar pp2-header-bar--left">
+      <span class="pp2-header-text pp2-header-text--left">과정 (Process)의 혁신</span>
+    </div>
+    <div class="pp2-body">
+      <div class="pp2-mid-title pp2-mid-title--left">Analogue 개념 기반 업무의 Digital Transformation</div>
+      <div class="pp2-compare">
+        <div class="pp2-compare-col">
+          <div class="pp2-body-text">• 개념, 도서, 행정 절차 중심</div>
+          <div class="pp2-body-text">• 2D 도면, 전문가, 규정</div>
+          <div class="pp2-body-text">• 업무 구분(단절), 책임</div>
+        </div>
+        <div class="pp2-compare-arrow">➠</div>
+        <div class="pp2-compare-col">
+          <div class="pp2-body-text">• 시각화된 목적물, 소통, 투명성 중심</div>
+          <div class="pp2-body-text">• 3D 모델, 참여자, 실체</div>
+          <div class="pp2-body-text">• 협업(융·복합), 창의성</div>
+        </div>
+      </div>
+      <div class="pp2-mid-title pp2-mid-title--left">위치기반의 3D 모델을 사용하는 Process 혁신</div>
+      <div class="pp2-body-text">• 위치기반(지리적, 지형, 지반상태 포함)의 GIS와 3D 모델(형상, 내용속성) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 업무 프로세스의 혁신</div>
+      <div class="pp2-mid-title pp2-mid-title--left">사용자 중심의 Solution(S/W) 제공</div>
+      <div class="pp2-body-text">• 인프라 건설산업의 1차적인 Process 혁신은 등고선 중심의 지형도가 아닌 속성이 포함된 수치지형도와 본태 측량에서 획득한 3D 지반모델 구축 필수</div>
+      <div class="pp2-body-text">• 설계와 시공에 관련된 기술을 정리하고 디지털화하여 S/W로 기술 축적</div>
+      <div class="pp2-body-text">• 서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을 연계가 가능하도록 설계, 시공 Solution 제공</div>
+    </div>
+  </div>
+  <div class="pp2-col pp2-right">
+    <div class="pp2-header-bar pp2-header-bar--right">
+      <span class="pp2-header-text pp2-header-text--right">결과 (Products)의 혁신</span>
+    </div>
+    <div class="pp2-body">
+      <div class="pp2-mid-title pp2-mid-title--right">Copy & Paste로 인한 하향 평준화된 기존 성과품의 품질 향상</div>
+      <div class="pp2-body-text">• 과거 수작업으로 시행하면서 발생하던 오류 등의 최소화</div>
+      <div class="pp2-body-text">• 정확한 Data에 기반한 계획과 개선된 높은 품질의 성과물</div>
+      <div class="pp2-mid-title pp2-mid-title--right">Analogue 기반 도서 외 Digital 기반 정보물 추가</div>
+      <div class="pp2-body-text">• 규정에만 의존한 도면, 수량, 계산서, 시방서 등의 성과물에 3D 모델, 시뮬레이션 등의 Digital 기반 정보물(Information Data and Products)이 추가</div>
+      <div class="pp2-mid-title pp2-mid-title--right">Solution을 이용한 업무효율화(사용자 편의, 협업 및 의사소통 강화 등)</div>
+      <div class="pp2-body-text">• 디지털 기반 성과물인 Graphic 중심의 3D 모델, 시뮬레이션을 제대로 활용하기 위해서는 기존의 낮은 수준이 아니라 공학용 사이니지(H/W) 시스템이 필수로 갖춰야만 함</div>
+      <div class="pp2-body-text">• Engn. Solution을 통해 프로젝트에 관한 이슈를 함께 검토하고 논의하고 다양한 건설단계별 정보를 디지털 데이터로 저장하여 건설의 전 과정을 통합관리</div>
+    </div>
+  </div>
+</div>
+
+</body></html>
--- a/templates/blocks/BEPs/solution-goals.html
+++ b/templates/blocks/BEPs/solution-goals.html
@@ -0,0 +1,76 @@
+<!-- Solution 제작 목표: 5개 목표 카드 + 중앙 텍스트 -->
+<!--
+  📋 solution-goals
+  ─────────────────
+  용도: Solution 제작의 5가지 핵심 목표 (Easy, Convenient, Quality, Cost, Speed)
+  슬롯:
+    main_text: 중앙 메인 텍스트
+    goals[]: 목표 카드 목록
+      - en: 영문 라벨 (예: "Easy Like Breath")
+      - ko: 한글 라벨 (예: "(쉬운 이해)")
+      - icon: 아이콘 이미지 경로 (선택)
+  Figma 원본: Frame 1171276072
+  색상: 제목 #ffffff on dark, 본문 #000000, 영문 gradient text
+-->
+<div class="block-sol-goals">
+  <div class="sg-title">Solution 제작 목표</div>
+  <div class="sg-main">{{ main_text }}</div>
+  <div class="sg-grid" style="--sg-count: {{ goals|length }}">
+    {% for g in goals %}
+    <div class="sg-card">
+      {% if g.icon %}<img class="sg-icon" src="{{ g.icon }}" alt="{{ g.en }}">{% endif %}
+      <div class="sg-en">{{ g.en }}</div>
+      <div class="sg-ko">{{ g.ko }}</div>
+    </div>
+    {% endfor %}
+  </div>
+</div>
+
+<style>
+.block-sol-goals {
+  text-align: center;
+  padding: 20px;
+}
+.sg-title {
+  font-size: var(--font-subtitle, 16px);
+  font-weight: 700;
+  color: #ffffff;
+  background: #1a365d;
+  display: inline-block;
+  padding: 6px 20px;
+  border-radius: 6px;
+  margin-bottom: 16px;
+}
+.sg-main {
+  font-size: var(--font-body, 14px);
+  font-weight: 700;
+  color: #000;
+  line-height: var(--line-height-ko, 1.7);
+  margin-bottom: 20px;
+}
+.sg-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--sg-count, 5), 1fr);
+  gap: 14px;
+}
+.sg-card {
+  text-align: center;
+}
+.sg-icon {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  margin-bottom: 6px;
+}
+.sg-en {
+  font-size: 13px;
+  font-weight: 900;
+  color: #1a365d;
+  margin-bottom: 2px;
+}
+.sg-ko {
+  font-size: 11px;
+  font-weight: 500;
+  color: #000;
+}
+</style>