126 lines
13 KiB
Markdown
126 lines
13 KiB
Markdown
# 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는 없다.
|
||
|
||
## 통합 검증과 증거
|
||
|
||
- [기본 변경 범위 브라우저](../../test-results/org-chart-p9-4/browser.json): **78/78 PASS**, console/pageerror0. Department 공통 카드 비교, 회사별 인원/선택, OFF/ON 이동·Pan·Dialog·접기·취소, TB/LR/Hybrid 대표 동작,390/768/1280/1440px, 공개4개 Story ID.
|
||
- [공유 Vanilla API](../../test-results/org-chart-p9-4/core-api-cancel-default-fixed.json): **21/21 PASS**, 기본 OFF·4종 이동 차단/허용·Source load1·capture 해제·키보드 취소·total helper 호환·Fixed 보호.
|
||
- [Fixed 최소 회귀](../../test-results/org-chart-p9-4/fixed-preservation.json): **4/4 PASS**. P9.2 DOM hash·139개 자산 hash·152개 스타일/정규화 좌표 동일, 중앙 오차 약0px, 카드43개·연결선5개·충돌0, 편집 UI 없음.
|
||
- [Department 추가 이름](../../test-results/org-chart-p9-4/browser-department-names.json): **7/7 PASS**, 13개 이름과 ID·직위·뱃지·SVG·사진·Typography·Gradient·크기 보존.
|
||
- [외곽 스타일와 이름 모바일](../../test-results/org-chart-p9-4/browser-expanded-frame-names-mobile.json): **7/7 PASS**, 실제 공통 카드와3개 computed 값 동일, 내부 카드/타이틀색 보존, OFF/ON·390px, console/pageerror0. 회사 이동은 최종 스타일 캡처를 위한 예시이며 기존 이동 PASS를 반복 집계하지 않는다.
|
||
- Core/React 패키지 Typecheck·Build PASS. 변경 Story/helper Typecheck PASS. 추가 이름과 외곽 CSS를 반영한 최종 [Storybook build](../../test-results/org-chart-p9-4/storybook-build-frame.log) PASS. 기존500kB chunk 경고와 plugin timing 진단은 유지한다.
|
||
- `git diff --check` PASS. 독립 읽기 전용 Core/React/Department 리뷰에 새 구체적 버그 없음.
|
||
|
||
Vanilla 최초 실행은 테스트 HTML의 `id="chart"`가 `window.chart`와 충돌했고 Fixed probe가 기존 thrown Error를 반환값으로 오인했다. 앱 변경 없이 테스트만 수정했다. [원본 실패](../../test-results/org-chart-p9-4/core-initial.json)를 보존하고 실패한 구간만 재검사했다. 위 실행들의 중복 공통 오류 검사를 합산하여 고유 테스트 수로 주장하지 않는다. 추가 요청 후 기존 정상 기능 suite를 재실행하지 않았다.
|
||
|
||
## Guard와 NOT VERIFIED
|
||
|
||
[초기 PARTIAL Guard](../../test-results/org-chart-p9-4/guard.json): **status/staticStatus FAIL, runtimeStatus NOT VERIFIED**, 기존TOKEN-00110FAIL / NOT VERIFIED13. [P9/P9.3 비교](../../test-results/org-chart-p9-4/guard-comparison.json)에서 FAIL10 모두 기존과 같고 신규FAIL0이다. 새 Department CSS의 `?url` 로딩은 정적 graph에 증명되지 않아 SCOPE-001 NOT VERIFIED이며 실제 Shadow DOM computed 비교를 별도로 제공한다.
|
||
|
||
추가 요청 이후에는 수정 범위만 다시 검사했다.
|
||
|
||
- [이름 변경 Guard](../../test-results/org-chart-p9-4/guard-department-names.json): 기존FAIL10 / NOT VERIFIED10, status/staticStatusFAIL / runtimeNOT VERIFIED. styleEvidence STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS(해당 정적 scope) / FINAL NOT VERIFIED.
|
||
- [Expanded 외곽 Guard](../../test-results/org-chart-p9-4/guard-expanded-frame.json): **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 감사](../../test-results/org-chart-p9-4/source-preservation.json)에 파일별 SHA와 보호 범위를 기록했다. Fixture7·승인 SVG13·카드 Presenter·palette·Full Composition·Overview·메뉴·의존성·HM UI/Pattern/Theme·Center 공통 CSS와 기존 설정/Popover CSS를 보존했다. baseline에서 빠진 일부 기존 한글 경로는 별도로 기록했으며 모든 저장소 파일의 byte 보존을 주장하지 않는다.
|
||
|
||
수정한 기존 authored12개:
|
||
|
||
```text
|
||
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개:
|
||
|
||
```text
|
||
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 상태](../../test-results/org-chart-p9-4/final-state.json)를 별도로 기록했다.
|
||
|
||
**Stage·Commit·Push·Merge·main checkout·PR·Pull·Reset·Rebase·Force Push 미진행.** 시작/완료 branch·HEAD 동일, staged0. 기존 P7~P9.3 미커밋 변경을 보존했으며 P9.4에서 사용자 검토를 기다린다.
|
||
|
||
## 실제 Storybook과 최종 캡처
|
||
|
||
- [Department Colors](http://127.0.0.1:6064/?path=/story/orgchart--department-colors)
|
||
- [Expanded OrgChart](http://127.0.0.1:6064/?path=/story/orgchart--expanded-org-chart)
|
||
|
||
요청된7개 캡처는 추가 수정까지 반영한 현재 Storybook에서 새로 촬영했다.
|
||
|
||
1. [Department 대표자](../../test-results/org-chart-p9-4/department-representative-current.png)
|
||
2. [Department 전체 간소화/이름 통일](../../test-results/org-chart-p9-4/department-full-current.png)
|
||
3. [Expanded 데이터 범위 제거/최종 외곽](../../test-results/org-chart-p9-4/expanded-frame-scope-removed.png)
|
||
4. [회사 선택 드롭다운](../../test-results/org-chart-p9-4/expanded-frame-company-dropdown.png)
|
||
5. [Drag & Drop OFF](../../test-results/org-chart-p9-4/expanded-frame-off.png)
|
||
6. [Drag & Drop ON](../../test-results/org-chart-p9-4/expanded-frame-on.png)
|
||
7. [회사 간 이동 후 최종 화면](../../test-results/org-chart-p9-4/expanded-frame-company-moved.png)
|
||
|
||
추가: [Department390px](../../test-results/org-chart-p9-4/department-names-390.png), [Expanded390px](../../test-results/org-chart-p9-4/expanded-frame-390.png), [Fixed1440px](../../test-results/org-chart-p9-4/fixed-preserved-1440.png). 이름/외곽 추가 이전 캡처도 원본 기록으로 보존하고 최종 캡처와 구분한다.
|