diff --git a/B01_Dashboard/B01_Dashboard_UI_Admin.ts b/B01_Dashboard/B01_Dashboard_UI_Admin.ts index 3689072b..7874e27b 100644 --- a/B01_Dashboard/B01_Dashboard_UI_Admin.ts +++ b/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, ); } diff --git a/B01_Dashboard/B01_Dashboard_UI_Common.ts b/B01_Dashboard/B01_Dashboard_UI_Common.ts index 29829381..90aba864 100644 --- a/B01_Dashboard/B01_Dashboard_UI_Common.ts +++ b/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]; } diff --git a/B01_Dashboard/B01_Dashboard_UI_Company.ts b/B01_Dashboard/B01_Dashboard_UI_Company.ts index 86847eb0..99509b9d 100644 --- a/B01_Dashboard/B01_Dashboard_UI_Company.ts +++ b/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, ); } diff --git a/B01_Dashboard/B01_Dashboard_UI_Projects.ts b/B01_Dashboard/B01_Dashboard_UI_Projects.ts index 892938b2..7352226e 100644 --- a/B01_Dashboard/B01_Dashboard_UI_Projects.ts +++ b/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, ); } diff --git a/B01_Dashboard/B01_Dashboard_UI_TempUpload.ts b/B01_Dashboard/B01_Dashboard_UI_TempUpload.ts index 77337176..a28e0179 100644 --- a/B01_Dashboard/B01_Dashboard_UI_TempUpload.ts +++ b/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(); /** 펼쳐 둔 그룹 — 기본은 접힘, 사용자가 연 그룹만 목록을 다시 그려도 열린 상태를 유지한다. */ const openGroups = new Set(); + /** 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(":scope > .b01-temp__group")], + DASHBOARD_VISIBLE_ROWS, + ); } catch (error) { showToast(error instanceof Error ? error.message : L("B01_Temp_Load_Failed"), "error"); } diff --git a/ui_template/ui_template_general_blocks.ts b/ui_template/ui_template_general_blocks.ts index f30770b4..53b4e205 100644 --- a/ui_template/ui_template_general_blocks.ts +++ b/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 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; } diff --git a/ui_template/ui_template_general_layout.css b/ui_template/ui_template_general_layout.css index 843670bd..5ae01e85 100644 --- a/ui_template/ui_template_general_layout.css +++ b/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;