HMDesign/docs/org-chart/implementation-report-p8.md

# HMDesign OrgChart P8 — Storybook 메뉴·페이지 통일

RESULT: **PASS — P8 요청의 메뉴·페이지 및 최소 기능 검증 범위.**
기존 Core 토큰 관련 Guard FAIL과 CSS 디자인 의도 미검증은 별도로 보존한다.
P9·Stage·Commit·Push·Merge·PR은 진행하지 않았다.

## 작업 기준

- 폴더: `D:\디자인시스템\HMDesign-OrgChart`
- 브랜치: `feature/orgchart-package`
- 시작·완료 HEAD: `7614507583927a25a270963a74ff044be0557b9f`
- origin: `https://gitea.hmac.kr/b25027/HMDesign.git`
- 범위: `STORYBOOK_ONLY`, 실제 React Storybook. 시작 시 P7 미커밋 변경 27개를 보존했다.
- Started At: `2026-10-13 09:43:40 KST`
- Completed At: `2026-10-13 10:09:15 KST`
- Actual Duration: `25분 35초`
- Estimated Duration: `30분` — 분석 7분 / 구현 12분 / 검증 11분
- Variance: `예상보다 4분 25초 짧음`

## 최종 메뉴와 페이지

```text
Components
Patterns
OrgChart
  ├─ Overview
  ├─ Department Colors
  ├─ Full Composition
  └─ Expanded OrgChart
```

기존 Foundation·Center Graphic 등 다른 카테고리는 유지한다. OrgChart는 Patterns 바로 다음의 독립 최상위 root이며, 공개 페이지는 정확히 4개다. 다른 292개 Story의 상대 순서는 유지한다.

슬래시 없는 `title: OrgChart`는 Storybook이 root 없는 component로 분류해 정렬 설정과 관계없이 최상단에 표시했다. 각 페이지를 `OrgChart/페이지명`의 단일 Story CSF로 나누어 표준 root/단일 Story 표시 정책을 사용했다. 기존 Story URL 27개는 리터럴 `parameters.__id`와 기존 export를 통해 모두 유지한다. 내부 23개 Story는 기본 제외 정책으로 숨기며 삭제하지 않았다.

| 페이지 | 적용 결과 |
|---|---|
| Overview | 기존 통합 페이지의 로고·조직/직위별 현황·관계사별 현황을 3개 공통 섹션으로 구성. 동일 Core 독립 컴포넌트와 가상 fixture 유지. |
| Department Colors | 공통 제목·설명, 표시 옵션, 기존 고정형 컬러/카드 미리보기. 긴 이름 버튼 유지. Auto 회사색은 혼합하지 않음. |
| Full Composition | 공통 제목·설명·섹션만 추가. 실제 가용 폭·높이를 기존 Core가 측정하며 비례 축소. 내부 카드·허브·화살표·현황·파견/휴직·링크·팝업·Workdesk 디자인 유지. |
| Expanded OrgChart | 데이터 / 레이아웃 / 인터랙션·직원 정보 / 미리보기의 4개 섹션. 기존 FilterBar·Label·Select·Checkbox·Button·모든 이벤트와 옵션 유지. 기존 Zoom/Pan/Fit 도구는 트리 안에 유지. |

## 재사용한 공통 스타일

실제 대표 페이지 3개인 Filter Bar, Page Header, Loading Screen을 비교했다.
`src/components/story-page.tsx`의 `StoryPage / StoryPageHeader / StorySection`과 기존 CSS를 그대로 재사용한다.

- 제목 28px / 700 / 36px, 설명 14px / 20px
- 콘텐츠 envelope 최대 1280px(양측 gutter 포함), gutter 16–40px
- 섹션 간격 32px, 섹션 header 하단 12px / 본문 간격 16px
- 기존 semantic 테두리·Typography·배경, fullscreen bootstrap
- 별도 페이지 디자인 시스템이나 공통 Theme 변경 없음

추가 CSS는 Story 전용 최대 폭·미리보기 host, 접근성 legend, 팝업 설정 폭에 한정한다.
기존 `body:has(.hm-orgchart-story-full)` 배경 적용을 제거하고 고정형 배경은 해당 견본 안에 유지한다.
공통 CSS가 Shadow DOM의 폰트·카드·색·Border·치수를 변경하지 않는 것을 실제 computed 값으로 확인했다.

## 변경 범위 검증

| 검사 | 결과·근거 |
|---|---|
| 메뉴 위치·Depth·4개 순서·중복·내부 기본 숨김 | **PASS**, [최종 manager 8/8](../../test-results/org-chart-p8/browser-manager.json) |
| 기존 URL·최종 CSF 연결 | **PASS**, [최종 route 5/5](../../test-results/org-chart-p8/browser-route-final.json). 4개 기존 공개 URL의 실제 제목·Core 견본 및 오류 없음 확인. |
| 4페이지와 반응형 | **PASS**, 390/768/1280/1440px × 4페이지. document 가로 overflow 없음, 제목/컨트롤 줄바꿈 정상. |
| 기존 Pattern과 스타일 비교 | **PASS**, 실제 공통 frame·Typography·spacing·border·gutter 비교. |
| Fixed 표시·비례 축소·잘림·내부 스크롤 | **PASS**, 4폭에서 전체 stage/card/summary bounds와 휠 후 offset 확인. [Full 표적 6/6](../../test-results/org-chart-p8/browser-full-repair.json) |
| Expanded 최소 기능 | **PASS**, 20→100명 draft/apply, TB/LR/Hybrid, 초기 Depth, Enter/Space 접기/펼치기, 독립 Zoom/Pan, 실제 pointer Pan, Fit. |
| HMDesign 직원 팝업 | **PASS**, 실제 공개 HM Dialog/Portal·Avatar·Button. 직원 identity, 단일 팝업, Tab focus trap, ESC/닫기, 카드 focus 복귀, 390px 표시 확인. Vanilla Core 책임 분리 유지. |
| P7 소스·디자인 보존 | **PASS**, 기준 803개 파일 중 798개 동일. 변경 5개는 Storybook 설정/Story/CSS. Core·React 패키지·카드 SVG·회사색·직원 JSON·흰 타이틀·Theme 모두 동일. Expanded 상태/데이터 로직 및 컨트롤 속성 21개 보존. |
| Typecheck | **PASS**, 변경 Story·설정·새 CSF와 의존 helper를 포함한 [범위 config](../../test-results/org-chart-p8/story-tsconfig.json), 최종 구조 기준. |
| Storybook production build | **PASS**, [최종 build log](../../test-results/org-chart-p8/build.log). 기존 대형 asset의 chunk-size 경고는 유지. |
| diff·Git 상태 | **PASS**, `git diff --check`, staged 0, branch/HEAD 동일. |
| 신규 브라우저 오류 | **0**, 실제 검증의 console/page error. |

P7의 단위 25/25·Core/React build 및 기존 P5/P6/P7 전체 회귀는 재실행하지 않았다.
20/100/300명·2,100명 데이터 정책과 배치 알고리즘은 소스 동일 및 기존 P7 결과로 보존 확인하며, 이번에 성능을 새로 측정한 것으로 보고하지 않는다.

### 초기 결과와 해결 근거

[초기 runtime](../../test-results/org-chart-p8/browser-initial-runtime.json)은 83 PASS / 6 FAIL이었다.
실제 메뉴 위치 문제 1건은 표준 CSF root 분리로 수정하고 manager 범위만 다시 검사했다.
나머지 5건은 runner가 auto margin의 CSSOM 표현값 및 CSS transform의 숨긴 원본 scroll extent를 화면 결함으로 집계한 경우였다. Full의 실제 양측 gutter, 표시 bounds, 휠·scroll offset을 표적 확인해 해결했으며 제품 CSS를 변경하지 않았다.
서로 다른 실행의 PASS 수를 단순 합산하지 않는다. [최종 증거 연결](../../test-results/org-chart-p8/browser-final-summary.json)에 초기·표적 raw와 해결 사유를 남겼다.

초기 6057 sandbox 서버 접속 실패와 6058 사용 중 오류는 환경 문제였다. 화면 검사 전 network raw를 보존하고, 접근 가능한 6061 서버에서 실제 검증했다.

## Guard 원본·기존 FAIL·NOT VERIFIED

최종 구조 변경 후 PARTIAL/STORYBOOK Guard로 영향 범위만 확인했다.
[원본 Guard](../../test-results/org-chart-p8/guard.json)의 **status/staticStatus는 FAIL**, runtimeStatus는 **NOT VERIFIED**다. 원본을 PASS로 덮어쓰지 않았다.

- 변경 P8 파일의 issue: **0**
- 변경 전 Core의 TOKEN-001 **10 FAIL**, 동적 Token/공통 helper class의 TOKEN-002 **10 NOT VERIFIED**
- 해당 Core·공통 helper 소스는 시작 hash와 동일. Story용 Core 내부 import와 Shadow stylesheet/동적 선언의 정적 분석 경계에 대한 기존 진단을 보존한다.
- styleEvidence: **STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT NOT VERIFIED / FINAL NOT VERIFIED**
- 실제 페이지 스타일 동등성과 Shadow 격리의 브라우저 PASS는 별도 근거다. 디자인 의도 승인 또는 전체 Guard runtime 승인으로 확대하지 않는다.

[범위 분류](../../test-results/org-chart-p8/guard-scope.json), [소스 보존·Git·ID audit](../../test-results/org-chart-p8/final-state.json)을 연결했다.
기존 삼안·장헌산업 제목 대비 진단, Compact **NOT SUPPORTED**, 전체 Fixed 픽셀/역사 회귀, 모든 옵션 조합, 물리 기기·스크린리더·다른 브라우저, 2,100명 장시간/peak memory, SSR/hydration·운영 배포는 기존 미검증 상태를 유지한다.

## 실제 화면

- [좌측 메뉴 전체](../../test-results/org-chart-p8/manager-full-sidebar.png), [좌측 메뉴](../../test-results/org-chart-p8/manager-sidebar.png)
- [Overview](../../test-results/org-chart-p8/overview-1440.png), [390px](../../test-results/org-chart-p8/overview-390.png)
- [Department Colors](../../test-results/org-chart-p8/department-colors-1440.png), [390px](../../test-results/org-chart-p8/department-colors-390.png)
- [Full Composition](../../test-results/org-chart-p8/full-composition-1440.png), [390px](../../test-results/org-chart-p8/full-composition-390.png)
- [Expanded OrgChart](../../test-results/org-chart-p8/expanded-org-chart-1440.png), [390px](../../test-results/org-chart-p8/expanded-org-chart-390.png)
- [실제 HM Dialog](../../test-results/org-chart-p8/expanded-hm-dialog.png), [390px Dialog](../../test-results/org-chart-p8/expanded-hm-dialog-390.png)

현재 미리보기: [Overview](http://127.0.0.1:6061/?path=/story/orgchart--logo-personnel-summary), [Department Colors](http://127.0.0.1:6061/?path=/story/orgchart--department-colors), [Full Composition](http://127.0.0.1:6061/?path=/story/orgchart--full-composition), [Expanded OrgChart](http://127.0.0.1:6061/?path=/story/orgchart--expanded-org-chart).
Overview는 기존 `orgchart--logo-personnel-summary` URL을 유지한다.

## P8 변경 파일

기존 미커밋 P7 변경과 아래 P8 delta를 구분한다.

| 파일 | P8 변경 |
|---|---|
| `.storybook/preview.tsx` | OrgChart root 및 4개 페이지 경로 정렬, 기존 leaf 정렬 정책 유지 |
| `src/org-chart/org-chart-p1.stories.tsx` | Overview 단일 CSF, 기존 ID 보존 |
| `src/org-chart/org-chart-expanded.stories.tsx` | 공통 섹션·root title·기존 ID |
| `src/org-chart/org-chart-stories.css` | 최소 host 규칙, body 배경 범위 축소 |
| `src/org-chart/org-chart-expanded-story.css` | 기존 P7 CSS 보존 + legend/설정 host |
| `src/org-chart/org-chart-page-previews.tsx` | 기존 페이지 함수를 공통 재사용 helper로 이동 |
| `src/org-chart/org-chart-department-colors.stories.tsx` | 단일 페이지 CSF, 기존 ID |
| `src/org-chart/org-chart-full-composition.stories.tsx` | 단일 페이지 CSF, 기존 ID |
| `src/org-chart/org-chart-overview-internal.stories.tsx` | 기존 내부 3개 CSF·ID·기본 숨김 유지 |
| `examples/org-chart/verify-p8.mjs` | 요청한 화면/최소 기능 검증, 실패 범위 선택 실행 |
| `docs/org-chart/implementation-report-p8.md` | 결과·증거·시간 기록 |

`test-results/org-chart-p8`의 baseline·raw JSON·캡처·static build·logs는 생성된 검증 산출물이다.
**Stage·Commit·Push·Merge·main checkout·Pull·Reset·Rebase·Force Push·PR은 미진행. P8에서 종료한다.**