Files
Aislo/docs/raw/verification/2026-08-08_verify_dashboard_scroll_limit.md
eomsangdonandClaude Opus 5 eb30b774f8 chore(docs): docs 폴더 git 추적 전환 · PLAN·OWNERS 최상위 이관
- `docs/` 를 .gitignore 에서 빼 git 추적 대상으로 전환 (위키·완료 이력·검증 기록)
- `docs/raw/PLAN.md` · `docs/raw/OWNERS.md` 를 저장소 최상위로 이동 후 .gitignore 에 등록
  — 창끼리 공유하되 저장소에는 안 올리는 장부
- 살아 있는 경로 참조 7개 파일 정정 (아카이브 107건은 그때 사실이라 그대로 둠)
- graphify 날짜별 산출물(`docs/wiki/graphify-out/20*/`) 제외 — `graphify update` 가 다시 만듦

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-09 18:19:07 +09:00

2.3 KiB

검증 보고서 — B01 대시보드: 컨테이너 4행 표시 + 스크롤

  • 검증 날짜: 2026-08-08
  • 검증 대상: 대시보드 목록형 컨테이너 세로 높이 제한 및 내부 스크롤바 처리
  • 검증자: Antigravity (코드 검증자 역할)

1. 검증 내용

  • 공용 높이 제어 헬퍼 (limitVisibleRows):
    • ui_template_general_blocks.ts에 구현된 limitVisibleRows()가 전달된 visible 개수 이하일 경우 원래 상태로 복원하고, 초과할 때만 .ui-general-block__scroll-limit 클래스 부여 및 동적으로 max-height를 측정하여 반영하는 구조의 견고성을 확인.
    • getBoundingClientRect()bottomtop 좌표 차이를 이용해 높이를 계산하므로 행 높이가 불규칙해도 4행 경계선에 정밀하게 맞아떨어짐.
    • 창 크기 변경 시 resize 청취자가 중복 등록되는 현상을 방지하기 위해 WeakMap을 사용하여 이전 핸들러를 걷어내는 설계가 정상 작동함을 확인.
    • DOM 부착 시점에 정밀하게 잴 수 있도록 requestAnimationFrame을 사용한 것이 적절함.
  • 테이블 헤더 sticky 고정 (ui_template_general_layout.css):
    • .ui-general-block__table-wrap--sticky-head 적용 시 테이블 헤더 thposition: stickytop: 0, z-index: 1, background: var(--color-surface)가 선언되어 스크롤 중에도 아래 행이 비쳐 보이지 않고 정확히 상단에 고정됨을 확인.
  • 컨테이너 개별 적용:
    • projectTable(), userTable(), auditLogTable(), memberTable(), joinRequestTable(), companyTable()DASHBOARD_VISIBLE_ROWS = 4 상수가 파라미터로 정상 인입됨.
    • 임시 보관함(B01_Dashboard_UI_TempUpload.ts)의 경우, 그룹 자체를 행으로 보고 처리하되 접기/펼치기 시 높이가 유동적으로 변하므로 토글 이벤트에서 remeasureGroups() 재측정을 트리거하도록 정확히 구현됨.

2. 검증 결과

  • 항목이 4개 이하일 때는 스크롤 영역이 잡히지 않아 기존 디자인을 해치지 않고, 5개 이상일 때는 4행 높이에서 자연스럽게 스크롤바가 생기도록 구현이 검증됨.
  • 메모리 누수 방지(WeakMap 이벤트 리스너 해제) 및 렌더링 측정 타이밍이 올바르게 설계되어 실무 배포에 적합함.