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