133 lines
11 KiB
Markdown
133 lines
11 KiB
Markdown
# 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에서 종료한다.**
|