HMDesign/docs/org-chart/implementation-report-p5-4.md

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
• Vanilla 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/. 실제 직원 개인정보 없음.
• 사용 예제 및 스타일 관리: 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를 재사용한 결과다.