93 lines
2.9 KiB
Markdown
93 lines
2.9 KiB
Markdown
|
# 수주 관리 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 구현 (진행 중)
|