From d4b8b088527bdb203cc8b284fbd68adccce87565 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sat, 29 Aug 2026 19:00:10 +0900 Subject: [PATCH] =?UTF-8?q?refactor(B07):=20=ED=95=9C=20=EC=9E=A5=EC=A7=9C?= =?UTF-8?q?=EB=A6=AC=20=EB=8F=84=EB=A9=B4=EC=9D=80=20=EC=BB=A8=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=84=88=20=EC=97=86=EC=9D=B4=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EB=A7=8C=20=EB=91=94=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 도면이 한 장뿐인 그룹(종단면도)과 아직 만들지 않은 그룹은 접이식 컨테이너에 항목 하나를 넣을 이유가 없다. 그룹 이름을 단 버튼 하나로 바꾼다. - 0~1장: 컨테이너 없이 버튼 하나 (없으면 비활성 + '준비 중') - 2장 이상(횡단면도): 기존 접이식 컨테이너 유지 - 버튼 생성은 drawingButton() 헬퍼로 합침 Co-Authored-By: Claude Fable 5 --- B07_DesignDetail/B07_DesignDetail_UI_Page.ts | 58 ++++++++++++------- .../B07_DesignDetail_UI_Style.css | 11 ++-- 2 files changed, 40 insertions(+), 29 deletions(-) diff --git a/B07_DesignDetail/B07_DesignDetail_UI_Page.ts b/B07_DesignDetail/B07_DesignDetail_UI_Page.ts index 778e015d..2fec3c60 100644 --- a/B07_DesignDetail/B07_DesignDetail_UI_Page.ts +++ b/B07_DesignDetail/B07_DesignDetail_UI_Page.ts @@ -115,39 +115,53 @@ function buildDrawingSidePanel( return panel; } + const drawingButton = (drawing: DesignDrawingItem, label: string): HTMLButtonElement => { + const button = document.createElement("button"); + button.type = "button"; + button.className = "b07-drawing-button"; + button.dataset.drawingId = drawing.id; + button.dataset.confirmed = String(drawing.confirmed); + const name = document.createElement("span"); + name.className = "b07-drawing-button__name"; + name.textContent = label; + button.append(name); + button.addEventListener("click", () => onSelect(drawing)); + return button; + }; + for (const group of DRAWING_GROUPS) { const items = group.kind ? drawings.filter((item) => item.kind === group.kind) : []; + // 한 장짜리(와 아직 없는 도면)는 컨테이너 없이 버튼 하나로 둔다. + if (items.length <= 1) { + const [drawing] = items; + const button = drawing + ? drawingButton(drawing, group.label) + : document.createElement("button"); + if (!drawing) { + button.type = "button"; + button.className = "b07-drawing-button"; + button.disabled = true; + button.title = "준비 중"; + const name = document.createElement("span"); + name.className = "b07-drawing-button__name"; + name.textContent = group.label; + button.append(name); + } + button.dataset.pending = String(!drawing); + panel.append(button); + continue; + } const section = document.createElement("section"); // ui-sidebar-section: 사이드 컨테이너 공통 외곽선(B04~B06과 통일, 2026-08-06 사용자 지시). section.className = "b07-drawing-group ui-collapsible ui-sidebar-section"; 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 = items.length ? `${group.label} ${items.length}` : group.label; + sectionTitle.textContent = `${group.label} ${items.length}`; 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"; - button.className = "b07-drawing-button"; - button.dataset.drawingId = drawing.id; - button.dataset.confirmed = String(drawing.confirmed); - const name = document.createElement("span"); - name.className = "b07-drawing-button__name"; // 횡단면도는 장 단위(여러 측점)라 서버가 준 "N장 (구간)" 라벨을 그대로 쓴다. - name.textContent = drawing.label; - button.append(name); - button.addEventListener("click", () => onSelect(drawing)); - section.append(button); + section.append(drawingButton(drawing, drawing.label)); } panel.append(section); } diff --git a/B07_DesignDetail/B07_DesignDetail_UI_Style.css b/B07_DesignDetail/B07_DesignDetail_UI_Style.css index 9797f69a..296e0bf3 100644 --- a/B07_DesignDetail/B07_DesignDetail_UI_Style.css +++ b/B07_DesignDetail/B07_DesignDetail_UI_Style.css @@ -63,13 +63,10 @@ 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-button[data-pending="true"] { + opacity: 0.5; + cursor: not-allowed; } /* 그리드 제목은 두 열을 가로지른다 */