sam-docs/plans/bending-lot-react-request.md

절곡품 재고생산 LOT — React 프론트엔드 구현 요청서

작성일: 2026-03-17 요청자: R&D실 (백엔드 API 개발 완료) 대상: React 프론트엔드 개발자 배포 상태: 개발서버 배포 완료 (api.dev.codebridge-x.com)

---

1. 작업 개요

재고생산관리(/sales/stocks) 입력 폼을 절곡품 전용 LOT 방식으로 전면 교체한다.

현재: 수주 입력 폼 재활용 (품목명/코드 수동 입력) 변경: 캐스케이딩 드롭다운(품목→종류→모양&길이) + LOT 번호 자동 생성

일반 재고생산 모드는 고려하지 않는다. 재고생산 = 절곡품 LOT 입력으로 통일.

---

2. 화면 설계

2.1 등록 폼 (레거시 5130 참고)

┌──────────────────────────────────────────────────┐
│           절곡품 재고생산 등록                       │
├──────────────────────────────────────────────────┤
│ 등록일  [날짜피커]           담당자  [로그인 사용자]  │
│                                                  │
│ 생산품 LOT  [GI6317-53-001] (자동생성, readonly)  │
│                                                  │
│ 품목명  [Select ▾]           종류  [Select ▾]     │
│                                                  │
│ 모양&길이  [Select ▾]        수량  [숫자입력]      │
│                                                  │
│ 원자재 LOT  [선택 → 모달]                          │
│ 원단 LOT    [선택 → 모달]  ← 연기차단재(G)만 표시  │
│                                                  │
│ 메모  [텍스트 입력]                                │
├──────────────────────────────────────────────────┤
│ ← 목록                          [저장]  [취소]    │
└──────────────────────────────────────────────────┘

2.2 상세 페이지 — LOT 정보 카드 추가

기존 상세 페이지에 LOT 정보 섹션 추가:

┌ LOT 정보 ─────────────────────────────────────┐
│ 생산품 LOT    GI6317-53-001                    │
│ 원자재 재질    화이바원단                        │
│ 원자재 LOT    RM-20260301-001                  │
│ 원단 LOT      FB-20260215-003  ← G일 때만 표시 │
└────────────────────────────────────────────────┘

이 정보는 order.options.bending_lot 객체에서 가져온다.

2.3 상세 페이지 — 취소 상태 복원 버튼

상태가 cancelled(취소)일 때 하단 액션 바에 "복원" 버튼을 추가한다.

상태: 취소
하단: [← 목록]                        [복원]  [삭제]

복원 클릭 시 PATCH /api/v1/orders/{id}/status → { status: "DRAFT" } 호출. 복원 후 상태가 draft(등록)로 변경되면 기존 확정/수정/취소 버튼이 다시 표시된다.

2.4 담당자 기본값

담당자(options.manager_name)는 API에서 자동 설정된다. 프론트엔드에서 빈 값으로 보내도 저장 후 응답에 로그인 사용자 이름이 채워져 돌아온다. 폼에서는 현재 로그인 사용자 이름을 기본값으로 표시하면 된다.

---

3. 드롭다운 동작 흐름

1. 페이지 로드
   └→ GET /api/v1/bending/code-map → 드롭다운 옵션 세팅

2. [품목명] Select 변경
   └→ [종류] 옵션 필터링: specs.filter(s => s.products.includes(prod))
   └→ [모양&길이] 옵션 결정: prod === 'G' ? smoke_barrier : general
   └→ [종류], [모양&길이] 초기화

3. [종류] Select 변경
   └→ LOT 프리뷰 갱신
   └→ 원자재 재질 결정: material_map[`${prod}:${spec}`]

4. [모양&길이] Select 변경
   └→ GET /api/v1/bending/resolve-item?prod=&spec=&length=
   └→ 매핑 품목 정보 표시 (또는 "매핑 없음" 안내)

5. [원자재 LOT] 클릭
   └→ GET /api/v1/bending/material-lots?material={재질}
   └→ 모달: LOT 목록 표시 → 사용자 선택

6. [저장] 클릭
   └→ POST /api/v1/bending/generate-lot → lot_number 확정
   └→ POST /api/v1/orders (STOCK + bending_lot + items)
   └→ 상세 페이지로 이동

---

4. API 엔드포인트

모든 API는 개발서버에 배포 완료. 인증: X-API-KEY + Bearer Token (기존과 동일).

4.1 코드맵 조회 — GET /api/v1/bending/code-map

캐스케이딩 드롭다운에 필요한 전체 코드 체계. 페이지 로드 시 1회 호출.

응답 핵심 구조:

• products[] — 품목 드롭다운 (7종: R,S,G,B,T,L,C)
• specs[] — 종류 드롭다운 (13종, 각 항목에 products[]로 연동 가능 품목 포함)
• lengths.smoke_barrier[] — 연기차단재(G) 전용 모양&길이 (4종)
• lengths.general[] — 기타 품목 모양&길이 (8종)
• material_map — "제품:종류" → "원자재 재질" 매핑

4.2 품목 매핑 — GET /api/v1/bending/resolve-item

파라미터	예시
prod	R
spec	M
length	42

→ 매핑된 품목 반환 (item_id, item_code, item_name, specification, unit) → 매핑 없으면 404 (품목 없이도 저장 가능)

4.3 LOT 번호 생성 — POST /api/v1/bending/generate-lot

{ "prod_code": "G", "spec_code": "I", "length_code": "53", "reg_date": "2026-03-17" }

→ { "lot_number": "GI6317-53-001", "lot_base": "GI6317-53", "material": "화이바원단" }

일련번호(-001)는 백엔드에서 자동 부여. 프론트에서는 lot_base를 프리뷰로 표시하고, 저장 직전에 이 API를 호출하여 확정된 lot_number를 받는다.

4.4 원자재 LOT 목록 — GET /api/v1/bending/material-lots

파라미터	예시
material	SUS 1.2T, EGI 1.55T, 화이바원단

→ 수입검사 완료된 입고 건의 LOT 목록 (lot_no, item_name, receiving_qty, supplier 등) → 원자재 LOT 선택 모달에서 사용

4.5 재고생산 저장 — POST /api/v1/orders (기존 API)

options.bending_lot 객체를 추가하여 LOT 정보를 저장한다.

{
  "order_type_code": "STOCK",
  "memo": "...",
  "options": {
    "production_reason": "절곡품 재고생산",
    "target_stock_qty": 100,
    "bending_lot": {
      "lot_number": "GI6317-53-001",
      "prod_code": "G",
      "spec_code": "I",
      "length_code": "53",
      "raw_lot_no": "RM-20260301-001",
      "fabric_lot_no": "FB-20260215-003",
      "material": "화이바원단"
    }
  },
  "items": [{
    "item_id": 15604,
    "item_code": "BD-GI-53",
    "item_name": "연기차단재 화이바원단 W50×3000",
    "specification": "화이바원단",
    "quantity": 100,
    "unit": "EA",
    "unit_price": 0
  }]
}

4.6 상태 변경 — PATCH /api/v1/orders/{id}/status (기존 API)

현재 상태	가능한 전환
등록(DRAFT)	확정(CONFIRMED), 취소(CANCELLED)
확정(CONFIRMED)	진행중(IN_PROGRESS), 취소(CANCELLED)
취소(CANCELLED)	등록(DRAFT) ← 복원

---

5. LOT 프리뷰 날짜코드 생성 (TypeScript)

function generateDateCode(date: Date): string {
  const year = date.getFullYear() % 10;
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const monthCode = month >= 10
    ? String.fromCharCode(55 + month)  // 10=A, 11=B, 12=C
    : String(month);
  return `${year}${monthCode}${String(day).padStart(2, '0')}`;
}

// 예: 2026-03-17 → '6317', 2026-10-05 → '6A05', 2026-12-31 → '6C31'
// 프리뷰: `${prodCode}${specCode}${dateCode}-${lengthCode}` → 'GI6317-53'

---

6. 작업 파일 목록

파일	작업	설명
StockProductionForm.tsx	전면 교체	BendingLotForm 기반으로 교체
BendingLotForm.tsx	신규 (이미 생성됨)	캐스케이딩 드롭다운 + LOT 자동생성 폼
StockProductionDetail.tsx	수정	LOT 정보 카드 추가 + 취소 상태 "복원" 버튼
actions.ts	수정	bending API 함수 추가 (material-lots 등)
page.tsx	수정	신규 등록 시 BendingLotForm 사용

원자재 LOT 선택 모달 (신규)

• material-lots API 호출하여 LOT 목록 테이블 표시
• 컬럼: LOT번호, 품목명, 규격, 입고수량, 입고일, 공급업체
• 행 클릭 시 LOT 번호 선택 → 폼에 반영

원단 LOT 선택 모달 (연기차단재 전용)

• 품목이 G(연기차단재)일 때만 표시
• material-lots?material=화이바원단으로 조회

---

7. 참고 자료

레거시 5130 화면

5130.codebridge-x.com → 절곡 재고생산/작업일지/중간검사성적서 메뉴 → "신규" 버튼

API 상세 명세

sam/docs/frontend/api-specs/bending-lot-api.md — 모든 API의 요청/응답 예시 포함

기획서

sam/docs/dev/dev_plans/stock-production-lot-form-plan.md — LOT 번호 부여법, 코드 체계 전체

---

최종 업데이트: 2026-03-17