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
직접 화면
기존 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, 검증 소스.
기존 빌드를 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을 기록했다. 진단을 보존했고 기존 코드를 임의 수정하지 않았다. 신규 화면을 독립 public-API Story로 분리한 후 해당 변경 파일만 PARTIAL 검사했다. 최종 Guard는 원본 status PASS, staticStatus PASS, runtimeStatus NOT VERIFIED다.

CSS styleEvidence: STATIC PASS, RUNTIME NOT VERIFIED, DESIGN_INTENT NOT VERIFIED, FINAL NOT VERIFIED. 결합 증거는 해시 연결 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 파일은 없다. 전체·단계별 파일 목록, 의존성, 제외 대상과 추천 커밋 분리를 제공한다.

기존 파일 수정: 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를 자동으로 시작하지 않았으며 사용자 검토를 기다린다.

9.6 KiB Raw Blame History