# 완료 계획서 — B01 대시보드: 컨테이너 4행 표시 + 스크롤 - **일자**: 2026-08-08 - **상태**: 완료 (검증 완료) ## 배경 대시보드의 목록형 컨테이너는 자료가 쌓일수록 세로로 계속 길어져 페이지가 늘어난다. 4행까지만 보이고 나머지는 컨테이너 안에서 스크롤하게 바꾼다(2026-08-08 사용자 지시). 대상 6개 컨테이너와 "1행"의 단위: | 컨테이너 | 생성 함수 | 1행 = | |---|---|---| | 프로젝트 | `projectTable()` | 표 행 | | 임시 보관함 | `buildTempUploadSection()` → `.b01-temp__list` | 묶음(그룹) | | 사용자 관리 | `userTable()` / `memberTable()` | 표 행 | | 가입 요청 | `joinRequestTable()` | 표 행 | | 회사 관리 | `companyTable()` | 표 행 | | 시스템 로그 | `auditLogTable()` | 표 행 | ## 설계 결정 1. **행 높이를 상수로 박지 않는다.** 프로젝트 표는 셀 안에 단계 막대가 들어가고 임시 보관함 묶음은 제목이 접혀 높이가 제각각이다. `max-height: 4 × 고정값`으로는 어긋난다. 대신 4번째 항목의 실제 아래쪽 좌표를 재서 `max-height`를 정한다 — `getBoundingClientRect()` 차이라 표·묶음 어느 쪽이든 같은 코드로 맞는다. 2. **공용 헬퍼 1개.** `ui_template_general_blocks.ts`에 `limitVisibleRows(host, items, visible)`을 둔다. `table()`에 선택 인자 `maxRows`를 추가해 표는 자동 적용, 임시 보관함은 목록을 다시 그릴 때 직접 호출한다. 3. **머리행 고정.** 스크롤 중 표 머리행이 위에 붙어 있어야 어느 열인지 알 수 있다 — `thead th`에 `position: sticky`. 4. **항목이 4개 이하면 스크롤바를 만들지 않는다** — `max-height`를 지우고 원래대로 둔다. 5. 측정 시점은 DOM 삽입 후 `requestAnimationFrame`. 창 크기 변경 시 다시 잰다. ## 구현 체크리스트 - [x] `ui_template_general_blocks.ts:42` — `limitVisibleRows()` 추가(재측정 함수를 돌려준다), `table()`에 `maxRows` 선택 인자 - [x] `ui_template_general_layout.css:55` — `.ui-general-block__scroll-limit` 세로 스크롤, sticky 머리행(+불투명 배경) - [x] `B01_Dashboard_UI_Common.ts:5` — `DASHBOARD_VISIBLE_ROWS = 4` 공용 상수 - [x] `B01_Dashboard_UI_Projects.ts` — `projectTable()` - [x] `B01_Dashboard_UI_Admin.ts` — `userTable()`, `auditLogTable()` - [x] `B01_Dashboard_UI_Company.ts` — `memberTable()`, `joinRequestTable()`, `companyTable()` - [x] `B01_Dashboard_UI_TempUpload.ts` — 묶음 목록 4개까지, 재렌더 후 재측정. 묶음 **내부** 파일 표는 제외(접혀 있고 별도 맥락) - [x] 구현 중 발견한 두 가지 처리: - 묶음을 펼치면 높이가 달라진다 → 접기/펼치기 핸들러에서 재측정 - 목록을 다시 그릴 때마다 `resize` 청취자가 쌓인다 → `WeakMap`으로 이전 것을 걷어내고 다시 등록 - [x] `prettier` + `tsc --noEmit` 통과 (exit 0) ## 완료 조건 6개 컨테이너 모두 항목 5개 이상일 때 4행 높이에서 잘리고 안쪽 스크롤이 생긴다. 4개 이하면 지금과 동일. 표 머리행은 스크롤해도 보인다. ## 미검증 사항 브라우저 실물 확인은 하지 않았다(현재 DB가 비어 있어 5행 이상을 만들 자료가 없다). 프로젝트를 5건 이상 등록한 뒤 육안 확인 필요.