HMDesign OrgChart P9.1 — Department Colors 간소화 · Full Composition 중앙 정렬

RESULT: PASS — P9.1 변경 범위.

두 페이지의 Storybook 표시만 수정했다. 기존 Core/React 카드·연결선·통계·Expanded 소스와 P7~P9 결과를 보존했다. Expanded 추가 디자인·기능 작업은 시작하지 않았다.

기준 및 시간

범위: STORYBOOK_ONLY, 실제 React Storybook.
경로: D:\디자인시스템\HMDesign-OrgChart
브랜치: feature/orgchart-package
시작/완료 HEAD 및 기존 remote-tracking feature HEAD: 7614507583927a25a270963a74ff044be0557b9f
origin: https://gitea.hmac.kr/b25027/HMDesign.git. 이번 원격 조회/Fetch 없음.
Started At: 2026-10-13 10:35:50 KST
Completed At: 2026-10-13 10:48:05 KST
Actual Duration: 12분 15초
Estimated Duration: 25분 — 확인 5분 / 수정 10분 / 검증 10분
Variance: 예상보다 12분 45초 짧음

Department Colors

기존 조직 그룹 타이틀, 1Depth 그룹장 대형 카드 146×68, 2Depth 소형 직원 카드 108×52만 남겼다.
제거: 장문 페이지/섹션 설명, 표시 옵션/긴 이름 검증 버튼, Core 예제 안내 2개, 별도 대표자 견본, 출처·버전·selector, CSS 변수/HEX/Gradient legend와 구현 설명, 카드 자산/크기 caption, 대비 MODEL 비교·진단/보조 안내.
Story 전용 presentation="design"에서 생성된 예제 DOM만 정리한다. 카드 하위 DOM·SVG/로고·Typography·6개 조직 색/Gradient와 Core generator는 그대로다. 삭제된 대비 요소를 참조하는 updater는 이 옵션에서 호출하지 않는다.
2행 subgrid로 같은 행 제목/카드를 정렬한다. 기존 카드 grid margin-top 12px와 공통 StoryPage 제목·여백/섹션 스타일을 유지한다. 390px 단일 열에서 카드 잘림/가로 overflow 없음.

Full Composition 실측

측정 기준: 실제 6개 tree의 조직 헤더와 직원 카드 getBoundingClientRect() 합집합. 폭 1920인 빈 forest/Stage 박스 중심을 본문 중심으로 사용하지 않았다.

원본 Stage 내부 본문 bounds는 X=32~1835, 중심 X=933.5이다. Stage 중심 X=960과 차이가 있으며, 높이 제한으로 축소된 Stage가 좌측에 붙는 경우 추가 여백도 발생했다.

브라우저 크기	실제 가용 영역 X/폭	가용 중심	수정 전 본문 중심	수정 전 오차	수정 후 본문 중심	수정 후 오차
1920×1080	360 / 1200	960	943.4375	-16.5625	960.00003	+0.00003px
1440×900	120 / 1200	720	701.52458	-18.47542	719.99991	-0.00009px
390×844	16 / 358	195	190.05885	-4.94115	195.00026	+0.00026px

Story 전용 helper가 본문 중심을 실측하고 전체 Stage에 독립 CSS scale/translate를 적용한다. 기존 Core의 가로/세로 fit transform은 유지하며, 본문 중심에서 Stage 좌·우 끝까지의 최대 거리에 맞춰 동일 비율을 추가 보정한다. Stage 전체/통계까지 영역 안에 들어오도록 계산하며 overflow 규칙을 추가·변경하지 않았다.

원본 1920×914.5 유지. DOM offsetHeight의 정수 반올림 915와 computed height 914.5를 각각 확인.
카드/조직별 좌표 수정 없음. 대표자·허브·조직·연결선·협업 화살표·장식·우측 통계·좌측 하단 파견/휴직·하단 관계사 집계를 전체 Stage와 함께 이동.
Stage 내부 DOM SHA-256, 자산 hash와 152개 요소의 정규화 상대 좌표/크기·computed style 보존. 3개 폭에서 부적절한 겹침 0.
비례 축소와 전체 실측 bounds 포함, 문서 및 사용자 조작 가능한 내부 가로/세로 스크롤 없음. 원래 fitted wrapper의 숨김 overflow에서 보고되는 변환 전 layout scrollWidth는 실제 스크롤로 오인하지 않고, 원본 동일 규칙/화면 전체 포함/휠 offset 0을 함께 확인.
같은 화면을 remount 없이 1920×1080→390×844→1440×640→1440×900으로 변경해 중앙 정렬/균일 축소/스크롤 없음 확인. 10프레임 동안 Stage 스타일 mutation 0, observer 안정성 확인.

변경 파일 및 보존

파일	이번 변경
`src/org-chart/org-chart-page-previews.tsx`	Department 설명/옵션 제거 및 디자인 모드 선택, Full Composition 정렬 helper 연결. Overview JSX 보존
`src/org-chart/core-component-preview.tsx`	Department에만 적용되는 선택형 디자인 예제 간소화. 기존 workdesk/standalone 경로 보존
`src/org-chart/center-composition-preview.ts`	신규 Story-only 실측/Stage 정렬 helper와 observer cleanup
`examples/org-chart/verify-p9-1.mjs`	신규 범위 검증/수정 전후 캡처/동일 mount 리사이즈 runner
`docs/org-chart/implementation-report-p9-1.md`	이 보고서

시작 시점 authored 파일 811개 중 기존 파일 2개만 변경, 809개 SHA-256 동일. 신규 authored 파일 3개. Core/React 패키지, 카드·색상·공통 CSS, Expanded Story/CSS/기능, 메뉴/ID 설정과 P7~P9 보고서/runner는 변경하지 않았다. 시작 snapshot, 최종 audit.

변경 범위 검증

검증	결과
두 페이지 실제 Chromium	44/44 PASS, 신규 console/pageerror 0. 원본
동일 mount 리사이즈/스타일 안정성	17/17 PASS, 신규 console/pageerror 0. 원본
변경 Story/helper Typecheck	PASS: `node node_modules/typescript/bin/tsc -p test-results/org-chart-p9-1/story-tsconfig.json`
Storybook production Build	PASS: `npm.cmd exec -- storybook build -o storybook-static --disable-telemetry`. log, 기존 500kB chunk 경고/플러그인 timing 진단 유지, build 오류 없음
Storybook 공개 메뉴	PASS, 기존 Overview / Department Colors / Full Composition / Expanded OrgChart 4개 ID/index 유지. manager 설정 동일 hash와 P8 메뉴 배치 PASS 재사용
Git diff/공백	PASS, `git diff --check` 및 신규 authored 파일 공백 확인
Git 보호	Stage·Commit·Push·Merge·main 수정/checkout·PR·Reset·Rebase·Force Push 모두 미진행, staged 파일 0, branch/HEAD 동일

P7~P9 정상 결과는 동일 소스 근거와 함께 재사용했다. 전체 Guard·과거 브라우저 suite·Expanded 상호작용·2,100명 성능 검사는 반복하지 않았다.

NOT VERIFIED / 검토 대기

P9 Guard 원본의 FAIL / RUNTIME·DESIGN_INTENT·FINAL NOT VERIFIED 및 기존 접근성 대비 잔여 사항을 그대로 보존한다. 이번 브라우저 PASS로 원본 상태를 덮어쓰지 않았다.
최종 사용자 디자인 승인, 다른 브라우저/실기기/스크린리더/SSR·배포는 NOT VERIFIED.
Expanded 기능은 소스 hash 보존 및 P7~P9 PASS 재사용 근거다. 이번 기능 재검증/추가 디자인 수정은 진행하지 않았다. 사용자 검토를 기다린다.

Storybook 및 화면

Department Colors: 1920px, 1440px, 390px
Full Composition: 1920px, 1440px, 390px
수정 전 캡처는 같은 결과 폴더의 before-*.png로 보존.

7.7 KiB Raw Blame History Unescape Escape