5.2 KiB
OrgChart P1 독립 디자인과 개별 컴포넌트
2026-10-12 최종 요청을 적용한다. 기존 공통 Theme 필수 연결 규칙은 OrgChart에 적용하지 않는다. 과거 v0.1 검증 기록은 당시 구현 기록으로 보존한다.
공개 API와 스타일
패키지 root 공개 API에 createOrgChartTree, createPositionSummary, createAffiliationSummary, createStatusSummary를 추가한다. 기존 createOrgChart, Source, schema, summary 및 React Wrapper API는 유지한다. 모든 factory가 기존 mount/update/reload/destroy/subscribe/getState handle을 반환한다.
import { createPositionSummary, createAffiliationSummary, createOrgChartTree,
JsonOrgChartDataSource } from '@hm-design/org-chart';
import coreUrl from '@hm-design/org-chart/style.css?url';
import engineUrl from '@hm-design/org-chart/engine.css?url';
const source = new JsonOrgChartDataSource(dataset);
const position = createPositionSummary({ container: positionElement,
dataSource: source, stylesheetUrl: coreUrl });
const affiliation = createAffiliationSummary({ container: affiliationElement,
dataSource: source, stylesheetUrl: coreUrl });
const tree = createOrgChartTree({ container: treeElement, dataSource: source,
stylesheetUrls: { core: coreUrl, engine: engineUrl } });
await Promise.all([position.mount(), affiliation.mount(), tree.mount()]);
// 상위 페이지가 DOM container를 자유롭게 배치하고 표시·숨김을 관리한다.
await position.update(nextDataset);
position.destroy(); affiliation.destroy(); tree.destroy();
?url은 Vite 사용 예시다. 일반 HTML은 배포한 CSS 실제 URL을 전달한다. /browser classic bundle도 같은 factory를 window.HMOrgChart로 제공한다. ESM import/handle 생성은 DOM 없이 가능하며 mount에만 연결된 HTMLElement가 필요하다. Summary는 engine을 로드하지 않고 engine.css도 필요 없다. 각 모듈은 Header·Routing·전체 페이지에 의존하지 않는다.
React에서는 기존 전체 OrgChart Wrapper를 그대로 사용한다. 개별 모듈은 위 factory를 ref/effect에서 mount하고 cleanup에서 destroy하면 된다. JSX 카드·테이블·데이터 계산을 복제하지 않는다. Source는 공유할 수 있으며 각 handle은 동일한 validate/normalize/calculateSummary 흐름을 사용한다. 상위 페이지가 여러 handle에 nextDataset을 전달한다. 자동 전역 데이터 저장소는 추가하지 않는다.
독립 디자인 입력
OrgChart는 Shadow DOM 안에서 engine.css → style.css를 적용한다. style.css는 모든 내부 CSS를 포함하며 공통 HM Theme가 없어도 기본 디자인을 가진다. 공통 Theme·Token·Component는 변경하지 않는다.
.other-page-summary {
--hm-orgchart-font-family: Arial, sans-serif;
--hm-orgchart-spacing-lg: 20px;
--hm-orgchart-radius-container: 6px;
--hm-orgchart-bg-surface: #ffffff;
}
.custom-chart {
--hm-orgchart-design-planning-card-background: #f4ffff;
--hm-orgchart-design-planning-card-color: #10243b;
--hm-orgchart-design-planning-department-color: #ffffff;
--hm-orgchart-design-planning-border: #00847f;
--hm-orgchart-design-planning-gradient: linear-gradient(#00847f, #005b57);
}
위 예시는 외부 사용자 override 예시이며 공식 Workdesk 값 확정이 아니다. public 변수를 container에 설정한다. resolved-*, current-*는 내부 구현 변수다. 기본 변수 전체 목록은 packages/org-chart/src/styles/design-tokens.css, 조직별 목록·실측 근거는 core/style-presets.ts에서 관리한다. 조직별 ID에 연결하고 하위 셀·팀은 상위 variant를 상속한다. JSON 직원 객체에 컬러를 추가하지 않는다. 카드 배경·직원 텍스트·부서명 텍스트·테두리·Gradient를 각각 바꿀 수 있다.
Composition·데이터·디자인 근거
core/org-chart-content.ts에서 독립 Tree와 Summary 모듈을 선택해 배치한다. 기본 placement는 직위=side, 관계사=footer, 파견·휴직=belowTree이며 내부 ContentComposition.placements로 바꿀 수 있다. 외부 호출자는 공개 개별 API의 container를 직접 배치한다. 기존 presentation flags로 전체 조합의 표시를 관리하며 계약 필드 추가 없이 처리한다.
Workdesk v1.2610.9c5e 운영 화면에서 확인한 조직 명칭과 6개 조직 헤더 Gradient·흰색 부서명 텍스트를 사용한다. 일반 배경·카드 테두리·Typography·간격·Radius는 독립 구현 기본값(DESIGN_ADAPTATION); 원본 카드 세부값은 NOT VERIFIED다. Figma 접근 가능한 정식 회사 로고 7종은 Core에서 affiliation ID로 매핑하고 카드·현황·Logo에서 재사용한다. 출처·원본 SHA256은 packages/org-chart/src/assets/affiliations/README.md에 기록한다. 미매핑/파일 오류는 회사 명칭 텍스트 대체를 사용하고 임의 로고를 생성하지 않는다.
P1 fixture는 실제 조직명과 관계사명만 사용한다. 직원 41명과 직위·직책·소속·근무 상태는 가상이며 프로필은 null/이니셜 placeholder다. 관계사 3곳은 0명을 유지한다. Raw Count는 가상 JSON 고유 employee ID로 자동 계산하고 실제 HR 인원수나 승인된 집계 정책으로 표시하지 않는다.