84 lines
7.7 KiB
Markdown
84 lines
7.7 KiB
Markdown
# 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](../../test-results/org-chart-p9-1/baseline.json), [최종 audit](../../test-results/org-chart-p9-1/final-state.json).
|
||
|
||
## 변경 범위 검증
|
||
|
||
| 검증 | 결과 |
|
||
|---|---|
|
||
| 두 페이지 실제 Chromium | **44/44 PASS**, 신규 console/pageerror 0. [원본](../../test-results/org-chart-p9-1/browser.json) |
|
||
| 동일 mount 리사이즈/스타일 안정성 | **17/17 PASS**, 신규 console/pageerror 0. [원본](../../test-results/org-chart-p9-1/browser-resize.json) |
|
||
| 변경 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](../../test-results/org-chart-p9-1/build.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](http://127.0.0.1:6061/?path=/story/orgchart--department-colors): [1920px](../../test-results/org-chart-p9-1/after-department-1920.png), [1440px](../../test-results/org-chart-p9-1/after-department-1440.png), [390px](../../test-results/org-chart-p9-1/after-department-390.png)
|
||
- [Full Composition](http://127.0.0.1:6061/?path=/story/orgchart--full-composition): [1920px](../../test-results/org-chart-p9-1/after-fixed-1920.png), [1440px](../../test-results/org-chart-p9-1/after-fixed-1440.png), [390px](../../test-results/org-chart-p9-1/after-fixed-390.png)
|
||
- 수정 전 캡처는 같은 결과 폴더의 `before-*.png`로 보존.
|