HMDesign/docs/org-chart/implementation-report-p9-5-core-dialog-close.md

P9.5 추가 — Core 직원 팝업 X 닫기 버튼

RESULT: PASS (요청한 닫기 버튼 및 팝업 동작 범위)

변경

• 실제 HM Dialog의 Button variant="ghost" size="icon-sm"과 Lucide XIcon을 확인했다. HM Dialog/Button 자체는 수정하지 않았다.
• Core에서 같은 두 SVG 경로와 viewBox, Stroke 2, Round cap/join을 native DOM으로 생성한다. React 의존성은 추가하지 않았다.
• 버튼 28×28px, 아이콘 16×16px, Padding 0, 투명 Border 1px, 기본 Radius 3.2px, 상단/우측 CSS 8px를 적용했다. BoundingRect 기준 외곽에서 9px이며 팝업 Border 1px를 포함한 값이다.
• HM 선언값/상속 변수를 사용한다. 기본 색 #0a221d, Hover #f4f1ea, Focus Border #266651 + 같은 색 50%의 3px Ring, 150ms transition, 눌림 Y +1px. Vanilla fallback은 실제 HM 선언된 기본값이다.
• 우상단 absolute 버튼으로 바꾸면서 기존 텍스트 버튼의 Header 높이를 유지해 Title/본문/팝업 크기를 보존했다. 직원 정보 데이터와 닫기 이벤트 로직은 수정하지 않았다.

검증

• React Full Composition의 Core 팝업과 React 없는 public Vanilla Core에서 각각 1440×900 / 390×900 검증: 48 PASS, 0 FAIL.
• 실제 HM Dialog의 Normal/Hover/Focus와 버튼 및 아이콘의 CSS/BoundingRect/경로를 비교했다. X 클릭, ESC, Tab/Shift+Tab trap, 직원 카드 Focus 복귀를 확인했다.
• 기존 외부 클릭 정책 유지: Backdrop 클릭은 닫히지 않는다.
• Dark Hover 및 눌림 실제 이동량만 추가 비교: React/Vanilla 4 PASS. HM은 CSS translate, Core는 transform을 사용하므로 초기 속성 이름 비교 실패를 실제 이동량 비교로 바로잡았다. 최초 결과는 states-initial.json에 보존했다. 제품 코드 추가 수정은 없었다.
• 1440px React/Vanilla 팝업: 420×276.5px → 420×276.5px. 390px React/Vanilla 팝업: 358×276.5px → 358×276.5px. 모두 Title/본문 좌표 변화 0px; 본문 시작 y=386.25px 유지. 배경/Border/Typography/데이터도 동일하다.
• 기존 닫기 버튼: 약 41.922×29.5px → 28×28px, 외곽 상단/우측 inset 25px → 9px.
• 최초 실제 1440px 기준 측정을 저장했고, 나머지 크기의 전후 비교는 저장한 기존 CSS와 기존 닫기 markup을 동일 팝업에 잠시 적용해 측정했다.
• Core Typecheck / Core Build / Storybook Build / git diff --check PASS. 신규 Console/Page 오류 0. P9.4/P9.5 전체 회귀는 반복하지 않았다.

Guard 1회: 원본 status/staticStatus NOT VERIFIED (SCOPE-001: package 구현이 proven Storybook graph 밖). styleEvidence STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS (검사 없음) / FINAL NOT VERIFIED. Guard 원본을 보존했고 위 실제 브라우저 증거를 별도로 기록했다. 디자인 최종 승인과 다른 브라우저/OS는 NOT VERIFIED.

파일과 증거

수정 구현: packages/org-chart/src/core/employee-info-dialog.ts, packages/org-chart/src/styles/employee-info-dialog.css.

추가 검증/보고: examples/org-chart/verify-p9-5-core-dialog-close.mjs, 본 문서. 생성물과 로그는 test-results/org-chart-p9-5-core-dialog-close/에 보관한다.

• 측정: result.json, states.json, baseline-popup.json, reference.json.
• 캡처: react-1440-popup.png, react-390-popup.png, vanilla-1440-popup.png, vanilla-390-popup.png, hm-reference.png.
• 검토 URL: http://127.0.0.1:6064/?path=/story/orgchart--full-composition
• 기존 6064 서버 종료를 확인해 동일 URL의 loopback static Storybook/Core 서버를 복구했다. 사용자 기존 탭은 오류 화면의 data URL 정책으로 제어되지 않아 새 검토 탭에 실제 팝업을 열어 확인했다.

보존 및 Git

• 시작 시점 authored 파일 SHA256을 캡처했다. 기존 P9.5 레이아웃/화살촉, Expanded, HM UI, 기존 미커밋 파일은 이 작업에서 수정하지 않았다.
• 작업 중 docs/org-chart/ai-page-generation-rules.md의 외부 변경을 감지했다. 이 작업에서 편집/복구/덮어쓰기하지 않았다.
• feature/orgchart-package, HEAD 7614507583927a25a270963a74ff044be0557b9f 유지, Staged 파일 0. Stage/Commit/Push/Merge/PR/Reset/Rebase 미진행.

Started At: 2026-10-13 13:51:35 KST Completed At: 2026-10-13 14:04:24 KST Actual Duration: 12분 49초 Estimated Duration: 15분 Variance: -131초

사용자 시각 검토 대기.