From 09c85fe60243f2109546436b3d509ec09b4e3acd Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Sat, 29 Aug 2026 18:54:45 +0900
Subject: [PATCH] =?UTF-8?q?feat(B07):=20=EC=82=AC=EC=9D=B4=EB=93=9C=20?=
 =?UTF-8?q?=ED=8C=A8=EB=84=90=EC=97=90=20=EB=8F=84=EB=A9=B4=2012=EB=B6=84?=
 =?UTF-8?q?=EB=A5=98=20=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88=EB=A5=BC=20?=
 =?UTF-8?q?=EB=A7=8C=EB=93=A0=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

도면 구성이 확정된 12분류(표지~용지도)를 좌측 패널에 순서대로 세운다.
아직 만들지 않는 도면은 접힌 채 '준비 중'으로 자리만 잡는다.

- DRAWING_GROUPS 상수로 12개 그룹 정의, kind가 있는 둘(종단면도·횡단면도)만
  서버 목록으로 채운다
- 빈 그룹은 data-pending=true + is-collapsed, 제목만 흐리게

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 B07_DesignDetail/B07_DesignDetail_UI_Page.ts  | 38 +++++++++++++++----
 .../B07_DesignDetail_UI_Style.css             |  9 +++++
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/B07_DesignDetail/B07_DesignDetail_UI_Page.ts b/B07_DesignDetail/B07_DesignDetail_UI_Page.ts
index 15744630..778e015d 100644
--- a/B07_DesignDetail/B07_DesignDetail_UI_Page.ts
+++ b/B07_DesignDetail/B07_DesignDetail_UI_Page.ts
@@ -74,6 +74,22 @@ const CAD_SAVE_REQUEST_MESSAGE = "aislo:b08:save-request";
 const CAD_SAVE_RESPONSE_MESSAGE = "aislo:b08:save-response";
 const CAD_NAVIGATE_MESSAGE = "aislo:b08:navigate";
 
+/** 도면 구성 12분류 (2026-08-29 사용자 확정 순서). kind가 없으면 아직 만들지 않는 도면. */
+const DRAWING_GROUPS: readonly { label: string; kind?: DesignDrawingItem["kind"] }[] = [
+  { label: "표지" },
+  { label: "계획평면도(지형)" },
+  { label: "계획평면도(노선배치도)" },
+  { label: "계획평면도(배치도)" },
+  { label: "계획평면도(라이다)" },
+  { label: "종단면도", kind: "longitudinal" },
+  { label: "표준 횡단면도" },
+  { label: "횡단면도", kind: "cross" },
+  { label: "토적도(유토곡선)" },
+  { label: "유역도(배수 유역도)" },
+  { label: "표준도" },
+  { label: "용지도" },
+];
+
 /** B06 확정 산출물 기반 도면 목록 패널. */
 function buildDrawingSidePanel(
   drawings: DesignDrawingItem[],
@@ -99,20 +115,26 @@ function buildDrawingSidePanel(
     return panel;
   }
 
-  const groups: [string, DesignDrawingItem["kind"], DesignDrawingItem[]][] = [
-    ["종단도", "longitudinal", drawings.filter((item) => item.kind === "longitudinal")],
-    ["횡단도", "cross", drawings.filter((item) => item.kind === "cross")],
-  ];
-  for (const [label, kind, items] of groups) {
-    if (!items.length) continue;
+  for (const group of DRAWING_GROUPS) {
+    const items = group.kind ? drawings.filter((item) => item.kind === group.kind) : [];
     const section = document.createElement("section");
     // ui-sidebar-section: 사이드 컨테이너 공통 외곽선(B04~B06과 통일, 2026-08-06 사용자 지시).
     section.className = "b07-drawing-group ui-collapsible ui-sidebar-section";
-    section.dataset.kind = kind;
+    if (group.kind) section.dataset.kind = group.kind;
+    section.dataset.pending = String(!group.kind);
     const sectionTitle = document.createElement("h3");
     sectionTitle.className = "ui-collapsible__title";
-    sectionTitle.textContent = `${label} ${items.length}`;
+    sectionTitle.textContent = items.length ? `${group.label} ${items.length}` : group.label;
     section.append(sectionTitle);
+    if (!items.length) {
+      const note = document.createElement("p");
+      note.className = "b07-drawing-list__empty";
+      note.textContent = "준비 중";
+      section.append(note);
+      section.classList.add("is-collapsed");
+      panel.append(section);
+      continue;
+    }
     for (const drawing of items) {
       const button = document.createElement("button");
       button.type = "button";
diff --git a/B07_DesignDetail/B07_DesignDetail_UI_Style.css b/B07_DesignDetail/B07_DesignDetail_UI_Style.css
index a5d673a3..9797f69a 100644
--- a/B07_DesignDetail/B07_DesignDetail_UI_Style.css
+++ b/B07_DesignDetail/B07_DesignDetail_UI_Style.css
@@ -63,6 +63,15 @@
   font-weight: 600;
 }
 
+/* 아직 만들지 않는 도면 그룹 — 자리만 잡아 둔다. */
+.b07-drawing-group[data-pending="true"] h3 {
+  opacity: 0.55;
+}
+
+.b07-drawing-group .b07-drawing-list__empty {
+  margin: 0 0 var(--spacing-4);
+}
+
 /* 그리드 제목은 두 열을 가로지른다 */
 .b07-drawing-group[data-kind="cross"] h3 {
   grid-column: 1 / -1;