# HMDesign OrgChart P5-4 완료 보고

RESULT: **PASS — 변경된 P5-4 요구사항의 구현·변경 영향 범위.**
전체 접근성 인증·실기기·모든 CSS 의도 검증은 **PARTIAL / NOT VERIFIED**이며 아래에 구분한다.

## 확정 범위와 환경

- 실제 작업 폴더: `D:\디자인시스템\HMDesign-orgchart-package`
- 브랜치: `feature/orgchart-package`
- 시작/완료 HEAD: `a92913d6bcc950dacc6fdf21cf3b0843ee79416d`
- origin: `https://gitea.hmac.kr/b25027/HMDesign.git`
- 범위: BOTH — 기존 Vanilla/React 공통 Core와 Expanded Story의 안내·문서 보완.
- 사용자 후속 확정: 현재 Expanded 카드 외형·크기·사진·직위·이름 구조를 유지한다.
  `Group 3391.svg`, `Group 1171288761.svg`는 검색·적용·용도 배정 대상에서 제외하며,
  SVG 미확보는 완료 차단 사유가 아니다. SVG 역할을 추정하지 않았다.
- 기존 P5-1B 879/879 및 P5-2·3 96/96·단위 7/7 기록은 과거 근거로 보존한다.
  이번 결과는 그 전체 검사를 다시 실행했다는 의미가 아니다.

## 구현과 보존 결과

| 항목 | P5-4 결과 |
|---|---|
| 카드 외형·크기 | PASS. 시작 dist와 Small 20명의 카드 size/photo/font/color/border 정확 비교 일치. 기본 일반 직원 width 114/min-height 54px, 긴 가상 이름 실측 114×67px. 조직장·최상위 width 154/min-height 72px. 변경 전후 동일. |
| 사진·직위·이름 | PASS. 비원형 36×36 슬롯·공통 사람 SVG·Noto Sans KR computed family·직위 10px/이름 13px 유지. 표시용 직위 공백만 제거, raw 데이터 불변·원문 aria-label 제공. 가상 SVG profile URL override와 error-event placeholder 복귀 확인. 실제 사람 사진은 미사용. |
| 그룹 타이틀 | PASS. 기존 전체 버튼·상태 기호·aria-expanded·키보드 Focus·별도 링크 유지. 활성 타이틀 및 링크에 Hover 배경 피드백 추가. Enter 접힘·Space 펼침·rerender 후 focus 복귀 확인. |
| 회사 컬러·Border | PASS. 기존 7개 preset·회사 ID 불변. top/left/right 실제 endpoint 오차 1px 미만, 강조 한 면·나머지 중립·외형 크기 유지. 연결 없는 카드용 `none`은 지원 API가 아니며 별도 PASS 처리하지 않음. |
| 자동 배치·연결선 | PASS. 기존 dabeng 재귀 엔진·실측 ResizeObserver 유지. Medium/Large 직원 중복·누락·카드 겹침 없음, DOM 부모 관계와 부모 아래 자식 확인. 엔진 재작성·간격/색/크기 재작업 없음. |
| 다중 회사 | PASS. Large에서 두 회사 독립 Root 및 단일 선택 확인. 원본 JSON 및 source 인원 불변. 전체/해제·자식 collapse state 보존 등 변경 없는 상세 동작은 P5-2·3 근거 재사용. |
| Zoom/Pan/Fit | PASS. 기존 도구와 배율 범위 유지. 새 Tab focus가 화면 밖 카드/타이틀에 도달하면 배율 유지·Pan으로 노출, hidden scrollLeft/Top 0 확인. 실제 mouse Pan 및 Medium/Large Fit에 전체 카드 포함 확인. |
| 드래그·키보드 | PASS. 드래그의 pointer click 억제가 다음 Enter/Space 활성화를 막지 않도록 수정. 이후 Space 직원 팝업 활성화 확인. 기존 Pan 알고리즘 재구현 없음. |
| 직원 팝업 | PASS. 직원 이름·직위의 의미 있는 카드 이름, dialog 제목·닫기 이름, forest 밖·transform 없음, focus 내부·ESC 복귀 확인. 기존 공통 native dialog 재사용. |
| 20/100/300명 | PASS. 기존 JSON 그대로 사용. Medium/Large HTML의 고유 인원·전체 Fit, React Small 및 Large 300명 선택·겹침 없음 확인. 새 fixture·실제 개인정보 없음. |
| HTML/React | PASS. Small의 카드 identity·size·photo·표시 텍스트·font-size·중립 border 동일. 실제 Story와 production React bootstrap 모두 같은 Core 실행. 별도 React 엔진 없음. |
| Fixed | PASS(최소 회귀). 시작 dist와 카드 좌표·size·SVG asset·직위·이름·컬러·사진 정확 일치. Auto 토글 0, 공통 팝업 최소 회귀 확인. Fixed CSS·SVG·Full Composition Story 미수정. |
| Storybook | PASS. 사용자용 4개 메뉴 유지. 기존 internal Story는 사용자 메뉴 집계에서 제외. 안내의 SVG 미확보 문구 제거·P5-4 접근성 이름 갱신. 신규 Story 없음. |

## 접근성·검증 범위

- 실제 키보드 자동화: 그룹 Focus outline·Enter/Space·직원 Space·Tab으로 화면 밖 요소 표시·ESC/Focus 복귀 **PASS**.
- DOM/ARIA: 타이틀 이름·펼침 상태·카드 직원 정보 이름·dialog 제목·닫기 버튼·React 회사 Checkbox 및 데이터 Select 이름 **PASS**.
- 터치: Chrome mobile/hasTouch 에뮬레이션의 title tap, CDP touch Pan, card tap 팝업·닫기 **PASS**. 실제 모바일 기기는 **NOT VERIFIED**.
- 실제 스크린리더 발화, 다른 브라우저 엔진·운영 소비자, 전체 과거 회귀, 종합 자동 접근성 audit는 **NOT VERIFIED**.
- Noto는 computed family 및 기존 host font-face 로딩 확인이다. 실제 font glyph의 CDP 재측정은 하지 않았으며 P3.1 검증 기록을 보존한다.
- 390/768/1280/1440px: 실제 React 문서 가로 overflow 없음·카드 20명 유지·hidden viewport scroll 0 **PASS**.
  문서 및 viewport scrollHeight/clientHeight 원시 값은 `browser.json`에 보존한다.
- 100%에서 큰 조직도가 viewport 밖으로 이어지는 것은 기존 Pan 탐색 동작이며, 전체 표시 여부는 Fit 상태에서 판정했다.
- 기존 조직 ID는 dataset·ARIA 동작 대상에 유지된다. 이번 화면은 개발용 조직 ID 텍스트를 표시하지 않으므로 ID 한 줄 표시 검사는 NOT APPLICABLE.
- 빈 그룹 disabled는 기존 구현을 유지했다. disabled/readOnly의 모든 입력 조합 재검사는 NOT VERIFIED.

기존 실제 React UI는 `@hm-design/ui` Button/Checkbox/Label/Select를 사용한다.
이 작업은 fixture/즉시 회사 표시 도구이며 FilterBar 목록 검색 구조를 추가할 필요가 없어
P5-2·3의 미사용 근거를 유지한다. 페이지 Navigation 없는 임베드 컴포넌트이며 신규 Navigation 없음.
Core native button/dialog는 명시적 Vanilla adapter 계약이다.

## 최종 통합 검증

- Core Typecheck 및 ESM/IIFE·선언 Build **PASS**.
- React Wrapper Typecheck·선언/ESM Build 및 앱/Story TypeScript **PASS**.
- 기존 Expanded Story를 소비하는 별도 production React Build **PASS**.
  기존 이미지 자산에 의한 500kB 초과 chunk 경고는 유지하며 빌드 오류와 구분한다.
- 변경 영향 브라우저 **46/46 PASS**, 마지막 세 실행 경로 console/runtime errors **0**.
  초기 검사 runner 오류(부모 중심 범위의 잘못된 제한·검증 URL data scheme·internal Story 집계·자산 라우팅·favicon 404)를 수정했다.
  초기 실패 JSON을 보존하고 성공 25개→45개를 재사용하여 실패·미완료만 확인했다.
  제품 코드 FAIL을 숨기거나 과거 Guard 결과를 바꾸지 않았다.
- 기존 단위 7/7 및 과거 전체 브라우저 suite는 **재실행하지 않음**. DOM 동작 변경은 위 통합 브라우저로 검증.
- `git diff --check` **PASS**. CRLF 전환 안내는 공백 오류가 아니다.
- Guard는 변경한 Expanded 소비 Story에 PARTIAL/STORYBOOK profile로 **1회** 실행.
  원본 `status=PASS`, `staticStatus=PASS`, issues=0, `runtimeStatus=NOT VERIFIED`.
- 원본 styleEvidence: STATIC **PASS** / RUNTIME **NOT VERIFIED** / DESIGN_INTENT **NOT VERIFIED** / FINAL **NOT VERIFIED**.
- 별도 Runtime 증거 fingerprint 연결 `linked=true`; 결합 status **NOT VERIFIED**.
  결합 styleVerification도 STATIC **PASS**, 나머지 세 항목 **NOT VERIFIED** 유지.
  Storybook profile에는 Production `--result` 증명이 없고 전체 host CSS 의도 검증을 수행하지 않는다.
  실제 production React 빌드·브라우저 PASS와 Guard 자동 판정을 구분한다.
- 현재 카드 유지의 사용자 확정은 모든 소비 CSS·외부 입력 상태의 포괄적 승인으로 확대하지 않는다.
- 카드 geometry·엔진이 동일하므로 성능을 재측정하지 않았다. 이전 195.6ms/42ms는 다른 작업의 조건부 기록으로 보존한다.

## 실행 화면·캡처·문서

- [Expanded OrgChart](http://127.0.0.1:6054/?path=/story/orgchart--expanded-org-chart)
- [Vanilla HTML 예시](http://127.0.0.1:4189/expanded.html)
- production React: `test-results/org-chart-p5-4/react-build/dist/index.html` (브라우저 검증 중 로컬 서버로 실행, file:// 직접 실행용 아님).
- `storybook-large.png`: 기존 7회사·300명 전체 Expanded 화면.
- `cards-100-percent.png`: 카드·상단/좌측 강조 연결선 100% 탐색 화면.
- `group-collapsed.png` / `group-expanded.png`: 동일 그룹 접힘·펼침 비교.
- `two-companies.png`: 2회사 독립 Root.
- `html-large-fit.png` / `html-medium-fit.png`: 300/100명 HTML Fit.
- `storybook-{390,768,1280,1440}.png`: 4개 폭 실제 React 화면.
- `touch-emulation.png`, `fixed-1440.png`: 터치 에뮬레이션·Fixed 최소 회귀.
- 캡처와 원시 근거는 모두 `test-results/org-chart-p5-4/`. 실제 직원 개인정보 없음.
- [사용 예제 및 스타일 관리](expanded-usage.md): Fixed/Auto, 컬러, 단일/복수 회사,
  collapse, Zoom/Pan, JSON Source, popup, Shadow DOM CSS 변수 및 연결 방향을 실제 공개 API로 설명.
  없는 collapse setter·layoutConfig·React imperative ref를 지원한다고 문서화하지 않음.

## 이번 실제 변경 파일

시작 시 미커밋 32개 파일을 snapshot/hash로 기록했다. 아래 기존 파일 7개만 이번에 추가 보완했으며,
나머지 25개는 시작 hash와 정확히 일치한다. 기존 미커밋 변경을 이번 신규 구현으로 주장하지 않는다.

1. `packages/org-chart/src/core/employee-card.ts` — Auto 직위 표시·원문 접근성 이름.
2. `packages/org-chart/src/core/expanded-viewport.ts` — 화면 밖 focus 표시·drag 이후 keyboard click·frame cleanup.
3. `packages/org-chart/src/core/expanded-content.ts` — current presentation 상태.
4. `packages/org-chart/src/styles/org-chart-expanded.css` — Auto title/link Hover·radius 상속, 기준 주석.
5. `src/org-chart/org-chart-expanded.stories.tsx` — P5-4 이름·SVG 안내 제거.
6. `packages/org-chart/README.md` — 현재 카드 기준·접근성·문서 링크.
7. `packages/org-chart-react/README.md` — 동일 기준·공통 Core 보완 설명.
8. 신규 `docs/org-chart/expanded-usage.md` — 사용·스타일·지원 경계.
9. 신규 `examples/org-chart/verify-p5-4.mjs` — 변경 영향 검증 runner.
10. 신규 이 보고서.

과거 보고·fixture·공개 타입/API·회사 preset·자동 레이아웃 엔진·Fixed 자산은 이번에 변경하지 않았다.
검증 산출물·시작 patch/dist/hash는 기존 ignored `test-results`에 저장했다.

**Stage·Commit·Push·Merge·PR 미진행.** 시작/완료 HEAD 동일, staged diff 없음.
Reset·Rebase·Force Push·Clean 없음. 운영 main·다른 프로젝트 수정 없음.

## 작업 시간 (Asia/Seoul)

- Started At: 2026-10-12 21:23:35 KST
- Completed At: 2026-10-12 21:41:32 KST
- Actual Duration: 17분 57초
- Estimated Duration: 최초 45–60분 (자료 확인 10분 / 구현 20–30분 / 검증·보고 15–20분)
- Variance: 예상 하한보다 27분 03초, 상한보다 42분 03초 짧음.
- 시간 차이는 사용자 확정으로 SVG 재작업이 제외되고 기존 PASS를 재사용한 결과다.