OrgChart P2 — Depth별 카드와 Workdesk Full Composition

RESULT: PASS — 현재 P1 fixture의 조회 전용 Full Composition 수정 범위.

실제 조직 계층에 따라 1Depth 조직장만 대형 카드를 사용하고, 2Depth 조직장은 소형 카드로 표시한다. Workdesk 원본 연결선·협업 화살표·장식을 공통 Core에 적용했다. 기존 Guard 미검증과 이전 검사의 FAIL은 이 결과와 별도로 보존한다. Workdesk 전체 픽셀 일치나 모든 데이터 조합의 지원을 뜻하지 않는다.

작업 범위와 보존

수정 경로: D:\디자인시스템\HMDesign-OrgChart, 브랜치 feature/orgchart-package.
Workdesk 원본 D:\디자인시스템\gpd-workdesk\sample\조직도_v1.3는 읽기 전용으로 참조했다. 운영 main에는 수정하지 않았다.
기존 미커밋 변경은 시작 파일 해시와 비교해 보존했다. 원본 카드 SVG·회사 로고·공통 Theme·Component·Pattern·Storybook 메뉴·독립 컴포넌트 API를 유지했다.
직원 41명의 원본 fixture는 변경하지 않았다. 직원 ID·이름·리더 정보·직위·소속·상태·조직 관계·집계 계약도 그대로다.
Stage·Commit·Push·Merge·Reset·Rebase를 수행하지 않았다.

카드·이름·간격

변경 전: 하위 조직장도 모두 대형 leader 자산을 사용했다. 조회 전용 외부 margin이 후속 직원 margin 규칙에 덮여 실제 헤더↔카드 간격은 0px이었다.
변경 후 대표자: 전용 SVG 146×74px 유지.
변경 후 1Depth: 주요 조직장 6명 모두 기존 대형 SVG 146×68px 사용.
변경 후 2Depth: fixture의 기존 조직장 3명 모두 소형 SVG 108×52px 사용. 다른 일반 직원도 소형 카드를 유지한다.
대형 여부는 직책 문자열이나 리더 플래그 단독이 아니라 원본 parentId 조상 관계로 계산한다. semantic leader 구분과 직책 뱃지는 보존하며 독립·interactive 화면의 카드 정책은 유지한다.
최신 사용자 수정 기준으로 1Depth 외부 간격은 8px, 2Depth 이하 헤더↔첫 카드 간격은 10px다. 화면의 17개 조직 노드에서 Depth별 간격을 확인했다.
Storybook 1920px 측정값을 Stage 좌표로 환산하면 1Depth 헤더 Y 254.1875px, 높이 36px, 대형 카드 상단 298.1875px다. 6개 외부 간격은 약 8.000002px, 하위 조직 간격은 9.99998–10.00001px였다.
Full Composition의 대표자·조직장·직원·파견·휴직을 포함한 렌더 카드 43개의 이름은 모두 홍 길 동으로 표시한다. 접근성 이름은 홍길동이다. 직위·직책도 요청한 한글 자간 표시를 적용하며 원본 데이터는 변경하지 않는다.
확정 Typography·카드 크기·프로필 크기와 직위↔이름 내부 gap 0px를 유지했다. 외부 헤더 간격과 내부 행 간격을 분리했다.

Workdesk 원본 디자인 적용

활성 compact screenD 곡선 3개, 대표자↔허브 중앙선, 실제 헤더 상단 중앙을 따라가는 사업관리 곡선의 SVG Path 5개를 적용했다. 사업관리 곡선은 원본 renderer의 계산식을 사용한다.
Stroke #45639F, width 0.893023, dasharray 1.79 1.79, fill none을 사용한다. 기존 상단 pseudo 연결선은 해당 원본 artwork preset에서 숨겨 중복을 제거했다.
원본에서 하위 조직 SVG 블록은 비활성 상태이며 현재 사용 가능한 별도 원본 Path가 없다. 하위 셀·팀은 기존 엔진의 실제 계층 경로를 보존하고 원본 점선 스타일을 적용했다. 원본에 없는 관계를 추가하지 않았다.
협업 화살표는 원본 PNG 4종으로 5개를 배치했다. 원본 SVG image 방식과 preserveAspectRatio="none"을 유지한다.
Group.svg, bg_sky.png, bg_main.png, Frame2@3x.png, 1-8-4x-1@2x.png와 화살표 4종, 총 9개 자산을 복사했다. SHA-256이 Workdesk 원본과 모두 일치한다.
?inline import로 Core ESM/IIFE에 자산을 포함해 외부 Workdesk 서버 의존성을 제거했다. HTML·React·직접 열기 classic에서 동일한 자산을 사용한다.
장식 0, SVG 선·화살표 4, 조직 7, 허브 12, 통계 18, 파견·휴직 32, 대표자 35의 레이어를 구성했다. 전체 artwork는 카드와 같은 Stage 안에서 함께 축소된다.
우측 조직별 총인원, 좌하단 파견·휴직의 가로 2개 그룹, 하단 관계사 한 줄 현황을 유지한다. 독립 PositionSummary의 상세 교차표 기능은 보존했다.

HTML·React·Storybook과 반응형

HTML p1.html?mode=readOnly, 직접 열기 p1-classic.html?mode=readOnly, React p1.html?mode=readOnly, 기존 Full Composition Story가 같은 Core DOM/CSS를 사용한다.
React 예제에 HTML과 같은 mode query 처리를 연결했다. 별도 React 노드 UI를 만들지 않았다.
기준 Stage 1920×914.5px와 기존 폭·높이 기반 단일 비례축소를 유지한다. 작은 화면에서 카드 종류를 바꾸거나 조직을 재배열하지 않는다.
1920×1080: scale 0.983333.
1440×900: scale 0.733333.
1280×800: scale 0.650000.
768×1024: scale 0.383333.
390×844: scale 0.186458.
네 진입 경로의 조직·카드·간격·통계·자산·축소 측정값이 일치했다. Storybook의 베이지 호스트 배경과 HTML의 흰 배경 때문에 바깥 배경 톤은 다르다.
390px에서도 구조 전체가 함께 축소되지만 글자는 매우 작다. 모바일에서 원본 크기 가독성을 제공한다는 의미는 아니다.

검증과 근거

OrgChart Core·React Wrapper Typecheck: PASS.
Core ESM/IIFE·타입·CSS 및 Wrapper Build: PASS.
React 소비 예제 production Build: PASS. 약 2.53MB chunk 경고는 원본 이미지 inline 포함에 따른 것으로 남겨 두었다.
현재 Storybook dev 6041의 Full Composition: PASS. 전체 Storybook production Build는 이번에 재실행하지 않았다.
Chrome 155.0.8059.39, 네 진입 경로·다섯 뷰포트의 P2 브라우저 검사: 484/484 PASS, 새 console/runtime 오류 0.
대표자·Depth별 카드 크기, 실제 조상 Depth, 17개 조직의 외부 간격, 이름·직책 뱃지·원본 fixture 보존, Stage geometry·overflow, 카드·헤더·화살표·통계의 사각형 겹침을 확인했다.
Tooltip 검증은 실제 표시된 홍 길 동 이름 1개의 폭을 일시적으로 8px로 제한해 overflow를 유도했다. 실제 hover·tooltip hover·키보드 Tab·Escape·focus 유지·숨김 scroll extent·복구를 확인하고 폭을 원복했다. fixture나 표시 이름을 검증용 긴 이름으로 바꾸지 않았다.
1920/1440/390px HTML·Storybook PNG를 육안 확인했다. 실제 텍스트 glyph 충돌과 화살표의 카드 침범은 발견하지 않았다. 확정 내부 gap 0에서 Noto 글꼴의 DOM Range ascent/descent envelope가 교차할 수 있으므로 해당 원시 측정값은 실제 glyph 충돌과 구분해 보존했다.
곡선 Path의 bounding box만으로 실제 곡선 겹침을 판정하지 않았다. 라우팅·레이어는 저장된 전체 화면 캡처로 확인했고 자동 곡선 충돌 검증은 NOT VERIFIED다.

증거 파일:

Guard·기존 FAIL·미검증

React 소비 예제에 PARTIAL Guard를 실행했다. 원본 staticStatus=NOT APPLICABLE, status=NOT VERIFIED, RENDER-002를 보존한다.
styleEvidence: STATIC PASS, RUNTIME NOT VERIFIED, DESIGN_INTENT PASS, FINAL NOT VERIFIED. Guard CSS checks는 []이며 Core Shadow CSS를 검사 범위에 포함하지 못했다. 이를 Core 스타일 전체 정적 PASS로 확대하지 않는다.
Guard 원본과 실제 P2 브라우저 증거는 별도 파일로 보존하며 Runtime PASS로 원본 status를 덮어쓰지 않았다.
기존 verify-p1.mjs baseline·after의 197건 중 145 PASS / 동일 52 FAIL을 보존하고 재실행하지 않았다. 이전 fixture·root·교차표·내부 스크롤·Typography 기대값 관련 실패와 P2 검사를 구분한다.
사용자가 언급한 v0 verify.mjs FAIL 9건은 이번에 독립 확인하지 못했다. 현재 저장된 v0 report는 6건 중 2 FAIL로, 이 기록만으로 9건을 확정하지 않는다. 검사 삭제나 무조건적인 기대값 PASS 변경은 없다.
NOT VERIFIED: 실제 운영 Workdesk 최신 화면과의 완전한 픽셀 일치, 전체 스크린리더, 자동 곡선/글꼴 ink 충돌 판정, 모든 미매핑 조직·혼합 root 데이터 조합, 전체 Storybook production Build.

변경 파일

기존 소스 6개:

render.ts: 실제 조상 Depth에 따른 readOnly 카드 자산·헤더 역할.
employee-card.ts: readOnly 표시 이름·한글 간격·접근성 이름.
status-summary.ts: 상태 카드에도 동일 표시 옵션 전달.
org-chart-content.ts: 대표자 표시와 공통 artwork 조합.
org-chart-readonly.css: 헤더·카드 간격, 원본 장식·레이어·계층선, 파견/휴직 가로 그룹.
React p1.tsx: HTML과 같은 readOnly query 진입.

추가 소스·자산·문서:

workdesk-artwork.ts: 원본 Path·5개 image 화살표·장식·동적 사업관리 연결선.
Workdesk 자산 README 및 해당 디렉터리의 원본 자산 9개.
verify-p2.mjs: 기존 검사와 분리된 P2 브라우저 검증.
이 보고서와 현재 계약을 반영한 UI Composition, 카드 디자인 2단계.
React 예제 README: 조회 전용 query와 P2 검증 실행 안내.

패키지·HTML/React build 산출물과 test-results/org-chart-p2/ 증거를 생성했다. 이전 보고서·검증 기록을 보존했으며 Commit·Push·Merge는 미진행이다.

별도 런타임 증거에 원본 Guard 해시와 브라우저·시각 검토 상태를 연결했다. 현재 source/contract fingerprint가 원본 Guard와 일치함을 확인했다. 원본 status는 변경하지 않았다. 카드 41개의 직위/뱃지 행 하단과 이름 행 상단 간격도 실측 0px(부동소수점 오차 내)이다.

시간 기록

Started At: 2026-10-12 14:52:51 KST
Completed At: 2026-10-12 15:15:24 KST
Actual Duration: 22분 33초
Estimated Duration: 약 45~60분
Variance: 예상보다 22분 27초~37분 27초 단축

12 KiB Raw Blame History Unescape Escape