docs(storybook): make Expanded OrgChart a preview-only page
Deploy Storybook / deploy (push) Successful in 59s

Remove the data, layout, interaction and employee-popup setting panels
from the Expanded OrgChart Story. The chart now renders a fixed sample
(7 companies x 20, TB, all expanded, collapse/zoom/pan on, Drag & Drop
off, HM Dialog) right under the page title. Story ID, OrgChart packages
and public API are unchanged.

Align the Story browser checks (P7, P8, P9, P9.2-P9.5, geometry, popup
parity, hierarchy, HM Story) with the preview: setting-only scenarios
are removed, chart rendering, collapse, Zoom/Pan/Fit and HM Dialog checks
run on the fixed state. Move/Drag & Drop coverage stays in the Vanilla
Core checks (verify-p9-3-core, verify-p9-4-core).

Verified: tsc, test:guard 94/94, node --check on 11 scripts, changed
browser sections PASS. Pre-existing P7 story-menu, P8 Department
long-name, P9 Expanded tb/runner failures remain separate issues.
verify-p9-5-popup-parity was not run (needs the Vanilla example server).
This commit is contained in:
shkim4 committed 2026-10-22 17:51:21 +09:00
1 parent 4a54cfbeb2
commit f4ddd5ac4b
14 files changed
+163 -1134

No files matched your search

+15 -15
View File
@@ -74,7 +74,7 @@ export function ExpandedExample() {
```
위 native 버튼은 React 계약만 설명하는 최소 예시다. HM 화면에서는 실제 기존
`Button`, `Checkbox`, `Label`, `Select`를 조합한다. Expanded Story가 그 사용 예다.
`Button`, `Checkbox`, `Label`, `Select`를 조합한다. Expanded Story는 미리보기 전용이라 이 컨트롤을 포함하지 않는다.
Source·옵션 객체를 안정적으로 유지한다. Core 생성 옵션(layoutMode·TopNode·연결 방향·Zoom 범위)을
변경하면 React는 handle을 다시 생성한다. Vanilla는 새 handle을 생성한다.
`autoLayout`·`interactions`·회사 선택·팝업 선택은 기존 인스턴스에서 갱신한다.
@@ -261,11 +261,14 @@ Alt+M도 시작하지 않는다. 전환 시 진행 중 이동·Pointer capture·
이미 완료한 이동을 보존한다. 설정만 바꿀 때 데이터 재요청·재생성·레이아웃 갱신은 없다.
직원 정보, 그룹 접기·펼치기, Zoom/Pan/Fit은 기존 독립 설정을 따른다. Fixed는 변경하지 않는다.
Expanded Story의 데이터 범위 UI는 제거했고 예시 직원 수20/100/300명은 회사별 기준만
표시한다. 전체 합산 `createOrgChartExampleDataset` 공개 helper 계약은 유지한다.
회사 선택은 즉시 표시를 갱신하고 숨김·복귀에도 완료한 이동을 유지한다. 직원 수는 기존
**데이터 적용**으로 새 예시를 생성하며 임시 이동과 새 Fixture를 섞지 않는다. 초기 설정은
7개 회사×20명=140명, 선택2개×100명=200명, 선택7개×300명=2,100명이다.
Expanded Story(2026-10-22~)는 조직도만 보여주는 미리보기 전용 화면이다. 데이터 설정
(회사 선택·회사당 직원 수·데이터 적용·초기화), 레이아웃 설정, 인터랙션·직원 정보 설정
UI는 제거했다. 고정 표시 조건은 `createOrgChartExampleDataset`의 회사별 기준 7개 회사×20명=140명,
세로형 TB·전체 펼침, 접기·펼치기·Zoom·Pan·Fit 사용, 직원 클릭 HM Dialog, Drag & Drop OFF다.
공개 helper·`selectedCompanyIds`·`dragDropEnabled`·`onMove` 계약은 유지하며 다른 화면과
소비 프로젝트는 이 옵션들을 그대로 사용할 수 있다. Story 브라우저 검증(P7·P8·P9·P9.2~P9.5,
hierarchy, HM Story)은 이 고정 미리보기의 렌더링·접기·Zoom/Pan/Fit·HM Dialog만 확인하고,
소속 변경·Drag & Drop ON/OFF 전환·진행 중 취소는 `verify-p9-3-core.mjs`·`verify-p9-4-core.mjs`의 Vanilla Core 검증이 담당한다.
Expanded Story의 외곽 미리보기는 실제 Center Storybook 공통 카드 CSS의
`--sb-center-card-background` / `--sb-center-card-border` / `--sb-center-card-radius`를
@@ -293,12 +296,9 @@ Core와 React의 `onMove(result: OrgChartMoveResult)`는 이동 성공·실패
`result.moved`로 성공을 구분하며, React는 성공한 이동 후 열린 HM 직원 Dialog를 닫는다.
React callback 변경은 최신 committed callback만 갱신하고 Core를 재생성하거나 reload하지 않는다.
Expanded Story는 모든 회사의 원본 예시를 하나의 세션 source로 유지하고 회사 선택은
`selectedCompanyIds`로 처리한다. 회사 숨김·다시 표시·빈 선택은 성공한 소속 변경을
보존한다. **데이터 적용**은 현재 draft 조건으로 새 예시 source를 만들고 이동 내용을
초기화한다. **초기화**는 최초 설정과 최초 소속으로 돌아가며 설정값이 이미 최초값이어도
이동 내용은 되돌린다. 파일을 다시 작성하거나 React key로 강제 remount하지 않는다.
Story의 직원 합계와 그룹 선택은 성공한 `onMove`의 `result.data`를 별도 read model로
읽으며, source identity는 유지한다. 표시 직원 수는 최초 예시 인원이 아닌 현재 조직의
회사 소속을 기준으로 계산하므로 회사 간 이동 직후와 회사 숨김·다시 표시에도 일치한다.
미리보기에는 선택 회사별 현재 직원 수도 표시하며 데이터 설정의 회사당 인원은 예시 생성 기준이다.
소비 화면에서 회사 선택과 소속 변경을 함께 쓸 때는 모든 회사의 원본 예시를 하나의 세션
source로 유지하고 회사 선택을 `selectedCompanyIds`로 처리한다. 회사 숨김·다시 표시·빈
선택은 성공한 소속 변경을 보존한다. 새 예시가 필요하면 새 source를 만들며 파일을 다시
작성하거나 React key로 강제 remount하지 않는다. 직원 합계 등 파생 표시는 성공한 `onMove`의
`result.data`를 별도 read model로 읽고 source identity는 유지한다. 미리보기 전용 Expanded
Story는 회사 선택·Drag & Drop을 노출하지 않으므로 이 세션 흐름을 시연하지 않는다.