# 작업지시 화면 구현 가이드

> **화면명**: 작업지시
> **파일**: 작업지시.html
> **분류**: 생산관리
> **구현 가능**: ⚠️ 부분 (그룹화 테이블 필요)

---

## 1. 화면 개요

생산계획을 기반으로 작업지시를 생성하고 관리하는 화면입니다.

### 핵심 기능
- 작업지시 목록 조회 (탭별 구분)
- 그룹화 기능 (작업일자, 공정별)
- 작업지시 생성/수정/삭제
- 작업지시서 인쇄
- 실적 연계

---

## 2. 화면 레이아웃

```
┌─────────────────────────────────────────────────────────────────┐
│ [기간] [품목] [공정] [작업상태▼] [초기화][조회] [사용자옵션][엑셀] │
├─────────────────────────────────────────────────────────────────┤
│ [전체] [대기] [진행중] [완료] [지연]                             │
├───────────────────────┬─────────────────────────────────────────┤
│ 📋 작업지시 목록        │ 📄 작업지시 상세                        │
│ ───────────────       │ [인쇄] [시작] [완료] [수정] [삭제]       │
│ Group by: [작업일자▼]  │ ─────────────────────────               │
│ ┌──────────────────┐  │ 지시번호: WO-2026-0001                  │
│ │▼ 2026-01-30 (5)  │  │ 품목명: 제품A                           │
│ │  WO-001|제품A|대기│  │ 지시수량: 100 EA                        │
│ │  WO-002|제품B|진행│  ├─────────────────────────────────────────┤
│ │▼ 2026-01-31 (3)  │  │ [자재투입] [공정현황] [실적현황]         │
│ │  WO-003|제품C|대기│  │ ───────────────────────────              │
│ └──────────────────┘  │ [투입자재 테이블]                        │
└───────────────────────┴─────────────────────────────────────────┘
```

---

## 3. V2 컴포넌트 매핑

| HTML 영역 | V2 컴포넌트 | 상태 |
|-----------|-------------|------|
| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
| 상태 탭 | `v2-tabs-widget` | ✅ 가능 |
| 작업지시 목록 (그룹화) | `v2-table-list` | ⚠️ 그룹화 미지원 |
| 분할 패널 | `v2-split-panel-layout` | ✅ 가능 |
| 상세 탭 | `v2-tabs-widget` | ✅ 가능 |

---

## 4. 테이블 정의

### 4.1 작업지시 목록

```typescript
columns: [
  { id: 'checkbox', type: 'checkbox', width: 50 },
  { id: 'work_order_no', label: '지시번호', width: 120 },
  { id: 'work_date', label: '작업일', width: 100 },
  { id: 'item_code', label: '품목코드', width: 100 },
  { id: 'item_name', label: '품목명', width: 200 },
  { id: 'order_qty', label: '지시수량', width: 100, align: 'right' },
  { id: 'prod_qty', label: '생산수량', width: 100, align: 'right' },
  { id: 'process_name', label: '공정', width: 100 },
  { id: 'status', label: '상태', width: 80 },
  { id: 'worker', label: '작업자', width: 100 }
]
```

### 4.2 자재투입 탭

```typescript
materialColumns: [
  { id: 'item_code', label: '품목코드', width: 100 },
  { id: 'item_name', label: '품목명', width: 200 },
  { id: 'required_qty', label: '소요량', width: 100, align: 'right' },
  { id: 'issued_qty', label: '투입량', width: 100, align: 'right' },
  { id: 'unit', label: '단위', width: 60 },
  { id: 'warehouse', label: '출고창고', width: 100 }
]
```

---

## 5. 상태 탭

```typescript
statusTabs: [
  { id: 'all', label: '전체', count: 25 },
  { id: 'waiting', label: '대기', count: 10 },
  { id: 'progress', label: '진행중', count: 8 },
  { id: 'completed', label: '완료', count: 5 },
  { id: 'delayed', label: '지연', count: 2 }
]
```

---

## 6. 그룹화 기능 (v2-grouped-table 필요)

```typescript
groupByOptions: [
  { id: 'work_date', label: '작업일자' },
  { id: 'process_name', label: '공정' },
  { id: 'item_type', label: '품목구분' }
]
```

---

## 7. 현재 구현 가능 범위

### ✅ 가능
- 검색 영역
- 상태 탭 전환
- 분할 패널
- 상세 탭
- 자재투입/공정현황/실적현황 테이블

### ⚠️ 부분 가능
- 작업지시 목록: 그룹화 없이 일반 테이블

### ❌ 불가능
- 동적 그룹화

---

## 8. 구현 JSON

```json
{
  "screen_code": "WORK_ORDER_MAIN",
  "screen_name": "작업지시",
  "components": [
    {
      "type": "v2-table-search-widget",
      "position": { "x": 0, "y": 0, "w": 12, "h": 1 },
      "config": {
        "searchFields": [
          { "type": "date", "id": "date_range", "placeholder": "기간", "dateRange": true },
          { "type": "input", "id": "item_name", "placeholder": "품목명" },
          { "type": "select", "id": "process", "placeholder": "공정" },
          { "type": "select", "id": "status", "placeholder": "상태" }
        ]
      }
    },
    {
      "type": "v2-tabs-widget",
      "position": { "x": 0, "y": 1, "w": 12, "h": 11 },
      "config": {
        "tabs": [
          { "id": "all", "label": "전체" },
          { "id": "waiting", "label": "대기" },
          { "id": "progress", "label": "진행중" },
          { "id": "completed", "label": "완료" },
          { "id": "delayed", "label": "지연" }
        ],
        "tabContent": {
          "type": "v2-split-panel-layout",
          "config": {
            "masterPanel": {
              "title": "작업지시 목록",
              "entityId": "work_order",
              "columns": [
                { "id": "work_order_no", "label": "지시번호" },
                { "id": "work_date", "label": "작업일" },
                { "id": "item_name", "label": "품목명" },
                { "id": "order_qty", "label": "지시수량" },
                { "id": "status", "label": "상태" }
              ]
            },
            "detailPanel": {
              "tabs": [
                { "id": "material", "label": "자재투입", "entityId": "work_order_material" },
                { "id": "process", "label": "공정현황", "entityId": "work_order_process" },
                { "id": "result", "label": "실적현황", "entityId": "work_order_result" }
              ]
            }
          }
        }
      }
    }
  ]
}
```

**v2-grouped-table 개발 시 재활용 가능**