# 절곡품 재고생산 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`

```json
{ "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 정보를 저장한다.

```json
{
  "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)

```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
