SamProject/sam-react-prod
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4e179d2eca918fbe2ecd55e3c7aff71407b58ccd
sam-react-prod/claudedocs/changes/20250108_order_frontend_api_integration.md
kent 572ffe81cf feat(orders): Phase 2 - Frontend API 연동 완료 
- actions.ts 생성: Server Actions 패턴으로 Order API 클라이언트 구현
  - getOrders, getOrderById, createOrder, updateOrder, deleteOrder(s)
  - updateOrderStatus, getOrderStats
  - API snake_case → Frontend camelCase 변환
  - 상태 매핑 (DRAFT→order_registered 등)

- 목록 페이지(page.tsx):
  - SAMPLE_ORDERS 제거, API 연동 state 추가
  - loadData() 함수로 API 호출
  - 삭제/일괄삭제 API 연동

- 상세 페이지([id]/page.tsx):
  - SAMPLE_ITEMS/ORDERS 제거
  - getOrderById, updateOrderStatus API 연동

- 수정 페이지([id]/edit/page.tsx):
  - SAMPLE_ORDER 제거
  - getOrderById, updateOrder API 연동

- 등록 페이지(new/page.tsx):
  - createOrder API 연동
2026-01-08 17:29:06 +09:00

2.9 KiB
Raw Blame History

수주 관리 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 패턴

"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 구현 (진행 중)