diff --git a/docs/org-chart/commit-preparation-p5-1a.txt b/docs/org-chart/commit-preparation-p5-1a.txt new file mode 100644 index 0000000..d587441 --- /dev/null +++ b/docs/org-chart/commit-preparation-p5-1a.txt @@ -0,0 +1,407 @@ +HMDesign OrgChart P5-1A Commit Preparation +Branch: feature/orgchart-package +HEAD / live remote main + feature: d18e3c33801e165e17b6d971e2f6198eed483c3c +Origin: https://gitea.hmac.kr/b25027/HMDesign.git +Stage / Commit / Push / Merge: NOT EXECUTED + +BASELINE P0-P5-0: 163 files (2 modified tracked + 161 untracked) +All stage labels are historical accumulated work, not Git commits. Individual P0/P1/P2 phase file ownership cannot be reconstructed from HEAD alone. + +docs/org-chart/README.md +docs/org-chart/architecture.md +docs/org-chart/card-design-stage1.md +docs/org-chart/card-design-stage2.md +docs/org-chart/data-contract.md +docs/org-chart/framework-integration.md +docs/org-chart/implementation-plan.md +docs/org-chart/implementation-report-p1.md +docs/org-chart/implementation-report-p2.md +docs/org-chart/implementation-report-p3.1.md +docs/org-chart/implementation-report-p3.2.md +docs/org-chart/implementation-report-p3.md +docs/org-chart/implementation-report-v0.1.md +docs/org-chart/integration.md +docs/org-chart/quality-review-p1.md +docs/org-chart/react-integration-report-v0.1.md +docs/org-chart/standalone-components-p1.md +docs/org-chart/ui-composition.md +examples/org-chart-react/README.md +examples/org-chart-react/app.tsx +examples/org-chart-react/index.css +examples/org-chart-react/index.html +examples/org-chart-react/p1.css +examples/org-chart-react/p1.html +examples/org-chart-react/p1.tsx +examples/org-chart-react/verify-boundaries.mjs +examples/org-chart-react/verify-package.mjs +examples/org-chart-react/verify.mjs +examples/org-chart-react/vite.config.ts +examples/org-chart/app.js +examples/org-chart/audit-quality-pixels.py +examples/org-chart/classic.html +examples/org-chart/create-business-card-assets.py +examples/org-chart/create-fixtures.mjs +examples/org-chart/create-p1-fixture.mjs +examples/org-chart/data-p1.json +examples/org-chart/data-v1.json +examples/org-chart/data-v2.json +examples/org-chart/demo.css +examples/org-chart/index.html +examples/org-chart/p1-app.js +examples/org-chart/p1-classic.html +examples/org-chart/p1.css +examples/org-chart/p1.html +examples/org-chart/prepare.mjs +examples/org-chart/serve.mjs +examples/org-chart/verify-card-content.mjs +examples/org-chart/verify-card-design.mjs +examples/org-chart/verify-final-card-check.mjs +examples/org-chart/verify-final-logo-check.mjs +examples/org-chart/verify-final-status-check.mjs +examples/org-chart/verify-guard-p1.mjs +examples/org-chart/verify-p1.mjs +examples/org-chart/verify-p2.mjs +examples/org-chart/verify-p3.1.mjs +examples/org-chart/verify-p3.2.mjs +examples/org-chart/verify-p3.mjs +examples/org-chart/verify-package.mjs +examples/org-chart/verify-quality-boundaries.mjs +examples/org-chart/verify-quality-p1.mjs +examples/org-chart/verify.mjs +packages/org-chart-react/README.md +packages/org-chart-react/build.mjs +packages/org-chart-react/package.json +packages/org-chart-react/src/OrgChart.tsx +packages/org-chart-react/src/index.ts +packages/org-chart-react/src/types.ts +packages/org-chart-react/tsconfig.build.json +packages/org-chart-react/tsconfig.json +packages/org-chart/README.md +packages/org-chart/build.mjs +packages/org-chart/package.json +packages/org-chart/src/assets/affiliations/README.md +packages/org-chart/src/assets/affiliations/baron.png +packages/org-chart/src/assets/affiliations/halla.png +packages/org-chart/src/assets/affiliations/hanmac.png +packages/org-chart/src/assets/affiliations/jangheon-industry.png +packages/org-chart/src/assets/affiliations/jangheon.png +packages/org-chart/src/assets/affiliations/ptc.png +packages/org-chart/src/assets/affiliations/saman.png +packages/org-chart/src/assets/cards/README.md +packages/org-chart/src/assets/cards/경영기획팀-sm.svg +packages/org-chart/src/assets/cards/경영기획팀.svg +packages/org-chart/src/assets/cards/대표자.svg +packages/org-chart/src/assets/cards/디자인기획팀-sm.svg +packages/org-chart/src/assets/cards/디자인기획팀.svg +packages/org-chart/src/assets/cards/사업관리팀-sm.svg +packages/org-chart/src/assets/cards/사업관리팀.svg +packages/org-chart/src/assets/cards/솔루션통합팀-sm.svg +packages/org-chart/src/assets/cards/솔루션통합팀.svg +packages/org-chart/src/assets/cards/인재성장팀-sm.svg +packages/org-chart/src/assets/cards/인재성장팀.svg +packages/org-chart/src/assets/cards/통합시스템 디비전-sm.svg +packages/org-chart/src/assets/cards/통합시스템 디비전.svg +packages/org-chart/src/assets/person-placeholder.svg +packages/org-chart/src/assets/workdesk/1-8-4x-1@2x.png +packages/org-chart/src/assets/workdesk/Frame2@3x.png +packages/org-chart/src/assets/workdesk/Group.svg +packages/org-chart/src/assets/workdesk/README.md +packages/org-chart/src/assets/workdesk/bg_main.png +packages/org-chart/src/assets/workdesk/bg_sky.png +packages/org-chart/src/assets/workdesk/team-arrow-blue-purple.png +packages/org-chart/src/assets/workdesk/team-arrow-blue-short.png +packages/org-chart/src/assets/workdesk/team-arrow-purple-teal.png +packages/org-chart/src/assets/workdesk/team-arrow-teal-green.png +packages/org-chart/src/company-color-presets.test.ts +packages/org-chart/src/company-color-presets.ts +packages/org-chart/src/components.ts +packages/org-chart/src/core/affiliation-bar.ts +packages/org-chart/src/core/affiliation-mark.ts +packages/org-chart/src/core/affiliation-summary.ts +packages/org-chart/src/core/contrast.test.ts +packages/org-chart/src/core/contrast.ts +packages/org-chart/src/core/department-card-assets.ts +packages/org-chart/src/core/department-colors.ts +packages/org-chart/src/core/employee-card.ts +packages/org-chart/src/core/employee-info-dialog.ts +packages/org-chart/src/core/engine.ts +packages/org-chart/src/core/index.ts +packages/org-chart/src/core/logo-legend.ts +packages/org-chart/src/core/org-chart-content.ts +packages/org-chart/src/core/org-chart-tree.ts +packages/org-chart/src/core/organization-totals.ts +packages/org-chart/src/core/person-name-overflow.ts +packages/org-chart/src/core/position-summary.ts +packages/org-chart/src/core/render.ts +packages/org-chart/src/core/representative-card-asset.ts +packages/org-chart/src/core/status-summary.ts +packages/org-chart/src/core/style-presets.ts +packages/org-chart/src/core/types.ts +packages/org-chart/src/core/vendor.d.ts +packages/org-chart/src/core/workdesk-artwork.ts +packages/org-chart/src/core/workdesk-layout.ts +packages/org-chart/src/data/content-selectors.test.ts +packages/org-chart/src/data/content-selectors.ts +packages/org-chart/src/data/data.test.ts +packages/org-chart/src/data/index.ts +packages/org-chart/src/data/normalize.ts +packages/org-chart/src/data/snapshot.ts +packages/org-chart/src/data/source.ts +packages/org-chart/src/data/summary.ts +packages/org-chart/src/data/types.ts +packages/org-chart/src/data/validate.ts +packages/org-chart/src/index.ts +packages/org-chart/src/styles/design-tokens.css +packages/org-chart/src/styles/employee-card.css +packages/org-chart/src/styles/employee-info-dialog.css +packages/org-chart/src/styles/org-chart-content.css +packages/org-chart/src/styles/org-chart-p3-summary.css +packages/org-chart/src/styles/org-chart-readonly.css +packages/org-chart/src/styles/org-chart.css +packages/org-chart/src/styles/summary-sections.css +packages/org-chart/test.mjs +packages/org-chart/tsconfig.build.json +packages/org-chart/tsconfig.json +src/org-chart/core-component-preview.tsx +src/org-chart/org-chart-cards.stories.tsx +src/org-chart/org-chart-p1.stories.tsx +src/org-chart/org-chart-stories.css +src/org-chart/org-chart-summary.stories.tsx +src/org-chart/org-chart.stories.tsx +package.json +package-lock.json + +P5-1A CHANGES TO EXISTING BASELINE: 9 + +packages/org-chart-react/README.md +packages/org-chart-react/src/OrgChart.tsx +packages/org-chart/README.md +packages/org-chart/build.mjs +packages/org-chart/src/core/index.ts +packages/org-chart/src/core/render.ts +packages/org-chart/src/core/types.ts +packages/org-chart/src/index.ts +packages/org-chart/src/styles/org-chart.css + +P5-1A NEW FILES: 9 + +examples/org-chart/data-expanded.json +examples/org-chart/verify-p5-1a.mjs +packages/org-chart/src/core/expanded-content.ts +packages/org-chart/src/core/expanded-layout.test.ts +packages/org-chart/src/core/expanded-layout.ts +packages/org-chart/src/styles/org-chart-expanded.css +src/org-chart/org-chart-expanded.stories.tsx +docs/org-chart/implementation-report-p5-1a.md +docs/org-chart/commit-preparation-p5-1a.txt + +CURRENT ENTIRE UNCOMMITTED FILE LIST: 172 + + M package-lock.json + M package.json +?? docs/org-chart/README.md +?? docs/org-chart/architecture.md +?? docs/org-chart/card-design-stage1.md +?? docs/org-chart/card-design-stage2.md +?? docs/org-chart/data-contract.md +?? docs/org-chart/framework-integration.md +?? docs/org-chart/implementation-plan.md +?? docs/org-chart/implementation-report-p1.md +?? docs/org-chart/implementation-report-p2.md +?? docs/org-chart/implementation-report-p3.1.md +?? docs/org-chart/implementation-report-p3.2.md +?? docs/org-chart/implementation-report-p3.md +?? docs/org-chart/implementation-report-v0.1.md +?? docs/org-chart/integration.md +?? docs/org-chart/quality-review-p1.md +?? docs/org-chart/react-integration-report-v0.1.md +?? docs/org-chart/standalone-components-p1.md +?? docs/org-chart/ui-composition.md +?? examples/org-chart-react/README.md +?? examples/org-chart-react/app.tsx +?? examples/org-chart-react/index.css +?? examples/org-chart-react/index.html +?? examples/org-chart-react/p1.css +?? examples/org-chart-react/p1.html +?? examples/org-chart-react/p1.tsx +?? examples/org-chart-react/verify-boundaries.mjs +?? examples/org-chart-react/verify-package.mjs +?? examples/org-chart-react/verify.mjs +?? examples/org-chart-react/vite.config.ts +?? examples/org-chart/app.js +?? examples/org-chart/audit-quality-pixels.py +?? examples/org-chart/classic.html +?? examples/org-chart/create-business-card-assets.py +?? examples/org-chart/create-fixtures.mjs +?? examples/org-chart/create-p1-fixture.mjs +?? examples/org-chart/data-expanded.json +?? examples/org-chart/data-p1.json +?? examples/org-chart/data-v1.json +?? examples/org-chart/data-v2.json +?? examples/org-chart/demo.css +?? examples/org-chart/index.html +?? examples/org-chart/p1-app.js +?? examples/org-chart/p1-classic.html +?? examples/org-chart/p1.css +?? examples/org-chart/p1.html +?? examples/org-chart/prepare.mjs +?? examples/org-chart/serve.mjs +?? examples/org-chart/verify-card-content.mjs +?? examples/org-chart/verify-card-design.mjs +?? examples/org-chart/verify-final-card-check.mjs +?? examples/org-chart/verify-final-logo-check.mjs +?? examples/org-chart/verify-final-status-check.mjs +?? examples/org-chart/verify-guard-p1.mjs +?? examples/org-chart/verify-p1.mjs +?? examples/org-chart/verify-p2.mjs +?? examples/org-chart/verify-p3.1.mjs +?? examples/org-chart/verify-p3.2.mjs +?? examples/org-chart/verify-p3.mjs +?? examples/org-chart/verify-p5-1a.mjs +?? examples/org-chart/verify-package.mjs +?? examples/org-chart/verify-quality-boundaries.mjs +?? examples/org-chart/verify-quality-p1.mjs +?? examples/org-chart/verify.mjs +?? packages/org-chart-react/README.md +?? packages/org-chart-react/build.mjs +?? packages/org-chart-react/package.json +?? packages/org-chart-react/src/OrgChart.tsx +?? packages/org-chart-react/src/index.ts +?? packages/org-chart-react/src/types.ts +?? packages/org-chart-react/tsconfig.build.json +?? packages/org-chart-react/tsconfig.json +?? packages/org-chart/README.md +?? packages/org-chart/build.mjs +?? packages/org-chart/package.json +?? packages/org-chart/src/assets/affiliations/README.md +?? packages/org-chart/src/assets/affiliations/baron.png +?? packages/org-chart/src/assets/affiliations/halla.png +?? packages/org-chart/src/assets/affiliations/hanmac.png +?? packages/org-chart/src/assets/affiliations/jangheon-industry.png +?? packages/org-chart/src/assets/affiliations/jangheon.png +?? packages/org-chart/src/assets/affiliations/ptc.png +?? packages/org-chart/src/assets/affiliations/saman.png +?? packages/org-chart/src/assets/cards/README.md +?? packages/org-chart/src/assets/cards/경영기획팀-sm.svg +?? packages/org-chart/src/assets/cards/경영기획팀.svg +?? packages/org-chart/src/assets/cards/대표자.svg +?? packages/org-chart/src/assets/cards/디자인기획팀-sm.svg +?? packages/org-chart/src/assets/cards/디자인기획팀.svg +?? packages/org-chart/src/assets/cards/사업관리팀-sm.svg +?? packages/org-chart/src/assets/cards/사업관리팀.svg +?? packages/org-chart/src/assets/cards/솔루션통합팀-sm.svg +?? packages/org-chart/src/assets/cards/솔루션통합팀.svg +?? packages/org-chart/src/assets/cards/인재성장팀-sm.svg +?? packages/org-chart/src/assets/cards/인재성장팀.svg +?? packages/org-chart/src/assets/cards/통합시스템 디비전-sm.svg +?? packages/org-chart/src/assets/cards/통합시스템 디비전.svg +?? packages/org-chart/src/assets/person-placeholder.svg +?? packages/org-chart/src/assets/workdesk/1-8-4x-1@2x.png +?? packages/org-chart/src/assets/workdesk/Frame2@3x.png +?? packages/org-chart/src/assets/workdesk/Group.svg +?? packages/org-chart/src/assets/workdesk/README.md +?? packages/org-chart/src/assets/workdesk/bg_main.png +?? packages/org-chart/src/assets/workdesk/bg_sky.png +?? packages/org-chart/src/assets/workdesk/team-arrow-blue-purple.png +?? packages/org-chart/src/assets/workdesk/team-arrow-blue-short.png +?? packages/org-chart/src/assets/workdesk/team-arrow-purple-teal.png +?? packages/org-chart/src/assets/workdesk/team-arrow-teal-green.png +?? packages/org-chart/src/company-color-presets.test.ts +?? packages/org-chart/src/company-color-presets.ts +?? packages/org-chart/src/components.ts +?? packages/org-chart/src/core/affiliation-bar.ts +?? packages/org-chart/src/core/affiliation-mark.ts +?? packages/org-chart/src/core/affiliation-summary.ts +?? packages/org-chart/src/core/contrast.test.ts +?? packages/org-chart/src/core/contrast.ts +?? packages/org-chart/src/core/department-card-assets.ts +?? packages/org-chart/src/core/department-colors.ts +?? packages/org-chart/src/core/employee-card.ts +?? packages/org-chart/src/core/employee-info-dialog.ts +?? packages/org-chart/src/core/engine.ts +?? packages/org-chart/src/core/expanded-content.ts +?? packages/org-chart/src/core/expanded-layout.test.ts +?? packages/org-chart/src/core/expanded-layout.ts +?? packages/org-chart/src/core/index.ts +?? packages/org-chart/src/core/logo-legend.ts +?? packages/org-chart/src/core/org-chart-content.ts +?? packages/org-chart/src/core/org-chart-tree.ts +?? packages/org-chart/src/core/organization-totals.ts +?? packages/org-chart/src/core/person-name-overflow.ts +?? packages/org-chart/src/core/position-summary.ts +?? packages/org-chart/src/core/render.ts +?? packages/org-chart/src/core/representative-card-asset.ts +?? packages/org-chart/src/core/status-summary.ts +?? packages/org-chart/src/core/style-presets.ts +?? packages/org-chart/src/core/types.ts +?? packages/org-chart/src/core/vendor.d.ts +?? packages/org-chart/src/core/workdesk-artwork.ts +?? packages/org-chart/src/core/workdesk-layout.ts +?? packages/org-chart/src/data/content-selectors.test.ts +?? packages/org-chart/src/data/content-selectors.ts +?? packages/org-chart/src/data/data.test.ts +?? packages/org-chart/src/data/index.ts +?? packages/org-chart/src/data/normalize.ts +?? packages/org-chart/src/data/snapshot.ts +?? packages/org-chart/src/data/source.ts +?? packages/org-chart/src/data/summary.ts +?? packages/org-chart/src/data/types.ts +?? packages/org-chart/src/data/validate.ts +?? packages/org-chart/src/index.ts +?? packages/org-chart/src/styles/design-tokens.css +?? packages/org-chart/src/styles/employee-card.css +?? packages/org-chart/src/styles/employee-info-dialog.css +?? packages/org-chart/src/styles/org-chart-content.css +?? packages/org-chart/src/styles/org-chart-expanded.css +?? packages/org-chart/src/styles/org-chart-p3-summary.css +?? packages/org-chart/src/styles/org-chart-readonly.css +?? packages/org-chart/src/styles/org-chart.css +?? packages/org-chart/src/styles/summary-sections.css +?? packages/org-chart/test.mjs +?? packages/org-chart/tsconfig.build.json +?? packages/org-chart/tsconfig.json +?? src/org-chart/core-component-preview.tsx +?? src/org-chart/org-chart-cards.stories.tsx +?? src/org-chart/org-chart-expanded.stories.tsx +?? src/org-chart/org-chart-p1.stories.tsx +?? src/org-chart/org-chart-stories.css +?? src/org-chart/org-chart-summary.stories.tsx +?? src/org-chart/org-chart.stories.tsx +?? docs/org-chart/implementation-report-p5-1a.md +?? docs/org-chart/commit-preparation-p5-1a.txt + +REQUIRED SOURCE DEPENDENCIES +- package.json + package-lock.json: workspace package registrations and orgchart6.0.0 pinned dependency tree. +- packages/org-chart/: manifest, build.mjs, tsconfigs, all runtime src/data/core/styles/assets; public exports refer to generated dist. +- packages/org-chart-react/: manifest, build.mjs, tsconfigs, src; requires Core public dist declarations first. +- src/org-chart/ and referenced examples/org-chart/data-p1.json + data-expanded.json; original CoreComponentPreview depends on Core internal baseline source. +- Vanilla examples need prepare/serve + app/HTML/CSS/JSON; React examples need TSX/HTML/CSS/vite.config. +- verify*.mjs, *.test.ts, audit/asset-generation scripts are authored verification/reproduction source, not generated caches. +- Existing HM UI exports and Storybook shared preview require their existing built public dist; no source changes or package installation in this task. + +DO NOT INCLUDE GENERATED OUTPUTS / CACHES +packages/org-chart/dist/ +packages/org-chart-react/dist/ +examples/org-chart/dist/ +examples/org-chart-react/dist/ +storybook-static/ +test-results/ (preserve local snapshots, JSON, captures; no forced add) +node_modules/ +_local/ +playwright-report/ +coverage/ +*.log +*.tsbuildinfo +*.zip +.env and private local settings + +RECOMMENDED COMMIT GROUPS AFTER USER APPROVAL +1. P0-P5-0 baseline: the 163-file starting source snapshot, manifests/lock, packages/assets/styles, examples/fixtures/Storybook/docs/authored verification. +2. P5-1A: the 9 modified baseline files + 9 new files listed above. +Several baseline files are still untracked: staging current file paths cannot separate their old/new contents. +Starting source snapshot: test-results/org-chart-p5-1a/baseline-source/ +Starting SHA256 inventory: test-results/org-chart-p5-1a/baseline-files.json +Use that captured baseline and an exact reviewed P5-1A patch if two commits are required. +If snapshot data is unavailable later, prefer one reviewed accumulated OrgChart commit over inventing historical phase boundaries. +A P5-1A-only commit directly against current HEAD omits Core/cards/JSON/React/workspace registrations and is incomplete. +Use explicit file selection and staged diff review. Do not use git add -A. Recheck live remote before later commit/push. diff --git a/docs/org-chart/implementation-report-p5-1a.md b/docs/org-chart/implementation-report-p5-1a.md new file mode 100644 index 0000000..10b4664 --- /dev/null +++ b/docs/org-chart/implementation-report-p5-1a.md @@ -0,0 +1,74 @@ +# HMDesign OrgChart P5-1A 구현 및 커밋 준비 결과 + +RESULT: **PASS — P5-1A 요청 범위**. Fixed/Auto 렌더링 경계를 분리하고 확장형 초기 Storybook 화면을 추가했다. 자동 재귀 배치, 접기·펼치기, Zoom/Pan은 구현하지 않았다. + +## 작업 환경과 시간 + +- 경로: `D:\디자인시스템\HMDesign-OrgChart` +- 범위: Core·React 패키지와 요청된 Storybook 초기 화면. 운영 main 수정 없음. +- 브랜치: `feature/orgchart-package` +- HEAD: `d18e3c33801e165e17b6d971e2f6198eed483c3c` +- Origin: `https://gitea.hmac.kr/b25027/HMDesign.git` +- 실제 원격 `main`·`feature/orgchart-package` SHA 조회 결과: 위 HEAD와 동일. +- Started At: 2026-10-12 17:23:00 KST +- Completed At: 2026-10-12 17:42:41 KST +- Actual Duration: 19분 41초 +- Estimated Duration: 약 45분 (분석 10분, 구현 20분, 검증·커밋 준비 15분) +- Variance: 예상보다 25분 19초 짧음 + +## 구현 결과 + +공개 `OrgChartOptions.layoutMode?: 'fixed' | 'auto'`를 추가했다. 생략 시 `fixed`이며 기존 `displayMode`와 독립적이다. Fixed는 기존 `createOrgChartContent`, Workdesk 좌표·아트워크·크기 맞춤 경로를 그대로 사용한다. 기존 세 사용자 Story 파일도 시작 스냅샷과 바이트 단위로 동일하다. + +Auto는 `expandedPreviewRoots` → 공유 `engineTree`/dabeng engine → `createExpandedOrgChartContent` 경계로 초기 그룹을 표시한다. 정규화된 실제 hierarchy의 직계 그룹과 원본 `parentId`를 보존한다. 하위 데이터는 삭제하지 않고 이번 표시만 보류하며 집계에는 남긴다. 새로운 presenter는 `.hm-orgchart-expanded` 아래에서 일반 흐름·줄바꿈·스크롤을 사용한다. Fixed Stage, scale observer, 고정 좌표는 사용하지 않는다. + +직원·대표자 카드는 기존 `createEmployeeCard`, 승인 SVG 대형/소형/대표자 자산, 사진 없음 아이콘, Noto Sans KR 및 Typography를 재사용한다. 초기 fixture는 대표자와 기존 부서 ID의 1Depth 그룹 3개, 조직장 3명·직원 6명을 표시한다. 대표자 146×74, `대표이사` / `홍 길 동`, 뱃지·상태·속성 wrapper 0개를 확인했다. 대형 카드 146×68, 소형 카드 108×52도 확인했다. 소형 카드 재사용은 2Depth 자동 계층 배치 완료를 뜻하지 않는다. + +회사 설정 `companyId`는 Auto에서만 `getCompanyColorPreset`을 조회한다. 기본값 `hanmac`; 미등록 ID는 TypeError로 거부한다. Fixed는 회사 옵션을 무시하고 조직별 Gradient를 유지한다. 실제 ID와 Main은 `hanmac` #CB2E28, `saman` #F08300, `jangheon-industry` #4580A6, `jangheon` #1D418D, `ptc` #84338E, `halla` #0068B7, `baron` #0C367F다. 보조 컬러 전체는 기존 프리셋에서 조회하며 노드의 indexed secondary 변수로 연결한다. 기존 프리셋 파일은 변경하지 않았다. + +React는 `layoutMode`·`companyId`를 동일 Core에 전달하고 설정 변경 시 기존 lifecycle 계약으로 인스턴스를 재생성한다. 데이터 검증·JSON Source·엔진·카드·팝업·update/reload/destroy는 Vanilla와 공유한다. React나 Story에 레이아웃 알고리즘을 구현하지 않았다. Auto 초기 preview의 카드 표시 정책과 후속 기능 보류는 명시적이며 `displayMode` 공개 값은 변경하지 않는다. + +## Storybook과 재사용 판단 + +- [Expanded OrgChart](http://127.0.0.1:6052/?path=/story/orgchart--expanded-org-chart) +- [직접 화면](http://127.0.0.1:6052/iframe.html?id=orgchart--expanded-org-chart&viewMode=story) +- 기존 `Logo · Personnel Summary`, `Department Colors`, `Full Composition`을 보존하고 네 번째 공개 화면을 추가했다. 내부 Story ID·태그는 유지했다. +- 회사 선택에는 실제 공개 HM `Label`, `Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`을 렌더링한다. Label ID와 control의 접근성 이름을 연결했다. +- FilterBar 미사용: 목록 검색·조회 조건 요구가 없고 단일 preset 선택만 필요하므로 기존 Select composition을 사용했다. +- 페이지 Navigation 미적용: 요청된 Component Storybook preview이며 신규 업무 페이지·GNB/LNB/Dashboard를 만들지 않았다. +- 팝업은 기존 Core native dialog를 재사용하며 Enter·Tab·Escape 및 카드 focus 복귀를 확인했다. + +## 변경 범위 통합 검증 + +- Core Typecheck·Build: PASS (`npm.cmd run typecheck:org-chart`, `npm.cmd run build:org-chart`) +- React Typecheck·Build: PASS (`npm.cmd run typecheck:org-chart-react`, `npm.cmd run build:org-chart-react`) +- Storybook 포함 앱 Typecheck: PASS (`node node_modules/typescript/bin/tsc -p tsconfig.app.json --incremental`) +- 집중 단위 테스트: **4/4 PASS**, hierarchy 보존·독립 root·기본 호환성·옵션 오류 경계. +- 집중 브라우저 검증: **89/89 PASS**, 콘솔 오류·경고 0. [원본 JSON](../../test-results/org-chart-p5-1a/browser.json), [검증 소스](../../examples/org-chart/verify-p5-1a.mjs). +- 기존 빌드를 `baseline-dist`에 보존해 Fixed 기본값 및 명시적 Fixed의 카드 좌표·자산·내용·Typography·헤더 Gradient·집계와 팝업을 비교했다. 이번 최소 회귀 범위에서 변화 없음. +- 실제 React/Vanilla의 카드·자산·폰트가 일치했다. 7개 회사 선택 후 Main·보조 컬러 연결을 확인했다. Auto update/reload/destroy의 stale DOM·중복 없음, 후속 3Depth 데이터는 보존되며 아직 배치하지 않음을 확인했다. +- 실제 신규 Storybook을 390/768/1280/1440px에서 검사했다. 페이지 가로 넘침·카드 겹침 없음; 작은 폭에서 그룹이 일반 흐름으로 줄바꿈된다. 문서·Core viewport의 client/scroll 크기를 원본 JSON에 기록했다. +- `git diff --check`: PASS. P5-1A 대부분이 untracked이므로 시작 스냅샷 대비 별도 변경 목록과 공백 검사를 함께 기록한다. +- 최종 소스 리뷰: Fixed 분기·lifecycle·CSS 격리·요구 범위에서 수정이 필요한 버그 없음. + +Guard는 최초 통합 Story 검사에서 기존 private Core 참조의 동적 토큰을 해석하지 못해 TOKEN-001 FAIL을 기록했다. 진단을 [보존](../../test-results/org-chart-p5-1a/guard-initial-truncated.txt)했고 기존 코드를 임의 수정하지 않았다. 신규 화면을 독립 public-API Story로 분리한 후 해당 변경 파일만 PARTIAL 검사했다. [최종 Guard](../../test-results/org-chart-p5-1a/guard-expanded.json)는 원본 status **PASS**, staticStatus **PASS**, runtimeStatus **NOT VERIFIED**다. + +CSS styleEvidence: STATIC **PASS**, RUNTIME **NOT VERIFIED**, DESIGN_INTENT **NOT VERIFIED**, FINAL **NOT VERIFIED**. [결합 증거](../../test-results/org-chart-p5-1a/guard-combined.json)는 해시 연결 `linked=true`, 정적 PASS이지만 Storybook profile의 Production `--result` bootstrap 증명 및 위치별 CSS 승인 증거가 없어 **NOT VERIFIED**다. styleVerification도 STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT NOT VERIFIED / FINAL NOT VERIFIED다. 실제 브라우저 89 PASS로 원본 Guard나 디자인 의도 승인을 덮어쓰지 않는다. 초기 디자인의 사용자 최종 승인은 미검증이다. + +## 변경 파일과 커밋 준비 + +시작 기존 P0~P5-0 변경은 **163개**(tracked 수정 2개 + untracked 161개)였다. 현재 전체 미커밋 파일은 **172개**다. P5-1A는 기존 파일 수정 9개와 신규 9개이며 삭제된 baseline 파일은 없다. [전체·단계별 파일 목록, 의존성, 제외 대상과 추천 커밋 분리](commit-preparation-p5-1a.txt)를 제공한다. + +기존 파일 수정: Core `README.md`, `build.mjs`, `src/index.ts`, `src/core/index.ts`, `src/core/render.ts`, `src/core/types.ts`, `src/styles/org-chart.css`; React `README.md`, `src/OrgChart.tsx`. + +신규: Core `src/core/expanded-content.ts`, `src/core/expanded-layout.ts`, `src/core/expanded-layout.test.ts`, `src/styles/org-chart-expanded.css`; `src/org-chart/org-chart-expanded.stories.tsx`; `examples/org-chart/data-expanded.json`, `examples/org-chart/verify-p5-1a.mjs`; 이 보고서와 `commit-preparation-p5-1a.txt`. + +HEAD에는 두 OrgChart 패키지 자체가 없으므로 P5-1A 파일만 단독 커밋하면 카드·프리셋·Core·wrapper·workspace 의존성이 누락된다. 권장 방식은 저장한 **163개 시작 소스 스냅샷으로 P0~P5-0 baseline 커밋**을 구성하고, 이후 **P5-1A 변경 커밋**을 분리하는 것이다. 현재 untracked 파일을 단순히 경로별 Stage하면 과거 내용과 P5-1A를 분리할 수 없다. 시작 스냅샷·SHA-256 목록은 `test-results/org-chart-p5-1a/baseline-source/`, `baseline-files.json`에 보존했다. 이후 승인 단계에서 정확한 patch·staged diff를 검토해야 한다. 과거 P0/P1별 소유 파일은 Git만으로 확정할 수 없다. + +`dist`, `storybook-static`, `test-results`, `node_modules`, `_local`, log/cache/tsbuildinfo는 커밋에서 제외한다. authored test·verify·asset 생성 소스는 임시 출력과 구분한다. 기존 미커밋 작업 및 과거 증거는 보존했다. **Stage·Commit·Push·Merge는 실행하지 않았다.** + +## 남은 항목과 NOT VERIFIED + +P5-1B: 동일 Depth 가로 배치, 부모 아래 하위 그룹 배치, 재귀 3Depth 이상, 조직 증가 시 재계산, 카드 겹침 방지 알고리즘. 접기·펼치기·Zoom/Pan은 후속 범위다. P5-1A의 일반 그룹 표시를 자동 배치 완성으로 판정하지 않았다. + +전체 과거 P2/P3 suite, Storybook 전체 production build, 임의 조직 데이터·모든 테마·다른 브라우저, 실기기 touch·스크린리더 발화·SSR/운영 연동, 최종 디자인 승인·CSS site별 결합 검증은 NOT VERIFIED다. P5-1B를 자동으로 시작하지 않았으며 사용자 검토를 기다린다. diff --git a/examples/org-chart/data-expanded.json b/examples/org-chart/data-expanded.json new file mode 100644 index 0000000..a1bcccc --- /dev/null +++ b/examples/org-chart/data-expanded.json @@ -0,0 +1,43 @@ +{ + "schemaVersion": "0.1-draft", + "organizations": [ + { "id": "general-planning", "parentId": null, "name": "총괄기획실", "type": "root", "leaderId": "expanded-representative", "displayOrder": 0 }, + { "id": "business-management", "parentId": "general-planning", "name": "사업관리", "type": "office", "leaderId": "expanded-leader-01", "displayOrder": 0 }, + { "id": "business-planning", "parentId": "general-planning", "name": "경영기획", "type": "office", "leaderId": "expanded-leader-02", "displayOrder": 1 }, + { "id": "talent-growth", "parentId": "general-planning", "name": "인재성장", "type": "office", "leaderId": "expanded-leader-03", "displayOrder": 2 } + ], + "employees": [ + { "id": "expanded-representative", "organizationId": "general-planning", "affiliationId": "hanmac", "name": "홍길동", "position": "대표이사", "jobTitle": "대표이사", "profileImage": null, "workStatus": "active" }, + { "id": "expanded-leader-01", "organizationId": "business-management", "affiliationId": "hanmac", "name": "이도윤", "position": "수석", "jobTitle": "팀장", "profileImage": null, "workStatus": "active" }, + { "id": "expanded-employee-01", "organizationId": "business-management", "affiliationId": "saman", "name": "김하린", "position": "책임", "jobTitle": null, "profileImage": null, "workStatus": "active" }, + { "id": "expanded-employee-02", "organizationId": "business-management", "affiliationId": "jangheon-industry", "name": "박서준", "position": "선임", "jobTitle": null, "profileImage": null, "workStatus": "active" }, + { "id": "expanded-leader-02", "organizationId": "business-planning", "affiliationId": "jangheon", "name": "정지우", "position": "수석", "jobTitle": "팀장", "profileImage": null, "workStatus": "active" }, + { "id": "expanded-employee-03", "organizationId": "business-planning", "affiliationId": "ptc", "name": "최유진", "position": "책임", "jobTitle": null, "profileImage": null, "workStatus": "active" }, + { "id": "expanded-employee-04", "organizationId": "business-planning", "affiliationId": "hanmac", "name": "윤서아", "position": "연구", "jobTitle": null, "profileImage": null, "workStatus": "active" }, + { "id": "expanded-leader-03", "organizationId": "talent-growth", "affiliationId": "halla", "name": "강민준", "position": "수석", "jobTitle": "팀장", "profileImage": null, "workStatus": "active" }, + { "id": "expanded-employee-05", "organizationId": "talent-growth", "affiliationId": "baron", "name": "한예린", "position": "책임", "jobTitle": null, "profileImage": null, "workStatus": "active" }, + { "id": "expanded-employee-06", "organizationId": "talent-growth", "affiliationId": "saman", "name": "오하준", "position": "선임", "jobTitle": null, "profileImage": null, "workStatus": "active" } + ], + "affiliations": [ + { "id": "hanmac", "name": "(주)한맥기술" }, + { "id": "saman", "name": "(주)삼안" }, + { "id": "jangheon", "name": "(주)장헌" }, + { "id": "jangheon-industry", "name": "장헌산업" }, + { "id": "ptc", "name": "PTC" }, + { "id": "halla", "name": "한라산업개발" }, + { "id": "baron", "name": "바론컨설턴트" } + ], + "relations": [], + "presentation": { + "title": "확장형 조직도 · P5-1A", + "description": "대표자와 1Depth 그룹 초기 표시 · 자동 계층 배치 미구현 · 가상 직원 정보", + "hubText": null, + "groups": { "showEmployees": true, "showSummary": false, "showDispatched": false, "showOnLeave": false, "showAffiliations": false }, + "organizationOrder": ["general-planning", "business-management", "business-planning", "talent-growth"] + }, + "metadata": { + "asOfDate": "2026-10-12", + "dataVersion": "p5-1a-expanded-initial-v1", + "updateNote": "P5-1A 초기 1Depth 구성 · 운영 HR 정보와 무관한 가상 데이터" + } +} diff --git a/examples/org-chart/verify-p5-1a.mjs b/examples/org-chart/verify-p5-1a.mjs new file mode 100644 index 0000000..389d269 --- /dev/null +++ b/examples/org-chart/verify-p5-1a.mjs @@ -0,0 +1,372 @@ +import http from 'node:http'; +import path from 'node:path'; +import fs from 'node:fs/promises'; +import { fileURLToPath, pathToFileURL } from 'node:url'; + +// P5-1A only: preserve previous suites and the baseline-files.json snapshot. +// Copy the pre-change public Core dist to baseline-dist before rebuilding. +const root = fileURLToPath(new URL('../../', import.meta.url)); +const output = path.join(root, 'test-results/org-chart-p5-1a'); +const storyOrigin = process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6052'; +const { chromium } = await import(pathToFileURL(process.env.ORGCHART_PLAYWRIGHT_MODULE + ?? 'C:/Users/user/.cache/codex-runtimes/codex-primary-runtime/dependencies/node/node_modules/playwright/index.mjs').href); +const fixedFixture = JSON.parse(await fs.readFile(path.join(root, 'examples/org-chart/data-p1.json'), 'utf8')); +const expandedFixture = JSON.parse(await fs.readFile(path.join(root, 'examples/org-chart/data-expanded.json'), 'utf8')); +const presets = [ + { id: 'hanmac', name: '한맥기술', primary: '#CB2E28', secondary: ['#1D4289'] }, + { id: 'saman', name: '삼안', primary: '#F08300', secondary: ['#6D6C6C'] }, + { id: 'jangheon-industry', name: '장헌산업', primary: '#4580A6', secondary: ['#92BED4'] }, + { id: 'jangheon', name: '장헌', primary: '#1D418D', secondary: ['#AE232A'] }, + { id: 'ptc', name: '피티씨', primary: '#84338E', secondary: ['#F7AF00', '#0066B5'] }, + { id: 'halla', name: '한라산업개발', primary: '#0068B7', secondary: ['#231815'] }, + { id: 'baron', name: '바론컨설턴트', primary: '#0C367F', secondary: [] }, +]; +const results = [], measurements = [], errors = [], warnings = []; +const check = (pass, name, detail) => results.push({ name, status: pass ? 'PASS' : 'FAIL', ...(detail === undefined ? {} : { detail }) }); +const near = (a, b) => Number.isFinite(a) && Number.isFinite(b) && Math.abs(a - b) <= 0.35; +const rgb = hex => `rgb(${[1, 3, 5].map(offset => parseInt(hex.slice(offset, offset + 2), 16)).join(', ')})`; +const expectedCompanyIds = presets.map(preset => preset.id); +const mime = { '.html': 'text/html', '.js': 'text/javascript', '.mjs': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.ttf': 'font/ttf', '.svg': 'image/svg+xml', '.png': 'image/png' }; +const shellHtml = '
'; +await fs.mkdir(output, { recursive: true }); +const server = http.createServer(async (request, response) => { + try { + const url = new URL(request.url, 'http://127.0.0.1'); + if (url.pathname === '/__p51a') return response.writeHead(200, { 'Content-Type': 'text/html' }).end(shellHtml); + const pathname = decodeURIComponent(url.pathname); + const file = path.resolve(root, '.' + (pathname.startsWith('/fonts/') ? '/public' + pathname : pathname)); + const relative = path.relative(root, file); + if (relative.startsWith('..') || path.isAbsolute(relative)) return response.writeHead(403).end(); + const bytes = await fs.readFile(file); + response.writeHead(200, { 'Content-Type': mime[path.extname(file)] ?? 'application/octet-stream' }); + response.end(bytes); + } catch { response.writeHead(404).end(); } +}); +await new Promise(resolve => server.listen(0, '127.0.0.1', resolve)); +const origin = `http://127.0.0.1:${server.address().port}`; +const browser = await chromium.launch({ executablePath: process.env.ORGCHART_CHROME ?? 'C:/Program Files/Google/Chrome/Application/chrome.exe', headless: true }); + +async function newPage(name, viewport = { width: 1440, height: 900 }) { + const page = await browser.newPage({ viewport }); + page.on('pageerror', error => errors.push({ name, type: 'pageerror', message: error.message })); + page.on('console', message => { + if (message.type() === 'error') errors.push({ name, type: 'console', message: message.text() }); + if (message.type() === 'warning') warnings.push({ name, message: message.text() }); + }); + return page; +} +async function ready(page, mode) { + await page.waitForFunction(expected => { + const shadow = document.querySelector('.hm-orgchart-host')?.shadowRoot; + const content = shadow?.querySelector(expected === 'auto' ? '.hm-orgchart-expanded' : '.hm-orgchart-composition'); + return content?.querySelector('.hm-orgchart-employee') && [...shadow.querySelectorAll('link[rel=stylesheet]')].every(link => link.sheet); + }, mode, { timeout: 25000 }); + await page.evaluate(async () => { + await document.fonts.load('600 24px "Noto Sans KR"', '홍 길 동'); + await document.fonts.ready; + const shadow = document.querySelector('.hm-orgchart-host').shadowRoot; + const images = [...shadow.querySelectorAll('.hm-orgchart-employee img')]; + for (const image of images) image.loading = 'eager'; + await Promise.all(images.map(image => image.decode().catch(() => {}))); + await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))); + }); +} +async function mount(page, { baseline = false, fixture = expandedFixture, options = {} } = {}) { + await page.goto(`${origin}/__p51a`); + await page.evaluate(async ({ base, fixture, options }) => { + window.hmModule = await import(`${base}/index.js`); + window.fixture = structuredClone(fixture); + window.handle = window.hmModule.createOrgChart({ + container: document.getElementById('chart'), + dataSource: new window.hmModule.JsonOrgChartDataSource(fixture), + stylesheetUrls: { engine: `${base}/engine.css`, core: `${base}/style.css` }, + ...options, + }); + await window.handle.mount(); + }, { base: `${origin}/${baseline ? 'test-results/org-chart-p5-1a/baseline-dist' : 'packages/org-chart/dist'}`, fixture, options }); + await ready(page, options.layoutMode === 'auto' ? 'auto' : 'fixed'); + return page.evaluate(() => window.handle.getState()); +} +async function measure(page) { + return page.evaluate(() => { + const shadow = document.querySelector('.hm-orgchart-host').shadowRoot; + const stage = shadow.querySelector('.hm-orgchart-stage'); + const base = stage?.getBoundingClientRect() ?? shadow.querySelector('.hm-orgchart-expanded').getBoundingClientRect(); + const scale = stage ? base.width / stage.offsetWidth : 1; + const box = element => { + const bounds = element.getBoundingClientRect(); + return { x: (bounds.x - base.x) / scale, y: (bounds.y - base.y) / scale, width: bounds.width / scale, height: bounds.height / scale }; + }; + const cards = [...shadow.querySelectorAll('.hm-orgchart-employee')].map(card => ({ + key: `${card.closest('.hm-orgchart-status-group')?.dataset.workStatus ?? 'tree'}:${card.dataset.employeeId}`, + id: card.dataset.employeeId, kind: card.dataset.cardKind, size: card.dataset.cardAssetSize ?? null, + box: box(card), asset: card.querySelector('.hm-orgchart-card-background')?.src ?? null, + logo: card.querySelector('.hm-orgchart-affiliation-mark img')?.src ?? null, + name: card.querySelector('.hm-orgchart-person-name')?.textContent, + role: card.querySelector('.hm-orgchart-person-role')?.textContent, + font: getComputedStyle(card.querySelector('.hm-orgchart-person-name')).fontFamily, + badgeCount: card.querySelectorAll('.hm-orgchart-job-title,.hm-orgchart-status-label,.hm-orgchart-person-attributes').length, + placeholder: card.dataset.photoState, + })); + const nodes = [...shadow.querySelectorAll('.node[data-organization-id]')].map(node => { + const heading = node.querySelector('.hm-orgchart-organization-name'); + const style = getComputedStyle(heading); + return { id: node.dataset.organizationId, companyId: node.dataset.companyId ?? null, + depth: Number(node.dataset.organizationDepth), text: heading.textContent, box: box(heading), + backgroundColor: style.backgroundColor, backgroundImage: style.backgroundImage, + primary: node.style.getPropertyValue('--hm-orgchart-expanded-primary'), + secondary: [...node.style].filter(property => property.startsWith('--hm-orgchart-expanded-secondary-')).map(property => node.style.getPropertyValue(property)), + }; + }); + const collisions = []; + for (let index = 0; index < cards.length; index++) for (const other of cards.slice(index + 1)) { + const a = cards[index].box, b = other.box; + if (Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x) > 0.5 + && Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y) > 0.5) collisions.push([cards[index].key, other.key]); + } + const viewport = shadow.querySelector('.hm-orgchart-viewport'); + const expanded = shadow.querySelector('.hm-orgchart-expanded'); + const summaries = [...shadow.querySelectorAll('[data-component="PositionSummary"],[data-component="AffiliationSummary"],[data-component="StatusSummary"]')].map(element => ({ kind: element.dataset.component, text: element.textContent })); + return { scale, cards, nodes, summaries, collisions, + hostCount: document.querySelectorAll('.hm-orgchart-host').length, + compositionCount: shadow.querySelectorAll('.hm-orgchart-composition,.hm-orgchart-expanded').length, + controls: shadow.querySelectorAll('.hm-orgchart-toggle,.zoom-controls,.pan-controls,.minimap').length, + layoutStatus: expanded?.dataset.layoutStatus ?? null, + phaseText: expanded?.textContent ?? '', + viewport: viewport ? { clientWidth: viewport.clientWidth, scrollWidth: viewport.scrollWidth, clientHeight: viewport.clientHeight, scrollHeight: viewport.scrollHeight, overflowX: getComputedStyle(viewport).overflowX } : null, + document: { clientWidth: document.documentElement.clientWidth, scrollWidth: document.documentElement.scrollWidth, clientHeight: document.documentElement.clientHeight, scrollHeight: document.documentElement.scrollHeight }, + }; + }); +} +function compareFixed(before, after, name) { + check(JSON.stringify(before.cards.map(({ box, ...rest }) => rest)) === JSON.stringify(after.cards.map(({ box, ...rest }) => rest)), `${name}: card assets/content/typography/placeholder unchanged`); + check(before.cards.length === after.cards.length && before.cards.every((card, index) => ['x', 'y', 'width', 'height'].every(key => near(card.box[key], after.cards[index].box[key]))), `${name}: fixed card coordinates and dimensions unchanged`); + check(before.nodes.length === after.nodes.length && before.nodes.every((node, index) => { + const next = after.nodes[index]; + return node.id === next.id && node.depth === next.depth && node.text === next.text + && node.backgroundColor === next.backgroundColor && node.backgroundImage === next.backgroundImage + && ['x', 'y', 'width', 'height'].every(key => near(node.box[key], next.box[key])); + }), `${name}: hierarchy headers and Workdesk gradients unchanged`); + check(JSON.stringify(before.summaries) === JSON.stringify(after.summaries), `${name}: summary counts unchanged`); + check(after.controls === 0 && after.compositionCount === 1 && after.layoutStatus === null, `${name}: fixed read-only renderer retained`); +} +function assertExpanded(value, name) { + const representative = value.cards.filter(card => card.kind === 'topLeader'); + check(value.layoutStatus === 'preview' && value.phaseText.includes('P5-1A') && value.phaseText.includes('후속'), `${name}: deferred work is explicitly marked preview`); + check(representative.length === 1 && near(representative[0].box.width, 146) && near(representative[0].box.height, 74) + && representative[0].name === '홍 길 동' && representative[0].role === '대표이사' && representative[0].badgeCount === 0, `${name}: representative 146x74/name/position/zero badges`); + check(value.cards.filter(card => card.kind === 'leader').length === 3 + && value.cards.filter(card => card.kind === 'leader').every(card => near(card.box.width, 146) && near(card.box.height, 68)), `${name}: reused 1Depth leader 146x68 cards`); + check(value.cards.filter(card => card.kind === 'employee').length === 6 + && value.cards.filter(card => card.kind === 'employee').every(card => near(card.box.width, 108) && near(card.box.height, 52)), `${name}: reused small 108x52 employee cards`); + check(value.cards.every(card => card.font.includes('Noto Sans KR') && card.placeholder === 'placeholder' && card.asset), `${name}: approved assets/common photo fallback/Noto font reused`); + check(value.nodes.length === 3 && value.nodes.every(node => node.depth === 1) && value.controls === 0, `${name}: only initial 1Depth groups without collapse/zoom/pan controls`); + check(value.cards.length === 10 && value.collisions.length === 0 && value.hostCount === 1 && value.compositionCount === 1, `${name}: no duplicate or overlapping cards`, value.collisions); +} +async function popup(page, name, id) { + const card = page.locator(`.hm-orgchart-employee[data-employee-id="${id}"]`).first(); + await card.focus(); + await card.press('Enter'); + await page.locator('dialog[open]').waitFor(); + const data = await page.evaluate(() => { + const shadow = document.querySelector('.hm-orgchart-host').shadowRoot; + const dialog = shadow.querySelector('dialog[open]'); + return { employeeId: dialog.dataset.employeeId, text: dialog.textContent, count: shadow.querySelectorAll('dialog[open]').length, activeInside: dialog.contains(shadow.activeElement) }; + }); + check(data.employeeId === id && data.count === 1 && data.activeInside, `${name}: keyboard opens shared employee popup`, data); + await page.keyboard.press('Tab'); + check(await page.evaluate(() => { + const shadow = document.querySelector('.hm-orgchart-host').shadowRoot; + return shadow.querySelector('dialog[open]').contains(shadow.activeElement); + }), `${name}: popup Tab focus remains inside`); + await page.keyboard.press('Escape'); + await page.locator('dialog[open]').waitFor({ state: 'detached' }); + check(await page.evaluate(id => document.querySelector('.hm-orgchart-host').shadowRoot.activeElement?.dataset.employeeId === id, id), `${name}: Escape restores initiating card focus`); + return data.text; +} +async function scenario(name, run) { + try { await run(); } + catch (error) { check(false, `${name}: verification completed`, { message: error.message, stack: error.stack }); } +} + +try { + let baselineFixed, defaultFixed, autoVanilla; + let baselinePopup; + await scenario('Fixed baseline', async () => { + const page = await newPage('baseline-fixed'); + try { + const state = await mount(page, { baseline: true, fixture: fixedFixture, options: { displayMode: 'readOnly' } }); + check(state.status === 'ready', 'baseline Fixed: existing public Core ready'); + baselineFixed = await measure(page); + measurements.push({ name: 'baseline-fixed', ...baselineFixed }); + baselinePopup = await popup(page, 'baseline Fixed', 'mock-leader-00'); + await page.screenshot({ path: path.join(output, 'baseline-fixed-1440.png'), fullPage: true }); + } finally { await page.close(); } + }); + for (const explicit of [false, true]) await scenario(`Fixed ${explicit ? 'explicit' : 'default'}`, async () => { + const name = explicit ? 'explicit-fixed' : 'default-fixed'; + const page = await newPage(name); + try { + const state = await mount(page, { fixture: fixedFixture, options: { displayMode: 'readOnly', ...(explicit ? { layoutMode: 'fixed', companyId: 'unknown-is-ignored-for-fixed' } : {}) } }); + const value = await measure(page); + measurements.push({ name, ...value }); + check(state.status === 'ready' && state.summary.raw.total === fixedFixture.employees.length, `${name}: ready with preserved employee count`); + if (baselineFixed) compareFixed(baselineFixed, value, name); + else check(false, `${name}: baseline required for regression comparison`); + if (!explicit) { + defaultFixed = value; + check(await popup(page, name, 'mock-leader-00') === baselinePopup, `${name}: existing popup field content unchanged`); + await page.screenshot({ path: path.join(output, 'current-fixed-1440.png'), fullPage: true }); + } + } finally { await page.close(); } + }); + await scenario('Auto public Core', async () => { + const page = await newPage('vanilla-auto'); + try { + const state = await mount(page, { options: { layoutMode: 'auto', displayMode: 'readOnly' } }); + check(state.status === 'ready' && state.summary.raw.total === expandedFixture.employees.length, 'Auto: JsonOrgChartDataSource and full data summary retained'); + autoVanilla = await measure(page); + measurements.push({ name: 'vanilla-auto', ...autoVanilla }); + assertExpanded(autoVanilla, 'Vanilla Auto'); + const popupText = await popup(page, 'Auto representative', 'expanded-representative'); + check(popupText.includes('대표이사') && popupText.includes('(주)한맥기술'), 'Auto popup: original employee/affiliation information'); + await popup(page, 'Auto employee', 'expanded-employee-01'); + const presetData = await page.evaluate(ids => ids.map(id => window.hmModule.getCompanyColorPreset(id)), expectedCompanyIds); + check(presets.every((preset, index) => presetData[index]?.companyId === preset.id && presetData[index].primary === preset.primary && JSON.stringify(presetData[index].secondary) === JSON.stringify(preset.secondary)), 'Public lookup: all 7 P5-0 primary/secondary presets unchanged', presetData); + const invalid = await page.evaluate(() => { + const base = { dataSource: new window.hmModule.JsonOrgChartDataSource(window.fixture), stylesheetUrls: { core: 'core.css', engine: 'engine.css' } }; + return [{ layoutMode: 'invalid' }, { layoutMode: 'auto', companyId: 'unknown-company' }].map(options => { + try { window.hmModule.createOrgChart({ ...base, ...options }); return false; } + catch (error) { return error instanceof TypeError; } + }); + }); + check(invalid.every(Boolean), 'New options: invalid layout mode and unknown Auto preset rejected', invalid); + const lifecycle = await page.evaluate(async () => { + const changed = structuredClone(window.fixture); + changed.metadata.dataVersion = 'p5-1a-update'; + const removed = 'talent-growth'; + changed.organizations = changed.organizations.filter(organization => organization.id !== removed); + changed.employees = changed.employees.filter(employee => employee.organizationId !== removed); + changed.presentation.organizationOrder = changed.presentation.organizationOrder.filter(id => id !== removed); + changed.organizations.find(organization => organization.id === 'business-management').name = '갱신된 사업관리'; + await window.handle.update(changed); + const shadow = document.querySelector('.hm-orgchart-host').shadowRoot; + const updated = { state: window.handle.getState().status, version: window.handle.getState().dataVersion, + compositions: shadow.querySelectorAll('.hm-orgchart-expanded').length, nodes: shadow.querySelectorAll('.node[data-organization-id]').length, + cards: shadow.querySelectorAll('.hm-orgchart-employee').length, stale: !!shadow.querySelector('[data-organization-id="talent-growth"]'), text: shadow.textContent.includes('갱신된 사업관리') }; + await window.handle.reload(); + const reloaded = { state: window.handle.getState().status, version: window.handle.getState().dataVersion, + compositions: shadow.querySelectorAll('.hm-orgchart-expanded').length, nodes: shadow.querySelectorAll('.node[data-organization-id]').length, + cards: shadow.querySelectorAll('.hm-orgchart-employee').length, stale: shadow.textContent.includes('갱신된 사업관리') }; + return { updated, reloaded }; + }); + check(lifecycle.updated.state === 'ready' && lifecycle.updated.version === 'p5-1a-update' && lifecycle.updated.compositions === 1 + && lifecycle.updated.nodes === 2 && lifecycle.updated.cards === 7 && !lifecycle.updated.stale && lifecycle.updated.text, 'Auto update: replaces groups/cards without duplicates or stale DOM', lifecycle.updated); + check(lifecycle.reloaded.state === 'ready' && lifecycle.reloaded.version === expandedFixture.metadata.dataVersion && lifecycle.reloaded.compositions === 1 + && lifecycle.reloaded.nodes === 3 && lifecycle.reloaded.cards === 10 && !lifecycle.reloaded.stale, 'Auto reload: restores JSON source without stale DOM', lifecycle.reloaded); + await ready(page, 'auto'); + await page.screenshot({ path: path.join(output, 'vanilla-auto-1440.png'), fullPage: true }); + const deep = await page.evaluate(async () => { + const deep = structuredClone(window.fixture); + deep.organizations.push({ id: 'deferred-depth-2', parentId: 'business-management', name: '후속 2Depth', type: 'team', leaderId: null, displayOrder: 0 }, + { id: 'deferred-depth-3', parentId: 'deferred-depth-2', name: '후속 3Depth', type: 'cell', leaderId: null, displayOrder: 0 }); + for (const [index, id] of ['deferred-depth-2', 'deferred-depth-3'].entries()) deep.employees.push({ id: `deferred-employee-${index}`, organizationId: id, affiliationId: 'hanmac', name: '가상 직원', position: '연구', jobTitle: null, profileImage: null, workStatus: 'active' }); + deep.presentation.organizationOrder.push('deferred-depth-2', 'deferred-depth-3'); + deep.metadata.dataVersion = 'p5-1b-deferred-fixture'; + const validated = window.hmModule.validateOrgChartDataset(deep); + const normalized = validated.valid ? window.hmModule.normalizeOrgChartDataset(validated.data) : null; + await window.handle.update(deep); + const shadow = document.querySelector('.hm-orgchart-host').shadowRoot; + return { valid: validated.valid, state: window.handle.getState().status, total: window.handle.getState().summary?.raw.total, + deepest: normalized?.roots[0].children[0].children[0].children[0].organization.id, + rendered: [...shadow.querySelectorAll('.node[data-organization-id]')].map(node => node.dataset.organizationId), + deferredCards: shadow.querySelectorAll('[data-employee-id^="deferred-employee-"]').length, + retained: deep.organizations.length === window.fixture.organizations.length + 2 }; + }); + check(deep.valid && deep.state === 'ready' && deep.deepest === 'deferred-depth-3' && deep.total === expandedFixture.employees.length + 2 + && deep.rendered.length === 3 && !deep.rendered.some(id => id.startsWith('deferred-')) && deep.deferredCards === 0 && deep.retained, + 'P5-1B boundary: 3Depth data retained and validated; descendants intentionally unplaced', deep); + const destroyed = await page.evaluate(() => { + window.handle.destroy(); window.handle.destroy(); + return { status: window.handle.getState().status, children: document.getElementById('chart').children.length }; + }); + check(destroyed.status === 'destroyed' && destroyed.children === 0, 'Auto destroy: terminal/idempotent cleanup', destroyed); + } finally { await page.close(); } + }); + await scenario('Auto default displayMode', async () => { + const page = await newPage('auto-default-display'); + try { + await mount(page, { options: { layoutMode: 'auto' } }); + const initial = await measure(page); + check(initial.controls === 0 && initial.nodes.length === 3 && initial.layoutStatus === 'preview', 'Auto without displayMode: initial preview, no collapse controls'); + const transforms = await page.evaluate(() => [...document.querySelector('.hm-orgchart-host').shadowRoot.querySelectorAll('.hm-orgchart-engine')].map(element => element.style.transform)); + const viewport = page.locator('.hm-orgchart-viewport'); + await viewport.hover(); await page.mouse.wheel(0, -100); + const bounds = await viewport.boundingBox(); + await page.mouse.move(bounds.x + bounds.width / 2, bounds.y + 10); await page.mouse.down(); + await page.mouse.move(bounds.x + bounds.width / 2 + 40, bounds.y + 10, { steps: 4 }); await page.mouse.up(); + const after = await page.evaluate(() => [...document.querySelector('.hm-orgchart-host').shadowRoot.querySelectorAll('.hm-orgchart-engine')].map(element => element.style.transform)); + check(JSON.stringify(transforms) === JSON.stringify(after), 'Auto: wheel/drag do not activate engine zoom or pan'); + } finally { await page.close(); } + }); + await scenario('Actual Storybook', async () => { + const page = await newPage('storybook-auto'); + try { + const response = await page.request.get(`${storyOrigin}/index.json`); + const index = await response.json(); + const visible = Object.values(index.entries).filter(entry => entry.type === 'story' && entry.title === 'OrgChart' && !entry.tags?.includes('internal')).map(entry => entry.id).sort(); + const expected = ['orgchart--logo-personnel-summary', 'orgchart--department-colors', 'orgchart--full-composition', 'orgchart--expanded-org-chart'].sort(); + check(response.ok() && JSON.stringify(visible) === JSON.stringify(expected), 'Storybook: existing 3 public menus plus Expanded OrgChart only', visible); + await page.goto(`${storyOrigin}/iframe.html?id=orgchart--expanded-org-chart&viewMode=story`); + await ready(page, 'auto'); + const vanillaStyles = autoVanilla?.cards.map(card => ({ id: card.id, kind: card.kind, width: card.box.width, height: card.box.height, asset: card.asset, font: card.font })); + const reactValue = await measure(page); + check(Boolean(vanillaStyles) && reactValue.cards.length === vanillaStyles.length && reactValue.cards.every((card, index) => { + const vanilla = vanillaStyles[index]; + return card.id === vanilla.id && card.kind === vanilla.kind && near(card.box.width, vanilla.width) && near(card.box.height, vanilla.height) && card.asset === vanilla.asset && card.font === vanilla.font; + }), 'React Story / Vanilla: same Core fixture/cards/assets/font'); + for (const preset of presets) { + const select = page.getByRole('combobox', { name: '회사별 컬러 테마' }); + await select.click(); + await page.getByRole('option', { name: preset.name, exact: true }).click(); + await page.waitForFunction(companyId => { + const nodes = [...document.querySelector('.hm-orgchart-host')?.shadowRoot.querySelectorAll('.node[data-organization-id]') ?? []]; + return nodes.length === 3 && nodes.every(node => node.dataset.companyId === companyId); + }, preset.id); + await ready(page, 'auto'); + const value = await measure(page); + measurements.push({ name: `storybook-company-${preset.id}`, nodes: value.nodes }); + check(value.nodes.every(node => node.companyId === preset.id && node.primary === preset.primary && node.backgroundColor === rgb(preset.primary) + && JSON.stringify(node.secondary) === JSON.stringify(preset.secondary)), `HM Select: ${preset.name} primary and all secondary colors connected`, value.nodes); + } + await page.getByRole('combobox', { name: '회사별 컬러 테마' }).click(); + await page.getByRole('option', { name: '한맥기술', exact: true }).click(); + await page.waitForFunction(() => document.querySelector('.hm-orgchart-host')?.shadowRoot.querySelector('.node[data-company-id="hanmac"]')); + for (const width of [390, 768, 1280, 1440]) { + await page.setViewportSize({ width, height: width < 1000 ? 1024 : 900 }); + await ready(page, 'auto'); + const value = await measure(page); + measurements.push({ name: `storybook-${width}`, ...value }); + assertExpanded(value, `Storybook ${width}`); + check(value.document.scrollWidth <= value.document.clientWidth + 1 + && value.viewport && ['auto', 'scroll'].includes(value.viewport.overflowX), `Storybook ${width}: horizontal overflow contained by Core viewport`, { document: value.document, viewport: value.viewport }); + await page.screenshot({ path: path.join(output, `storybook-expanded-${width}.png`), fullPage: true }); + } + await popup(page, 'React Auto employee', 'expanded-employee-01'); + await page.goto(`${storyOrigin}/iframe.html?id=orgchart--full-composition&viewMode=story`); + await ready(page, 'fixed'); + const value = await measure(page); + check(value.cards.length === defaultFixed?.cards.length && value.controls === 0 && value.layoutStatus === null && value.compositionCount === 1, + 'Existing Full Composition Story: fixed read-only route retained'); + } finally { await page.close(); } + }); +} finally { + await browser.close(); + await new Promise(resolve => server.close(resolve)); + check(errors.length === 0, 'Focused browser scenarios: no new console/runtime errors', errors); + const summary = { total: results.length, pass: results.filter(result => result.status === 'PASS').length, fail: results.filter(result => result.status === 'FAIL').length }; + await fs.writeFile(path.join(output, 'browser.json'), JSON.stringify({ scope: 'P5-1A only', browser: chromium.name(), summary, results, measurements, errors, warnings, + notVerified: ['P5-1B recursive automatic layout/recalculation/collision solver', 'Collapse/expand and Zoom/Pan implementation', 'Arbitrary data/themes/browsers and real touch/screen reader speech', 'Entire historical P2/P3 suites and complete Storybook production build'] }, null, 2)); + console.log(JSON.stringify(summary)); + if (summary.fail) process.exitCode = 1; +} diff --git a/packages/org-chart-react/README.md b/packages/org-chart-react/README.md index 0767fef..ece254d 100644 --- a/packages/org-chart-react/README.md +++ b/packages/org-chart-react/README.md @@ -44,6 +44,8 @@ Named runtime export: `OrgChart`. Type exports: `OrgChartProps` and the Core's p - Required `dataSource`: the same Core `OrgChartDataSource` interface, `load(options?: { signal?: AbortSignal }): Promise`. - Required `stylesheetUrls`: `{ engine: string; core: string }`, the exact Core asset contract. - Optional `displayMode`: `'interactive'` (default) or `'readOnly'`, passed to the Core composition. Changing it recreates the Core handle. +- Optional `layoutMode`: `'fixed'` (default) or `'auto'`, independent of `displayMode`. Auto is the P5-1A initial-group preview; automatic recursive layout, collapse and Zoom/Pan remain deferred. Changing it recreates the same Core handle. +- Optional `companyId`: existing Expanded company preset ID (default `hanmac`). Changing it recreates the handle; Fixed ignores company colors. Unknown Auto IDs report a Core construction lifecycle error. All seven IDs and preview limits are documented in the [Core README](../org-chart/README.md#layout-boundary-p5-1a). - Optional `organizationLinks`: existing organization-ID-to-URL map, applied only to original 1Depth titles. Missing/blank values retain plain titles. Core validates HTTP(S)/relative URLs and rejects invalid URLs, other schemes and credentials. Treat the map as immutable and memoize it; a new map recreates the handle. - Optional `onEmployeeClick(employee, context)`: host-owned information UI, replacing the Core's built-in popup. `context` contains the existing `organization`, `affiliation`, focusable `trigger` card and `originalEvent`. It works in both modes and receives untouched Employee data. - Optional `aggregationPolicy`: the Core's `ApprovedAggregationPolicy`. diff --git a/packages/org-chart-react/src/OrgChart.tsx b/packages/org-chart-react/src/OrgChart.tsx index 10f38ed..b2cdd09 100644 --- a/packages/org-chart-react/src/OrgChart.tsx +++ b/packages/org-chart-react/src/OrgChart.tsx @@ -18,6 +18,8 @@ export function OrgChart({ aggregationPolicy, stylesheetUrls, displayMode, + layoutMode, + companyId, organizationLinks, onEmployeeClick, className, @@ -62,6 +64,8 @@ export function OrgChart({ aggregationPolicy, stylesheetUrls: { engine: engineStylesheetUrl, core: coreStylesheetUrl }, displayMode, + layoutMode, + companyId, organizationLinks, onEmployeeClick: hasEmployeeCallback ? (employee, context) => { if (generationRef.current === generation) committedRef.current.onEmployeeClick?.(employee, context); @@ -101,7 +105,7 @@ export function OrgChart({ } } }; - }, [aggregationPolicy, engineStylesheetUrl, coreStylesheetUrl, displayMode, organizationLinks, hasEmployeeCallback]); + }, [aggregationPolicy, engineStylesheetUrl, coreStylesheetUrl, displayMode, layoutMode, companyId, organizationLinks, hasEmployeeCallback]); useLayoutEffect(() => { const instance = instanceRef.current; diff --git a/packages/org-chart/README.md b/packages/org-chart/README.md index 7ab56a0..58522de 100644 --- a/packages/org-chart/README.md +++ b/packages/org-chart/README.md @@ -24,6 +24,39 @@ chart.destroy(); ## Organization links and employee information (P3) +### Layout boundary (P5-1A) + +`layoutMode?: 'fixed' | 'auto'` is independent of `displayMode`. The default +`'fixed'` keeps the existing Workdesk composition and its display-mode behavior. +`'auto'` currently selects the **P5-1A initial preview**, showing the representative +and immediate organization groups from the validated hierarchy. Descendants stay +in the dataset and statistics but are not placed in this preview. Automatic +recursive placement/recalculation/collision prevention belongs to P5-1B; +collapse controls and Zoom/Pan remain deferred. No preview readiness state claims +those later features are complete. + +Use `companyId` with Auto to select an existing company preset (default `hanmac`). +The seven IDs are `hanmac`, `saman`, `jangheon-industry`, `jangheon`, `ptc`, `halla`, +and `baron`. Main colors style only Expanded group headers; indexed secondary +variables come from that same preset. Fixed ignores this option and preserves +its organization gradients. Unknown Auto IDs reject construction with `TypeError`. +The preview reuses approved Workdesk card presentation, the same data/engine and +employee dialog; it has an independent wrapper without Fixed coordinates or scaling. +Choose `displayMode: 'readOnly'` for the matching read-only popup name policy. + +```js +const chart = createOrgChart({ + ...configuredBaseOptions, + layoutMode: 'auto', + displayMode: 'readOnly', + companyId: 'hanmac', +}); +``` + +Options are captured at construction: create a new handle to change the layout or +company. Standalone Tree/Summary factories keep their existing rendering paths. + + ### P3.2 follow-up: representative badges Representative cards never render job-title, role or status badges, empty attribute wrappers or a badge row, including standalone specimens. They display `대표이사` / `홍 길 동`, retaining the approved 146×74 asset and existing typography, with no gap between position and name. The fixture's raw representative position (`경영진`), employee data and dialog fields remain unchanged. Other 1Depth/2Depth badge policies are preserved. This display policy takes precedence over the historical P3.2/P3.1 notes below. diff --git a/packages/org-chart/build.mjs b/packages/org-chart/build.mjs index b558b5d..acadcbf 100644 --- a/packages/org-chart/build.mjs +++ b/packages/org-chart/build.mjs @@ -30,7 +30,7 @@ execFileSync(process.execPath, [path.resolve(path.dirname(typescriptManifest), t // Ship one self-contained public CSS asset. ?url and file:// consumers cannot // rely on source-relative imports or a bundler to discover private style files. const coreStyles = await readFile(path.join(root, 'src/styles/org-chart.css'), 'utf8'); -const inlinedStyles = await Promise.all(['design-tokens.css', 'employee-card.css', 'summary-sections.css', 'org-chart-content.css', 'org-chart-readonly.css', 'org-chart-p3-summary.css', 'employee-info-dialog.css'].map(async file => [file, await readFile(path.join(root, 'src/styles', file), 'utf8')])); +const inlinedStyles = await Promise.all(['design-tokens.css', 'employee-card.css', 'summary-sections.css', 'org-chart-content.css', 'org-chart-readonly.css', 'org-chart-p3-summary.css', 'employee-info-dialog.css', 'org-chart-expanded.css'].map(async file => [file, await readFile(path.join(root, 'src/styles', file), 'utf8')])); let publicStyles = coreStyles; for (const [file, css] of inlinedStyles) publicStyles = publicStyles.replace(`@import './${file}';`, css); await writeFile(path.join(root, 'dist/style.css'), publicStyles); diff --git a/packages/org-chart/src/core/expanded-content.ts b/packages/org-chart/src/core/expanded-content.ts new file mode 100644 index 0000000..761bd66 --- /dev/null +++ b/packages/org-chart/src/core/expanded-content.ts @@ -0,0 +1,47 @@ +import { createEmployeeCard } from './employee-card.js'; +import { createHeading, type RenderContext } from './render.js'; +import { representativeCardAsset } from './representative-card-asset.js'; + +/** P5-1A presenter boundary. The shared Core supplies the initial engine groups; + * this presenter never assigns coordinates or interprets parentId. A later + * layout adapter can replace group placement without duplicating card or data + * rendering in React and Vanilla consumers. */ +export function createExpandedOrgChartContent( + document: Document, context: RenderContext, tree: HTMLElement, signal: AbortSignal, +): HTMLElement { + const content = document.createElement('div'); + content.className = 'hm-orgchart-expanded'; + content.dataset.component = 'ExpandedOrgChartContent'; + content.dataset.layoutMode = 'auto'; + content.dataset.layoutStatus = 'preview'; + + const heading = createHeading(document, context); + const status = document.createElement('p'); + status.className = 'hm-orgchart-expanded-stage-note'; + status.textContent = 'P5-1A · 확장형 준비 화면'; + const description = document.createElement('p'); + description.className = 'hm-orgchart-expanded-description'; + description.textContent = '대표자와 1Depth 예시 그룹을 표시합니다. 하위 계층 자동 배치와 접기·펼치기, Zoom/Pan은 후속 단계에서 구현합니다.'; + content.append(heading, status, description); + + const leaders = document.createElement('section'); + leaders.className = 'hm-orgchart-expanded-top-leaders'; + leaders.setAttribute('aria-label', '최상위 조직 리더'); + for (const id of context.topLeaderIds) { + const employee = context.data.employees.find(item => item.id === id); + if (!employee) continue; + leaders.append(createEmployeeCard(document, employee, { + kind: 'topLeader', + workdeskPresentation: true, + cardAsset: representativeCardAsset, + affiliationName: context.data.affiliations.find(item => item.id === employee.affiliationId)?.name, + }, signal)); + } + if (leaders.childElementCount) content.append(leaders); + + // Keep the stable Core viewport for keyboard access and ordinary scrolling. + // This is a flow preview, with no fixed-stage scale observer or artwork. + tree.setAttribute('aria-label', '확장형 조직도 초기 그룹 영역'); + content.append(tree); + return content; +} diff --git a/packages/org-chart/src/core/expanded-layout.test.ts b/packages/org-chart/src/core/expanded-layout.test.ts new file mode 100644 index 0000000..d965f48 --- /dev/null +++ b/packages/org-chart/src/core/expanded-layout.test.ts @@ -0,0 +1,47 @@ +import test from 'node:test'; +import assert from 'node:assert/strict'; +import { expandedPreviewRoots } from './expanded-layout.js'; +import { createOrgChart } from './index.js'; +import type { OrganizationTreeNode } from '../data/index.js'; + +const node = (id: string, parentId: string | null, type: 'root' | 'office' = 'office', children: OrganizationTreeNode[] = []): OrganizationTreeNode => ({ + organization: { id, parentId, name: id, type, leaderId: null, displayOrder: 0 }, children, +}); + +test('initial preview keeps actual first-depth ancestry and defers descendants without mutating hierarchy', () => { + const grandchild = node('depth-2', 'depth-1'); + const child = node('depth-1', 'root', 'office', [grandchild]); + const roots = [node('root', null, 'root', [child])]; + const before = structuredClone(roots); + const projected = expandedPreviewRoots(roots); + assert.deepEqual(projected.map(item => item.organization.id), ['depth-1']); + assert.equal(projected[0]!.organization.parentId, 'root'); + assert.deepEqual(projected[0]!.children, []); + assert.deepEqual(roots, before); +}); + +test('independent roots and normalized order stay independent in the initial preview', () => { + const roots = [node('first', null), node('root', null, 'root', [node('second', 'root'), node('third', 'root')])]; + assert.deepEqual(expandedPreviewRoots(roots).map(item => item.organization.id), ['first', 'second', 'third']); + assert.deepEqual(expandedPreviewRoots([]), []); +}); + +const options = { dataSource: { load: async () => ({}) }, stylesheetUrls: { engine: '/engine.css', core: '/style.css' } }; + +test('layout defaults remain compatible and displayMode is an independent public option', () => { + for (const displayMode of ['interactive', 'readOnly'] as const) { + for (const layoutMode of [undefined, 'fixed', 'auto'] as const) { + const handle = createOrgChart({ ...options, displayMode, layoutMode }); + assert.equal(handle.getState().status, 'idle'); + handle.destroy(); + } + } +}); + +test('invalid layout and unknown Auto company fail explicitly, while Fixed ignores company configuration', () => { + assert.throws(() => createOrgChart({ ...options, layoutMode: 'invalid' as 'auto' }), /layoutMode/); + assert.throws(() => createOrgChart({ ...options, layoutMode: 'auto', companyId: 'unknown' }), /companyId/); + const fixed = createOrgChart({ ...options, layoutMode: 'fixed', companyId: 'unknown' }); + assert.equal(fixed.getState().status, 'idle'); + fixed.destroy(); +}); diff --git a/packages/org-chart/src/core/expanded-layout.ts b/packages/org-chart/src/core/expanded-layout.ts new file mode 100644 index 0000000..fef65ab --- /dev/null +++ b/packages/org-chart/src/core/expanded-layout.ts @@ -0,0 +1,10 @@ +import type { OrganizationTreeNode } from '../data/index.js'; + +/** P5-1A preview projection only. Keep the validated hierarchy intact and + * expose the root's immediate groups without pretending to place descendants. + * P5-1B can replace this boundary with a recursive layout result shared by + * every runtime; neither React nor the Story owns a layout algorithm. */ +export function expandedPreviewRoots(roots: readonly OrganizationTreeNode[]): OrganizationTreeNode[] { + return roots.flatMap(root => root.organization.type === 'root' ? root.children : [root]) + .map(node => ({ organization: node.organization, children: [] })); +} diff --git a/packages/org-chart/src/core/index.ts b/packages/org-chart/src/core/index.ts index c633940..cbb0e46 100644 --- a/packages/org-chart/src/core/index.ts +++ b/packages/org-chart/src/core/index.ts @@ -5,6 +5,9 @@ import type { EngineAdapter, EngineConstructor } from './engine.js'; import { decorateNode, engineTree } from './render.js'; import { createOrgChartTree } from './org-chart-tree.js'; import { createOrgChartContent } from './org-chart-content.js'; +import { createExpandedOrgChartContent } from './expanded-content.js'; +import { expandedPreviewRoots } from './expanded-layout.js'; +import { getCompanyColorPreset } from '../company-color-presets.js'; import { createPositionSummary } from './position-summary.js'; import { createAffiliationSummary } from './affiliation-summary.js'; import { createStatusSummary } from './status-summary.js'; @@ -13,7 +16,7 @@ import type { EmployeeInfoDialog } from './employee-info-dialog.js'; import type { RenderContext } from './render.js'; import type { OrgChartEmployeeClickContext, OrgChartHandle, OrgChartOptions, OrgChartState } from './types.js'; -export type { OrgChartEmployeeClickContext, OrgChartHandle, OrgChartOptions, OrgChartOrganizationLinks, OrgChartState } from './types.js'; +export type { OrgChartLayoutMode, OrgChartEmployeeClickContext, OrgChartHandle, OrgChartOptions, OrgChartOrganizationLinks, OrgChartState } from './types.js'; const owners = new WeakMap(); let instanceSequence = 0; @@ -47,6 +50,11 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or if (!options.stylesheetUrls?.core || (needsEngine && !options.stylesheetUrls.engine)) throw new TypeError('Provide the required OrgChart stylesheet URLs'); const stylesheetUrls = { ...options.stylesheetUrls }; if (options.displayMode !== undefined && options.displayMode !== 'interactive' && options.displayMode !== 'readOnly') throw new TypeError('displayMode must be "interactive" or "readOnly"'); + if (options.layoutMode !== undefined && options.layoutMode !== 'fixed' && options.layoutMode !== 'auto') throw new TypeError('layoutMode must be "fixed" or "auto"'); + const layoutMode = options.layoutMode ?? 'fixed'; + const expanded = view === 'composition' && layoutMode === 'auto'; + const expandedCompanyPreset = expanded ? getCompanyColorPreset(options.companyId ?? 'hanmac') : undefined; + if (expanded && !expandedCompanyPreset) throw new TypeError('companyId must be a registered company preset in Auto mode'); const readOnly = view === 'composition' && options.displayMode === 'readOnly'; const organizationLinks: Record = Object.create(null); if (options.onEmployeeClick !== undefined && typeof options.onEmployeeClick !== 'function') throw new TypeError('onEmployeeClick must be a function'); @@ -200,14 +208,16 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or const normalized = normalizeOrgChartDataset(data); const summary = freeze(calculateSummary(data, policy)); const topLeaderIds = new Set(view === 'composition' ? normalized.roots.filter(node => node.organization.type === 'root' && node.organization.leaderId).map(node => node.organization.leaderId!) : []); - const nextContext: RenderContext = { data, summary, orderedOrganizations: [], employeesByOrganization: normalized.employeesByOrganization, topLeaderIds, readOnly, organizationLinks }; + const nextContext: RenderContext = { data, summary, orderedOrganizations: [], employeesByOrganization: normalized.employeesByOrganization, topLeaderIds, readOnly: readOnly || expanded, organizationLinks, expandedCompanyPreset }; // Composition shows the root leader as the standalone top card, so the root's direct // organizations become the horizontal engine roots (data and parentId stay untouched). // A root with other direct employees keeps its node so those employees stay visible. const flattenRoot = (node: typeof normalized.roots[number]) => view === 'composition' && node.organization.type === 'root' && !!node.organization.leaderId && (normalized.employeesByOrganization.get(node.organization.id) ?? []).every(employee => employee.id === node.organization.leaderId); const flattened = normalized.roots.some(flattenRoot); - const tree = engineTree(flattened ? normalized.roots.flatMap(node => flattenRoot(node) ? node.children : [node]) : normalized.roots, prefix, nextContext, flattened ? 1 : 0); + const roots = expanded ? expandedPreviewRoots(normalized.roots) + : flattened ? normalized.roots.flatMap(node => flattenRoot(node) ? node.children : [node]) : normalized.roots; + const tree = engineTree(roots, prefix, nextContext, expanded || flattened ? 1 : 0); const styleIssues = await styleReady; if (!active(version)) return; if (styleIssues) { fail(version, styleIssues); return; } @@ -233,7 +243,9 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or }); } // If regeneration removed keyboard focus, offer the stable viewport next. - const nextContent = view === 'composition' ? createOrgChartContent(document, nextContext, viewport!, contentGeneration.signal) + const nextContent = view === 'composition' ? expanded + ? createExpandedOrgChartContent(document, nextContext, viewport!, contentGeneration.signal) + : createOrgChartContent(document, nextContext, viewport!, contentGeneration.signal) : view === 'tree' ? viewport! : view === 'positionSummary' ? createPositionSummary(document, nextContext) : view === 'affiliationSummary' ? createAffiliationSummary(document, nextContext) @@ -306,6 +318,7 @@ export function createOrgChartView(options: OrgChartOptions, view: CoreView): Or cancelStyles = () => { for (const dispose of styleDisposers) dispose(); }; shell = document.createElement('section'); shell.className = 'hm-orgchart-shell'; + shell.dataset.layoutMode = view === 'composition' ? layoutMode : 'fixed'; // The Core's Korean labels must shape identically in ko HTML and en Storybook hosts. shell.lang = 'ko'; shell.tabIndex = -1; diff --git a/packages/org-chart/src/core/render.ts b/packages/org-chart/src/core/render.ts index 15ffddf..b11bd74 100644 --- a/packages/org-chart/src/core/render.ts +++ b/packages/org-chart/src/core/render.ts @@ -4,6 +4,7 @@ import { createEmployeeCard } from './employee-card.js'; import { applyOrganizationStyle, organizationStylePresets } from './style-presets.js'; import { getDepartmentCardAsset } from './department-card-assets.js'; import type { OrgChartOrganizationLinks } from './types.js'; +import type { CompanyColorPreset } from '../company-color-presets.js'; const organizationNames = { root: '최상위 조직', division: '부문', office: '실', div: 'Div', cell: '셀', team: '팀' } as const; @@ -16,6 +17,8 @@ export interface RenderContext { /** View-only composition: no collapse controls or diagnostic text are created. */ readOnly?: boolean; organizationLinks?: OrgChartOrganizationLinks; + /** Only the Expanded presenter supplies company header colors. */ + expandedCompanyPreset?: CompanyColorPreset; } export function engineTree(roots: OrganizationTreeNode[], prefix: string, context: RenderContext, startDepth = 0): RenderEngineNode[] { @@ -61,6 +64,14 @@ export function decorateNode( } node.dataset.organizationDepth = String(organizationDepth); applyOrganizationStyle(node, Number(value.groupVariant)); + if (context.expandedCompanyPreset) { + const preset = context.expandedCompanyPreset; + node.dataset.companyId = preset.companyId; + node.style.setProperty('--hm-orgchart-current-gradient', preset.primary); + node.style.setProperty('--hm-orgchart-expanded-primary', preset.primary); + // Preserve every existing secondary value for the later Expanded theme. + preset.secondary.forEach((color, index) => node.style.setProperty(`--hm-orgchart-expanded-secondary-${index + 1}`, color)); + } node.dataset.organizationType = organization.type; // Header role is styling-only: depth 0-1 are organization titles, deeper nodes are cell/team headers. node.dataset.headerRole = (context.readOnly ? organizationDepth : Number(value.depth)) <= 1 ? 'organization' : 'group'; diff --git a/packages/org-chart/src/core/types.ts b/packages/org-chart/src/core/types.ts index 199a22b..b73781a 100644 --- a/packages/org-chart/src/core/types.ts +++ b/packages/org-chart/src/core/types.ts @@ -10,6 +10,10 @@ export type OrgChartState = * controls or development text, compact summaries on a fitted design canvas. */ export type OrgChartDisplayMode = 'interactive' | 'readOnly'; +/** Layout is independent of displayMode. Auto currently exposes only the + * P5-1A initial groups; recursive placement is reserved for P5-1B. */ +export type OrgChartLayoutMode = 'fixed' | 'auto'; + /** Links are keyed by the existing organization ID. Only 1Depth titles use them. */ export type OrgChartOrganizationLinks = Readonly>; @@ -29,6 +33,11 @@ export interface OrgChartOptions { stylesheetUrls: { engine: string; core: string }; /** Full composition presentation only; standalone views ignore it. */ displayMode?: OrgChartDisplayMode; + /** Full composition only. Omission preserves the existing Fixed renderer. */ + layoutMode?: OrgChartLayoutMode; + /** Expanded-only company preset ID. Defaults to hanmac; ignored by Fixed. + * Unknown IDs are rejected in Auto rather than silently replacing colors. */ + companyId?: string; /** No entry (or an empty URL) keeps an ordinary title. HTTP(S) and relative URLs are supported. */ organizationLinks?: OrgChartOrganizationLinks; /** Optional host-owned information UI. When supplied, it replaces the default read-only dialog. diff --git a/packages/org-chart/src/index.ts b/packages/org-chart/src/index.ts index cebfae6..65835a9 100644 --- a/packages/org-chart/src/index.ts +++ b/packages/org-chart/src/index.ts @@ -2,6 +2,6 @@ export * from './data/index.js'; export { companyColorPresets, getCompanyColorPreset } from './company-color-presets.js'; export type { CompanyColorPreset, CompanyId } from './company-color-presets.js'; export { createOrgChart } from './core/index.js'; -export type { OrgChartDisplayMode, OrgChartEmployeeClickContext, OrgChartHandle, OrgChartOptions, OrgChartOrganizationLinks, OrgChartState } from './core/types.js'; +export type { OrgChartDisplayMode, OrgChartLayoutMode, OrgChartEmployeeClickContext, OrgChartHandle, OrgChartOptions, OrgChartOrganizationLinks, OrgChartState } from './core/types.js'; export { createOrgChartTree, createPositionSummary, createAffiliationSummary, createStatusSummary } from './components.js'; export type { OrgChartSummaryComponentOptions } from './components.js'; diff --git a/packages/org-chart/src/styles/org-chart-expanded.css b/packages/org-chart/src/styles/org-chart-expanded.css new file mode 100644 index 0000000..e2738ef --- /dev/null +++ b/packages/org-chart/src/styles/org-chart-expanded.css @@ -0,0 +1,92 @@ +/* P5-1A flow preview only. Every rule is under the new presenter namespace; + the fixed Workdesk composition and approved card internals stay unchanged. + Ordinary flex wrapping is not the P5-1B automatic hierarchy layout. */ +.hm-orgchart-expanded { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: var(--hm-orgchart-resolved-spacing-sm); + width: 100%; + min-width: 0; + padding: var(--hm-orgchart-resolved-spacing-lg); + background: var(--hm-orgchart-resolved-bg-content); +} +.hm-orgchart-expanded .hm-orgchart-heading { margin: 0; } +.hm-orgchart-expanded .hm-orgchart-expanded-stage-note { + margin: 0; + color: var(--hm-orgchart-resolved-fg-primary); + font-weight: var(--hm-orgchart-resolved-font-weight-bold); +} +.hm-orgchart-expanded .hm-orgchart-expanded-description { + margin: 0; + color: var(--hm-orgchart-resolved-fg-secondary); + overflow-wrap: anywhere; +} +.hm-orgchart-expanded .hm-orgchart-expanded-top-leaders { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--hm-orgchart-resolved-spacing-lg); + padding: var(--hm-orgchart-resolved-spacing-lg) 0; +} +.hm-orgchart-expanded .hm-orgchart-viewport { + padding: var(--hm-orgchart-resolved-spacing-lg); + overflow: auto; + background: var(--hm-orgchart-resolved-bg-surface); +} +.hm-orgchart-expanded .hm-orgchart-forest { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: center; + gap: var(--hm-orgchart-resolved-spacing-xxl); + width: 100%; + min-width: 0; +} +.hm-orgchart-expanded .hm-orgchart-tree { flex: 0 0 auto; } +.hm-orgchart-expanded .hm-orgchart-engine.orgchart { + min-width: 0; + padding: 0; +} +.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] { + width: max-content; + min-width: 146px; + margin: 0; +} +.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-organization { + display: flex; + flex-direction: column; + align-items: center; + width: auto; + padding: 0; + border: 0; + border-radius: 0; + background: none; + box-shadow: none; +} +/* Same approved 1Depth title geometry; color resolves from the auto-only + company variables supplied by the shared node decorator. */ +.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-organization-name { + align-self: stretch; + min-width: 146px; + height: 36px; + min-height: 36px; + margin: 0; + padding: 0 12px; + background: var(--hm-orgchart-current-gradient); + color: var(--hm-orgchart-resolved-on-action-primary); + font-size: 20px; + font-weight: 700; + line-height: 36px; + white-space: nowrap; +} +.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee { margin: 0; } +.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee.hm-orgchart-leader { margin: 8px 0 0; } +.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: center; + gap: 8px; + margin-top: 8px; +} +.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees:empty { display: none; } diff --git a/packages/org-chart/src/styles/org-chart.css b/packages/org-chart/src/styles/org-chart.css index 4bfbdb6..b2d41d5 100644 --- a/packages/org-chart/src/styles/org-chart.css +++ b/packages/org-chart/src/styles/org-chart.css @@ -5,6 +5,7 @@ @import './org-chart-readonly.css'; @import './org-chart-p3-summary.css'; @import './employee-info-dialog.css'; +@import './org-chart-expanded.css'; /* Standalone defaults are scoped to the shell; only OrgChart public variables inherit across the Shadow DOM boundary. No host HM Theme is required. */ :host { display: block; min-width: 0; max-width: 100%; font: inherit; } diff --git a/src/org-chart/org-chart-expanded.stories.tsx b/src/org-chart/org-chart-expanded.stories.tsx new file mode 100644 index 0000000..af14348 --- /dev/null +++ b/src/org-chart/org-chart-expanded.stories.tsx @@ -0,0 +1,39 @@ +import { StrictMode, useId, useState } from 'react'; +import type { Meta, StoryObj } from '@storybook/react-vite'; +import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@hm-design/ui'; +import { OrgChart } from '@hm-design/org-chart-react'; +import { companyColorPresets, getCompanyColorPreset, JsonOrgChartDataSource } from '@hm-design/org-chart'; +import engineUrl from '@hm-design/org-chart/engine.css?url'; +import coreUrl from '@hm-design/org-chart/style.css?url'; +import expandedFixture from '../../examples/org-chart/data-expanded.json'; +import './org-chart-stories.css'; + +const expandedSource = new JsonOrgChartDataSource(expandedFixture); +const compositionStylesheets = { engine: engineUrl, core: coreUrl }; + +/** P5-1A establishes the Core rendering boundary and initial 1Depth groups. + * Automatic hierarchy placement belongs to P5-1B; this host owns no layout. */ +function ExpandedPreview() { + const id = useId(); + const [companyId, setCompanyId] = useState('hanmac'); + const preset = getCompanyColorPreset(companyId); + return
+

P5-1A · 확장형 조직도 초기 화면 — 대표자와 예시 1Depth 그룹, 기존 카드 및 회사 컬러 프리셋을 표시합니다. 자동 계층 배치·재계산은 P5-1B, 접기·펼치기와 Zoom/Pan은 후속 작업입니다. 모든 직원 정보는 가상 데이터입니다.

+
+
+ + +
+
+ {preset &&

{preset.companyName} · Main {preset.primary} · 보조 컬러 {preset.secondary.length ? preset.secondary.join(', ') : '등록 없음'}

} + +
; +} + +const meta = { title: 'OrgChart', component: ExpandedPreview, parameters: { layout: 'padded', controls: { disable: true } }, decorators: [(Story) => ] } satisfies Meta; +export default meta; +type Story = StoryObj; +export const ExpandedOrgChart: Story = { name: 'Expanded OrgChart' };