61 lines
5.2 KiB
Markdown
61 lines
5.2 KiB
Markdown
# 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을 반환한다.
|
|
|
|
```js
|
|
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는 변경하지 않는다.
|
|
|
|
```css
|
|
.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 인원수나 승인된 집계 정책으로 표시하지 않는다.
|