# 수주관리 UI 스크린샷

> 캡처 일시: 2024-12-18
> 소스: http://localhost:3002/ (design/mes기획서_리액트)

## 스크린샷 목록

### 1. 수주 목록 페이지
![수주 목록](screenshots/01-order-list.png)

**주요 요소:**
- 상단 요약 카드: 이번 달 수주, 분할 대기, 생산지시 대기, 출하 대기
- 탭 필터: 전체, 수주등록, 수주확정, 생산지시완료
- 검색: 로트번호, 견적번호, 발주처, 현장명
- 테이블 컬럼: 체크박스, 번호, 로트번호, 견적번호, 발주처, 현장명, 상태, 출고예정일, 배송방식

---

### 2. 수주 상세 페이지
![수주 상세](screenshots/02-order-detail-top.png)

**주요 요소:**
- 헤더 버튼: 계약서, 거래명세서, 발주서 / 목록, 수정, 생산지시 생성
- 기본 정보: 발주처, 현장명, 담당자, 연락처
- 수주/배송 정보: 수주일자, 출고예정일, 납품요청일, 배송방식, 운임비용, 수신처
- 제품 내역: 순번, 품목코드, 품목명, 층, 부호, 규격, 수량, 단위, 단가, 금액

---

### 3. 계약서 모달
![계약서 모달](screenshots/03-contract-modal.png)

**주요 요소:**
- 문서 미리보기 영역
- 출력 옵션: PDF 다운로드, 이메일 발송, FAX 발송, 카카오톡, 프린트

---

### 4. 거래명세서 모달
![거래명세서 모달](screenshots/04-statement-modal.png)

**주요 요소:**
- 거래명세서 문서 미리보기
- 출력 옵션 (계약서와 동일)

---

### 5. 발주서 모달
![발주서 모달](screenshots/05-purchase-order-modal.png)

**주요 요소:**
- 발주서 문서 미리보기
- 출력 옵션 (계약서와 동일)

---

### 6. 수주 등록 폼
![수주 등록 폼](screenshots/06-order-create-form.png)

**주요 섹션:**
1. **견적 불러오기**: 확정된 견적 선택 버튼
2. **기본 정보**: 발주처(필수), 현장명(필수), 담당자, 연락처
3. **수주/배송 정보**:
   - 출고예정일 (미정 체크 가능)
   - 납품요청일 (필수, 미정 체크 가능)
   - 배송방식: 상차, 직접배차, 직접수령, 경동화물, 경동택배, 대신화물, 대신택배
   - 운임비용: 선불, 착불, 무료
   - 수신(반장/업체)(필수), 수신처 연락처(필수)
   - 수신처 주소(필수): 우편번호 찾기 + 기본/상세 주소
   - 비고
4. **품목 내역**: 테이블 + 품목 추가 버튼

---

### 7. 품목 추가 모달
![품목 추가 모달](screenshots/07-item-add-modal.png)

**입력 필드:**
- 층, 도면부호
- 품목명 (선택)
- 오픈사이즈: 폭(mm), 높이(mm)
- 가이드레일 타입: 백면형, 양면형, 편면형
- 가이드레일 규격: 120-70, 150-80, 180-90
- 마감: SUS마감, 분체도장, 용융아연
- 단가

---

### 8. 견적 선택 모달
![견적 선택 모달](screenshots/08-quote-select-modal.png)

**주요 요소:**
- 검색: 견적번호, 거래처, 현장명
- 견적 목록: 최종확정 상태인 견적만 표시
- 각 견적 정보: 견적번호, 신용등급, 거래처, 현장명, 금액, 품목 수

---

### 9-11. 생산지시 생성 화면

#### 상단 (수주 정보 + 옵션)
![생산지시 생성 상단](screenshots/09-production-order-create-top.png)

**수주 정보:**
- 수주번호, 거래처, 현장명, 납기일, 품목 수, 총수량, 신용등급, 상태

**생산지시 옵션:**
- 우선순위 (영업): 긴급, 높음, 일반, 낮음
- 우선순위 매핑 테이블:
  | 생산지시(영업) | 작업지시 기본값(공장) | 비고 |
  |---------------|---------------------|------|
  | 긴급 | 1순위 | 무조건 제일 먼저 |
  | 높음 | 3순위 | 2순위는 현장 새치기용 |
  | 일반 | 5순위 | 4순위 비워둠 |
  | 낮음 | 9순위 | 뒤로 밀어둠 |
- 메모 입력

**생성될 작업지시:**
- 스크린 공정: 원단절단 → 미싱 → 앤드락작업 → 중간검사 → 포장
- 절곡 공정: 절단 → 절곡 → 중간검사 → 포장

---

#### 중간 (자재 소요량 + 품목 상세)
![생산지시 생성 중간](screenshots/10-production-order-create-mid.png)

**자재 소요량 및 재고 현황:**
| 자재코드 | 자재명 | 단위 | 소요량 | 현재고 | 상태 |
|---------|--------|------|--------|--------|------|
| SCR-MAT-001 | 스크린 원단 | ㎡ | 30 | 500 | 충분 |
| SCR-MAT-002 | 앤드락 | EA | 4 | 800 | 충분 |
| BND-MAT-001 | 철판 | KG | 60 | 2,000 | 충분 |
| BND-MAT-002 | 가이드레일 | M | 12 | 300 | 충분 |
| BND-MAT-003 | 케이스 | EA | 2 | 100 | 충분 |

**스크린 품목 상세:**
- No, 품목명, 도번/위치, 개구폭, 개구높이, 제작폭, 제작높이, 가이드레일, 샤프트, 용량, 마감, 수량

---

#### 하단 (모터/전장품 + BOM)
![생산지시 생성 하단](screenshots/11-production-order-create-bottom.png)

**모터/전장품 사양:**
- 모터 사양 (380V): KD-300K 2대
- 모터 브라켓: 380-180 [2-5"] 2개

**절곡물 BOM:**
- 가이드레일: 형태, 규격, 코드, 길이, 수량
- 케이스(셔터박스): 케이스 본체, 측면 덮개
- 하단 마감재: 품목, 규격, 길이, 수량

---

## UI 패턴 요약

### 상태 배지 색상
| 상태 | 색상 |
|------|------|
| 수주등록 | 회색 |
| 수주확정 | 파랑 |
| 생산중 | 노랑 |
| 생산지시완료 | 파랑 |
| 출하완료 | 초록 |
| 재작업중 | 빨강 |
| 작업대기 | 회색 |
| 작업완료 | 초록 |

### 공통 UI 컴포넌트
1. **카드형 요약**: 상단 리포트 카드 (4개)
2. **탭 필터**: 상태별 필터링
3. **테이블**: 체크박스 + 정렬 + 페이지네이션
4. **모달**: 문서 출력, 품목 추가, 견적 선택
5. **폼**: 섹션별 그룹화, 필수 필드 표시(*)

### 자동 계산 필드 (확인됨)
- 제작폭 = 개구폭 + 140
- 제작높이 = MAX(개구높이 + 400, 2950)
- 샤프트: 폭 > 6000 → 5인치, 그 외 4인치
- 용량: 폭 > 6000 → 300kg, 그 외 160kg