03a7a6c3ca
- 프론트엔드 개발자 전달용 문서 - 화면 설계, 드롭다운 동작 흐름, API 엔드포인트, 작업 파일 목록 - 취소→등록 복원 기능, 담당자 기본값, 원자재 LOT 선택 모달 포함
259 lines
9.4 KiB
Markdown
259 lines
9.4 KiB
Markdown
# 절곡품 재고생산 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
|