refactor: improve db ops visibility and split runtime helpers

frontend/apps/db-status/index.html

@@ -219,6 +219,33 @@
       color: rgba(84, 65, 38, 0.84);
       line-height: 1.55;
     }
+    .mapping-list {
+      display: grid;
+      gap: 14px;
+    }
+    .mapping-card {
+      padding: 14px 16px;
+      border-radius: 18px;
+      background: rgba(255, 249, 239, 0.92);
+      border: 1px solid rgba(132, 102, 54, 0.12);
+    }
+    .mapping-card h3 {
+      margin: 0 0 8px;
+      font-size: 15px;
+      font-weight: 800;
+      letter-spacing: -0.02em;
+    }
+    .mapping-card p {
+      margin: 8px 0 0;
+      color: rgba(98, 75, 42, 0.74);
+      line-height: 1.55;
+      font-size: 13px;
+    }
+    .mapping-table-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
     .preview-meta {
       display: grid;
       gap: 10px;
@@ -345,6 +372,9 @@
       <p>
         `원본 import 배치`는 업로드한 원본 파일이 몇 행으로 적재됐는지 보여주고, `바이너리 원본 보관`은 엑셀 같은 파일 자체를 DB에 보관하는 상태를 보여줍니다.
       </p>
+      <p>
+        아래 표는 전체 테이블을 보여주고, 오른쪽 패널은 화면별 데이터 소스와 저장 흐름을 운영 관점으로 묶어서 보여줍니다.
+      </p>
     </section>
 
     <section id="overview" class="overview"></section>
@@ -354,7 +384,7 @@
         <div class="panel-head">
           <div>
             <h2>전체 테이블 현황</h2>
-            <p>전체 27개 테이블을 보여주며, 테이블명을 누르면 샘플 row를 바로 확인할 수 있습니다.</p>
+            <p>현재 운영 DB의 전체 26개 테이블을 보여주며, 테이블명을 누르면 샘플 row를 바로 확인할 수 있습니다.</p>
           </div>
           <span id="generated-at" class="meta-chip">로딩 중</span>
         </div>
@@ -438,11 +468,24 @@
         <article class="panel">
           <div class="panel-head">
             <div>
-              <h2>테이블 분류</h2>
-              <p>유지/주의/원본·추적/정리 후보로 나눈 현재 기준입니다.</p>
+              <h2>운영 분류</h2>
+              <p>유지/주의/원본·추적/정리 후보 기준과 제품 관점 묶음을 같이 봅니다.</p>
             </div>
           </div>
-          <div id="group-summary" class="panel-body"></div>
+          <div class="panel-body">
+            <div id="group-summary"></div>
+            <div id="product-summary" style="margin-top:18px;"></div>
+          </div>
+        </article>
+
+        <article class="panel">
+          <div class="panel-head">
+            <div>
+              <h2>화면별 데이터 소스</h2>
+              <p>각 탭/기능이 실제로 어떤 테이블을 읽고 저장하는지 빠르게 확인합니다.</p>
+            </div>
+          </div>
+          <div id="screen-map" class="panel-body mapping-list"></div>
         </article>
 
       </div>
@@ -619,6 +662,42 @@
       `).join("");
     }
 
+    function renderProductSummary(summary) {
+      const target = document.getElementById("product-summary");
+      const groups = [
+        "탭 데이터",
+        "로그인·권한",
+        "히스토리",
+        "로우데이터·적재",
+        "보정·보조",
+      ];
+      target.innerHTML = groups.map((label) => `
+        <div style="display:grid; gap:8px; margin-bottom:16px;">
+          <div><span class="group-tag keep">${escapeHtml(label)}</span></div>
+          <div class="view-list">
+            ${((summary && summary[label]) || []).map((item) => `<span class="view-pill">${escapeHtml(item)}</span>`).join("") || '<span class="muted">없음</span>'}
+          </div>
+        </div>
+      `).join("");
+    }
+
+    function renderScreenMap(items) {
+      const target = document.getElementById("screen-map");
+      if (!items || !items.length) {
+        target.innerHTML = '<div class="empty">화면별 데이터 소스 정보가 없습니다.</div>';
+        return;
+      }
+      target.innerHTML = items.map((item) => `
+        <article class="mapping-card">
+          <h3>${escapeHtml(item.screen || "")}</h3>
+          <div class="mapping-table-list">
+            ${(item.tables || []).map((table) => `<span class="view-pill">${escapeHtml(table)}</span>`).join("")}
+          </div>
+          <p>${escapeHtml(item.write_flow || "")}</p>
+        </article>
+      `).join("");
+    }
+
     function renderTablePreview(payload) {
       const previewModal = document.getElementById("preview-modal");
       const previewMeta = document.getElementById("preview-meta");
@@ -695,6 +774,8 @@
       renderBinarySources(payload.binary_sources || []);
       renderNotes(payload.notes || []);
       renderGroupSummary(payload.group_summary || {});
+      renderProductSummary(payload.product_summary || {});
+      renderScreenMap(payload.screen_map || []);
     }
 
     document.getElementById("preview-close").addEventListener("click", () => {