docs(org-chart): record final visual verification

docs/org-chart/visual-review-p10-10.md

@@ -0,0 +1,117 @@
+# HMDesign OrgChart P10.10 — 현재 브라우저 시각 검증
+
+**RESULT: PASS — 요청 범위의 브라우저 렌더링·대표 동작·390px 원인 판정 완료. 사용자 최종 디자인 승인: PENDING.** 제품/Storybook 소스 수정이 필요한 오류는 재현되지 않았다. 이 결과는 main 병합·배포 승인이나 기존 Guard/보안/접근성 승인 완료를 뜻하지 않는다.
+
+## 실행 환경과 Git
+
+| 항목 | 현재 확인 |
+|---|---|
+| 프로젝트 | `D:\디자인시스템\HMDesign-OrgChart-Recovered` |
+| 브랜치 | `feature/orgchart-package` |
+| 시작·최종 Local HEAD | `e525d557c400b989be3c5ec0f74319815da3e4ff` |
+| 시작·최종 원격 Feature | 위 SHA와 동일, `git ls-remote` 읽기 전용 조회 |
+| origin | `https://gitea.hmac.kr/b25027/HMDesign.git` |
+| 작성자 설정 | `b25027` / `shkim4@samaneng.com` |
+| 시작 Working Tree | 깨끗함 |
+| 완료 변경 | 이 보고서 신규 1개, unstaged. 제품 코드 변경 0개 |
+| 브라우저 | 실제 Google Chrome / Chromium `155.0.8059.40`, Playwright, device scale 1 |
+
+요청한 복구 경로·Feature 브랜치·Commit/Push 보류 지시를 적용했다. 보존용 `HMDesign-OrgChart`는 수정하지 않았다. Stage·Commit·Push·Checkout·Merge·PR·Docker·Publish·Reset·Rebase·Force Push 미진행. 공식 원격 HEAD를 변경하지 않았다.
+
+복구 저장소에는 `node_modules`와 workspace `dist`가 없었다. 기존 lockfile을 그대로 사용하는 `npm.cmd ci --no-audit --no-fund`로 552개 패키지를 설치하고, 실행에 필요한 `npm.cmd run build:packages`를 한 번 완료했다. package.json/lockfile/의존성 버전을 변경하지 않았다. 전체 앱/Storybook production build·전체 Typecheck·Core 86개·Chart Only 51개·Guard 94개 회귀·npm audit는 직접 영향이 없어 반복하지 않았다.
+
+시작 시 6045/6046/6024 Listener가 없었다. 기존 서버를 종료하지 않고 이 작업의 서버만 실행했다. 서버는 검토용으로 유지한다.
+
+- Storybook: [공개 메뉴](http://127.0.0.1:6046/), [Full Composition](http://127.0.0.1:6046/?path=/story/orgchart--full-composition).
+- Chart Only [React](http://127.0.0.1:6045/react.html?data=100) / [Vanilla](http://127.0.0.1:6045/vanilla.html?data=100).
+- Storybook 명령: `npm.cmd run storybook -- --port 6046 --host 127.0.0.1 --exact-port`.
+- Chart Only 명령: `node node_modules/vite/bin/vite.js --config examples/org-chart-chart-only/vite.config.ts --port 6045 --strictPort --host 127.0.0.1`.
+
+## 공개 화면과 대표 동작
+
+| 화면 | 실제 확인 결과 |
+|---|---|
+| Overview | PASS. 회사 로고 7개, 중복 로고 제목 제거, 조직·직위별 표, 관계사별 현황·총계 41명, 공통 Container·카드 간격/정렬 표시. 이미지 로딩 정상 |
+| Department Colors | PASS. 대표자, 기존 6개 조직 Gradient, 그룹장/직원, 파견/휴직 미리보기, `홍 길 동`, 기존 카드/글꼴, 공통 미리보기 배경/Border 표시. Auto 회사색 7종과 별도 유지 |
+| Full Composition | PASS. 상단 제목/기준일·인원 표, 중앙 대표자/허브·6조직/직원·연결선, 하단 파견/휴직·관계사 현황 표시. 협업 화살표 5개와 대표자 화살촉 1개 유지. Core 팝업·ESC 종료·카드 focus 복귀를 390/1440에서 확인 |
+| Expanded OrgChart | PASS. 회사 복수 선택, 직원 수 20/100/300 옵션, 7회사×20명 실제 초기 표시. 한맥기술 하나를 선택한 100/300명 실제 카드 수와 현황 일치. TB/LR/Hybrid 전환 후 140명 보존, 연결선/그룹 제목, Zoom/Pan/Fit, HM Dialog·ESC/focus 복귀, 접기·펼치기 확인 |
+| Chart Only React | PASS. 100명 대표 화면, 흰색 캔버스·외부 제목/설명/툴바 없음. 초기 Fit/가로·세로 중앙, 직접 휠 Zoom·Pan, Core 팝업/focus, 그룹 접기·펼치기, 동일 Props 리렌더 후 사용자 뷰 유지 |
+| Chart Only Vanilla | PASS. 같은 100명 대표 화면과 같은 초기 Fit/중앙, 직접 휠 Zoom·Pan·Core 팝업/focus·접기·펼치기, 조작 이후 자동 Fit 없음 |
+
+Expanded 기본 Drag & Drop은 OFF다. 기존 plain wheel은 확대하지 않고 Ctrl+wheel은 확대한다. Fit 버튼 후 7회사 전체를 확인했다. 초기 Expanded는 기존 100% 탐색 모드라 일부 카드가 canvas 밖에 있으며 이는 Full Composition의 전체 축소 정책과 다르다. 초기 이미지 미로딩 106개는 lazy loading 상태였고, Fit 후 140/140 이미지 로딩을 확인했다(`expanded-assets.json`).
+
+Chart Only React/Vanilla 초기 배율은 둘 다 `0.513493800145879`, 가로 중앙 오차 0px, 세로 오차 약 -0.000019px다. 직접 휠 이후 `0.6271827437963237`, Pan 이후 Δx=60/Δy=-40px이며 팝업·접기·펼치기 후 배율/위치를 유지했다(100→96→100명). Fixed Chart Only는 기존 미지원 계약과 TypeError 코드 경계를 보존했으며 이번 작업에서 신규 개발하지 않았다.
+
+회사색·카드 SVG/PNG·Typography·데이터·배경·레이아웃 소스는 변경하지 않았다. Cell Border Only 실험은 정식 적용 대상에서 제외하며 이번 검증에도 적용하지 않았다. 현재 캡처에서 요구된 시각 구성과 자산은 확인했지만, 과거 승인 캡처와의 자동 픽셀 일치 검증이나 사용자 최종 디자인 승인은 **NOT VERIFIED / PENDING**이다.
+
+## Full Composition 390px 판정
+
+**실제 내부 가로·세로 스크롤 오류: 재현 안 됨. 제품 수정: 없음.**
+
+| 실제 Viewport | 문서 scroll/client W·H | 콘텐츠 Wrapper Rect (x,y,w,h) | Stage 실제 Rect (x,y,w,h) | 배율 |
+|---|---|---|---|---|
+| 390×844 | 390/390 · 844/844 | 16,306,358,522 | 16,306,358,521.999 | 0.186458… (`data-scale=0.1865`) |
+| 1440×900 | 1440/1440 · 900/900 | 120,290,1200,570 | 121.640,290,1196.720,570 | 0.623291… (`0.6233`) |
+| 1920×1080 | 1920/1920 · 1080/1080 | 360,290,1200,750 | 360,290,1200,750 | 0.625 |
+
+Storybook iframe의 `#storybook-root`, Story Wrapper, Core host/composition/stage/viewport의 BoundingRect, scrollWidth/clientWidth, scrollHeight/clientHeight, overflow는 `measurements.json`에 저장했다. 검증 Viewport는 iframe 콘텐츠의 실제 크기이며 Storybook manager 전체 폭과 구분한다.
+
+390px 내부 viewport는 `scrollWidth/clientWidth=1920/1920`, `scrollHeight/clientHeight=599/599`, overflow X/Y=`visible`이다. 그 viewport에 실제 `scrollLeft/scrollTop` 최대 이동을 시도해도 0/0이다. composition Wrapper는 `1920/358`, `2800/522`, 기존 overflow=`hidden`이다. CSS transform은 레이아웃 박스를 축소하지 않으므로 원래 Stage 크기가 scroll 지표에 남는다. 이 수치를 표시 크기 또는 실제 사용자 스크롤로 오인하면 안 된다. 기존 overflow를 새로 추가하거나 콘텐츠 잘림을 숨기는 수정은 하지 않았다.
+
+390/1440에서 측정한 카드·조직 제목·협업 화살표·대표자 화살촉·SVG 연결선의 Wrapper 이탈/잘림은 0개다. Stage 가로 중앙 오차는 0px다. 390px에서는 Stage bottom 약 828px < Viewport 844px이며, 상단→중앙/중앙→하단 간격은 각각 약 152.958px다. 1440에서는 상단/중앙/하단 사각형의 실제 교차가 0개다. 파견·휴직과 관계사 footer도 구분되어 있다. 1920 기준 화면에서도 전체 구성이 콘텐츠 영역 안에 표시된다. 수정/오류가 없어 1280×1024, 1920×1440 추가 검사 조건은 발생하지 않았다.
+
+기존 `examples/org-chart-react/verify-boundaries.mjs`는 390×900의 다른 production fixture에서 `documentScrollWidth <= 390 && internalScrollLeft > 0`을 요구한다. 최신 Fixed Full Composition은 P9.5 비례 축소 정책상 **내부 가로 스크롤 없음**을 의도한다. 이번 실제 Full Story 390×844에서 동일 이동/판정 부분을 재현하면 `internalScrollLeft=0`, 구형 predicate=false다. 따라서 과거 실패는 현재 Full Composition에 적용할 수 없는 구형 내부 스크롤 기대값 때문이며, 사용자 화면의 스크롤 결함 증거가 아니다. 원본 스크립트·과거 실패 기록을 수정하지 않았고, 원본 전체 production fixture 검사를 이번 결과로 PASS 처리하지 않았다.
+
+390px는 전체 구성 보존과 중앙 배치 때문에 텍스트가 매우 작고 상하 여백이 크다. 기술적 잘림/겹침 오류는 없지만 이 표현의 가독성·여백은 사용자 최종 디자인 검토 사항이다.
+
+## 실행한 검증과 증거
+
+로컬 증거: `test-results/visual-review-p10-10/` (Git ignored, 새 Clone에는 포함되지 않음).
+
+| 명령/검사 | 결과 |
+|---|---|
+| `npm.cmd ci --no-audit --no-fund` | PASS, lockfile 기반 설치 |
+| `npm.cmd run build:packages` | PASS, 실행에 필요한 4 workspace 산출물 생성 |
+| `node test-results/visual-review-p10-10/capture.mjs` | 8개 현재 화면/해상도 렌더·측정·캡처, 새 콘솔/runtime 오류 0 |
+| `node test-results/visual-review-p10-10/interactions.mjs` | 최초 12/16 PASS, 최초 FAIL 4개를 `interactions.json`에 보존 |
+| `node test-results/visual-review-p10-10/recheck.mjs` | 실패 4개 한정 재검사 4/4 PASS + 선택 회사 100/300명/오류 검사 2/2 PASS |
+| `git diff --check` | PASS |
+| 시작/최종 `git ls-remote origin refs/heads/feature/orgchart-package` | 같은 SHA |
+
+Playwright는 프로젝트 helper의 `ORGCHART_PLAYWRIGHT_MODULE`에 이미 설치된 bundled Playwright를 연결했고 `ORGCHART_CHROME=C:\Program Files\Google\Chrome\Application\chrome.exe`를 사용했다. 브라우저 도구 다운로드/의존성 업그레이드는 하지 않았다. Codex 내장 브라우저에서도 현재 Storybook manager/Full Composition을 열어 확인하고 검토 탭을 유지했다.
+
+최초 FAIL 원인과 후속 근거:
+
+- Full 1440: 상단 인원표·하단 파견 영역은 중앙 카드와 서로 다른 x 위치에 있다. 세로 범위만 비교한 최초 검사에서 겹침으로 오판했다. 실제 x/y 사각형 교차로 확인한 겹침 0개(`recheck.json`).
+- React/Vanilla popup: Pan 후 화면 밖 카드를 Playwright로 클릭하면 도구가 자동 scrollIntoView를 실행하며 위치가 바뀐다. 화면 안 카드 클릭으로 확인한 popup/접기·펼치기는 기존 배율·Pan 유지. 제품 자동 Fit으로 판정하지 않는다.
+- HM Dialog focus: ESC 직후 애니메이션/비동기 종료 완료 전에 focus를 읽었다. Dialog hidden 및 focus 복귀 완료를 기다린 재검사 PASS.
+
+상호작용/재검사 콘솔·runtime 오류는 모두 0건이다. 통과한 검사를 전체 반복하지 않았으며 제품 코드는 진단으로 변경하지 않았다. 범용 측정 JSON의 `outside` 값은 Full Composition containment 판정에 사용했고, 독립 Department specimen의 작은 status Wrapper나 탐색 모드 Expanded를 Full Stage 경계로 해석하지 않았다.
+
+필수 새 캡처:
+
+1. [Overview](../../test-results/visual-review-p10-10/overview.png)
+2. [Department Colors](../../test-results/visual-review-p10-10/department-colors.png)
+3. [Full Composition 1440×900](../../test-results/visual-review-p10-10/full-1440.png)
+4. [Full Composition 390×844](../../test-results/visual-review-p10-10/full-390.png)
+5. [Expanded 초기 화면](../../test-results/visual-review-p10-10/expanded.png), [Fit 후 7회사 전체](../../test-results/visual-review-p10-10/expanded-fit.png)
+6. [Chart Only React](../../test-results/visual-review-p10-10/chart-only-react.png)
+7. [Chart Only Vanilla](../../test-results/visual-review-p10-10/chart-only-vanilla.png)
+
+추가 증거: `full-1920.png`, 390/1440 Core popup, React/Vanilla popup, 회사 선택, Expanded TB/LR/Hybrid, 애니메이션 종료 후 `expanded-hm-dialog.png`. 기존 캡처를 이번 증거로 제출하지 않았다.
+
+## 기존 미해결 상태와 승인
+
+- Guard: 기존 TOKEN-001 FAIL 5 / NOT VERIFIED 9 / 분석기 회귀 94/94 기존 PASS 보존. Guard 재실행·검사기 수정·결과 덮어쓰기 없음. 기존 styleEvidence STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED와 결합 styleVerification 미생성을 그대로 유지.
+- 보안: 기존 개발 High 7 / 고유 Advisory 1 / 과거 운영 감사 0 유지. 신규 감사 결과 또는 현재 의존 그래프의 무취약 보증으로 표현하지 않는다.
+- 접근성: 기존 삼안 제목 약 2.64:1, 장헌산업 약 4.29:1. 회사색·흰색 그룹 제목 변경 없음. 기존 정책 승인 대기.
+- 사용자 최종 디자인 승인: 4 Story와 React/Vanilla Chart Only 모두 PENDING. 특히 390px 축소 가독성·큰 여백과 1440px 배치/간격 확인 필요. 이번 브라우저 PASS를 디자인 승인으로 처리하지 않는다.
+- NOT VERIFIED: 과거 baseline 픽셀 동일성, 실제 모바일 기기·touch/스크린리더, Safari/Firefox, 모든 회사×100/300명×레이아웃 조합, 1280×1024·1920×1440, 기존 20/100/500명 전체 51개 회귀 재실행, 전체 Typecheck/Guard/npm 신규 감사. 직접 영향이 없는 기존 검증을 반복하지 않은 항목들이다.
+
+## 작업 시간 (KST)
+
+- Started At: 2026-10-13 21:15:18 KST
+- Completed At: 2026-10-13 21:27:30 KST
+- Actual Duration: 12분 12초
+- Estimated Duration: 최초 약 25–40분
+- Variance: 최초 예상보다 12분 48초–27분 48초 짧음