# 수주 관리 Frontend API 연동

**날짜:** 2025-01-08
**Phase:** Phase 2 - Frontend 연동
**관련 Plan:** docs/plans/order-management-plan.md

## 변경 개요

수주 관리 React 페이지들을 백엔드 API와 연동 완료. Mock 데이터를 제거하고 실제 API 호출로 대체.

## 수정된 파일

### 1. `src/components/orders/actions.ts` (신규 생성)
- Server Actions 패턴으로 API 클라이언트 구현
- 주요 함수:
  - `getOrders()`: 수주 목록 조회
  - `getOrderById(id)`: 수주 상세 조회
  - `createOrder(data)`: 수주 등록
  - `updateOrder(id, data)`: 수주 수정
  - `deleteOrder(id)`: 수주 삭제
  - `deleteOrders(ids)`: 수주 일괄 삭제
  - `updateOrderStatus(id, status)`: 수주 상태 변경
  - `getOrderStats()`: 통계 조회
- 데이터 변환: API snake_case → Frontend camelCase
- 상태 매핑: API 상태(DRAFT, CONFIRMED 등) → Frontend 상태(order_registered, order_confirmed 등)

### 2. `src/components/orders/index.ts` (수정)
- actions.ts export 추가
- 타입 충돌 해결 (OrderItem → OrderItemApi)

### 3. `src/app/[locale]/(protected)/sales/order-management-sales/page.tsx` (수정)
- SAMPLE_ORDERS (~115줄) 제거
- API 연동 state 추가: `orders`, `apiStats`, `isLoading`, `isDeleting`
- `loadData()` 함수로 API 호출 (getOrders, getOrderStats)
- 삭제 핸들러에 API 호출 추가 (deleteOrder, deleteOrders)
- 로딩 UI 추가

### 4. `src/app/[locale]/(protected)/sales/order-management-sales/[id]/page.tsx` (수정)
- SAMPLE_ITEMS, SAMPLE_ORDERS (~250줄) 제거
- useEffect에서 getOrderById API 호출
- handleConfirmCancel에서 updateOrderStatus API 호출
- isCancelling 로딩 상태 적용

### 5. `src/app/[locale]/(protected)/sales/order-management-sales/[id]/edit/page.tsx` (수정)
- SAMPLE_ORDER (~50줄) 제거
- useEffect에서 getOrderById API 호출
- handleSave에서 updateOrder API 호출

### 6. `src/app/[locale]/(protected)/sales/order-management-sales/new/page.tsx` (수정)
- handleSave에서 createOrder API 호출

## 기술 패턴

### Server Actions 패턴
```typescript
"use server";
import { serverFetch } from "@/lib/api/serverFetch";

export async function getOrders() {
  const response = await serverFetch("/orders");
  // 데이터 변환 로직
}
```

### 데이터 변환
- API: `order_no`, `client_name`, `site_name`
- Frontend: `orderNo`, `clientName`, `siteName`

### 상태 매핑
| API | Frontend |
|-----|----------|
| DRAFT | order_registered |
| CONFIRMED | order_confirmed |
| IN_PROGRESS | production_ordered |
| COMPLETED | shipped |
| CANCELLED | cancelled |

## 테스트 체크리스트

- [ ] 수주 목록 로드
- [ ] 수주 상세 조회
- [ ] 수주 등록 (견적 선택 후)
- [ ] 수주 수정
- [ ] 수주 개별 삭제
- [ ] 수주 일괄 삭제
- [ ] 수주 취소
- [ ] 통계 카드 표시

## 연관 작업

- Phase 1: Order API 백엔드 구현 (커밋: de19ac9)
- Phase 1.1: OrderController/Service 구현 (진행 중)