102 lines
9.4 KiB
Markdown
102 lines
9.4 KiB
Markdown
# 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 정상 기록 재사용과 변경 범위 검사로 예상보다 빠르게 완료했다.
|