# React ↔ API 매핑 매트릭스

> **작성일**: 2025-12-20
> **분석 대상**: `react/src/app/[locale]/(protected)/**`
> **총 페이지 수**: 109 pages

---

## 매핑 상태 범례

| 상태 | 설명 |
|------|------|
| ✅ 연동완료 | API 연동 완료, 정상 동작 |
| 🔄 수정필요 | API 연동되었으나 응답 형식 수정 필요 |
| 🆕 신규필요 | Mock 데이터 사용 중, API 개발 필요 |
| ⏳ 미구현 | 페이지/기능 미구현 |
| 🔍 확인필요 | 상세 분석 필요 |

---

## 1. 품목 관리 (Items) ✅

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/items` | GET `/api/proxy/items` | ✅ | 목록 조회 |
| `/items/create` | POST `/api/proxy/items` | ✅ | 품목 생성 |
| `/items/[id]` | GET `/api/proxy/items/{id}` | ✅ | 상세 조회 |
| `/items/[id]/edit` | PUT `/api/proxy/items/{id}` | ✅ | 수정 |
| `/items/[id]` (BOM) | GET `/api/proxy/items/{id}/bom` | ✅ | BOM 조회 |
| `/items/[id]` (Files) | POST `/api/proxy/items/{id}/files` | ✅ | 파일 업로드 |

**API 클라이언트**: `react/src/lib/api/items.ts`
- `getItems()`, `getItem()`, `createItem()`, `updateItem()`, `deleteItem()`
- `getBom()`, `addBomComponent()`, `updateBomComponent()`, `deleteBomComponent()`
- `uploadFiles()`, `deleteFile()`

---

## 2. 마스터 데이터 (Master Data) ✅

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/master-data` | GET `/api/proxy/item-master/*` | ✅ | 동적 데이터 관리 |

**API 클라이언트**: `react/src/lib/api/item-master.ts`

50+ 엔드포인트 지원:
- Categories, Brands, Units, Manufacturers
- Warehouses, ItemTypes, Origins, TaxTypes
- Colors, Materials, Sizes, Grades, Certifications
- Customers, Suppliers, Shipping, Payment Terms 등

---

## 3. 영업 관리 (Sales)

### 3.1 거래처 관리 ✅

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/sales/client-management-sales-admin` | GET `/api/proxy/clients` | ✅ | 목록 조회 |
| `/sales/client-management-sales-admin` | POST `/api/proxy/clients` | ✅ | 거래처 생성 |
| `/sales/client-management-sales-admin` | PUT `/api/proxy/clients/{id}` | ✅ | 거래처 수정 |
| `/sales/client-management-sales-admin` | DELETE `/api/proxy/clients/{id}` | ✅ | 거래처 삭제 |

### 3.2 단가 관리 ✅

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/sales/pricing-management` | GET `/api/v1/pricing` | ✅ | Server Actions 사용 |
| `/sales/pricing-management` | POST `/api/v1/pricing` | ✅ | 단가 생성 |
| `/sales/pricing-management` | PUT `/api/v1/pricing/{id}` | ✅ | 단가 수정 |
| `/sales/pricing-management` | DELETE `/api/v1/pricing/{id}` | ✅ | 단가 삭제 |

### 3.3 견적 관리 🆕

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/sales/quote-management` | GET `/api/v1/quotes` | 🆕 | Mock 데이터 |
| `/sales/quote-detail/[id]` | GET `/api/v1/quotes/{id}` | 🆕 | Mock 데이터 |
| `/sales/quote-register` | POST `/api/v1/quotes` | 🆕 | Mock 데이터 |

**필요 API**:
- `QuoteController` 전체 CRUD
- 견적 → 주문 전환 API

### 3.4 기타 영업 🆕

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/sales/order-management` | - | 🆕 | Mock 데이터 |
| `/sales/sales-performance` | - | 🆕 | Mock 데이터 |

---

## 4. 회계 관리 (Accounting) 🆕

전체 17개 페이지가 Mock 데이터 사용 중

### 4.1 매출/매입

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/accounting/sales` | GET `/api/v1/sales` | 🆕 | `generateMockData()` |
| `/accounting/sales/[id]` | GET `/api/v1/sales/{id}` | 🆕 | Mock |
| `/accounting/purchase` | GET `/api/v1/purchases` | 🆕 | Mock |
| `/accounting/purchase/[id]` | GET `/api/v1/purchases/{id}` | 🆕 | Mock |

### 4.2 수금/지급

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/accounting/collection` | GET `/api/v1/collections` | 🆕 | Mock |
| `/accounting/payment` | GET `/api/v1/payments` | 🆕 | Mock |

### 4.3 전표/장부

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/accounting/slip-entry` | POST `/api/v1/slips` | 🆕 | Mock |
| `/accounting/slip-inquiry` | GET `/api/v1/slips` | 🆕 | Mock |
| `/accounting/general-ledger` | GET `/api/v1/ledgers` | 🆕 | Mock |
| `/accounting/trial-balance` | GET `/api/v1/trial-balance` | 🆕 | Mock |

### 4.4 세금계산서

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/accounting/tax-invoice-issuance` | POST `/api/v1/tax-invoices` | 🆕 | Mock |
| `/accounting/tax-invoice-inquiry` | GET `/api/v1/tax-invoices` | 🆕 | Mock |

### 4.5 기타 회계

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/accounting/cash-book` | GET `/api/v1/cash-book` | 🆕 | Mock |
| `/accounting/closing` | POST `/api/v1/closing` | 🆕 | Mock |
| `/accounting/vendors` | GET `/api/v1/clients` | 🆕 | Mock (clients 재사용) |
| `/accounting/vendor-balance` | GET `/api/v1/client-balances` | 🆕 | Mock |
| `/accounting/account-management` | GET `/api/v1/accounts` | 🆕 | Mock |

---

## 5. 인사 관리 (HR) 🆕

전체 9개 페이지가 Mock 데이터 사용 중

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/hr/employee-management` | GET `/api/v1/employees` | 🆕 | Mock |
| `/hr/department-management` | GET `/api/v1/departments` | 🆕 | Mock |
| `/hr/card-management` | GET `/api/v1/employee-cards` | 🆕 | Mock |
| `/hr/attendance` | GET `/api/v1/attendances` | 🆕 | Mock |
| `/hr/work-summary` | GET `/api/v1/work-summary` | 🆕 | Mock |
| `/hr/salary-management` | GET `/api/v1/salaries` | 🆕 | Mock |
| `/hr/vacation-management` | GET `/api/v1/leaves` | 🆕 | Mock |
| `/hr/work-management` | GET `/api/v1/works` | 🆕 | Mock |
| `/hr/hr-settings` | GET `/api/v1/hr-settings` | 🆕 | Mock |

---

## 6. 게시판 (Board) 🆕

전체 6개 페이지가 Mock 데이터 사용 중

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/board/notice` | GET `/api/v1/boards/notice/posts` | 🆕 | Mock |
| `/board/free` | GET `/api/v1/boards/free/posts` | 🆕 | Mock |
| `/board/data-room` | GET `/api/v1/boards/data/posts` | 🆕 | Mock |
| `/board/[boardType]/[id]` | GET `/api/v1/posts/{id}` | 🆕 | Mock |
| `/board/[boardType]/write` | POST `/api/v1/posts` | 🆕 | Mock |
| `/board/[boardType]/edit/[id]` | PUT `/api/v1/posts/{id}` | 🆕 | Mock |

---

## 7. 결재 (Approval) 🆕

전체 4개 페이지가 Mock 데이터 사용 중

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/approval/pending` | GET `/api/v1/approvals?status=pending` | 🆕 | Mock |
| `/approval/my-requests` | GET `/api/v1/approvals?mine=true` | 🆕 | Mock |
| `/approval/history` | GET `/api/v1/approvals?status=completed` | 🆕 | Mock |
| `/approval/[id]` | GET `/api/v1/approvals/{id}` | 🆕 | Mock |

---

## 8. 설정 (Settings)

### 8.1 권한 관리 ⚠️

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/settings/permission` | - | ⚠️ | localStorage 사용 |
| `/settings/permission-test` | - | ⚠️ | localStorage 사용 |

**문제점**: API가 아닌 localStorage로 권한 관리 중

### 8.2 기타 설정 🆕

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/settings/general` | GET `/api/v1/settings` | 🆕 | Mock |
| `/settings/menu` | GET `/api/v1/menus` | 🆕 | Mock |
| `/settings/users` | GET `/api/v1/users` | 🆕 | Mock |
| `/settings/roles` | GET `/api/v1/roles` | 🆕 | Mock |
| `/settings/departments` | GET `/api/v1/departments` | 🆕 | Mock |
| `/settings/api-keys` | GET `/api/v1/api-keys` | 🆕 | Mock |
| `/settings/logs` | GET `/api/v1/audit-logs` | 🆕 | Mock |
| `/settings/system` | GET `/api/v1/system-settings` | 🆕 | Mock |

---

## 9. 대시보드 (Dashboard) ⏳

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/dashboard` | - | ⏳ | 미구현 (빈 페이지) |

**필요 API**:
- `GET /api/v1/dashboard/summary`
- `GET /api/v1/dashboard/sales`
- `GET /api/v1/dashboard/inventory`
- `GET /api/v1/dashboard/recent-activities`

---

## 10. 리포트 (Reports) 🆕

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/reports` | - | 🆕 | 다중 탭 리포트, Mock |
| `/reports/comprehensive-analysis` | - | 🆕 | 종합분석, Mock |

**필요 API**:
- `GET /api/v1/reports/sales`
- `GET /api/v1/reports/purchase`
- `GET /api/v1/reports/inventory`
- `GET /api/v1/reports/financial`

---

## 11. 고객센터 (Customer Center) 🆕

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/customer-center/notice` | GET `/api/v1/notices` | 🆕 | Mock |
| `/customer-center/faq` | GET `/api/v1/faqs` | 🆕 | Mock |
| `/customer-center/inquiry` | GET `/api/v1/inquiries` | 🆕 | Mock |
| `/customer-center/inquiry/write` | POST `/api/v1/inquiries` | 🆕 | Mock |
| `/customer-center/guide` | - | 🆕 | 정적 콘텐츠 |
| `/customer-center/terms` | - | 🆕 | 정적 콘텐츠 |

---

## 12. 생산 관리 (Production) 🆕

| React 페이지 | API 엔드포인트 | 상태 | 비고 |
|-------------|---------------|------|------|
| `/production/order-registration` | POST `/api/v1/production-orders` | 🆕 | Mock |
| `/production/order-status` | GET `/api/v1/production-orders` | 🆕 | Mock |
| `/production/work-instruction` | GET `/api/v1/work-orders` | 🆕 | Mock |
| `/production/work-performance` | GET `/api/v1/work-performance` | 🆕 | Mock |

---

## 요약 통계

### 연동 상태별 분류

| 상태 | 페이지 수 | 비율 |
|------|----------|------|
| ✅ 연동완료 | 8 | 7.3% |
| 🆕 신규필요 (Mock) | 95 | 87.2% |
| ⚠️ 부분 연동 | 4 | 3.7% |
| ⏳ 미구현 | 2 | 1.8% |
| **총계** | **109** | **100%** |

### 모듈별 연동 현황

| 모듈 | 페이지 수 | 연동완료 | Mock | 비율 |
|------|----------|----------|------|------|
| Items | 4 | 4 | 0 | 100% |
| Master Data | 1 | 1 | 0 | 100% |
| Sales | 8 | 4 | 4 | 50% |
| Accounting | 17 | 0 | 17 | 0% |
| HR | 9 | 0 | 9 | 0% |
| Board | 6 | 0 | 6 | 0% |
| Approval | 4 | 0 | 4 | 0% |
| Settings | 10 | 0 | 10 | 0% |
| Dashboard | 1 | 0 | 1 | 0% |
| Reports | 2 | 0 | 2 | 0% |
| Customer Center | 6 | 0 | 6 | 0% |
| Production | 4 | 0 | 4 | 0% |

---

*이 문서는 Phase 3 API 분석의 일부로 작성되었습니다.*