shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

feat(org-chart): separate fixed and auto layout previews

Browse Source
This commit is contained in:
shkim4 committed 2026-10-12 18:02:39 +09:00
1 parent 80583eb4ca
commit a92913d6bc
18 files changed
+1211 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/org-chart/commit-preparation-p5-1a.txt
+407
View File
@@ -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.
docs/org-chart/implementation-report-p5-1a.md
+74
View File
@@ -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를 자동으로 시작하지 않았으며 사용자 검토를 기다린다.