diff --git a/docs/org-chart/browser-verification.md b/docs/org-chart/browser-verification.md new file mode 100644 index 0000000..fba2a87 --- /dev/null +++ b/docs/org-chart/browser-verification.md @@ -0,0 +1,25 @@ +# OrgChart 브라우저 검증 실행 환경 + +검증 시나리오·기대값과 과거 `test-results`는 보존한다. 과거 전체 suite는 이번 수정의 필수 재실행 대상이 아니다. + +`examples/org-chart/verify*.mjs`와 React 브라우저 runner는 공통 +`scripts/orgchart-browser-runtime.mjs`를 사용한다. + +- 기본: 프로젝트의 표준 Node 모듈 탐색으로 `playwright`를 불러오고 해당 설치의 관리 Chromium을 실행한다. +- `ORGCHART_PLAYWRIGHT_MODULE`: 선택형. 기존 외부 Playwright 설치의 entry 파일 절대경로 또는 실행 디렉터리 기준 상대경로. +- `ORGCHART_CHROME`: 선택형. 기존 Chromium/Chrome 실행 파일 절대경로 또는 실행 디렉터리 기준 상대경로. +- 지정한 모듈을 불러올 수 없거나 브라우저가 없으면 실행을 실패시키고 해결 방법 및 원래 오류를 출력한다. 자동 설치·버전 업그레이드·특정 PC fallback은 없다. + +저장소 루트에서 실행한다. 기존 프로젝트 의존성에 Playwright가 없다면 이미 설치된 외부 entry를 환경변수로 지정한다. 환경변수 없이 실행하려면 해당 프로젝트 환경에서 Playwright 및 그 관리 Chromium이 제공되어야 한다. 실제 새 PC의 의존성 설치는 별도 확인 사항이다. + +```powershell +# 기본 모듈을 사용할 수 있는 환경 +node examples/org-chart/verify-p2.mjs + +# 기존 외부 도구 설치를 재사용하는 환경(실제 경로로 지정) +$env:ORGCHART_PLAYWRIGHT_MODULE = '' +$env:ORGCHART_CHROME = '' +node examples/org-chart/verify-p2.mjs +``` + +각 suite의 준비된 example build, baseline dist, Storybook/서버 origin 등의 전제는 그대로 유지된다. 도구 경로가 이식 가능해졌다는 것이 과거 fixture/baseline을 자동 생성하거나 모든 suite가 새 PC에서 검증되었다는 뜻은 아니다. diff --git a/docs/org-chart/expanded-usage.md b/docs/org-chart/expanded-usage.md index 223dff2..52aa4d1 100644 --- a/docs/org-chart/expanded-usage.md +++ b/docs/org-chart/expanded-usage.md @@ -137,6 +137,10 @@ inset accent 3px를 유지한다. 3글자 한글 이름은 `홍 길 동`처럼 Card geometry는 `packages/org-chart/src/styles/org-chart-expanded.css`에 Auto 전용으로 관리한다. 원본 Fixed CSS·SVG·Theme는 수정하지 않는다. `layoutConfig`·카드 교체 API는 없다. +Auto 부모·자식 관계선과 직원 연결선은 전용 `--hm-orgchart-expanded-line-color` +변수(기본 `#738399`)를 공유한다. 카드의 중립 Border·회사별 Border 강조와 Fixed +연결선은 이 변수를 사용하지 않는다. 배경 또는 이 색상을 재정의할 때는 실제 +합성 배경과 computed 표시색으로 비텍스트 대비 3:1 이상을 별도로 확인한다. Core는 Shadow DOM을 사용하므로 일반 호스트 CSS selector는 내부 카드에 닿지 않는다. 향후 별도 디자인 변경이 승인된다면 호스트가 공개 Core CSS 뒤에 다음 override를 결합한 diff --git a/docs/org-chart/implementation-report-p6.1.md b/docs/org-chart/implementation-report-p6.1.md new file mode 100644 index 0000000..fa6ced9 --- /dev/null +++ b/docs/org-chart/implementation-report-p6.1.md @@ -0,0 +1,101 @@ +# HMDesign OrgChart P6.1 — 연결선 접근성 및 배포 품질 보완 + +RESULT: **PASS** (요청한 P1 1건·P2 2건의 변경 범위) + +Auto 관계선 대비, 과거 브라우저 runner의 도구 경로, 두 배포 README의 링크를 수정했다. Fixed CSS·Core/React API·레이아웃 알고리즘·회사 프리셋·package.json·lockfile은 변경하지 않았다. 전체 운영 배포 인증 또는 기존 미검증 영역 승인으로 확대하지 않는다. + +## 작업 환경과 Git + +- 저장소: `D:\디자인시스템\HMDesign-orgchart-package` +- 범위: BOTH의 기존 공통 Core Auto CSS 및 검증 도구·패키지 문서. 신규 UI/Story 없음. +- 브랜치 및 시작/종료 HEAD: `feature/orgchart-package`, `d2b76e766466e1f156f6a0f8f63710e023af900e` +- origin: `https://gitea.hmac.kr/b25027/HMDesign.git`. 읽기 전용 `git ls-remote`의 feature SHA도 일치했다. 최초 sandbox 네트워크 오류 후 허용된 실행 환경에서 확인했다. +- Git 작성자 유지: `b25027` / `shkim4@samaneng.com` +- 기존 미커밋 파일: untracked `docs/org-chart/quality-diagnosis-p6.md` 1개. 수정하지 않았다. 최종 SHA-256: `224aa06880b9cad222f510b6e633d5b0faccece742f720584fd2b42912cdb10f`. +- 최종 Working Tree: 기존 추적 파일 23개 수정, 이번 신규 문서 2개·실행 도우미 1개, 기존 untracked P6 보고서 1개. 실행기·로그·캡처·Tarball은 ignored `test-results/org-chart-p6-1/`에 보존했다. +- Staged diff 없음. **Stage·Commit·Push·Merge·PR·main Checkout·Reset·Rebase·Clean·Force Push 미진행.** + +## 수정 결과 + +| 항목 | 수정 및 검증 결과 | +|---|---| +| P1 Auto 대비 | Auto 전용 `--hm-orgchart-expanded-line-color: #738399`. 부모/자식 pseudo 관계선과 직원 SVG path만 참조한다. 이전 computed `rgb(186, 199, 215)` → `rgb(115, 131, 153)`. 흰 배경 **1.7159036307:1 → 3.8635120805:1**. | +| 배경·상태 | browser computed 배경/색상·opacity·background image/filter/blend를 기록하고 투명 배경을 합성했다. 기본 실제 관계선 배경은 흰색이다. 기존 light surface override `rgb(240, 241, 242)`도 **3.4163257790:1**. Zoom/Pan 좌표 probe가 반환한 content 배경 `rgb(244,247,251)`의 보수적 비율은 3.5956293943:1이며, 이 probe에는 viewport 밖의 clipped 좌표도 포함될 수 있다. 최소 확인 비율은 3.4163:1. 임의 외부 배경 재정의는 별도 검증이 필요하다. | +| 기준 | 내용을 전달하는 그래픽의 인접 색상 대비 **3:1 이상 충족**. [W3C SC 1.4.11](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html). Anti-aliasing/전체 Fit의 축소는 기존 상태이며 굵기를 변경하지 않았다. | +| 기존 스타일 | 같은 페이지에서 수정 전 공개 CSS → 수정 후 CSS를 교체하여 Fixed 전체 DOM의 관련 computed 스타일 및 `::before/::after`를 비교했다. Fixed 연결선·협업 화살표·카드 스타일 불변. Auto 직원 path 좌표·굵기, 카드 offset/크기·Border·회사 accent 불변. | +| P2 실행 경로 | Core 17개·React 2개 runner가 공통 `scripts/orgchart-browser-runtime.mjs`를 사용한다. 기본은 표준 프로젝트 `playwright` 모듈 및 관리 Chromium. 기존 외부 모듈·브라우저는 `ORGCHART_PLAYWRIGHT_MODULE` / `ORGCHART_CHROME`으로 선택형 지정. 하드코딩된 개인 경로·고정 Chrome 경로 제거. 원래 모듈/실행 오류를 cause와 함께 안내한다. | +| 새 PC | 경로 이식성·선택형 환경변수·오류 메시지 검증 PASS. 이 PC의 프로젝트에는 Playwright가 없어 이미 설치된 외부 모듈과 Chrome을 환경변수로 지정하여 실제 실행했다. 신규 설치/업그레이드 없음. **실제 다른 PC의 fresh install과 실행은 NOT VERIFIED**. 기존 fixture·baseline·서버 origin 전제는 유지한다. [실행 안내](browser-verification.md). | +| P2 README | Core 4개, React 3개 링크(타 패키지 README 상대링크 포함), 총 7개를 기존 문서가 존재하는 공식 Gitea **고정 Commit URL**로 교체했다. 문서 복사·배포 파일 구조 변경 없음. | +| Tarball | Build 후 `npm pack --ignore-scripts`로 실제 2개 tgz 생성·추출. README의 깨진 상대 링크 0개, 외부 URL 형식/고정 Commit의 Git blob 존재 7/7. 공개 export 대상 파일과 README named import/type export 일치. Gitea URL의 HTTP 접근 권한은 별도 NOT VERIFIED(저장소 권한 필요 가능). | + +## 검증 결과와 재사용 + +| 검증 | 결과·범위 | +|---|---| +| Core Typecheck / Build | PASS / PASS, 기존 workspace 명령 사용 | +| React Typecheck / Build | PASS / PASS, 공통 Core 공개 선언 기반 | +| 변경 범위 브라우저 | **17/17 PASS**, 실제 Chrome. 300명·7회사, 부모/자식 3종 및 직원 관계선 computed 대비, 제목 Hover, Enter 접기/Space 펼치기, 회사 단일/복수 선택, UI Zoom·실제 pointer Pan·Fit, 기존 light background override 포함. 콘솔/page/request 오류 0. | +| 실행기·패키지 감사 | **87/87 PASS**. 19개 runner 및 공통 helper syntax, 도구 연결 변경을 제외한 원래 시나리오/Assert/기대값의 텍스트 동일성, PC 경로 제거, 기본/선택형 도구 설정과 명확한 실패, Tarball 링크·공개 export/import/type, `git diff --check`. 실제 과거 전체 suite 실행 수가 아니다. | +| 기존 P6 브라우저 | 59/59 PASS 재사용. 전체 재실행 없음. | +| 기존 패키지·CSS | Export/Tarball/타입 16/16, CSS 격리 9/9, Noto Sans KR PASS 재사용. 이번 pack 링크 검사는 변경된 README에 대한 보완이며 과거 증거를 덮어쓰지 않았다. | +| 기존 Guard | Static 및 연결 Runtime PASS 재사용. 제품 bootstrap/import/Navigation 계약 변경 없이 패키지 내부 CSS·도구·README만 수정했다. 기존 consumer Guard 전체 반복 없음. | +| Guard CSS 범위 | 기존 **STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT NOT VERIFIED / FINAL NOT VERIFIED**를 유지한다. 이번 연결선 computed 및 Fixed 영향 검증 PASS를 Core 전체 CSS/동적 입력/디자인 의도 승인으로 확대하지 않는다. 원본 RENDER-002 NOT VERIFIED 유지. | + +초기 browser 실행의 `ERR_NETWORK_ACCESS_DENIED`는 sandbox localhost 제한이었다. 초기 로그/JSON을 별도 보존하고 동일 실행기를 localhost 접근 가능한 권한으로 실행했다. 성공한 과거 suite를 반복하거나 기대값을 수정하지 않았다. 신규 제품 FAIL 0건. + +근거: [Build](../../test-results/org-chart-p6-1/build-results.json), [브라우저 raw](../../test-results/org-chart-p6-1/browser.json), [대비 raw](../../test-results/org-chart-p6-1/contrast.json), [감사](../../test-results/org-chart-p6-1/audit.json), [Pack 목록](../../test-results/org-chart-p6-1/pack.json), [캡처](../../test-results/org-chart-p6-1/auto-after.png), [Git 상태](../../test-results/org-chart-p6-1/final-state.json). 이 파일들의 기존 test-results 정책은 유지하며 Git Stage하지 않았다. + +## 변경 파일 + +제품·패키지·문서: + +- `packages/org-chart/src/styles/org-chart-expanded.css` +- `packages/org-chart/README.md` +- `packages/org-chart-react/README.md` +- `docs/org-chart/expanded-usage.md` +- `scripts/orgchart-browser-runtime.mjs` (신규) +- `docs/org-chart/browser-verification.md` (신규) +- `docs/org-chart/implementation-report-p6.1.md` (신규) + +도구 경로만 변경한 Core runner 17개: + +- `examples/org-chart/verify.mjs` +- `examples/org-chart/verify-p1.mjs` +- `examples/org-chart/verify-p2.mjs` +- `examples/org-chart/verify-p3.mjs` +- `examples/org-chart/verify-p3.1.mjs` +- `examples/org-chart/verify-p3.2.mjs` +- `examples/org-chart/verify-p5-1a.mjs` +- `examples/org-chart/verify-p5-1b.mjs` +- `examples/org-chart/verify-p5-23.mjs` +- `examples/org-chart/verify-p5-4.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-quality-boundaries.mjs` +- `examples/org-chart/verify-quality-p1.mjs` + +React runner 2개: + +- `examples/org-chart-react/verify.mjs` +- `examples/org-chart-react/verify-boundaries.mjs` + +## 남은 결함과 미검증 + +이번 요청의 배포 전 결함은 P1 1건·P2 2건 모두 해결했다. **이번 확인 범위의 남은 P0/P1/P2: 0/0/0**, 신규 회귀 결함 0. 과거 Fixed 대비 REVIEW와 오래된 테스트 FAIL을 새 PASS로 재분류하지 않았다. + +계속 NOT VERIFIED: Guard 전체 CSS Runtime/디자인 의도 및 임의 동적 입력, 실제 화면 리더·물리 터치·타 브라우저, 전체 역사 회귀/과거 FAIL 전체 재분류, 모든 Fixed 폭·전체 픽셀 일치, 임의 데이터/override/접힘 전 조합, 실제 새 PC fresh install, 실제 운영 base/font/CSP/origin·배포·SSR/hydration·실제 API. 390/768/1280/1440 기존 P6 결과를 재사용했으며 이번에는 1440px의 변경 범위 시나리오를 확인했다. + +Stage·Commit·Push는 사용자 검토 후 별도 요청으로 진행한다. + +## 작업 시간 + +- Started At: 2026-10-12 22:33:57 KST +- Completed At: 2026-10-12 22:43:52 KST +- Actual Duration: 9분 55초 +- Estimated Duration: 최초 35~45분 +- Variance: 예상 하한보다 25분 5초, 상한보다 35분 5초 짧음 + +준비된 기존 의존성/브라우저, 공통 실행 도우미, P6 정상 기록 재사용과 변경 범위 검사로 예상보다 빠르게 완료했다. diff --git a/docs/org-chart/quality-diagnosis-p6.md b/docs/org-chart/quality-diagnosis-p6.md new file mode 100644 index 0000000..f91c152 --- /dev/null +++ b/docs/org-chart/quality-diagnosis-p6.md @@ -0,0 +1,131 @@ +# HMDesign OrgChart P6 핵심 품질과 배포 준비 진단 + +RESULT: **PARTIAL** + +현재 HEAD에서 Core·React Typecheck/Build, 공개 패키지 경계, Fixed/Auto 대표 실행은 통과했다. 확인한 범위의 P0 결함은 없다. Auto 관계 연결선의 낮은 대비(P1)를 배포 전 보완하도록 권장한다. Guard Runtime은 별도 증거 연결로 PASS가 되었으나 전체 CSS 디자인 의도와 모든 동적 상태는 NOT VERIFIED다. 기술적인 패키징·실행 준비는 가능하며, 무조건적인 배포 승인으로 해석하지 않는다. + +## 작업 환경과 Git + +- 실제 폴더: `D:\디자인시스템\HMDesign-orgchart-package` +- 범위: BOTH, Vanilla HTML/Classic·React 공통 Core 진단. 신규 업무 화면 개발 없음. +- 브랜치: `feature/orgchart-package` +- 시작/종료 HEAD 및 시작/종료 원격 feature SHA: `d2b76e766466e1f156f6a0f8f63710e023af900e` +- origin: `https://gitea.hmac.kr/b25027/HMDesign.git` +- Git 작성자: `b25027`, `shkim4@samaneng.com` +- 시작 Working Tree: clean. 완료 후 기존 추적 파일의 전체 SHA-256은 시작과 동일하며 staged diff 없음. +- 신규 보고서: 이 파일. 실행기·로그·캡처·tarball·빌드 결과는 ignored `test-results/org-chart-p6/`에 분리했다. +- **제품 소스, Fixed/Auto CSS·자산·데이터 스키마·Guard 수정 없음. Stage·Commit·Push·Merge·PR·main Checkout 미진행. Reset·Rebase·Clean·Force Push 없음.** + +사용자가 이번 작업에 지정한 폴더·feature 브랜치와 Commit/Push 금지가 일반 AGENTS의 공식 수정 경로/main 정책보다 우선한다. 원격 확인은 `git ls-remote`로 읽기만 수행했다. + +## 검사 결과 + +| 영역 | 현재 HEAD 결과 | 근거와 범위 | +|---|---|---| +| Git·추적 파일 | PASS | 폴더/브랜치/SHA/origin·remote 일치. Core/React/JSON/CSS/로고/placeholder/font 소스 추적. Git에 node_modules/dist/test-results/.env/log가 포함된 흔적 없음. 전체 민감정보 보안 감사는 수행하지 않음. | +| Core Typecheck / Build | PASS | 실제 workspace script. ESM·Classic IIFE·선언·CSS·engine license 생성. | +| React Typecheck / Build | PASS | Core 공개 선언 기반 Wrapper. React/Core 외부 dependency 유지. | +| 새 PC 실행 | PASS | 설치된 기존 node_modules와 bundled Node 24.19.0 사용. 의존성 설치/업그레이드·lockfile 수정 없음. | +| React production consumer | PASS | 기존 React 예제 build와 별도 Expanded 소비자 build. 500kB 초과 chunk 경고는 오류와 구분. | +| 공개 패키지·tarball | 16/16 PASS | 실제 pack(`--ignore-scripts`), 추출 후 Core/React ESM import·NodeNext 선언 소비. export 대상 파일 존재. | +| 핵심 브라우저 | 59/59 PASS | 실제 Chrome, 대표 Fixed/Auto/HTML/React 경로. 44개 성공 결과는 초기 실행에서 재사용하고 실패한 검사 조건·미완료 항목만 후속 확인. | +| 추가 CSS | 9/9 PASS | 7개 회사 title color, 3방향 Border 면, HM Theme/Fixed 격리, 입력 변수·Auto CSS override, placeholder error 복귀. | +| 실제 폰트 | 1/1 PASS | theme-free Classic HTML의 CDP glyph font: Noto Sans KR custom font. computed family도 4개 React 폭에서 동일. | +| Guard Static | PASS | 최종 diagnostic React bootstrap, PARTIAL, consumer graph. FAIL 0, 원본 RENDER-002 NOT VERIFIED 유지. | +| Guard Runtime 연결 | PASS | source/contract fingerprint 일치, `linked=true`, 4개 폭·핵심 상호작용·실제 build 자산 hash 연결. | +| CSS 포괄 판정 | NOT VERIFIED | STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT NOT VERIFIED / FINAL NOT VERIFIED. 명시한 computed font 4건의 cssEvidence는 PASS지만 위치별 전체 CSS 승인으로 확대하지 않음. | + +[빌드 로그 집계](../../test-results/org-chart-p6/build-results.json), [패키지 검사](../../test-results/org-chart-p6/package-audit.json), [브라우저 원시값](../../test-results/org-chart-p6/browser.json), [CSS 원시값](../../test-results/org-chart-p6/css.json), [glyph font](../../test-results/org-chart-p6/font.json), [최종 Git 해시 비교](../../test-results/org-chart-p6/final-state.json). + +## 기존 PASS 재사용과 현재 HEAD의 관계 + +| 과거 결과 | 재사용 근거 | 현재 HEAD 판정과의 구분 | +|---|---|---| +| P5-1B 879/879 | 보존된 browser.json에서 PASS 879·errors 0 확인 | 이후 P5-2/3/4 제품 변경이 있으므로 현재 HEAD 전체 회귀 879건으로 재인증하지 않음. | +| P5-2/3 96/96 | 보존된 browser.json PASS 96·errors 0 | P5-4의 카드 표시/viewport 변경 영향은 당시 46건 및 이번 대표 검사를 사용. | +| P5-4 46/46 | 보존된 browser.json PASS 46·errors 0 | 기록 HEAD는 `a92913d`이고 검증 대상은 당시 미커밋 소스. 해당 구현은 `064517e`, 현재 `d2b76e7`은 문서만 변경. 최종 전체 소스 manifest 부재 때문에 byte 단위 대응 전체는 NOT VERIFIED. | +| P5-0 preset unit 10/10 | 사용자 제공 결과를 과거 근거로 유지. preset 소스의 마지막 변경 Commit `80583eb` 확인 | 이번 PC에서 원본 해당 unit 로그는 찾지 못함. 전체 unit 반복 없이 현재 7회사 runtime 색상을 별도로 확인. | +| Fixed 이전 PASS | 이전 보고서의 단계별 결과·P5-4 최소 회귀 기록 보존 | 현재 Fixed 대표 실행·React parity·CSS 격리로 보완. 전체 픽셀 비교 없음. | +| 300명 성능 | P5-2/3 보고서 195.6ms 초기 mount, 42.0ms 단일 회사 선택 | 과거 조건부 수치이며 새 PC 성능 측정값이 아님. 동일 성능 benchmark를 반복하지 않음. | + +P5-4 시작 manifest 중 변경 대상 제외 25개를 비교해 23개가 현재 byte hash와 일치했다. 불일치 2개는 `verify-p5-1b.mjs`, `verify-p5-23.mjs`로 Playwright 경로 이식성 변경 대상이다. 이 불일치를 제품 회귀로 단정하지 않았다. P5-1B/2·3/4 runner의 Node syntax 검사와 현재 Playwright module/Chrome 경로 실행은 가능하며, 기존 localhost·baseline dist가 필요한 전체 runner는 재실행하지 않았다. + +[과거 집계와 hash](../../test-results/org-chart-p6/historical-evidence.json), [소스 대응 범위](../../test-results/org-chart-p6/historical-source-mapping.json). 과거 raw 증거는 Git에 포함되지 않는 test-results이며 배포물의 필수 제품 소스와 구분한다. + +## Fixed 대표 회귀 + +- Full Composition의 6개 주요 조직 표시, 하위 셀/팀 추가 표시 정상. 조직 제목 전체 수가 6이라는 뜻은 아니다. +- 대표자 badge 없음, 기존 카드 자산·실측 크기·Workdesk Gradient 유지. Auto를 동시에 mount해도 Fixed 카드 geometry와 Gradient 불변. +- 우측 인원 현황 및 footer 관계사 41명 집계 표시. Fixed canvas Fit/scroll 치수는 browser.json의 `Fixed canvas Fit and scroll dimensions`에 보존. +- 직원 정보 popup의 변환 없는 layer·focus 내부·ESC 원래 카드 복귀 확인. +- 실제 React Fixed 소비자와 Vanilla Fixed의 카드 ID/이름/직위/크기/font/border 동일. +- Fixed 전체 픽셀 비교, 모든 폭/소비자, 이전 Full Composition 전체 suite는 NOT VERIFIED. + +[Fixed 1440 캡처](../../test-results/org-chart-p6/fixed-1440.png). + +## Auto 대표 회귀 + +- Small 20명/3회사, Medium 100명/5회사, Large 300명/7회사. 고유 직원 ID의 누락·중복·카드 겹침 없음. +- 실제 DOM 부모와 데이터 parent ID 일치. Small 최대 2Depth, Medium 3Depth, Large 4Depth를 포함한 대표 재귀 배치 확인. +- 전체 Fit에서 카드가 viewport 안에 포함. 300명에서 실제 pointer Pan, UI Zoom In/Out, 그룹 Enter collapse/Space expand 확인. +- 단일 한맥 회사 선택 시 독립 root 1개, 원본 summary.raw.total은 300 유지. React 회사 해제→단일→전체 복귀 확인. +- 직원 popup, 7회사 그룹 색상, top/left/right endpoint 오차 1px 미만과 연결 방향의 한 면만 회사색 적용 확인. +- HTML 준비 예제의 300명 전환, React의 300명 선택과 고유 ID 렌더링 확인. 대용량 성능 benchmark는 재실행하지 않음. +- React 390/768/1280/1440px 가로 문서 overflow 없음, viewport hidden scrollLeft/Top=0. 문서/viewport의 scrollWidth·clientWidth·scrollHeight·clientHeight는 원시 측정에 보존. +- 임의 데이터 전 조합·모든 접힘 state·다른 브라우저·물리적 터치는 NOT VERIFIED. + +[Auto 300명 Fit](../../test-results/org-chart-p6/auto-300-fit.png), [React 390px](../../test-results/org-chart-p6/react-390.png), [React 1440px](../../test-results/org-chart-p6/react-1440.png). + +## HTML React Core와 CSS + +HTML은 `createOrgChart`와 `JsonOrgChartDataSource`, React Wrapper는 같은 공개 `createOrgChart`를 사용한다. React bundle은 Core를 external로 남기며 별도 조직도 엔진을 포함하지 않는다. 같은 20명 JSON의 HTML/React 카드 identity·표시 내용·geometry·폰트·border·연결 방향을 비교했다. Fixed/Auto 분기·회사 선택·collapse·popup 책임도 공통 Core다. + +Core `/browser`는 실제 `window.HMOrgChart`를 제공하며 준비된 `p1-classic.html`을 file URL에서 렌더링했다. public CSS는 private `@import` 없이 self-contained, 자산은 bundle의 data URL 또는 검증된 font/CSS URL을 사용한다. 실제 소비자에서 깨진 요청·console/page error 0이다. Core tarball은 engine MIT notice도 포함한다. + +OrgChart CSS는 dedicated Shadow DOM에 로드된다. 외부 probe의 색/font가 변경되지 않았고 전역 HM 색상·font probe에도 Auto/Fixed 스타일이 유지됐다. Noto는 호스트 font-face 제공 계약이다. `--hm-orgchart-bg-surface`의 instance-local 상속과 Shadow 안 `.hm-orgchart-expanded`의 name-size override는 적용되고 다른 Fixed instance에는 영향을 주지 않았다. Expanded 내부 선언 변수를 host div에 설정하는 방식은 문서대로 보장하지 않는다. + +CSS에서 선언이 없는 모든 `--hm-orgchart-*` 입력을 Theme 누락으로 처리하지 않았다. design-tokens.css는 optional host inputs를 의도적으로 미선언하고 local 기본값을 사용하며, current gradient·border와 Auto 회사색·배치 변수는 Core setProperty로 정의된다. 유한 회사 후보는 기존 7개 preset 선언과 실측으로 대조했다. [token 목록](../../test-results/org-chart-p6/token-inventory.json), [소스 정의 분류](../../test-results/org-chart-p6/token-source-review.json). 임의 외부 입력과 모든 동적 조합은 NOT VERIFIED다. + +React 소비자에는 공개 HM Button/Checkbox/Label/Select가 실제 렌더링됐다. Core native button/dialog는 기존 Vanilla adapter 계약이다. FilterBar는 검색 요구 없는 fixture 전환·즉시 회사 표시 구성이라 미사용 근거를 유지했다. 임베드 조직도에는 페이지 Navigation을 추가하지 않았다. 전체 접근성 이름·disabled/readOnly 조합·screen reader 인증은 이번 대표 점검을 넘어선다. + +## Guard 결과와 실행기 오류 + +Guard는 정적 분석기이며 브라우저를 자체 실행하지 않는다. 최종 `--result`는 실제 production build에 사용한 React bootstrap(`test-results/org-chart-p6/react-build/main.tsx`)이다. 그 source/contract fingerprint와 실제 production HTML·JS/CSS/font SHA, 4개 폭·named interaction을 연결했다. 원본의 RENDER-002는 지우지 않았으며 결합 결과만 Runtime PASS다. + +[원본 Guard](../../test-results/org-chart-p6/guard.json), [Runtime 입력](../../test-results/org-chart-p6/runtime.json), [결합 결과](../../test-results/org-chart-p6/combined.json). PARTIAL consumer graph 결과는 Core 내부 전체 CSS 검사나 운영 배포 검증이 아니다. 결합 status는 **NOT VERIFIED**, styleVerification은 **STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT NOT VERIFIED / FINAL NOT VERIFIED**다. + +초기 생성 HTML의 `/assets`를 저장소 root로 찾지 못한 Guard 원본을 [보존](../../test-results/org-chart-p6/guard-built-html-unresolved.json)했다. 검사 규칙·기대값·Guard 소스를 변경하지 않고 bootstrap 지정 경로를 교정했다. browser sandbox localhost 차단, Fixed 전체 source 직원 수를 카드 수로 기다린 오류, 전체/주요 조직 구분 및 footer selector 오류, React 자산 서버 mapping 오류도 초기 로그에 보존했다. 이는 신규 제품 결함에 합산하지 않았다. CDP font node 조회 오류는 DOM 문서를 초기화한 별도 font probe에서 해결했으며 CSS 9개 PASS는 반복하지 않았다. + +과거 `verify-p1.mjs`의 197건 중 145 PASS/52 FAIL 및 v0 `verify.mjs`의 알려진 FAIL은 [P2 보고서](implementation-report-p2.md)의 계약 변경 기록으로 보존한다. 이번 PC에는 그 원본 JSON 경로가 없어서 재분류 전체는 NOT VERIFIED다. v0의 사용자 언급 9건과 당시 저장 기록 6건/2 FAIL 차이도 확정하지 않는다. 오래된 기대값을 PASS로 변경하거나 전체 suite를 반복하지 않았다. + +## 배포 전 결함과 후속 조치 + +| 우선순위 | 위치와 재현 | 실제 결과와 기대 결과 | 영향 및 신규 여부 | 권장 조치와 예상 시간 | +|---|---|---|---|---| +| P1 | `design-tokens.css:14`, `org-chart-expanded.css:165`. 기본 Auto 300명 직원 연결선 | computed stroke `rgb(186,199,215)` / 흰 면. 대비 **1.715904:1**, 관계 전달 그래픽의 기대 3:1 미달 | Auto 관계 식별. 기존 standalone stroke를 Auto에도 사용하는 미해결 항목을 현 HEAD에서 새로 확인. P6 코드 변경으로 생긴 결함 아님 | 관계선 전용 의미 token/색상 선택 후 scoped 적용 및 관련 경로 검사. 모든 중립 border/브랜드 일괄 변경 금지. 승인 이후 약 30~60분. | +| P2 | `verify-p2.mjs`, `verify-p3*.mjs`, `verify-p5-1a.mjs` 및 일부 과거 check runner | 이전 `C:/Users/user/...` fallback 또는 고정 Chrome/tool import. 다른 PC에서 기본 실행 실패 가능 | 과거 검증 도구 이식성, shipped runtime에는 영향 없음. 기존. P5 최신 3개 runner는 env override 가능·syntax PASS | 공통 tool resolver 또는 실행 문서/환경변수 안내 정리. 약 15~30분. | +| P2 | pack의 Core/React README `../../docs/org-chart/...` 링크 | docs는 files 목록에 없어 추출 tarball의 로컬 문서 링크가 해결되지 않음 | 독립 패키지 문서 소비. 기존 README/packaging 경계, runtime 무관 | 공개 문서 URL 사용 또는 필요한 사용 문서 포함. 약 10~20분. | + +연결선 기준은 [W3C Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)의 내용 이해에 필요한 그래픽에 대한 3:1 요구를 적용했다. 자동 UI 경계 전체에 이 기준을 확장하지 않았다. [현재 computed 색·계산 근거](../../test-results/org-chart-p6/contrast.json). + +Fixed의 디자인기획·솔루션영업·허브에 대한 [과거 대비 REVIEW](quality-review-p1.md)는 별도 검토 이력이다. 현재 header는 20px/700으로 과거 15px 측정과 달라, 과거 수치만으로 현재 텍스트 FAIL을 확정하지 않았다. 현재 computed/크기/Gradient는 css.json에 기록했으며 텍스트 영역의 최종 pixel 대비 판정은 NOT VERIFIED다. 허브의 13px 흰 텍스트도 새 픽셀 재인증은 하지 않았다. 이전 브랜드 디자인 선택을 임의 변경하지 않는다. + +P0 0건(확인 범위). P1 1건과 P2 2건. 예상 후속 수정은 약 **55~110분**이며 디자인 선택/승인 대기와 운영 환경 점검은 별도다. 전체 Guard CSS Runtime/디자인 의도 증거를 추가하려면 소비 위치별 상태·4개 폭 근거 정리가 더 필요하다(약 45~90분, 수정 시간과 구분). + +## 남은 미검증과 배포 판단 + +배포 전 우선 조치는 Auto 관계선 대비 보완 여부 결정, 현재 consumer의 CSS 의도/입력 범위 확정, 실제 배포 base/font/CSP 경로의 smoke 확인이다. 이번 진단에서 자동 수정은 하지 않았다. + +NOT VERIFIED: fresh `npm ci`/원격 registry 설치, 운영 소비자·임의 base/CSP/origin, 전체 Storybook production build, 전 역사 회귀 및 기존 FAIL 전체 재분류, 모든 임의 데이터/override/collapse 조합, 모든 Fixed 폭·픽셀 완전 일치, 실제 화면 리더·물리 모바일·다른 엔진·SSR/hydration·heap/GC·실제 API. P0 없음은 이러한 범위의 무결성을 인증하지 않는다. + +패키지의 기술적 실행·빌드와 대표 기능은 배포 준비 가능하다. **P1 개선과 위 배포 환경 확인이 남아 최종 배포 준비 판정은 PARTIAL**이다. 현재 운영 main 병합/배포/Push는 실행하지 않았다. + +## 작업 시간 + +- Started At: 2026-10-12 22:07:12 KST +- Completed At: 2026-10-12 22:27:09 KST +- Actual Duration: 19분 57초 +- Estimated Duration: 최초 60~90분 (근거 확인 10~15분 / 실행 40~60분 / 보고 10~15분) +- Variance: 예상 하한보다 40분 3초, 상한보다 70분 3초 짧음 + +기존 PASS 재사용, 준비된 의존성/브라우저 환경, 전체 suite 제외로 최초 예상보다 빠르게 완료했다. diff --git a/packages/org-chart-react/README.md b/packages/org-chart-react/README.md index 2b6e3d6..06815f0 100644 --- a/packages/org-chart-react/README.md +++ b/packages/org-chart-react/README.md @@ -33,7 +33,7 @@ export function OrganizationContent({ data }: { data: OrgChartDataset }) { } ``` -The `?url` imports above are Vite asset imports, not a universal browser feature. Other hosts resolve the two Core public CSS entries to actual deployment URLs. Importing CSS only into the document does not style the Core's Shadow DOM. Engine CSS is linked first, then standalone Core CSS. P1 owns its colors, typography and geometry without depending on HM Theme. Set public `--hm-orgchart-*` properties on the wrapper container to override only this instance. No HM common variables are redefined. The wrapper does not depend on `@hm-design/ui`; P3 adds lookup Props without replacing the Core renderer. For independent Tree/Summary integration, use the [Core factories](../../docs/org-chart/standalone-components-p1.md) in a ref/effect without copying their UI. +The `?url` imports above are Vite asset imports, not a universal browser feature. Other hosts resolve the two Core public CSS entries to actual deployment URLs. Importing CSS only into the document does not style the Core's Shadow DOM. Engine CSS is linked first, then standalone Core CSS. P1 owns its colors, typography and geometry without depending on HM Theme. Set public `--hm-orgchart-*` properties on the wrapper container to override only this instance. No HM common variables are redefined. The wrapper does not depend on `@hm-design/ui`; P3 adds lookup Props without replacing the Core renderer. For independent Tree/Summary integration, use the [Core factories](https://gitea.hmac.kr/b25027/HMDesign/src/commit/d2b76e766466e1f156f6a0f8f63710e023af900e/docs/org-chart/standalone-components-p1.md) in a ref/effect without copying their UI. ## Public API @@ -46,11 +46,11 @@ Named runtime export: `OrgChart`. Type exports: `OrgChartProps` and the Core's p - 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 renders company forests, collapse and Zoom/Pan/Fit. P5-4 retains the current Expanded card presentation by user decision; external SVG matching is no longer required. Changing mode recreates the Core handle. -See [Expanded usage and styling](../../docs/org-chart/expanded-usage.md) for company +See [Expanded usage and styling](https://gitea.hmac.kr/b25027/HMDesign/src/commit/d2b76e766466e1f156f6a0f8f63710e023af900e/docs/org-chart/expanded-usage.md) for company selection, top nodes, JSON sources, popup ownership and Auto-only CSS examples. Keyboard focus reveals offscreen controls at the current Zoom; group-title Hover feedback and drag/keyboard activation are implemented in the shared Core. -- Optional `companyId`: legacy Auto fallback company preset (default `hanmac`). Explicit/inherited organization company identity takes priority; Fixed ignores company colors. Changing it recreates the handle. See [Core README](../org-chart/README.md#layout-boundary-p5-2--p5-3). +- Optional `companyId`: legacy Auto fallback company preset (default `hanmac`). Explicit/inherited organization company identity takes priority; Fixed ignores company colors. Changing it recreates the handle. See [Core README](https://gitea.hmac.kr/b25027/HMDesign/src/commit/d2b76e766466e1f156f6a0f8f63710e023af900e/packages/org-chart/README.md). - Optional `selectedCompanyIds`: undefined selects all, [] selects none. Changes call Core selection on the existing instance, preserving per-company collapse state and source counts. - Optional `companyTopNodes`, `employeeConnections`, `zoom`: immutable Core configuration maps/range. Identity changes recreate the handle; memoize these objects. Names, positions and profile overrides affect only Auto presentation, not callback data. - 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. diff --git a/packages/org-chart/README.md b/packages/org-chart/README.md index fda4a15..3c7c7ef 100644 --- a/packages/org-chart/README.md +++ b/packages/org-chart/README.md @@ -59,7 +59,7 @@ The existing employee popup still uses its displayMode policy and receives raw d P5-4 adds group-title Hover feedback and reveals offscreen keyboard-focused cards without changing Zoom. Drag click suppression does not block Enter/Space activation. -See [Expanded usage and styling](../../docs/org-chart/expanded-usage.md) for complete +See [Expanded usage and styling](https://gitea.hmac.kr/b25027/HMDesign/src/commit/d2b76e766466e1f156f6a0f8f63710e023af900e/docs/org-chart/expanded-usage.md) for complete Vanilla/React examples, Shadow DOM CSS ownership and verification boundaries. `selectedCompanyIds` / `setSelectedCompanies(ids?)` filter the view: undefined @@ -132,13 +132,13 @@ Representative cards never render job-title, role or status badges, empty attrib Large department cards use 24px names / 18px positions; compact cards use 18px names / 15px positions. Representative typography and the existing weights, line heights and colors are retained. Read-only dispatched/onLeave cards share the compact content layout (108×52 card, 24×44 photo slot), with their original gray surface and text colors. Status headers share the standard 2Depth 20px/700/19.7px typography; existing department-specific exceptions remain. Position and badge whitespace is removed only for display. -Employee-card logo contain boxes scale exactly 1.5×: small 12→18px; representative/large/status 14→21px. Original assets and footer logos stay unchanged. See [P3.2 report](../../docs/org-chart/implementation-report-p3.2.md) for before/after browser measurements and preservation evidence. Historical P3.1 geometry below describes that earlier stage. +Employee-card logo contain boxes scale exactly 1.5×: small 12→18px; representative/large/status 14→21px. Original assets and footer logos stay unchanged. See [P3.2 report](https://gitea.hmac.kr/b25027/HMDesign/src/commit/d2b76e766466e1f156f6a0f8f63710e023af900e/docs/org-chart/implementation-report-p3.2.md) for before/after browser measurements and preservation evidence. Historical P3.1 geometry below describes that earlier stage. ### P3.1 display policy and local font loading The OrgChart-scoped default family is **Noto Sans KR**; existing `--hm-orgchart-font-family` overrides remain available. The host must register its font-face once: HM Storybook already loads the existing HM Theme face. The HTML P1 host loads the unchanged `public/fonts/NotoSansKR-variable.ttf` copied to `assets/fonts/`; the React P1 host references that same source through its bundler. Global HM Theme files are unchanged. The Korean Core shell declares `lang="ko"` for consistent glyph shaping across host languages. -Read-only Full Composition suppresses only the `경영진` **job-title badge**. Positions (including a literal `경영진` position), other raw badges, employee records, popup fields and statistics are retained. Position whitespace is removed only in the card display. Other renderer modes keep their badge policy. All card types share one rectangular neutral SVG for a missing or failed profile image; an available profile image takes precedence. Approved cards, photo-slot dimensions and P3 status-card geometry are unchanged. See [P3.1 report](../../docs/org-chart/implementation-report-p3.1.md) for focused browser evidence and limits. +Read-only Full Composition suppresses only the `경영진` **job-title badge**. Positions (including a literal `경영진` position), other raw badges, employee records, popup fields and statistics are retained. Position whitespace is removed only in the card display. Other renderer modes keep their badge policy. All card types share one rectangular neutral SVG for a missing or failed profile image; an available profile image takes precedence. Approved cards, photo-slot dimensions and P3 status-card geometry are unchanged. See [P3.1 report](https://gitea.hmac.kr/b25027/HMDesign/src/commit/d2b76e766466e1f156f6a0f8f63710e023af900e/docs/org-chart/implementation-report-p3.1.md) for focused browser evidence and limits. Optional `organizationLinks: Readonly>` maps existing organization IDs to host-configured URLs. Only original hierarchy depth 1 titles become native links. Missing, undefined or blank URLs keep ordinary titles; no destination is generated. HTTP(S) and relative URLs are accepted; invalid URLs, other schemes and credentials reject construction with `TypeError`. Group links retain native keyboard navigation and a visible focus outline, separately from employee activation. @@ -176,7 +176,7 @@ Organization and employee IDs have independent namespaces. All references are ch P1 **ships an independent OrgChart design**. It requires no HM Theme, React/UI peer or font download. Resolve the two exported CSS assets to URLs; the Core loads them only into its dedicated open Shadow DOM. `style.css` includes its own scoped defaults and contains no private CSS imports. Summary-only components require only this CSS. `/browser` is a classic IIFE exposing `window.HMOrgChart`; `dist/index.js` is bundled ESM with no bare package imports. -All colors, typography, spacing, borders, radius and gradients belong to `src/styles/design-tokens.css` and `src/core/style-presets.ts`. Public `--hm-orgchart-*` inputs inherit from the caller's container; internal `--hm-orgchart-resolved-*` aliases resolve defaults without overriding inherited inputs. HM Theme variables do not affect this design. Workdesk organization header gradients and white heading text are measured; neutral/card styling is a documented design adaptation, not an official Workdesk value. Existing v0.1 demos and historical validation records are preserved. P1 theme-free examples are `dist/p1.html` (HTTP/ESM) and `dist/p1-classic.html` (direct file/inline JSON). See [standalone component integration](../../docs/org-chart/standalone-components-p1.md). +All colors, typography, spacing, borders, radius and gradients belong to `src/styles/design-tokens.css` and `src/core/style-presets.ts`. Public `--hm-orgchart-*` inputs inherit from the caller's container; internal `--hm-orgchart-resolved-*` aliases resolve defaults without overriding inherited inputs. HM Theme variables do not affect this design. Workdesk organization header gradients and white heading text are measured; neutral/card styling is a documented design adaptation, not an official Workdesk value. Existing v0.1 demos and historical validation records are preserved. P1 theme-free examples are `dist/p1.html` (HTTP/ESM) and `dist/p1-classic.html` (direct file/inline JSON). See [standalone component integration](https://gitea.hmac.kr/b25027/HMDesign/src/commit/d2b76e766466e1f156f6a0f8f63710e023af900e/docs/org-chart/standalone-components-p1.md). ## Engine disposal boundary