From 03a7a6c3ca5c83d24fa44f15731781df6a047358 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?= Date: Tue, 17 Mar 2026 14:30:53 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20[plans]=20=EC=A0=88=EA=B3=A1=ED=92=88?= =?UTF-8?q?=20LOT=20=EC=9E=AC=EA=B3=A0=EC=83=9D=EC=82=B0=20React=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EC=9A=94=EC=B2=AD=EC=84=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 프론트엔드 개발자 전달용 문서 - 화면 설계, 드롭다운 동작 흐름, API 엔드포인트, 작업 파일 목록 - 취소→등록 복원 기능, 담당자 기본값, 원자재 LOT 선택 모달 포함 --- INDEX.md | 1 + plans/bending-lot-react-request.md | 258 +++++++++++++++++++++++++++++ 2 files changed, 259 insertions(+) create mode 100644 plans/bending-lot-react-request.md diff --git a/INDEX.md b/INDEX.md index 24dae4e..e239ac5 100644 --- a/INDEX.md +++ b/INDEX.md @@ -278,6 +278,7 @@ DB 도메인별: | [stock-production-api.md](frontend/api-specs/stock-production-api.md) | 재고생산관리 API 명세 (기존 수주 API + STOCK 타입) | | [vehicle-react-implementation.md](plans/vehicle-react-implementation.md) | 차량관리 React 구현 요청서 (3개 메뉴, 컴포넌트 구조, 타입 정의) | | [stock-production-react-request.md](plans/stock-production-react-request.md) | 재고생산관리 React 구현 요청서 (수주 화면 단순화, API 스펙 포함) | +| [bending-lot-react-request.md](plans/bending-lot-react-request.md) | 절곡품 LOT 재고생산 React 구현 요청서 (캐스케이딩 드롭다운, LOT 자동생성, 취소 복원) | ### frontend/integration/ — 프론트엔드 개발 가이드 diff --git a/plans/bending-lot-react-request.md b/plans/bending-lot-react-request.md new file mode 100644 index 0000000..39a2cd5 --- /dev/null +++ b/plans/bending-lot-react-request.md @@ -0,0 +1,258 @@ +# 절곡품 재고생산 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