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; } /* 그리드 제목은 두 열을 가로지른다 */