HMDesign OrgChart P9.5 — Expanded 중앙 정렬

Expanded의 실제 표시 영역에 중앙 오차가 있어 공유 Core의 배치만 보완했다. 기존 P9.4 PASS suite는 재실행하지 않았다.

실제 측정 기준과 수정 전후

실제 React Storybook의 Shadow DOM에서 다음 경로를 측정했다.

.hm-orgchart-content → .hm-orgchart-expanded → .hm-orgchart-viewport → .hm-orgchart-forest → .hm-orgchart-tree

중앙 기준은 외곽 카드 전체가 아닌 Pan/Zoom 콘텐츠 캔버스 .hm-orgchart-viewport의 client 영역이다. getBoundingClientRect().left + clientLeft + clientWidth / 2를 사용하여 Border를 제외한다. 전체 표시 경계는 모든 회사의 조직 article(타이틀·직원 카드)과 조직 연결선 path의 합집합이다. Forest와 개별 Tree Wrapper의 BoundingRect도 별도로 기록했다. 연결선은 Forest 전체와 같은 transform을 사용한다.

1440×1100px 브라우저에서 외곽 Expanded Wrapper는 left=120, width=1200, Viewport는 left=137, width=1166, client 콘텐츠는 left=138, width=1164, 가로 중앙은 720px였다.

Forest/Tree Wrapper 자체의 수정 전 가로 오차는 약 0px였지만, LR의 뒤쪽 margin과 Hybrid의 앞쪽 padding 때문에 실제 카드·타이틀의 중앙은 달랐다. 단일 회사·20명 기준:

TB 가로: 0 → 0px.
LR 가로: -14.697845 → 0px (음수는 왼쪽).
Hybrid 가로: +3.631989 → 0px.
TB Fit 세로: -10.751465 → 0px.

1/2/7개 회사 × 회사당 20/100/300명 × TB/LR/Hybrid의 27개 조합에서 수정 전 최대 절대 가로 오차는 14.697845px, 수정 후 자동 정렬·Fit 최대 절대 가로 오차는 0.00006103515625px다. Fit 최대 세로 오차는 10.751465 → 0px다. 수치는 CSS px이며 브라우저 부동소수점 측정 정밀도를 포함한다. 자동 배치는 가로 중앙과 상단 여백만 맞추므로 세로 중앙 오차를 완료 조건으로 주장하지 않는다.

기존 자동 Fit과 수정 후 자동 중앙 배치는 배율 정책이 다르므로 각각 배율을 함께 기록했다. 단일 회사·20명은 TB 44.34% → 100%, LR 61.24% → 100%, Hybrid 30.27% → 100%; 최초 7회사·20명은 22.07% → 100%다. 실제 카드/엔진 크기는 변경하지 않았다. 명시적 Fit에서는 TB 약45.78%, LR 약62.59%, Hybrid 약30.27%로 전체 표시 영역을 담는다.

LR/Hybrid에서는 여백을 포함한 Wrapper 박스 중심과 표시 영역 중심이 의도적으로 다르다. 예를 들어 LR 100%에서 Forest/Tree 박스는 콘텐츠 중앙보다24px 오른쪽에 있으며, 실제 표시 영역 중심은 중앙에 일치한다. Wrapper와 표시 영역을 혼동하여 박스 중앙만 PASS로 판단하지 않는다.

최소 변경

expanded-viewport.ts: 렌더링된 콘텐츠의 경계를 Forest 로컬 좌표로 측정한다. 자동 배치는 현재 배율을 유지하고, 명시적 Fit만 전체 표시 영역에 맞춰 축소하여 가로·세로 중앙에 배치한다. Center/Fit/수동 이동을 구분하므로 observer가 Fit 직후 상단 배치로 되돌리지 않는다.
core/index.ts: 재생성 전에 수동 이동 여부를 보관하여 새 Expanded controller에 전달한다. Pan·Zoom·100% 복원·화면 밖 focus 노출 이후에는 회사/데이터/레이아웃/Resize에 의해 배율과 이동 위치를 임의로 바꾸지 않는다. 명시적 Fit은 수동 보존을 해제한다.
expanded-usage.md: 자동 배치와 명시적 Fit, 수동 위치 보존 정책을 현재 동작에 맞췄다.

공개 API/React props/CSS/카드/엔진/연결선 renderer/Drag & Drop hit testing은 변경하지 않았다. Fixed는 기존 createOrgChartContent 경로를 유지하고 Expanded controller를 사용하지 않는다.

이번 레이아웃 검증

실제 Chromium 153.0.8010.12, React Storybook: 중앙·Fit·탐색 124/124 PASS, console/pageerror0.
자동 중앙27개: 가로 중앙 일치, 배율100% 유지.
Fit27개: 가로·세로 중앙 일치, 전체 표시 경계가 콘텐츠 안의16px 여백에 들어옴. 최대7개×300명=2,100명 Forest 포함.
최초 렌더링과 회사 선택·20/100/300명 적용·TB/LR/Hybrid 변경에 새 경계 반영.
수동 Pan 이후 Resize·회사 선택·직원 수·TB→LR에서 scale/x/y 동일. 이후 명시적 Fit으로 중앙 복귀.
390/768/1280/1440px: 단일 회사의 자동 가로 중앙 및 Fit 가로·세로 중앙.
변환 좌표 및 실제 포인터: 62/62 PASS, console/pageerror0. 카드·연결선의 Forest 로컬 좌표는 Pan/Zoom/Fit 전후 최대 0.000370833px 차이로 동일하다. 각 상태·방향에서 직원 연결선20개, LR/Hybrid에서 조직 SVG route10개를 확인했다. 끝점 오차는 최대 0.500552px이며 정수 offset 치수와 소수점 렌더링 차이를 고려한0.75로컬px 허용치 안이다. TB의 기존 조직 pseudo-element 연결선 renderer/소스는 보존하고 공통 transform을 확인했으며 pseudo-route 내부 전체 재검증은 반복하지 않았다.
중앙 배치→Fit→수동 Pan 상태에서 TB virtual-022 → hanmac-cell-0, LR virtual-032 → hanmac-office-1, Hybrid virtual-027 → hanmac-team-sibling 실제 pointer 이동 성공. 화면상의 source/target hit·allowed highlight·release 후 소속이 의도한 조직과 일치한다. Hybrid 이동 캡처.
Core typecheck/build와 수정 코드가 포함된 Storybook build PASS. 빌드는 실행 결과를 확인했으며 기존 P9.4 기능 suite는 반복하지 않았다.
git diff --check PASS. 기존 CRLF 안내 경고만 존재.
독립 읽기 전용 검토에서 새 구체적 결함 없음.

수정 전 첫 측정의7회사 구간은 테스트의 회사명 매칭 오류로 중단됐다. 정상 완료한1/2회사 수치37개를 보존하고, 전체 선택을 사용하는7회사 구간19개만 보완 실행했다. 최초 측정1개가 중복이며 비교 JSON은 이름으로 합쳤다. localhost/브라우저 실행 제한은 도구 환경에서 해결했으며 앱 변경으로 해결했다고 주장하지 않는다.

좌표 probe의 원본33PASS/18FAIL도 보존했다. 끝점12개 판단은 이미 캡처된 실제0.5px 차이를0.75로컬px 기준으로 해석했으며 브라우저를 다시 실행하지 않았다. 포인터 source/target을 조직도 캔버스와 브라우저 viewport 양쪽 안으로 제한하고 focus 후 client 좌표를 다시 측정하여 실패한 pointer 구간만 재실행했다. 최종62개는 보존/재해석한41개와 새 pointer20개 및 최종 오류 검사1개이며 원본 수와 중복 합산하지 않았다. 앱 소스를 변경하여 테스트 실패를 감추지 않았다.

Guard 및 미검증

변경 Core 2파일 PARTIAL Guard는 FAIL0 / NOT VERIFIED2다. 원본 status/staticStatus/runtimeStatus는 NOT VERIFIED이며 패키지 구현2파일이 proven Storybook graph 밖이라는 SCOPE-001이다. 실제 패키지 build와 브라우저 증거를 별도로 기록했다. styleEvidence는 STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS(검사 항목 없음) / FINAL NOT VERIFIED다. 결합 styleVerification은 생성하지 않았으며 전체 CSS 디자인 승인을 주장하지 않는다. 기존 P9.4 Guard FAIL과 미검증 기록은 보존한다.

실제 터치 기기·스크린리더·Chrome 외 브라우저·모든 Depth/개별 Hybrid override 조합·2,100명 성능·사용자 디자인 승인·서버/SSR/배포는 NOT VERIFIED다. 이번 검증은 중앙 배치와 그 변환 좌표의 영향 범위에 한정한다.

기존 작업 보존과 Git

시작 파일 감사:829개 중 기존3개만 변경,826개 SHA-256 동일,누락0. Fixed Full Composition·카드·연결선·Drag & Drop·React·P9.4 Story/CSS/데이터·Theme/Component/Pattern의 시작 파일을 보존했다. Fixed의 기존 브라우저 PASS는 재실행하지 않고 소스 보존과 호출 경로 분리로 영향 범위를 확인했다.

폴더:D:\디자인시스템\HMDesign-OrgChart
브랜치:feature/orgchart-package
시작/완료 HEAD:7614507583927a25a270963a74ff044be0557b9f
staged0. Stage·Commit·Push·Merge·Checkout·Reset·Clean·Fetch·Pull·Rebase·PR 미진행. 현재 원격 SHA는 NOT VERIFIED.

새 authored 파일은 examples/org-chart/verify-p9-5.mjs, examples/org-chart/verify-p9-5-geometry.mjs, 이 보고서3개다. test-results, packages/org-chart/dist, storybook-static는 검증 생성물이다. 기존 미커밋 변경을 커밋 대상으로 묶지 않았다.

실제 Expanded Storybook, 최초100% 캡처, 단일 회사 Fit 캡처.

시간

Started At:2026-10-13 12:45:15 KST
Estimated Duration:약25분 (탐색7분·보완8분·레이아웃 검증10분)
Completed At:2026-10-13 13:04:27 KST
Actual Duration:19분 12초
Variance:예상보다 5분 48초 짧음

9.5 KiB Raw Blame History Unescape Escape