85 lines
9.5 KiB
Markdown
85 lines
9.5 KiB
Markdown
# 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로 판단하지 않는다.
|
||
|
||
- [수정 전 1/2회사 측정](../../test-results/org-chart-p9-5/before.json)
|
||
- [수정 전 7회사 측정](../../test-results/org-chart-p9-5/before-seven.json)
|
||
- [수정 후 전체 측정](../../test-results/org-chart-p9-5/after.json)
|
||
- [동일 조건 비교](../../test-results/org-chart-p9-5/centering-comparison.json)
|
||
|
||
## 최소 변경
|
||
|
||
- `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 가로·세로 중앙.
|
||
- [변환 좌표 및 실제 포인터](../../test-results/org-chart-p9-5/geometry.json): **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 이동 캡처](../../test-results/org-chart-p9-5/geometry-pointer-hybrid.png).
|
||
- 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](../../test-results/org-chart-p9-5/geometry-initial.json)도 보존했다. 끝점12개 판단은 이미 캡처된 실제0.5px 차이를0.75로컬px 기준으로 해석했으며 브라우저를 다시 실행하지 않았다. 포인터 source/target을 조직도 캔버스와 브라우저 viewport 양쪽 안으로 제한하고 focus 후 client 좌표를 다시 측정하여 실패한 pointer 구간만 재실행했다. 최종62개는 보존/재해석한41개와 새 pointer20개 및 최종 오류 검사1개이며 원본 수와 중복 합산하지 않았다. 앱 소스를 변경하여 테스트 실패를 감추지 않았다.
|
||
|
||
## Guard 및 미검증
|
||
|
||
[변경 Core 2파일 PARTIAL Guard](../../test-results/org-chart-p9-5/guard.json)는 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
|
||
|
||
[시작 파일 감사](../../test-results/org-chart-p9-5/source-preservation.json):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](http://127.0.0.1:6064/?path=/story/orgchart--expanded-org-chart), [최초100% 캡처](../../test-results/org-chart-p9-5/after-initial.png), [단일 회사 Fit 캡처](../../test-results/org-chart-p9-5/after-single-fit.png).
|
||
|
||
## 시간
|
||
|
||
- 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초 짧음
|