HMDesign/docs/org-chart/implementation-report-p3.1.md

HMDesign OrgChart P3.1 — 잔여 디자인 정밀 보완

RESULT: PASS — 요청한 P3.1 변경 범위.

집중 브라우저 검사 486/486 PASS, 신규 콘솔·런타임 오류 0건. 기존 P3의 732/732 기록은 역사 근거로 보존했고 전체 suite를 재실행하지 않았다. Guard 원본 및 결합 전체 상태는 NOT VERIFIED로 유지한다.

1. Noto Sans KR: OrgChart 전용 기본 token에 적용했다. 기존 public/fonts/NotoSansKR-variable.ttf를 HTML의 기존 복사 경로와 React bundler 경로에서 재사용하고 Storybook의 기존 HM font-face를 사용한다. HM Theme는 변경하지 않았다. 카드·직위·타이틀·허브·표·관계사·파견/휴직·팝업의 computed family를 확인했으며 네 실행 경로의 대표 9개 텍스트에서 Chrome CDP로 실제 custom-font 글리프 사용을 확인했다. 파일 내부 family 이름은 Noto Sans KR Thin, PostScript 이름은 NotoSansKR와 가중치별 suffix다. 이는 fallback 글꼴이 아니다. 한국어 Core shell의 lang="ko"로 en Storybook host와 ko HTML의 가운데점 글리프 폭 차이도 제거했다.

2. 1Depth·2Depth: 1Depth를 20px/700/36px·실제 헤더 36px로 맞췄다. 경영기획 2Depth는 원본 .hw의 18px/600/16.9px를 적용했다. 인재성장은 같은 기존 값, 나머지는 20px/700/19.7px를 유지한다. 2Depth 114×30.4px·기존 Gradient·Radius 7.1px·Shadow·정렬을 유지했다. 모든 타이틀↔첫 카드 Gap 8px를 실제 측정했다.

3. 경영진 뱃지: Full Composition의 workdeskPresentation에서 jobTitle.trim() === '경영진'인 뱃지 DOM만 생성하지 않는다. 빈 attribute container도 생성하지 않는다. 실제 직위·직책 데이터·팝업·통계는 그대로다. 현재 fixture의 대표자 position="경영진", jobTitle="실장"은 유지한다. 따라서 대표자 직위 글자와 표의 경영진 열은 정상적으로 남는다.

4. 기타 뱃지·이름: 실장·팀장·디비전장 등의 원본 뱃지는 유지한다. 이름은 기존 홍 길 동, 직위는 표시 계층에서만 공백을 제거한다. JSON을 수정하지 않는다. 기존 fixture에 경영진 직책 뱃지가 없어 대표자/1Depth/2Depth/일반/파견/휴직의 메모리 전용 변형을 별도로 검사했다. 여섯 역할에서 뱃지 미표시·직위 유지, 팝업의 원본 직책 보존, interactive 공통 렌더러의 별도 표시 정책을 확인했다.

5. 허브: 원본 21px/750/24px·아이콘 20px·Gap 8px·좌우 Padding 22/24px·높이 42px를 유지했다. 기존 상속 max-width:100%가 198px 축 폭으로 텍스트를 제한하던 부분을 해제했다. 중심을 X 935에 명시하여 실제 폭 약 219.016px에서도 연결선 축을 유지한다. 기존 말풍선 SVG·배경·곡선은 변경하지 않았다.

6. 사진 없음: 신규 공통 person-placeholder.svg 한 종을 모든 카드에서 같은 inline 자산으로 사용한다. 연한 사각 배경·중립 사람 실루엣이며 실사/원형 아바타/장식 없음. 실제 이미지 우선, 이미지 decode 실패 시 공통 SVG fallback을 확인했다. 승인 카드의 예약 슬롯 36×62/32×56/24×44 및 P3 파견/휴직 28×28을 유지한다. 원본 슬롯 55×76/54×70/38×52는 승인 카드보다 커서 복사하지 않았다.

7. 인원 현황 표: 기존 표 폭 330px·위치·14px/400/1.15·좌우 조직명 padding 7px·행 19px/합계 20px·정렬·Border를 유지했다. 조직명 열 112px, 경영진 열 46px, 나머지는 잔여 폭을 배분한다. nowrap을 적용했으며 모든 셀의 실제 텍스트 Range가 셀 내부 한 줄로 들어가는지 확인했다. 숨김·말줄임·글자 축소 없음. 표 높이는 약 200.375px에서 172px로 줄었다. 가상 41명·조직별/직위별 계산·관계사 바는 보존했다.

8. 변경 파일: 구현·예제·문서 14개. 재생성된 dist와 전체 해시 차이는 파일 기록에 있다.

   • packages/org-chart/src/core/employee-card.ts, src/core/index.ts
   • packages/org-chart/src/styles/design-tokens.css, employee-card.css, org-chart-readonly.css, org-chart-p3-summary.css
   • 신규 packages/org-chart/src/assets/person-placeholder.svg
   • examples/org-chart/p1.css, examples/org-chart-react/p1.css, 신규 examples/org-chart/verify-p3.1.mjs
   • packages/org-chart/README.md, docs/org-chart/ui-composition.md, card-design-stage2.md, 이 보고서

9. 화면별 결과: HTML HTTP·직접 file:// classic·React production HTTP·실제 Storybook 6041 모두 1920×1080, 1440×900, 1280×800, 768×1024, 390×844에서 PASS. 문서 scroll/client 폭·높이가 같고 모든 카드가 Stage 내부에 들어간다. 모바일은 기존 전체 비례 축소라 글자가 작지만 팝업은 축소하지 않는다. 1920 HTML, 1920 Storybook, 390 Storybook을 육안 검토했다.

10. HTML·React 동일성: 네 경로의 카드 내용/좌표/크기·허브 위치/폭·표 내용/폭을 화면별로 비교하여 일치했다. 같은 Core와 SVG를 사용하며 HTML 모방 화면을 만들지 않았다. React Wrapper와 Storybook 소스·사용자 메뉴 세 개는 변경하지 않았다.

11. 회귀·검증: Core/Wrapper Typecheck, Core ESM/IIFE/타입/CSS build, Wrapper build, HTML prepare, React 소비 production build PASS. 여섯 카드 역할의 데스크톱/모바일 팝업·focus trap·ESC 복귀, 대표자 Enter/Space/닫기, HTML/React의 실제 키보드 그룹 링크 이동을 확인했다. 146×74/146×68/108×52 카드 및 P3 상태 카드 114×54 보존. 상태 카드 114×54와 슬롯 28×28은 이번 도입값이 아니라 기존 P3 측정값이다. 기존 큰 이미지 inline chunk 약 2.54MB 경고는 유지한다. 마지막 들여쓰기 정리 뒤 재빌드한 runtime 파일 73개는 검증 시점과 byte 동일하여 브라우저를 반복하지 않았다.

12. 남은 Workdesk 차이: 원본 Pretendard 대신 이번 확정 Noto Sans KR을 적용한다. 승인 카드 때문에 원본보다 작은 사진 슬롯을 유지한다. 표 열/행과 인원은 현재 가상 fixture를 따른다. 원본 운영 화면과 완전한 픽셀 일치 및 곡선/글리프 ink 자동 교차 검사는 NOT VERIFIED다. 확장형 Auto Layout/layoutConfig API 없음.

13. Guard·NOT VERIFIED: 최종 유효 PARTIAL Guard는 React bootstrap p1.html에 실행했다. 원본 staticStatus NOT APPLICABLE, status NOT VERIFIED, RENDER-002를 보존한다. 원본 및 결합 CSS 상태는 STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED다. 별도 Runtime은 PASS이며 이름 있는 computed 측정은 PASS이나 Core Shadow CSS 전체의 정적/의도 인증으로 확대하지 않는다. 최초 Guard는 target 기준 result 경로를 중복 지정해 ENTRY/SCOPE 미검증이 발생했다. 해당 실행은 잘못된 인자 진단으로 보존하고 인자만 바로잡았다. 실제 운영 Workdesk 픽셀 일치, 모든 임의 데이터/테마/브라우저, 스크린리더 발화, 실물 touch, 전체 Storybook production build는 NOT VERIFIED다.

14. 보존·Git: 작업 경로 D:\디자인시스템\HMDesign-OrgChart, 브랜치 feature/orgchart-package, HEAD d18e3c33801e165e17b6d971e2f6198eed483c3c 유지. Workdesk 원본·운영 main 미수정. JSON·승인 SVG·로고·Workdesk 장식·HM Theme·Guard·과거 검사/보고서·package manifests 등 보존 대상 216개 해시 동일. 시작 시 기존 미커밋 package.json/package-lock.json 및 OrgChart 작업을 보존했다. Stage·Commit·Push·Merge·Reset·Rebase·Force Push 미진행.

초기 집중 검사 102 FAIL도 초기 기록에 남긴다. 다섯 화면의 실행 경로 동일성 실패는 host 언어에 따른 허브 폭 차이였고 lang="ko"로 수정했다. 나머지 97건은 기존 상태 카드 크기/slot, .hw ID, variable font 내부 이름, fixture에 없는 뱃지에 대한 검사 기준을 정확히 잡지 못한 진단 오류였다. 원본 P3의 기대값이나 FAIL 기록은 수정하지 않았다.

검증 근거: 최종 browser JSON, 원본 Guard, Runtime, 결합 증거, runtime byte 동등성.

Workdesk 읽기 전용 근거: index.css의 .hw 2858–2865, 그룹 헤더 3703–3751, 2Depth 표면 3776–3786, 폭 3884–3899, 허브 2472–2542, 표 1432–1673; index.html 255–282 및 org-dashboard-renderer.js 1638–1663. P3가 남긴 원본 수치 근거도 보존한다.

미리보기: Storybook Full Composition.

작업 시간:

• Started At: 2026-10-12 16:01:00 KST
• Completed At: 2026-10-12 16:30:44 KST
• Actual Duration: 29분 44초
• Estimated Duration: 35–50분
• Variance: 예상보다 5분 16초–20분 16초 단축