feat(B09): 원가 바탕 단가 — 뼈대 · 노무 · 경비 · 환율 · 자재 대비 · 중기 탭(144-1~4)

- 탭 = 기번3 공통 엑셀 보이는 탭 차례(목차 · 안내 = 연결 점검) · 탭 하나 = 공용 표 하나 · 호표 칸 누름 = 그 탭 그 줄로 이동
- 저장 = 프로젝트 B09_Estimation/v1(사용자 값 · 굳힌 단가 한 벌) · 결과는 GET 때 서버 셈 · [저장] · [단가 갱신] 길
- 줄 = 수요 따라(연결된 사본 원천 자리 · 기계 → 운전사 · 연료 · B08 총괄 자재) · 연결 없으면 빈칸 + 연결 점검 목록
- 셈 = 파이썬 · TS 짝 + 거울(운전사 시간 노임 · 자재 최저 자동 + 사용자 고침 · 관급 · 별도 · 중기 손료 + 운전사 + 연료 + 잡품 · 엑셀 끝수)
- 공용 표 = 칸 누름 · 줄로 이동(강조) 더함
- 시험 = test_144_b09_skeleton · test_144_b09_base_calc(엑셀 중기 126,000 · 76,436 · 96,829 · 40,659 · 운전사 55,700 · 47,231 · 33,571)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015KYZ2HWWdUwZWYnn3tQz7X

ui_template/ui_template_data_table.ts

@@ -8,6 +8,7 @@
  *   host.append(t.root);  t.setRows(rows2, total2);
  *   열 = { key: "cut_soil_area", label: "단면적", group: ["절토", "토사"], kind: "number", decimals: 2 }
  *   고칠 칸(PLAN 121) = editable(줄, 열) 참인 칸만 글 상자 · 바꾸면 onEdit(줄, 열, 글) — 다시 그려도 커서 자리 지킴
+ *   칸 누름(PLAN 144) = onCellClick(줄, 열) · 줄로 이동 = t.focusRow(줄)(스크롤 + 강조)
  * ========================================================================== */
 
 import "./ui_template_data_table.css";
@@ -48,6 +49,10 @@ export interface DataTableOptions {
   empty?: string;
   /** 줄 누름(본문 줄만 · 합계 제외) — 주면 줄에 `data-i`(줄 번호)·`is-clickable` 이 붙음 */
   onRowClick?: (index: number) => void;
+  /** 칸 누름(본문 줄만) — 주면 줄에 `data-i`·`is-clickable` 이 붙음 · 줄 누름보다 먼저 부름 */
+  onCellClick?: (index: number, key: string) => void;
+  /** 강조할 줄(`focusRow` 가 정함) */
+  focus?: number | null;
   /** 고칠 칸인지(본문 줄만 · 합계 제외) — 참이면 칸이 글 상자 */
   editable?: (index: number, key: string) => boolean;
   /** 고친 칸 글(바꾼 뒤 · 커서가 옮겨 간 다음에 부름) */
@@ -57,6 +62,8 @@ export interface DataTableOptions {
 export interface DataTable {
   root: HTMLElement;
   setRows: (rows: DataRow[], total?: DataRow | null) => void;
+  /** 그 줄로 스크롤하고 강조 */
+  focusRow: (index: number) => void;
 }
 
 const EMPTY = "-";
@@ -124,6 +131,7 @@ function rowHtml(
   index: number | null = null,
   edit: number | null = null,
   editable?: (index: number, key: string) => boolean,
+  focus = false,
 ): string {
   let tr = "";
   for (let j = 0; j < cols.length; j++) {
@@ -146,7 +154,9 @@ function rowHtml(
       (fmts[j] ? ' data-num=""' : "");
     tr += `<td${attrs}>${esc(txt)}</td>`;
   }
-  const cls = [alt && "is-alt", index !== null && "is-clickable"].filter(Boolean).join(" ");
+  const cls = [alt && "is-alt", index !== null && "is-clickable", focus && "is-focus"]
+    .filter(Boolean)
+    .join(" ");
   const data = index !== null ? ` data-i="${index}"` : "";
   return cls || data ? `<tr${cls ? ` class="${cls}"` : ""}${data}>${tr}</tr>` : `<tr>${tr}</tr>`;
 }
@@ -185,7 +195,7 @@ export function renderDataTableHtml(o: DataTableOptions, win?: RowWindow): strin
   const to = win ? Math.max(from, Math.min(win.to, n)) : n;
   let body = win ? pad(from * win.rowH, cols.length) : "";
   const blank = o.empty ?? EMPTY;
-  const pick = o.onRowClick !== undefined;
+  const pick = o.onRowClick !== undefined || o.onCellClick !== undefined;
   for (let i = from; i < to; i++)
     body += rowHtml(
       cols,
@@ -197,6 +207,7 @@ export function renderDataTableHtml(o: DataTableOptions, win?: RowWindow): strin
       pick ? i : null,
       i,
       o.editable,
+      o.focus === i,
     );
   if (win) body += pad((n - to) * win.rowH, cols.length);
   const foot = o.total ? `<tfoot>${rowHtml(cols, fmts, left, o.total, false, blank)}</tfoot>` : "";
@@ -250,7 +261,11 @@ export function createDataTable(opts: DataTableOptions): DataTable {
   });
   root.addEventListener("click", (event) => {
     const row = (event.target as Element).closest<HTMLElement>("tr[data-i]");
-    if (row && root.contains(row)) state.onRowClick?.(Number(row.dataset.i));
+    if (!row || !root.contains(row)) return;
+    const cell = (event.target as Element).closest<HTMLTableCellElement>("td");
+    const column = cell ? state.columns[cell.cellIndex] : undefined;
+    if (column) state.onCellClick?.(Number(row.dataset.i), column.key);
+    state.onRowClick?.(Number(row.dataset.i));
   });
   draw(true);
   return {
@@ -260,5 +275,10 @@ export function createDataTable(opts: DataTableOptions): DataTable {
       if (total !== undefined) state.total = total;
       draw(true);
     },
+    focusRow(index) {
+      state.focus = index;
+      root.scrollTop = Math.max(0, index * win.rowH - root.clientHeight / 3);
+      draw(true);
+    },
   };
 }