# @hm-design/org-chart-react — AI 코딩 도구 사용 안내

먼저 [AI_GUIDE.md](./AI_GUIDE.md)(공통 1~7단계)를 읽습니다. 이 패키지는 OrgChart Core의 **React 수명주기 어댑터**일 뿐이며 자체 디자인·레이아웃이 없습니다. 사용 유형은 공통 체계(1 Web / 2 SW 일반·뷰어 / 3 OrgChart / 4 혼합)를 따르며 이 패키지는 3 OrgChart 또는 혼합의 조직도 영역에서 씁니다. OrgChart 작업 규칙·API·디자인·없는 UI 처리 3단계는 Core 패키지의 `ai/` 폴더가 기준이며 여기에 반복하지 않습니다.

| 읽을 문서 | 설치 후 위치 |
|---|---|
| 사용 유형·혼합 규칙, 생성 방식(Chart Only / Full Page), 작업 순서, 데이터 규칙 | `node_modules/@hm-design/org-chart/ai/AI_USAGE.md` |
| React `OrgChart` Props 전체 + Core API | `node_modules/@hm-design/org-chart/ai/COMPONENT_CATALOG.md` §1 |
| 디자인·CSS 입력 | `node_modules/@hm-design/org-chart/ai/DESIGN_RULES.md` |
| React·Vanilla 조합 예시 | `node_modules/@hm-design/org-chart/ai/COMPOSITION_PATTERNS.md` |

Core는 이 패키지의 runtime dependency이므로 함께 설치됩니다. 패키지 관리자가 중첩 설치한 경우 `node_modules/@hm-design/org-chart-react/node_modules/@hm-design/org-chart/ai/`에 있습니다.

## 이 패키지에서 확인할 것

- Entry: `@hm-design/org-chart-react`(runtime export `OrgChart` 하나, HM UI 불필요) / `@hm-design/org-chart-react/hm-dialog`(`OrgChart` + `HMEmployeeDialog`, `@hm-design/ui` 0.1.0 선택 peer와 Web CSS 필요).
- 타입: `OrgChartProps`, `OrgChartEmployeeSelection`, `OrgChartEmployeePopupProps`와 Core 공개 타입(type-only 재export). `JsonOrgChartDataSource` 같은 runtime helper는 `@hm-design/org-chart`에서 import합니다.
- Peer: `react` `^19.0.0`. `react-dom`은 앱이 제공합니다.
- `"use client"` 경계가 유지됩니다. SSR/hydration은 검증 범위 밖입니다.
- 공개 `ref`·imperative handle·`children`·`data`·`title` Props는 없습니다.