feat(B01): 대시보드 목록 컨테이너를 4행까지만 보이고 나머지는 안쪽 스크롤

프로젝트·임시 보관함·사용자 관리·가입 요청·회사 관리·시스템 로그 컨테이너는 자료가
쌓일수록 세로로 계속 길어져 페이지가 늘어난다. 4행 높이에서 자르고 나머지는 컨테이너
안에서 스크롤하게 했다.

행 높이를 상수로 박지 않았다. 프로젝트 표는 셀 안에 단계 막대가 들어가고 보관함 묶음은
접힘 상태에 따라 높이가 제각각이라 4 x 고정값으로는 어긋난다. limitVisibleRows()가
4번째 항목의 실제 아래쪽 좌표를 재서 max-height를 넣는다 — 표든 묶음이든 같은 코드로
맞는다. 항목이 4개 이하면 max-height를 지워 스크롤바를 만들지 않는다.

스크롤 중 어느 열인지 알아야 하므로 표 머리행은 sticky로 붙였다. 배경이 투명하면 아래
행이 비쳐 보여 불투명 배경도 함께 준다.

임시 보관함은 표가 아니라 묶음이 한 행이다. 묶음 안 파일 표는 접혀 있어 제외했다.
묶음을 펼치면 높이가 달라지므로 토글 핸들러에서 다시 잰다. 목록을 다시 그릴 때마다
resize 청취자가 쌓이던 문제는 WeakMap으로 이전 것을 걷어내고 다시 등록해 막았다.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

B01_Dashboard/B01_Dashboard_UI_Admin.ts

@@ -3,7 +3,7 @@ import type { AuditLog, DashboardUser } from "./B01_Dashboard_Api_Fetch";
 import { canChangeRole } from "./B01_Dashboard_UI_Helper";
 import { openChangeRoleModal, openEditUserModal } from "./B01_Dashboard_UI_Modals";
 import { table, text } from "@ui/ui_template_general_blocks";
-import { formatDate, L } from "./B01_Dashboard_UI_Common";
+import { DASHBOARD_VISIBLE_ROWS, formatDate, L } from "./B01_Dashboard_UI_Common";
 
 export function userTable(users: DashboardUser[], currentUser: DashboardUser): HTMLElement {
   return table(
@@ -50,6 +50,7 @@ export function userTable(users: DashboardUser[], currentUser: DashboardUser): H
         actionsEl,
       ];
     }),
+    DASHBOARD_VISIBLE_ROWS,
   );
 }
 
@@ -61,5 +62,6 @@ export function auditLogTable(logs: AuditLog[]): HTMLElement {
       L("B01_Dashboard_Table_Updated"),
     ],
     logs.map((log) => [text(log.email), text(log.action), text(formatDate(log.timestamp))]),
+    DASHBOARD_VISIBLE_ROWS,
   );
 }

B01_Dashboard/B01_Dashboard_UI_Common.ts

@@ -2,6 +2,12 @@ import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
 import { hideLoadingOverlay, showLoadingOverlay, showToast } from "@ui/ui_template_elements";
 import type { DashboardUser } from "./B01_Dashboard_Api_Fetch";
 
+/**
+ * 목록형 컨테이너가 한 번에 보여 주는 행 수. 넘치는 만큼은 컨테이너 안에서 스크롤한다 —
+ * 자료가 쌓여도 대시보드 세로 길이가 늘어나지 않게(2026-08-08 사용자 지시).
+ */
+export const DASHBOARD_VISIBLE_ROWS = 4;
+
 export function L(key: keyof typeof ui_locales): string {
   return ui_locales[key][currentLanguageIndex];
 }

B01_Dashboard/B01_Dashboard_UI_Company.ts

@@ -16,7 +16,7 @@ import {
 } from "./B01_Dashboard_UI_Modals";
 import type { DashboardState } from "./B01_Dashboard_UI_Page";
 import { actionPair, table, text } from "@ui/ui_template_general_blocks";
-import { formatDate, L, runRequest } from "./B01_Dashboard_UI_Common";
+import { DASHBOARD_VISIBLE_ROWS, formatDate, L, runRequest } from "./B01_Dashboard_UI_Common";
 
 export function buildCompanyPanel(state: DashboardState): HTMLElement {
   const wrap = document.createElement("div");
@@ -95,6 +95,7 @@ export function memberTable(members: Member[], currentUser: DashboardUser): HTML
         actionsEl,
       ];
     }),
+    DASHBOARD_VISIBLE_ROWS,
   );
 }
 
@@ -117,6 +118,7 @@ export function joinRequestTable(requests: JoinRequest[], systemMode: boolean):
         () => onB01_JoinRequest_Process_Click(request.id, "REJECT", systemMode),
       ),
     ]),
+    DASHBOARD_VISIBLE_ROWS,
   );
 }
 
@@ -132,6 +134,7 @@ export function companyTable(companies: CompanyInfo[]): HTMLElement {
       text(company.business_registration_number),
       text(company.business_status),
     ]),
+    DASHBOARD_VISIBLE_ROWS,
   );
 }
 

B01_Dashboard/B01_Dashboard_UI_Projects.ts

@@ -6,7 +6,7 @@ import { goToWorkflowStage, WORKFLOW_STEP_ROUTES } from "../A00_Common/b_workflo
 import type { DashboardUser, ProjectItem } from "./B01_Dashboard_Api_Fetch";
 import { canDeleteProject, canEditProject } from "./B01_Dashboard_UI_Helper";
 import { openDeleteProjectModal, openEditProjectModal } from "./B01_Dashboard_UI_Modals";
-import { formatDate, L } from "./B01_Dashboard_UI_Common";
+import { DASHBOARD_VISIBLE_ROWS, formatDate, L } from "./B01_Dashboard_UI_Common";
 
 export function projectTable(projects: ProjectItem[], currentUser: DashboardUser): HTMLElement {
   return table(
@@ -50,6 +50,7 @@ export function projectTable(projects: ProjectItem[], currentUser: DashboardUser
         actCell,
       ];
     }),
+    DASHBOARD_VISIBLE_ROWS,
   );
 }
 

B01_Dashboard/B01_Dashboard_UI_TempUpload.ts

@@ -12,7 +12,7 @@
 
 import { UPLOAD_CHUNK_SIZE_MB } from "@config/config_frontend";
 import { createButton, createTag, showToast } from "@ui/ui_template_elements";
-import { section, table, text } from "@ui/ui_template_general_blocks";
+import { limitVisibleRows, section, table, text } from "@ui/ui_template_general_blocks";
 import {
   createTempBatch,
   createTempUploadSession,
@@ -25,7 +25,7 @@ import {
   uploadTempChunk,
   type TempBatchItem,
 } from "./B01_Dashboard_Api_Temp";
-import { L } from "./B01_Dashboard_UI_Common";
+import { DASHBOARD_VISIBLE_ROWS, L } from "./B01_Dashboard_UI_Common";
 import { formatTempBytes, openTempFileModal, tempFileType } from "./B01_Dashboard_UI_TempModal";
 import "./B01_Dashboard_UI_Style_Temp.css";
 
@@ -86,6 +86,8 @@ export function buildTempUploadSection(): HTMLElement {
   const progressNodes = new Map<string, { fill: HTMLElement; caption: HTMLElement }>();
   /** 펼쳐 둔 그룹 — 기본은 접힘, 사용자가 연 그룹만 목록을 다시 그려도 열린 상태를 유지한다. */
   const openGroups = new Set<string>();
+  /** 4개 높이 제한을 다시 재는 함수 — 그룹을 펼치면 높이가 달라져 다시 재야 한다. */
+  let remeasureGroups: (() => void) | null = null;
 
   /* ── 행 구성 ─────────────────────────────────────────────────────────── */
 
@@ -232,6 +234,8 @@ export function buildTempUploadSection(): HTMLElement {
       // 목록을 다시 그려도 열어 둔 그룹은 계속 열려 있어야 한다(업로드 중 진행률 확인).
       if (nowOpen) openGroups.add(batch.batch_id);
       else openGroups.delete(batch.batch_id);
+      // 펼치면 그 묶음이 커진다 — 4개까지 보이는 높이를 다시 잡는다.
+      remeasureGroups?.();
     });
 
     const body = document.createElement("div");
@@ -265,6 +269,13 @@ export function buildTempUploadSection(): HTMLElement {
         return;
       }
       for (const batch of response.batches) listHost.append(renderGroup(batch));
+      // 묶음이 쌓여도 컨테이너는 4개 높이까지만 — 나머지는 안쪽 스크롤.
+      // 표가 아니라 묶음이 한 행이다. 묶음 안 파일 표는 접혀 있어 대상이 아니다.
+      remeasureGroups = limitVisibleRows(
+        listHost,
+        () => [...listHost.querySelectorAll<HTMLElement>(":scope > .b01-temp__group")],
+        DASHBOARD_VISIBLE_ROWS,
+      );
     } catch (error) {
       showToast(error instanceof Error ? error.message : L("B01_Temp_Load_Failed"), "error");
     }

ui_template/ui_template_general_blocks.ts

@@ -39,7 +39,53 @@ export function section(
   return card;
 }
 
-export function table(headers: string[], rows: HTMLElement[][]): HTMLElement {
+/**
+ * 목록 컨테이너가 항목 수만큼 계속 길어지지 않도록 `visible`개 높이에서 자르고 안쪽 스크롤로 넘긴다.
+ *
+ * 행 높이를 상수로 박지 않는다 — 프로젝트 표는 셀 안에 단계 막대가 들어가고, 보관함 묶음은 접힘
+ * 상태에 따라 높이가 제각각이다. 그래서 `visible`번째 항목의 실제 아래쪽 좌표를 재서 정한다.
+ * 표·묶음 어느 쪽이든 같은 코드로 맞는다.
+ *
+ * 측정은 DOM에 붙은 뒤라야 뜻이 있으므로 `requestAnimationFrame`으로 미룬다.
+ */
+const scrollLimitHandlers = new WeakMap<HTMLElement, () => void>();
+
+export function limitVisibleRows(
+  host: HTMLElement,
+  items: () => HTMLElement[],
+  visible: number,
+): () => void {
+  const apply = (): void => {
+    if (!host.isConnected) return;
+    const rows = items();
+    if (rows.length <= visible) {
+      // 넘치지 않으면 스크롤바를 만들지 않는다 — 원래 모습 그대로 둔다.
+      host.style.maxHeight = "";
+      host.classList.remove("ui-general-block__scroll-limit");
+      return;
+    }
+    host.classList.add("ui-general-block__scroll-limit");
+    // 재측정할 때 앞서 넣은 max-height가 남아 있으면 잘린 위치를 다시 재게 된다.
+    host.style.maxHeight = "";
+    const cut = rows[visible - 1].getBoundingClientRect().bottom;
+    // 테두리와 가로 스크롤바는 max-height(border-box) 안에 함께 들어가므로 그만큼 더 준다.
+    const chrome = host.offsetHeight - host.clientHeight;
+    host.style.maxHeight = `${cut - host.getBoundingClientRect().top + chrome}px`;
+  };
+  const schedule = (): void => void requestAnimationFrame(apply);
+
+  // 목록을 다시 그릴 때마다 이 함수가 불린다. 이전 청취자를 걷어내지 않으면 계속 쌓인다.
+  const previous = scrollLimitHandlers.get(host);
+  if (previous) window.removeEventListener("resize", previous);
+  scrollLimitHandlers.set(host, schedule);
+  // 창 폭이 바뀌면 줄바꿈으로 행 높이가 달라진다.
+  window.addEventListener("resize", schedule);
+
+  schedule();
+  return schedule;
+}
+
+export function table(headers: string[], rows: HTMLElement[][], maxRows = 0): HTMLElement {
   if (!rows.length) {
     const empty = document.createElement("p");
     empty.className = "ui-general-block__empty b01-dashboard__empty";
@@ -70,6 +116,11 @@ export function table(headers: string[], rows: HTMLElement[][]): HTMLElement {
   }
   tableEl.append(thead, tbody);
   wrap.append(tableEl);
+  if (maxRows > 0) {
+    // 머리행은 스크롤해도 붙어 있어야 어느 열인지 안다.
+    wrap.classList.add("ui-general-block__table-wrap--sticky-head");
+    limitVisibleRows(wrap, () => [...tbody.rows], maxRows);
+  }
   return wrap;
 }
 

ui_template/ui_template_general_layout.css

@@ -52,6 +52,21 @@
   overflow-x: auto;
 }
 
+/* 목록이 길어져도 컨테이너는 정해진 행 수만큼만 차지한다 — 나머지는 안쪽 스크롤.
+   max-height는 limitVisibleRows()가 실제 행 높이를 재서 넣는다(CSS에 상수를 박지 않는다). */
+.ui-general-block__scroll-limit {
+  overflow-y: auto;
+}
+
+/* 스크롤 중에도 어느 열인지 알아야 하므로 머리행을 위에 붙인다. */
+.ui-general-block__table-wrap--sticky-head .ui-general-block__table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  /* 아래 행이 비쳐 보이지 않게 불투명 배경이 필요하다. */
+  background: var(--color-surface);
+}
+
 .ui-general-block__table {
   width: 100%;
   border-collapse: collapse;