Merge remote-tracking branch 'origin/sub_laptop_8' into main_laptop_1

B09_Estimation/B09_Estimation_UI_Page.css

@@ -20,11 +20,16 @@
 .b09-estimation__tabs {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-4);
+  gap: var(--spacing-8); /* B08 위 · 보조 탭 줄과 같은 값(181-1) */
   padding-bottom: var(--spacing-8);
   border-bottom: 1px solid var(--color-border);
 }
 
+/* 아래 탭 없는 위 탭 — 보이지 않는 단추 한 줄로 높이만 채움(탭 바꿀 때 몸통이 안 튐) */
+.b09-estimation__tabs--blank > .ui-btn {
+  visibility: hidden;
+}
+
 /* 표 머리 — 좁은 열에서 말줄임 대신 줄바꿈 */
 [data-b09-table] thead th {
   white-space: normal;
@@ -43,3 +48,28 @@
 .b09-estimation .ui-data-table__table tbody tr.is-hand td:first-child {
   background-image: linear-gradient(to right, var(--color-primary) 3px, transparent 3px);
 }
+
+/* 181-2 표 보기 — 목록표에서 고른 호표 줄 구간 전체 붉은 외곽선(머리 accent 밑줄은 덮음) */
+.b09-estimation .ui-data-table__table tbody tr.is-pick td {
+  --pick-t: inset 0 0 0 0 transparent;
+  --pick-b: inset 0 0 0 0 transparent;
+  --pick-l: inset 0 0 0 0 transparent;
+  --pick-r: inset 0 0 0 0 transparent;
+  box-shadow: var(--pick-t), var(--pick-b), var(--pick-l), var(--pick-r);
+}
+
+.b09-estimation .ui-data-table__table tbody tr.is-pick.is-pick-top td {
+  --pick-t: inset 0 2px 0 var(--color-danger);
+}
+
+.b09-estimation .ui-data-table__table tbody tr.is-pick.is-pick-end td {
+  --pick-b: inset 0 -2px 0 var(--color-danger);
+}
+
+.b09-estimation .ui-data-table__table tbody tr.is-pick td:first-child {
+  --pick-l: inset 2px 0 0 var(--color-danger);
+}
+
+.b09-estimation .ui-data-table__table tbody tr.is-pick td:last-child {
+  --pick-r: inset -2px 0 0 var(--color-danger);
+}

B09_Estimation/B09_Estimation_UI_Shell.ts

@@ -28,6 +28,7 @@ import { computeBase, type Row } from "./B09_Estimation_Calc_Base";
 import { computeEstimation } from "./B09_Estimation_Calc_Bill";
 import { computeLabor, daegaPrice } from "./B09_Estimation_Calc_Labor";
 import { computeTotal } from "./B09_Estimation_Calc_Total";
+import { createTabBars } from "./B09_Estimation_UI_TabBar";
 import { buildDaegaBlocks, buildDaegaList } from "./B09_Estimation_UI_Tabs_Labor";
 import {
   buildCheck,
@@ -150,15 +151,14 @@ export function renderB09Estimation(root: HTMLElement): void {
   let sheets: Row = {};
   let current: TabId = "check";
 
-  const tabBar = document.createElement("div");
-  tabBar.className = "b09-estimation__tabs";
-  tabBar.setAttribute("role", "tablist");
+  // 181-1 위 탭(md) · 아래 탭(sm) 두 줄 — 줄 그리기 = `…_UI_TabBar`
+  const bars = createTabBars((tab) => show(tab));
   const panel = document.createElement("div");
   panel.className = "b09-estimation__panel";
   panel.setAttribute("role", "tabpanel");
   const body = document.createElement("div");
   body.className = "b09-estimation";
-  body.append(tabBar, panel);
+  body.append(bars.top, bars.sub, panel);
 
   const made = document.createElement("p");
   made.className = "b09-estimation__hint";
@@ -181,20 +181,7 @@ export function renderB09Estimation(root: HTMLElement): void {
   /** 탭 하나 그림 · focus = 이동해 온 줄 키 */
   const show = (tab: TabId, focus?: string): void => {
     current = tab;
-    tabBar.replaceChildren(
-      ...TABS.map(([id, label]) => {
-        const button = createButton({
-          label,
-          variant: id === tab ? "filled" : "ghost",
-          size: "sm",
-          onClick: () => id !== current && show(id),
-        });
-        button.setAttribute("role", "tab");
-        button.setAttribute("aria-selected", String(id === tab));
-        button.dataset.b09Tab = id;
-        return button;
-      }),
-    );
+    bars.draw(tab);
     if (!projectId) return void panel.replaceChildren(note("프로젝트를 먼저 고르세요."));
     if (!payload) return void panel.replaceChildren(note("원가 자료를 불러오는 중…"));
     const build = BUILDERS[tab];
@@ -205,7 +192,8 @@ export function renderB09Estimation(root: HTMLElement): void {
     const goto = (link: Link | null): void => {
       if (link) show(link.tab, link.key);
     };
-    const makeTable = (): DataTable => {
+    // extra = 줄 class 곁값(181-2 표 보기 호표 구간)
+    const makeTable = (extra?: (index: number) => string | null): DataTable => {
       const made = createDataTable({
         columns: spec.columns,
         rows: spec.rows,
@@ -215,7 +203,9 @@ export function renderB09Estimation(root: HTMLElement): void {
         caption: TABS.find(([id]) => id === tab)?.[1],
         editable: spec.editable,
         onEdit: spec.onEdit,
-        rowClass: spec.rowClass,
+        rowClass: extra
+          ? (i) => [spec.rowClass?.(i), extra(i)].filter(Boolean).join(" ") || null
+          : spec.rowClass,
         onCellClick: (i, key) => {
           if (spec.onCell) spec.onCell(i, key);
           if (spec.link && !spec.editable?.(i, key)) goto(spec.link(i, key));

B09_Estimation/B09_Estimation_UI_TabBar.ts

@@ -0,0 +1,71 @@
+/* =============================================================================
+ * B09_Estimation_UI_TabBar.ts
+ * B09 탭 줄 두 층(PLAN 181-1) — 위 탭(md) · 아래 탭(sm) · B08 수량산출 페이지 꼴.
+ *
+ *   위 탭 = `TAB_GROUPS`(`…_UI_Tabs`) · 아래 탭 하나뿐인 위 탭 = 보이지 않는 sm 단추 한 줄(높이만 채움)
+ *   위 탭 누름 = 그 묶음에서 마지막으로 본 아래 탭(이 화면 안 Map · 저장 안 함) · 없으면 첫 아래 탭
+ *   탭 이동은 `draw(탭)` — 이동이 묶음을 넘어도 위 탭이 따라 켜짐
+ * ========================================================================== */
+
+import { createButton } from "@ui/ui_template_elements";
+import { groupOf, tabName, TAB_GROUPS, type TabId } from "./B09_Estimation_UI_Tabs";
+
+export interface TabBars {
+  top: HTMLElement;
+  sub: HTMLElement;
+  /** 이 탭이 켜진 꼴로 두 줄을 다시 그림 */
+  draw: (tab: TabId) => void;
+}
+
+function tabButton(label: string, on: boolean, size: "sm" | undefined, pick: () => void) {
+  const button = createButton({
+    label,
+    variant: on ? "filled" : "ghost",
+    ...(size ? { size } : {}),
+    onClick: () => !on && pick(),
+  });
+  button.setAttribute("role", "tab");
+  button.setAttribute("aria-selected", String(on));
+  return button;
+}
+
+export function createTabBars(onPick: (tab: TabId) => void): TabBars {
+  const top = document.createElement("div");
+  top.className = "b09-estimation__tabs";
+  top.setAttribute("role", "tablist");
+  const sub = document.createElement("div");
+  sub.className = "b09-estimation__tabs";
+  const lastSeen = new Map<TabId, TabId>();
+
+  const draw = (tab: TabId): void => {
+    const [, picked] = groupOf(tab);
+    lastSeen.set(picked[0], tab);
+    top.replaceChildren(
+      ...TAB_GROUPS.map(([label, tabs]) => {
+        const button = tabButton(label, tabs === picked, undefined, () =>
+          onPick(lastSeen.get(tabs[0]) ?? tabs[0]),
+        );
+        button.dataset.b09Group = tabs[0];
+        if (tabs.length === 1) button.dataset.b09Tab = tabs[0];
+        return button;
+      }),
+    );
+    const single = picked.length === 1;
+    sub.classList.toggle("b09-estimation__tabs--blank", single);
+    sub.setAttribute("role", single ? "presentation" : "tablist");
+    sub.setAttribute("aria-hidden", String(single));
+    if (single) {
+      const ghost = createButton({ label: tabName(picked[0]), variant: "ghost", size: "sm" });
+      ghost.tabIndex = -1;
+      return void sub.replaceChildren(ghost);
+    }
+    sub.replaceChildren(
+      ...picked.map((id) => {
+        const button = tabButton(tabName(id), id === tab, "sm", () => onPick(id));
+        button.dataset.b09Tab = id;
+        return button;
+      }),
+    );
+  };
+  return { top, sub, draw };
+}

B09_Estimation/B09_Estimation_UI_Tabs.ts

@@ -56,6 +56,24 @@ export const TABS: Array<[TabId, string]> = [
 
 export const tabName = (id: string): string => TABS.find(([t]) => t === id)?.[1] ?? id;
 
+/** 위 탭(181-1) — [위 탭 이름, 아래 탭들] · 아래 탭 하나뿐 = 위 탭 단독 · 첫 아래 탭 = 위 탭 키 */
+export const TAB_GROUPS: Array<[string, TabId[]]> = [
+  ["연결 점검", ["check"]],
+  ["공사원가계산서", ["cost"]],
+  ["총괄설계내역서", ["total"]],
+  ["설계내역서", ["bill"]],
+  ["일위대가", ["dg_list", "dg"]],
+  ["단가산출", ["sg_list", "sg"]],
+  ["환율및기초자료", ["basis"]],
+  ["중기", ["machine", "machine_blocks", "sum_machine", "expense", "sum_expense"]],
+  ["재료", ["material", "compare", "sum_material"]],
+  ["노무", ["labor", "sum_labor"]],
+];
+
+/** 탭이 든 위 탭 묶음 */
+export const groupOf = (tab: TabId): [string, TabId[]] =>
+  TAB_GROUPS.find(([, tabs]) => tabs.includes(tab)) ?? TAB_GROUPS[0];
+
 /** 다른 탭 줄 — 키가 같은 줄로 이동 */
 export interface Link {
   tab: TabId;

B09_Estimation/B09_Estimation_UI_Tabs_Groups.ts

@@ -1,10 +1,11 @@
 /* =============================================================================
  * B09_Estimation_UI_Tabs_Groups.ts
  * B09 묶음 탭 셋(PLAN 171-3) — 일위대가표 · 중기사용료 · 단가산출근거 = 공용 묶음 카드(171-2) 기본 ·
- * [표로 보기] = 공용 표 그대로.
+ * [표로 보기] = 공용 표 그대로(맞은편 단추 = [박스보기]).
  *
  *   카드 = 탭 표 줄(`TabTable.rows`)을 호표(줄 키 앞머리)마다 묶음 — 값 · 풍선 · 누름 이동은 표와 같음
  *   머리 줄 = 묶음 첫 줄 · 합계 줄 = 키 끝 `|합계` · `|총계` · 그 밖 = 몸 줄(표 줄 번호 그대로)
+ *   목록표에서 온 호표(181-2) = 박스 붉은 외곽선 · 표 보기 = 그 호표 줄 구간 전체 붉은 외곽선
  *   보기 · 가로 열 수 기억 = `b_page_state`(`b09-group-view` · `b09-group-cols` · 탭마다) · 못 읽으면 카드 · 2
  * ========================================================================== */
 
@@ -29,8 +30,7 @@ export const GROUP_TABS: TabId[] = ["dg", "machine_blocks", "sg"];
 export const isGroupTab = (tab: TabId): boolean => GROUP_TABS.includes(tab);
 
 /** 단추 글 = 바꿀 보기 이름 */
-export const viewLabel = (view: GroupView): string =>
-  view === "cards" ? "표로 보기" : "호표별 보기";
+export const viewLabel = (view: GroupView): string => (view === "cards" ? "표로 보기" : "박스보기");
 
 export const flipView = (view: GroupView): GroupView => (view === "cards" ? "table" : "cards");
 
@@ -146,6 +146,22 @@ export function tabGroups(tab: TabId, spec: TabTable): GroupCard[] {
   return cards;
 }
 
+/** 고른 호표의 표 줄 구간 [첫 줄, 끝 줄](키 `|` 앞머리가 같은 줄) · 없으면 null */
+export function pickRange(rows: DataRow[], focus: string | undefined): [number, number] | null {
+  if (focus === undefined) return null;
+  const head = focus.split("|")[0];
+  const at = rows.flatMap((r, i) => (str(r.key).split("|")[0] === head ? [i] : []));
+  return at.length ? [at[0], at[at.length - 1]] : null;
+}
+
+/** 표 줄 class — 구간 안 `is-pick` · 첫 줄 `is-pick-top` · 끝 줄 `is-pick-end` */
+export function pickClass(range: [number, number] | null, i: number): string | null {
+  if (!range || i < range[0] || i > range[1]) return null;
+  return ["is-pick", i === range[0] && "is-pick-top", i === range[1] && "is-pick-end"]
+    .filter(Boolean)
+    .join(" ");
+}
+
 /** 표 열과 같은 숫자 꼴(열 소수 자리) */
 function numberFormat(spec: TabTable, key: string): (v: number | null | undefined) => string {
   const c = spec.columns.find((col) => col.key === key);
@@ -168,7 +184,7 @@ export function renderGroupPanel(o: {
   hint: HTMLElement | null;
   focus?: string;
   goto: (link: Link | null) => void;
-  makeTable: () => DataTable;
+  makeTable: (rowClass?: (index: number) => string | null) => DataTable;
   redraw: () => void;
 }): HTMLElement[] {
   const view = chosen.get(o.tab) ?? readGroupView(o.tab);
@@ -201,7 +217,8 @@ export function renderGroupPanel(o: {
     cards.dataset.b09Table = o.tab;
     return [bar, cards];
   }
-  const table = o.makeTable();
+  const range = pickRange(o.spec.rows, o.focus);
+  const table = o.makeTable((i) => pickClass(range, i));
   if (at >= 0) requestAnimationFrame(() => table.focusRow(at));
   return [bar, table.root];
 }