# HMDesign OrgChart P11.2 — 최종 디자인 승인 기록

**디자인 승인 상태: APPROVED.** 이 문서는 사용자가 승인한 HMDesign OrgChart 기본 디자인을 향후 개발과 AI 생성 작업의 기준으로 기록한다. 디자인 승인은 접근성 준수 판정, 접근성 위험 수용, 보안 위험 수용, main 병합 또는 운영 배포 승인이 아니다.

## 1. 승인 정보와 근거

| 항목 | 확정 내용 |
|---|---|
| 승인일 | 2026-10-13 |
| 승인 주체 | 사용자 디자인 승인 |
| 기준 Commit | `346c648c093ae3b0dedc1fc754d8ffa52f00ddd0` |
| 적용 대상 | HMDesign OrgChart 기본 디자인 |
| 승인 상태 | APPROVED |

실제 담당자의 법적 이름이나 직책은 확인되지 않았으므로 기록하지 않는다. 승인은 이번 사용자 결정과 기존 보고서의 검증 범위에 근거한다. [P10.10 브라우저 시각 검증](visual-review-p10-10.md), [P11 외부 CSS 테마 구현·검증](implementation-report-p11.md), [P11.1 최종 정합성 검증](consistency-review-p11-1.md)을 참조한다. 과거 보고서의 승인 대기·실패·미검증 기록은 당시 기록으로 보존한다.

| 승인 화면 | 디자인 승인 상태 |
|---|---|
| Overview | APPROVED |
| Department Colors | APPROVED |
| Full Composition | APPROVED |
| Expanded OrgChart | APPROVED |
| Chart Only — React / Vanilla (Auto/Expanded) | APPROVED |

Storybook 4개 화면과 Chart Only를 포함한다. 기존 NOT VERIFIED인 브라우저·접근성·성능 항목을 승인 완료나 제품 전체 회귀 PASS로 변경하지 않는다.

## 2. 화면별 승인 기준

### Overview

- 관계사 회사 로고 7개와 중복 제목 제거.
- 조직·직위별 인원 현황 및 관계사별 인원 현황.
- 기존 Storybook Container 스타일, 카드 배경·Border·Radius·간격.

기존 이미지 및 인원 데이터는 수정하지 않는다.

### Department Colors

- 대표자 카드, 조직별 Gradient 6종, 그룹 타이틀.
- 그룹장·직원 카드, 파견자·휴직자 미리보기, 직원 이름 `홍 길 동`.
- 기존 카드 규격·Typography·Border와 Storybook 미리보기 Container.

**6개 조직 Gradient는 Expanded의 7개 회사별 컬러와 별개다.** 기존 디자인값을 임의로 통합하거나 변경하지 않는다.

### Full Composition

- 대표자 카드와 대표자 아래 화살촉 1개, 협업 화살표 5개.
- 조직 카드·연결선과 중앙 조직도 배치.
- 상단 제목·인원 현황, 파견·휴직자 위치와 간격, 하단 관계사별 인원 현황.
- 세로로 긴 화면의 상단·중앙·하단 배치, 비례 축소 및 반응형.
- Core 직원 정보 팝업의 X 닫기 버튼.

[P10.10](visual-review-p10-10.md)에서 Full Composition 390px 내부 스크롤·잘림 오류는 재현되지 않았다. 과거 실패는 현재 비례 축소 구성과 맞지 않는 구형 내부 스크롤 기대값과 구분하며, 원본 실패 기록을 보존한다. 이 결과를 새로운 전체 디바이스 검증 PASS로 확대하지 않는다. 기존 Fixed Full Composition 디자인 승인은 유지한다.

### Expanded OrgChart

- 회사별 20 / 100 / 300명, 전체·개별·복수 회사 선택.
- TB / LR / Hybrid, 회사별 그룹 타이틀 컬러, 직원 카드·연결선.
- Drag & Drop ON/OFF와 기본 OFF, Zoom/Pan/Fit.
- 그룹 접기·펼치기, 직원 정보 팝업, 기존 HMDesign Dialog 연결.

기존 데이터 Contract와 회사별 컬러값을 유지한다. 승인된 기능 구성의 기록을 모든 데이터·동작 조합의 신규 실행 검증으로 해석하지 않는다.

**2026-10-14 P11.5 사용자 확정 변경:** Expanded 조직도 내부 viewport / Pan·Zoom 캔버스의 기본 배경은 순수 흰색 `#FFFFFF`다. Fixed 기존 BG·디자인, Storybook 페이지·외부 프레임, 카드·회사색·그룹 제목·연결선·레이아웃 승인은 유지한다. 캔버스 전용 외부 CSS 입력과 기존 테마 fallback은 [사용 가이드의 P11.5 절](org-chart-usage-guide.md#p115-fixedexpanded-캔버스-배경-독립-설정-2026-10-14)을 따른다. 이 한정된 사용자 변경 요청으로 다른 승인 상태·접근성 대비 미달 2건·Guard Runtime NOT VERIFIED를 변경하지 않는다.

### Chart Only — React / Vanilla

**2026-10-14 Font Weight 통합 사용자 요청:** HMDesign 기본 굵기는 400(Regular) / 500(Medium) / 700(Bold)의 3단계다. Fixed 직원 이름·그룹 제목은 600→700, 직원 직위 배지는 600→500, 중앙 허브 제목은 750→700으로 통합한다. Expanded의 기존 400 / 500 / 700은 유지한다. 폰트 패밀리·크기·행간·자간, 카드 크기·색상·간격·연결선·배치와 조직 데이터·기능은 유지한다. 이 요청은 기존 접근성 미해결 사항이나 전체 회귀 검증 상태를 변경하지 않는다.

Auto/Expanded Chart Only의 승인 기준은 다음과 같다.

- 흰색 캔버스, 외부 제목·설명·요약·툴바 없음.
- 최초 Fit to View, 전체 조직도 가로·세로 중앙 정렬.
- Ctrl/⌘ 없는 마우스 휠 Zoom과 커서 중심 확대·축소.
- 빈 공간 Pan, 직원 팝업, 그룹 접기·펼치기.
- React·Vanilla 공통 동작.

**Fixed Chart Only는 현재 미지원이다.** 이를 승인된 기능으로 기록하지 않는다. 기존 Fixed Full Composition 승인과 구분한다. 공개 옵션과 생성 방식 선택은 [사용 가이드](org-chart-usage-guide.md) 및 [AI 조직도 자동 생성 정책](ai-page-generation-rules.md)을 따른다.

## 3. 기존 7개 회사 기본 컬러

| 회사 | 승인된 기본 메인 컬러 |
|---|---|
| 한맥기술 | `#CB2E28` |
| 삼안 | `#F08300` |
| 장헌산업 | `#4580A6` |
| 장헌 | `#1D418D` |
| 피티씨 | `#84338E` |
| 한라산업개발 | `#0068B7` |
| 바론컨설턴트 | `#0C367F` |

[회사 컬러 프리셋](../../packages/org-chart/src/company-color-presets.ts)의 기존 값과 일치하며 그룹 제목은 기존 정책대로 **흰색 텍스트**를 유지한다.

P11의 외부 CSS 테마 변경 기능은 다른 프로젝트가 커스텀 컬러를 의도적으로 지정하기 위한 것이다. 외부 테마로 색상을 변경할 수 있다는 사실은 HMDesign 기본 컬러의 변경을 의미하지 않는다. **외부 테마를 적용하지 않은 기본 조직도는 위 7개 회사 컬러를 유지한다.** Department Colors의 6개 조직 Gradient를 이 팔레트로 대체하지 않는다.

## 4. 접근성 미해결 사항

| 회사 | 배경색 | 흰색 제목 대비 | 일반 텍스트 WCAG AA | 현재 상태 |
|---|---|---|---|---|
| 삼안 | `#F08300` | 약 2.64:1 | 4.5:1 미달 | 미해결 |
| 장헌산업 | `#4580A6` | 약 4.29:1 | 4.5:1 미달 | 미해결 |

비율은 기존 선언색 계산 기록이며 신규 브라우저 픽셀 실측이 아니다. 해당 회사색을 쓰는 Expanded/Auto Chart Only 그룹 제목에 적용된다. 회사 배경색과 흰색 그룹 제목은 유지하고 디자인은 승인하되, **접근성 미준수 사실은 유지한다. 디자인 승인을 WCAG AA 준수 승인 또는 접근성 위험 수용 승인으로 처리하지 않는다.**

| 미확정 항목 | 상태 |
|---|---|
| 조직 접근성 정책상 예외 수용 여부 | PENDING (정책 확인 NOT VERIFIED) |
| 접근성 위험 승인 주체 | PENDING |
| 향후 개선 시점 | PENDING |
| WCAG 준수 최종 판정 | NOT VERIFIED |

기존 미검증 접근성 항목과 두 대비 미달을 숨기거나 PASS 처리하지 않는다.

## 5. Cell 디자인 처리

- Cell 전용 Border Only 스타일: **적용하지 않음**.
- 연한 배경형 B안: **적용하지 않음**.
- 기존 조직 그룹 Header 디자인, 직원 카드·연결선 유지.

Cell Border Only 디자인 실험은 사용자 결정으로 정식 적용에서 제외됐다. 향후 Cell 전용 디자인을 다시 적용하려면 별도 사용자 승인을 받아야 한다.

## 6. AI 개발·생성 작업 적용

[AGENTS.md](../../AGENTS.md)와 [CLAUDE.md](../../CLAUDE.md)에서 OrgChart UI 수정 또는 AI 생성 작업 전에 이 문서를 우선 확인한다. 생성 방식과 데이터 처리는 기존 [AI 생성 정책](ai-page-generation-rules.md)을 그대로 따른다.

1. 승인된 기존 디자인을 기본 기준으로 사용하고 카드·색상·Typography·간격을 임의 변경하지 않는다.
2. 사용자 요청에 따른 조직 계층·직원 데이터 생성은 계속 허용하며 정확한 요청 구조·인원·원본 데이터를 보존한다.
   - 확장형 OrgChart의 Storybook 샘플·AI 생성 데이터는 셀(Cell)의 직접 자식 및 모든 하위 계층에 팀(Team)을 배치하지 않는다. 팀 → 셀은 허용하며 다른 유형의 기존 관계와 셀의 다른 하위 조직 허용 여부는 유지한다. [AI 생성 정책 §2.1](ai-page-generation-rules.md#21-확장형-조직-위계-규칙)을 따른다. 이는 승인된 디자인 변경이나 제품 런타임 검증·공개 API 변경 승인이 아니다.
3. 외부 CSS 테마를 통한 의도적인 커스터마이징은 허용한다. 기본값 자체 변경과 구분한다.
4. 승인된 기본값 자체를 변경할 때는 사전 사용자 확인을 받는다. 이미 해당 변경을 명시적으로 승인받은 요청은 같은 확인을 반복하지 않는다.
5. 접근성 미해결 사항을 숨기거나 PASS로 변경하지 않는다.

이 지침은 변경 방지 기준을 제공하며 실제 코드 수정을 기술적으로 차단하는 보안 장치가 아니다. 생성 방식 사전 선택·Navigation·공개 API·Theme·접근성 계약을 대체하지 않는다.

## 7. 디자인 승인과 별도로 유지할 상태

| 항목 | 현재 기록 |
|---|---|
| 실제 Guard 정적 결과 | P11.1 `status PASS`, `staticStatus PASS`, issues 0 / FAIL 0 |
| Guard Runtime | `runtimeStatus NOT VERIFIED` |
| Guard CSS phases | STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED |
| 결합 styleVerification | 미생성 유지 |
| 접근성 위험 수용 | PENDING |
| npm 개발 의존성 High Advisory 위험 수용 | PENDING |
| 신규 npm audit·현재 전체 의존 그래프 평가 | NOT VERIFIED |
| 운영 배포 승인 | PENDING |
| main 병합 승인 | PENDING |

Guard는 [P11.1 기록](consistency-review-p11-1.md)과 기존 로컬 `test-results/org-chart-p11-1/guard-actual.json`을 확인한 결과이며 이번 문서 작업에서 재실행하지 않는다. P10 당시 실제 FAIL 5건 등 과거 원본은 보존한다. 정적 PASS·디자인 승인·별도 브라우저 증거로 원본 Runtime NOT VERIFIED를 덮어쓰지 않는다.

남은 승인과 운영 확인은 [정식 통합 승인 준비 문서](release-readiness-p10-7.md)를 따른다. 이번 P11.2는 문서화 단계이며 제품 코드·디자인 변경, 제품 전체 회귀, Commit·Push·main Merge·배포 실행을 포함하지 않는다.