13 KiB
HMDesign OrgChart P9.4 — Department Colors · 회사별 데이터 · Drag & Drop ON/OFF
RESULT: PASS — 요청한 P9.4 기능과 두 추가 수정 범위. 기존 Guard FAIL과 미검증은 별도로 유지한다. P10과 Git 작업은 시작하지 않았다.
작업 기준과 시간
- 폴더:
D:\디자인시스템\HMDesign-OrgChart - 브랜치:
feature/orgchart-package - 시작/완료 HEAD:
7614507583927a25a270963a74ff044be0557b9f - origin:
https://gitea.hmac.kr/b25027/HMDesign.git. 원격 조회·Fetch·Pull 없음; 현재 원격 SHA는 NOT VERIFIED. - 범위: 기존 React Storybook 두 페이지와 공유 Vanilla Core/React Auto 편집 설정. 신규 화면·메뉴·API·의존성 없음.
- Started At: 2026-10-13 12:19:16 KST
- Completed At: 2026-10-13 12:43:09 KST
- Actual Duration: 23분 53초
- Estimated Duration: 최초 45~60분. 이후 Department 이름 및 Expanded 외곽 스타일 추가 요청도 같은 작업에 반영.
- Variance: 예상보다 21분 7초~36분 7초 짧음
Department Colors
간소화 코드가 기존 Core에서 만든 대표자 DOM을 제외하고 있었다. 그 DOM을 보존하여 대표자 → 조직 타이틀 → 대형 그룹장 → 소형 직원 순으로 표시한다. 대표자 한 개, 146×74px, 대표이사, Noto Sans KR, 대표자 뱃지 0개이며 Full Composition과 SVG·사진·Typography가 같다. 원본 카드 Presenter/SVG를 수정하지 않았다.
실제 src/center/center-stories.css와 Tunnel의 sample / stage / variant-grid 클래스를 Department 전용 Shadow DOM에 연결했다. 공통 배경 rgba(217,217,217,.48), Border 1px solid rgba(64,5,0,.14), Radius 8px, Shadow 없음, 내부 Padding 24px와 Gap 14px를 재사용한다. 조직별 Gradient·흰색 타이틀·직원 카드 모양·146×68 / 108×52 크기는 보존한다. 2열→모바일 1열이며 설명·Legend·대비 진단·카드별 Caption을 다시 추가하지 않았다.
추가 이름 요청은 Department 디자인 미리보기에서만 처리한다. 표본 이름 홍길동을 홍 길 동으로 형식화한 표시 데이터 사본으로 Core를 호출하며, 이름의 접근성 표기는 홍길동이다. 표시 중인 13개 카드와 Tooltip이 같은 이름을 사용한다. 모든 직원 레코드에 이름만 적용하므로 그룹장/일반 직원에도 동일 정책이다. 원본 JSON·Employee ID·직위·직책·뱃지·조직·사진은 그대로다. 공통 EmployeeCard renderer와 Full Composition/Expanded 데이터는 변경하지 않았다.
Expanded 데이터 선택
데이터 범위 UI와 전체 합산 설명을 제거했다. 기존 HM FilterBar / Popover / Checkbox / Label / Button / Separator / Select를 실제 렌더링한다. 회사 선택·전체 선택/해제·복수 선택·선택 요약·ESC/외부 클릭·키보드 조작을 유지한다. 공개 helper의 scope: 'total' 기능과 Fixture는 보존했다.
직원 수는 항상 회사별20/100/300명이다. 최초7개×20명=140명, 1개×20/100/300명, 2개×100명=200명, 7개×300명=2,100명을 실제 DOM Employee ID와 회사 Root 집계로 확인했다. ID 중복과 조직장 중복 집계가 없고 0개 회사는 명시적 빈 상태다.
회사 선택은 즉시 표시를 갱신하며 숨김·복귀 시 완료한 이동을 보존한다. 직원 수는 기존 데이터 적용 정책을 유지한다. 적용/초기화 때 새 예시 Source를 만들고 세션 이동을 초기화하므로 새 Fixture와 섞이지 않는다. 전체7개 회사의 세션 Source를 유지하고 선택된 회사의 현재 소속 기준 인원 합계를 별도로 표시한다. 숨긴 회사를 포함한 전체 세션 인원과 선택 합계를 구분한다.
공유 Drag & Drop 정책
Core 옵션과 React prop에 dragDropEnabled?: boolean을 추가했으며 기본값은 false다. Vanilla는 setDragDropEnabled(boolean) / getDragDropEnabled()를 제공한다. React는 독립 layout effect로 같은 handle의 setter를 호출한다. 옵션 변경으로 재생성·Source 재요청·레이아웃 재계산을 하지 않는다.
실제 HM Switch의 명칭은 Drag & Drop, 상태는 ON/OFF다. OFF는 pointer·Alt+M·engine drop 판정·공개 handle.move()에서 차단하며 공개 이동은 EDITING_DISABLED를 반환한다. 순수 데이터 이동 helper는 기존 계약을 유지한다. Highlight·이동 커서/단축키 안내도 상태에 맞춘다.
ON은 기존 P9.3 엔진/검증/불변 이동을 재사용한다. 직원·그룹의 회사 안팎 이동, 하위 조직·직원 소속, 대상 회사색·인원 집계·Border·연결선·배치를 유지한다. Root·자기 자신·자손/순환·잘못된 대상 등 기존 보호 정책을 교체하지 않았다.
OFF 전환은 진행 중 pointer/keyboard 이동을 취소하고 capture·Drop 강조·pending 상태를 해제한다. Drag 후 잘못된 pointer click을 차단하며 이미 완료한 이동을 보존한다. Source load는1회, 데이터·DOM forest·Viewport가 옵션 변경 후 동일함을 Vanilla에서 확인했다. Pan·Zoom·Fit·접기/펼치기·직원 Dialog는 독립 기능이다. Fixed는 옵션을 무시하고 Auto setter/move를 거부하며 ON/OFF UI를 추가하지 않는다.
Expanded 외곽 스타일 추가 요청
「확장형 조직도 · 가상 데이터」의 외곽만 실제 Center Storybook 공통 카드의 배경·Border·Radius로 통일했다. 기존 Wrapper에 sb-center를 연결하고 선언된 --sb-center-card-* 값을 전용 --hm-orgchart-expanded-preview-* 입력으로 전달한다. Wrapper의 기존 간격을 보존하고 .hm-orgchart-expanded 외곽에서만 세 입력을 소비한다.
내부 Viewport·직원 카드 배경·회사별 그룹 타이틀/흰 글자·컨트롤·Padding·레이아웃을 유지한다. Vanilla에서 입력을 생략하면 기존 외곽 기본값을 사용한다. 새 색상 복사·Theme/공통 Center CSS 수정·직원 카드 override는 없다.
통합 검증과 증거
- 기본 변경 범위 브라우저: 78/78 PASS, console/pageerror0. Department 공통 카드 비교, 회사별 인원/선택, OFF/ON 이동·Pan·Dialog·접기·취소, TB/LR/Hybrid 대표 동작,390/768/1280/1440px, 공개4개 Story ID.
- 공유 Vanilla API: 21/21 PASS, 기본 OFF·4종 이동 차단/허용·Source load1·capture 해제·키보드 취소·total helper 호환·Fixed 보호.
- Fixed 최소 회귀: 4/4 PASS. P9.2 DOM hash·139개 자산 hash·152개 스타일/정규화 좌표 동일, 중앙 오차 약0px, 카드43개·연결선5개·충돌0, 편집 UI 없음.
- Department 추가 이름: 7/7 PASS, 13개 이름과 ID·직위·뱃지·SVG·사진·Typography·Gradient·크기 보존.
- 외곽 스타일와 이름 모바일: 7/7 PASS, 실제 공통 카드와3개 computed 값 동일, 내부 카드/타이틀색 보존, OFF/ON·390px, console/pageerror0. 회사 이동은 최종 스타일 캡처를 위한 예시이며 기존 이동 PASS를 반복 집계하지 않는다.
- Core/React 패키지 Typecheck·Build PASS. 변경 Story/helper Typecheck PASS. 추가 이름과 외곽 CSS를 반영한 최종 Storybook build PASS. 기존500kB chunk 경고와 plugin timing 진단은 유지한다.
git diff --checkPASS. 독립 읽기 전용 Core/React/Department 리뷰에 새 구체적 버그 없음.
Vanilla 최초 실행은 테스트 HTML의 id="chart"가 window.chart와 충돌했고 Fixed probe가 기존 thrown Error를 반환값으로 오인했다. 앱 변경 없이 테스트만 수정했다. 원본 실패를 보존하고 실패한 구간만 재검사했다. 위 실행들의 중복 공통 오류 검사를 합산하여 고유 테스트 수로 주장하지 않는다. 추가 요청 후 기존 정상 기능 suite를 재실행하지 않았다.
Guard와 NOT VERIFIED
초기 PARTIAL Guard: status/staticStatus FAIL, runtimeStatus NOT VERIFIED, 기존TOKEN-00110FAIL / NOT VERIFIED13. P9/P9.3 비교에서 FAIL10 모두 기존과 같고 신규FAIL0이다. 새 Department CSS의 ?url 로딩은 정적 graph에 증명되지 않아 SCOPE-001 NOT VERIFIED이며 실제 Shadow DOM computed 비교를 별도로 제공한다.
추가 요청 이후에는 수정 범위만 다시 검사했다.
- 이름 변경 Guard: 기존FAIL10 / NOT VERIFIED10, status/staticStatusFAIL / runtimeNOT VERIFIED. styleEvidence STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS(해당 정적 scope) / FINAL NOT VERIFIED.
- Expanded 외곽 Guard: FAIL0 / NOT VERIFIED3, status/staticStatus/runtimeStatusNOT VERIFIED. package CSS scope, 기존Radix 위치 변수, 기존StoryPage 동적class 미검증. styleEvidence STATIC PASS / RUNTIME·DESIGN_INTENT·FINAL NOT VERIFIED.
초기 Guard 원본은 추가 요청 이전 소스 fingerprint의 기록이며, 뒤의 수정 범위 결과와 각각 보존한다. 결합 styleVerification은 생성하지 않았고 NOT VERIFIED다. 실제 기능/computed PASS를 전체 CSS 디자인 승인으로 확대하지 않는다. 기존 전체 Guard FAIL·삼안/장헌산업 흰 제목 대비 잔여 진단·Compact NOT SUPPORTED를 보존한다.
사용자 최종 디자인 승인·실제 터치 기기·스크린리더·Chrome 외 브라우저·모든 옵션 조합·2,100명 전체 성능/Drag 성능·서버 저장·SSR/배포는 NOT VERIFIED다. 기존 P7~P9.3의 승인 카드·배치·성능/메뉴 증거를 필요한 범위에서 재사용했다.
변경 파일과 작업 보존
시작 baseline697개(일반684 + 승인 카드 SVG byte 사본13)를 비교했다. 이번 요청 관련 기존 파일12개 변경,685개 동일, 누락0. Source 감사에 파일별 SHA와 보호 범위를 기록했다. Fixture7·승인 SVG13·카드 Presenter·palette·Full Composition·Overview·메뉴·의존성·HM UI/Pattern/Theme·Center 공통 CSS와 기존 설정/Popover CSS를 보존했다. baseline에서 빠진 일부 기존 한글 경로는 별도로 기록했으며 모든 저장소 파일의 byte 보존을 주장하지 않는다.
수정한 기존 authored12개:
docs/org-chart/expanded-usage.md
packages/org-chart/README.md
packages/org-chart/src/core/types.ts
packages/org-chart/src/core/index.ts
packages/org-chart/src/core/expanded-editing.ts
packages/org-chart/src/data/moves.ts
packages/org-chart/src/styles/org-chart-expanded.css
packages/org-chart-react/README.md
packages/org-chart-react/src/OrgChart.tsx
src/org-chart/core-component-preview.tsx
src/org-chart/org-chart-expanded.stories.tsx
src/org-chart/org-chart-expanded-story.css
새 authored5개:
src/org-chart/department-colors-preview.css
examples/org-chart/verify-p9-4.mjs
examples/org-chart/verify-p9-4-core.mjs
examples/org-chart/verify-p9-4-preservation.mjs
docs/org-chart/implementation-report-p9-4.md
packages/*/dist, storybook-static, test-results와 로그는 검증 생성물이다. 현재 Git 설정은 김수현 <shkim4@samaneng.com>이며 사용자 문서의 이름과 다르지만 설정을 변경하지 않았다. 최종 Git 상태를 별도로 기록했다.
Stage·Commit·Push·Merge·main checkout·PR·Pull·Reset·Rebase·Force Push 미진행. 시작/완료 branch·HEAD 동일, staged0. 기존 P7~P9.3 미커밋 변경을 보존했으며 P9.4에서 사용자 검토를 기다린다.
실제 Storybook과 최종 캡처
요청된7개 캡처는 추가 수정까지 반영한 현재 Storybook에서 새로 촬영했다.
- Department 대표자
- Department 전체 간소화/이름 통일
- Expanded 데이터 범위 제거/최종 외곽
- 회사 선택 드롭다운
- Drag & Drop OFF
- Drag & Drop ON
- 회사 간 이동 후 최종 화면
추가: Department390px, Expanded390px, Fixed1440px. 이름/외곽 추가 이전 캡처도 원본 기록으로 보존하고 최종 캡처와 구분한다.
