shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity
Files
37e6c996f9ea8e7e29cd4e6678e16da9d8e01870
HMDesign/docs/org-chart/implementation-report-p3.md
T

12 KiB
Raw Blame History

HMDesign OrgChart P3 — 디자인 및 조회 기능

RESULT: PASS — 보존된 41명 fixture와 P3 변경 범위.

HTML·직접 열기 classic·React·실제 Storybook에서 P3 검사 732/732 PASS, 신규 브라우저 오류 0. 기존 P2·P1 검사를 재실행하거나 기대값을 바꾸지 않았다. Guard의 원본 미검증은 별도로 보존한다.

  1. P2 대비 수정: 조회 배경, 하위 연결선, 이름/직위 표시, 직책 뱃지, 타이틀 간격, 하위 조직 제목, 허브, 사진 슬롯, 상태 카드, 조직별 교차표, 관계사 바, 링크, 정보 팝업, 컨테이너 높이 맞춤 및 Storybook 메뉴를 수정했다. 조직 관계·순서·41명 데이터와 승인 자산은 유지했다.

  2. Workdesk 반영: 읽기 전용 원본 D:\디자인시스템\gpd-workdesk\sample\조직도_v1.3의 실제 HTML/CSS/SVG를 확인했다. 배경 #F5F8FB, 하위 타이틀의 크기·그라데이션·그림자·글꼴 수치, 직책 뱃지의 팀별 색, 허브 SVG/텍스트, 통계 표 및 관계사 바를 반영했다. 원본 수치·경로 증거를 보존했다.

  3. 카드·타이틀·뱃지·허브: 대표자 146×74, 1Depth 조직장 146×68, 2Depth 조직장/일반 직원 108×52px 유지. 조회 이름은 홍 길 동, 직위와 직책은 원본 문자열이다. 직위와 직책 뱃지를 한 줄에 gap 4px로 놓고 이름과의 gap 0px 유지. 모든 타이틀↔첫 카드 gap 8px. 하위 제목 표면은 114×30.4px이며 부모 팀 색을 상속한다. 허브는 원본 말풍선 SVG, 아이콘 20px/gap 8px, 텍스트 21px/750/24px. 대표자 및 긴 디비전장 뱃지는 동일한 22px 행 내부 하단 정렬로 승인 SVG 우상단 로고와의 충돌을 피했다.

  4. 연결선: 조회 전용에서 엔진의 하위 pseudo 연결선을 숨겼다. 기존 대표자↔허브↔주요 조직 연결 SVG Path 5개, 협업 화살표 5개 및 장식은 유지했다. interactive 연결선·접기 동작은 유지했다. 선을 지우거나 조직 관계를 바꾸지 않았다.

  5. 사진/상태: 사진 없음은 비원형의 빈 직사각형 슬롯으로 표시한다. 실제 직원 사진이나 임의 인물 이미지를 사용하지 않았다. 기존 승인 카드의 예약 너비 36/32/24px를 유지하고 높이를 62/56/44px로 조정했다. 조회 compact 파견·휴직 카드의 이름 하단 상태 문구만 숨기고 그룹 제목과 원본 상태 데이터는 유지한다.

  6. 조직별 표 데이터: 원본 employees에서 조직 × 직위를 계산한다. 최상위 직접 소속 1명과 주요 6개 조직의 하위 포함 집계를 분리해 중복 없이 41명. 행 소계는 총괄기획실 1, 사업관리 2, 경영기획 7, 인재성장 7, 통합시스템 10, 디자인기획 10, 솔루션영업 4. 직위 합계는 경영진 1/수석 6/책임 12/선임 11/연구 11. 독립 PositionSummary 공개 API는 유지한다.

  7. 관계사 집계: 기존 회사 로고를 사용한 제목 없는 한 줄 바. 한맥 11, 삼안 11, 장헌 0, 장헌산업 0, 피티씨 9, 한라 0, 바론 10, 총 41명. 바 높이 약 55.4px, 로고 39.3px, 글꼴 19.6px 및 원본 간격·그림자 반영. DOM의 43개 카드는 상태 요약 2개 중복 표시를 포함하며 직원 수는 41명이다.

  8. 1Depth 링크: 공개 organizationLinks?: Readonly<Record<string, string | undefined>> 옵션을 Core와 React에 추가했다. 원본 조상 관계가 1Depth이며 URL이 지정된 제목만 링크다. 미지정 제목은 일반 제목. HTTP(S)/상대 URL을 지원하며 다른 scheme·credentials는 거부한다. 기본 실제 URL은 넣지 않았다. 검증에서만 로컬 증명 경로를 사용해 실제 이동·키보드·focus 및 카드 이벤트 분리를 확인했다.

  9. 직원 팝업: 대표자/1Depth/2Depth/일반/파견/휴직 카드 click·Enter·Space로 조회한다. 기존 데이터의 이름·직위·소속·직책·관계사·상태만 표시한다. 닫기/ESC/focus trap/원래 카드 focus 복귀 확인. 팝업은 Stage 밖 native dialog top layer로 표시되며 transform 없음, 데스크톱 폭 420px/390px 화면 폭 358px. 공개 onEmployeeClick(employee, context) 지정 시 기본 팝업 대신 호출한다. React callback의 최신 값과 동시 이벤트를 검증했다. 기존 tooltip은 팝업 직전 정리한다.

  10. Scale/Overflow: 기준 디자인 1920×914.5px. 실제 host·조상 높이·padding·max-height와 viewport를 사용하며 임의 Header 48px 차감 없음. 네 경로 모두 같은 측정값이며 문서 client/scroll 폭·높이 동일, 카드/주요 영역 사각형 충돌 및 Stage 밖 콘텐츠 0건.

    • 1920×1080: scale 0.9833333333, Stage 1888×899.2584px, 문서 1920×1080.
    • 1440×900: scale 0.7333333333, Stage 1408×670.6334px, 문서 1440×900.
    • 1280×800: scale 0.6500000000, Stage 1248×594.4250px, 문서 1280×800.
    • 768×1024: scale 0.3833333333, Stage 736×350.5583px, 문서 768×1024.
    • 390×844: scale 0.1864583333, Stage 358×170.5161px, 문서 390×844.
    • 추가 높이 조건: 1920×650 scale 0.6754098256, Stage 높이 617.6623px. 고정/max-height 400px host scale 0.4371584574, Stage 높이 399.7814px. 재부착된 400px host의 외부 20px/내부 12px padding에서 가용 높이 336px, scale 0.3672130903, Stage 높이 335.8164px.

    Stage의 layout scroll extent는 transform 전 1920×915px로 남는다. 실제 변환된 모든 콘텐츠 경계가 가용 영역 안에 들어오는 것을 별도로 확인했으므로 overflow:hidden만으로 잘림을 숨긴 결과가 아니다. offsetHeight 915는 CSS 높이 914.5의 정수 반올림이며 높이 계산은 소폭 안전 여유를 둔다.

  11. Storybook: 사용자 메뉴는 Logo · Personnel Summary / Department Colors / Full Composition 3개. 통합 페이지에서 기존 Logo·PositionSummary·AffiliationSummary Core를 각각 렌더링한다. 기존 독립 검증 Story는 internal로 보존했다. 실제 6041 index·manager·페이지를 확인했으며 메뉴 통합과 Full Composition 배치는 분리했다.

  12. 수정 파일: 기존 소스/문서 27개와 신규 구현·검사·보고 파일은 아래 목록. 재생성된 dist 및 정확한 시작 해시 차이는 전체 파일 기록에 있다. 기존 package.json/package-lock.json의 미커밋 변경은 추가로 수정하지 않았다.

    • Core: packages/org-chart/src/core/{employee-card,status-summary,render,types,index,org-chart-content,organization-totals,affiliation-bar}.ts, src/index.ts, src/styles/{employee-card,org-chart-readonly,org-chart}.css, build.mjs, README.md.
    • 신규 Core: packages/org-chart/src/core/employee-info-dialog.ts, src/styles/employee-info-dialog.css, src/styles/org-chart-p3-summary.css.
    • React: packages/org-chart-react/src/{OrgChart.tsx,types.ts}, README.md.
    • 예제: examples/org-chart/{p1-app.js,p1.css}, 신규 verify-p3.mjs; examples/org-chart-react/{p1.tsx,p1.css,README.md}.
    • Story: src/org-chart/{org-chart-p1.stories.tsx,org-chart-stories.css}.
    • 문서: docs/org-chart/{integration,ui-composition,card-design-stage2}.md 및 이 P3 보고서. P1/P2 보고서는 수정하지 않았다.
    • 산출물: Core/Wrapper/HTML/React dist, test-results/org-chart-p3의 브라우저 JSON·원본 Guard·별도 runtime/linked evidence·진단 이력·캡처·시작/변경 해시. assemble-evidence.mjs는 저장된 증거만 연결하며 테스트를 재실행하지 않는다.

  13. HTML·React 검증: Core/Wrapper typecheck, Core ESM/IIFE/타입/CSS 및 Wrapper build, HTML prepare, React 소비 예제 production build PASS. 공통 Core의 geometry·표·카드가 HTML HTTP/file classic/React HTTP/Storybook에서 일치했다. Chrome 155.0.8059.39의 5개 화면, 링크/callback/키보드, 6종 카드×2화면×4경로 팝업 48개 측정, 높이 제한 조건을 포함해 732/732 PASS. 원본 이미지 inline 때문에 React 약 2.54MB chunk 경고는 유지한다. 실제 테스트는 live Storybook 6041이며 오래된 storybook-static 결과를 최종 근거로 사용하지 않는다.

  14. 기존 PASS/신규 FAIL: 승인 SVG·로고·장식·41명 fixture·P1/P2 보고서·기존 검사 등 보존 대상 38개 해시 동일. 관련 interactive/독립 API/공통 Core 회귀는 P3 검사에서 PASS. P2 484건과 오래된 verify/verify-p1 suite 전체는 재실행하지 않았으므로 전체 기존 PASS를 재인증하지 않는다. 알려진 과거 FAIL 기록·기대값을 그대로 보존했다. 초기 P3 522건/63 FAIL과 중간 554건/10 FAIL JSON도 보존했으며 최종 신규 FAIL 0. 제품의 focus 복귀/뱃지 겹침/재부착 host padding 오류 및 검사 환경의 오래된 Storybook 경로·선택자·Chrome 0px letter-spacing 직렬화 근거를 수정했다. 실패를 필터링하지 않았다.

  15. 남은 시각적 차이: 원본 Pretendard Variable 대신 기존 승인 글꼴을 유지한다. 원본 사진 55×76/54×70/38×52는 승인 카드보다 커서 그대로 복사하지 않고 슬롯 크기를 맞췄다. 긴 뱃지 행 정렬은 로고 충돌 방지를 위한 조정이다. 표의 실제 열/행은 현재 fixture를 기반으로 하며 원본 API의 직위 목록은 제공되지 않았다. 긴 경영진/통합시스템 Div 줄바꿈으로 표 높이는 약 200.375px. 바 폭은 기준 좌표에 맞춰 1806px(원본 약 1805.7px). 최종 Storybook 1920/390 및 HTML 1920 캡처를 육안 확인했다. 모바일은 전체 화면 비례축소로 글자가 작지만 정보 팝업은 축소하지 않는다.

  16. Guard/NOT VERIFIED: PARTIAL Guard를 최종 React bootstrap에 1회 실행. 원본 staticStatus NOT APPLICABLE, status NOT VERIFIED, RENDER-002 보존. 원본 CSS STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED, checks []. 별도 runtime은 동일 소스·계약 fingerprint와 브라우저 증거 SHA로 연결했다. 결합 증거는 Runtime PASS·명시한 computed CSS PASS이나 Guard의 정적 적용 범위/스타일 미검증 때문에 전체 status NOT VERIFIED를 유지한다. Core Shadow CSS 전체 Guard 인증, 실제 운영 Workdesk 픽셀 일치, 자동 glyph/곡선 교차 검사, 모든 임의 데이터/테마/브라우저, screen reader 발화·실물 touch, 전체 Storybook production build는 NOT VERIFIED.

  17. Git/원본 보존: D:\디자인시스템\HMDesign-OrgChart, feature/orgchart-package, HEAD d18e3c33801e165e17b6d971e2f6198eed483c3c. Workdesk 원본과 HMDesign main을 수정하지 않았다. 기존 미커밋 작업을 보존하고 Stage·Commit·Push·Merge·Reset·Rebase를 수행하지 않았다.

검증 근거: 최종 browser JSON, 1920 캡처, 390 캡처, 원본 Guard, 초기 진단, 중간 진단.

미리보기: Storybook Full Composition.

작업 시간:

  • Started At: 2026-10-12 15:19:27 KST
  • Completed At: 2026-10-12 15:56:54 KST
  • Actual Duration: 37분 27초
  • Estimated Duration: 45~60분
  • Variance: 예상보다 7분 33초~22분 33초 단축
View Git Blame Copy Permalink