From 12e9828a3afbc910097c6a98d76bd7a4a1ef5ee6 Mon Sep 17 00:00:00 2001
From: ypshim <ypshim71@gmail.com>
Date: Tue, 27 Oct 2026 15:29:34 +0900
Subject: [PATCH] =?UTF-8?q?feat(view):=20=EC=9E=85=EB=A0=A5=EA=B0=92?=
 =?UTF-8?q?=EC=9D=84=206=EA=B8=B0=20=ED=91=9C=EB=A1=9C=20=EB=B3=B4?=
 =?UTF-8?q?=EC=9D=B4=EA=B3=A0=20=EC=BD=94=ED=95=91=C2=B7=EB=A7=90=EB=9A=9D?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=EB=8C=80=EC=83=81=20=EA=B5=90=EA=B0=81?=
 =?UTF-8?q?=EC=9D=84=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 입력값: 교각마다 한 행(코핑 상면·기초 하단·지반고·말뚝·코핑 폭×길이·받침)
- 행을 누르면 그 교각이 활성이 되고 상세와 수정 대상이 바뀜
- 수정 카드 제목에 대상 교각 이름을 표시

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 index.html    |  7 +++++++
 src/main.ts   | 40 ++++++++++++++++++++++++++++++++++++++++
 src/style.css |  7 +++++++
 3 files changed, 54 insertions(+)

diff --git a/index.html b/index.html
index a013dec..46989d3 100644
--- a/index.html
+++ b/index.html
@@ -61,6 +61,13 @@
 
           <section class="pier-input" aria-labelledby="input-title">
             <p id="input-title" class="lbl">입력값</p>
+            <div class="pier-table-wrap">
+              <table id="inputs-all" class="grid-table compact">
+                <thead><tr><th>교각</th><th>코핑 상면</th><th>기초 하단</th><th>지반고</th><th>말뚝 (mm)</th><th>코핑 폭×길이</th><th>받침</th></tr></thead>
+                <tbody></tbody>
+              </table>
+            </div>
+            <p class="lbl small" id="inputs-active"></p>
             <dl id="inputs" class="kv wide"></dl>
             <section class="edit-card" aria-labelledby="edit-title">
               <h3 id="edit-title">코핑·말뚝 입력 수정</h3>
diff --git a/src/main.ts b/src/main.ts
index 00edc1f..6f219f5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -476,6 +476,42 @@ function renderHeader(): void {
 // --- results panel (시안 ① 입력값 · 계산 결과) ----------------------------------------
 type Pair = [string, string];
 
+/** 입력값 for every pier in one table; the row of the active pier is marked, and a row click makes that pier active. */
+function renderInputTable(): void {
+  const table = $<HTMLTableElement>('inputs-all');
+  const body = table.tBodies[0];
+  body.replaceChildren();
+  for (const p of state.piers) {
+    const inp = p.input;
+    const front = inp.bearings.filter((b) => b.row === '전열').length;
+    const back = inp.bearings.filter((b) => b.row === '후열').length;
+    const tr = el('tr', undefined, p.input.name === state.active ? 'active' : undefined);
+    tr.tabIndex = 0;
+    tr.addEventListener('click', () => selectPier(p.input.name));
+    tr.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') selectPier(p.input.name);
+    });
+    const cells = [
+      inp.name,
+      f3(inp.copingTopEl),
+      f3(inp.footingBottomEl),
+      f3(inp.groundEl),
+      String(inp.pileLengthMm),
+      `${inp.copingWidthMm}×${inp.copingLengthMm}`,
+      `${front}·${back}`,
+    ];
+    for (const v of cells) tr.appendChild(el('td', v));
+    body.appendChild(tr);
+  }
+}
+
+function selectPier(name: string): void {
+  state.active = name;
+  state.rebarSelection = new Set();
+  setupScene();
+  renderAll();
+}
+
 function fillKv(dl: HTMLElement, pairs: Pair[]): void {
   dl.replaceChildren();
   for (const [k, v] of pairs) {
@@ -495,6 +531,10 @@ function renderPanels(): void {
   $('viewer-title').textContent = pier ? `${pier.input.name} · ${pier.input.type} 교각 형상` : '교각 3D 뷰';
   $('origin').textContent = m ? `원점 = 교각 중심 (${pt(m.pivot)})` : '';
 
+  renderInputTable();
+  $('inputs-active').textContent = pier ? `활성 교각 ${pier.input.name} 상세 (표의 행을 누르면 바뀜)` : '';
+  $('edit-title').textContent = pier ? `코핑·말뚝 입력 수정 · ${pier.input.name}` : '코핑·말뚝 입력 수정';
+
   if (!pier) {
     fillKv($('inputs'), []);
     fillKv($('res-axis'), []);
diff --git a/src/style.css b/src/style.css
index 0b8e1f8..73fc116 100644
--- a/src/style.css
+++ b/src/style.css
@@ -811,5 +811,12 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
   .footing-grid { grid-template-columns: 1fr; }
 }
 
+/* 입력값: one row per pier; the table scrolls sideways in the narrow left panel. */
+.pier-table-wrap { overflow-x: auto; margin-bottom: 8px; }
+#inputs-all { font-size: 12px; width: 100%; }
+#inputs-all th, #inputs-all td { white-space: nowrap; padding: 4px 6px; }
+#inputs-all tbody tr { cursor: pointer; }
+#inputs-all tbody tr.active td { background: #e3edf8; font-weight: 700; }
+
 /* Import preview: all piers' 받침·IP rows scroll inside the dialog. */
 .pv-scroll { max-height: 240px; overflow: auto; }