# [IMPL-2025-12-22] 생산 현황판 구현 계획서

## 개요
생산관리 하위 **생산 현황판** 및 **작업자 화면** 기능 구현
- 생산 현황판: `/production/dashboard`
- 작업자 화면: `/production/worker-screen` (별도 메뉴)

---

## 1. 페이지 구조

### 1.1 생산 현황판 (메인)
**경로**: `/ko/production/dashboard`

| 섹션 | 설명 |
|------|------|
| 상단 탭 | 전체, 스크린공장, 슬랫공장, 절곡공장 |
| 통계 카드 | 전체작업, 작업대기, 작업중, 작업완료, 긴급, 지연 (6개) |
| 3컬럼 레이아웃 | 긴급작업 / 지연작업 / 작업자별 현황 |
| 우측 상단 버튼 | 작업자 화면, 작업지시 목록 |

**긴급작업/지연작업 카드 클릭**
- → 작업지시 관리 상세 화면 이동 (TODO: 페이지 생성 후 연결)

**작업지시 목록 버튼**
- → 작업지시 관리 리스트 이동 (TODO: 페이지 생성 후 연결)

### 1.2 작업자 화면 (별도 페이지)
**경로**: `/ko/production/worker-screen` (생산 현황판 하위가 아닌 별도 메뉴)

| 섹션 | 설명 |
|------|------|
| 상단 통계 | 할당, 작업중, 완료, 긴급 (4개) |
| 내 작업 목록 | 카드 리스트 형태 (우선순위순 정렬 옵션) |
| 각 카드 | 제품명, EA수량, 납기, 순위 배지, 상태 배지 |
| 카드 버튼 | 전량완료, 공정상세, 자재투입, 작업일지, 이슈보고 |

**참고**: 생산 현황판 복귀 버튼 불필요 (사이드바 메뉴로 이동)

---

## 2. 기능 상세

### 2.1 전량완료 버튼 클릭 시

#### Step 1: 자재 투입 확인 팝업
```
제목: 자재 투입이 필요합니다!
내용:
- 작업지시: KD-WO-251216-01
- 공정: 스크린
- "자재 투입 없이 완료 처리하시겠습니까? (LOT 추적이 불가능해집니다)"
버튼: 취소 / 확인
```
- **디자인 팝업 사용** (AlertDialog 컴포넌트)

#### Step 2-A: 확인 클릭 시
```
제목: 작업이 완료되었습니다.
내용:
- 제품검사(LOT: KD-SA-251222-01)
- 제품검사(FQC)가 자동 생성되었습니다.
- "[품질관리 > 제품검사]에서 검사를 진행하세요."
버튼: 확인
```
- **디자인 팝업 사용** (AlertDialog 컴포넌트)

#### Step 3: 동적 뱃지 표시
```
검은색 라운드 배지 (상단 중앙)
"✓ KD-WO-251216-01 완료! (3EA)"
```
- 3초 후 자동 사라짐 (애니메이션)
- 작업 목록에서 해당 지시사항 제거

#### Step 2-B: 취소 클릭 시
- 자재투입 모달 표시 (팝업 닫힘)

### 2.2 공정상세 버튼 클릭 시

**탭 활성화 또는 섹션 확장**
| 항목 | 설명 |
|------|------|
| 자재 투입 필요 | 섹션 + "자재 투입하기" 버튼 |
| 공정 단계 (5단계) | 0/5 완료 표시 |
| 각 단계 | 절곡판/코일 절단, V컷팅, 절곡, 중간검사, 포장 |
| 단계 상세 | #1, #2 등 세부 항목 (위치, 규격, LOT 정보) |

### 2.3 자재투입 버튼 클릭 시

**자재투입 모달**
```
제목: 투입자재 등록
FIFO 순위: 1 최우선, 2 차선, 3+ 대기
테이블:
- 자재코드 | 자재명 | 단위 | 현재고 | 선택
- "이 공정에 배정된 자재가 없습니다" (데이터 없을 때)
버튼: 취소 / 투입 등록
```
- Dialog 컴포넌트 사용

### 2.4 작업일지 버튼 클릭 시

**작업일지 모달** (기안함 스타일 참고)
```
제목: 작업일지 - 절곡 생산부서 (KD-WO-FLD-251212-01)
우측: 인쇄 버튼
내용: 작업일지 양식 (테이블 형태)
```
- Dialog 컴포넌트 사용
- 인쇄 기능: `window.print()` 또는 react-to-print

### 2.5 이슈 보고 버튼 클릭 시

**이슈 보고 모달**
```
제목: 이슈 보고
내용:
- 작업: KD-WO-FLD-251212-01
- 현대건설(주)
- 이슈 유형: 불량품 발생, 재고 없음, 일정 지연, 설비 문제, 기타 (5개 버튼)
- 상세 내용: textarea
버튼: 취소 / 보고
```

#### 벨리데이션
- 이슈 유형 미선택 시: **디자인 팝업** "이슈 유형을 선택해주세요."
- ❌ `alert()` 사용 금지

#### 보고 완료 시
- **디자인 팝업** "이슈가 보고되었습니다. 작업: KD-WO-FLD-251212-01, 유형: [선택값]"
- 확인 후 이슈 보고 화면으로 복귀

---

## 3. 네비게이션 연결

### 3.1 긴급작업/지연작업 카드 클릭
- → 작업지시 관리 상세 화면 (`/production/work-orders/[id]`)
- **TODO**: 작업지시 관리 페이지 생성 후 연결

### 3.2 작업지시 목록 버튼
- → 작업지시 관리 리스트 (`/production/work-orders`)
- **TODO**: 작업지시 관리 페이지 생성 후 연결

### 3.3 작업자 화면 버튼 (생산 현황판)
- → 작업자 화면 (`/production/worker-screen`)
- 별도 메뉴로 이동 (사이드바에서도 접근 가능)

---

## 4. 디자인 팝업 변경 목록

| 기존 | 변경 | 컴포넌트 |
|------|------|----------|
| `alert('자재 투입이 필요합니다')` | AlertDialog | confirm |
| `alert('작업이 완료되었습니다')` | AlertDialog | info |
| `alert('이슈 유형을 선택해주세요')` | AlertDialog | validation |
| `alert('이슈가 보고되었습니다')` | AlertDialog | success |

---

## 5. 파일 구조

```
src/app/[locale]/(protected)/production/
├── dashboard/
│   └── page.tsx                    # 생산 현황판 메인
├── worker-screen/
│   └── page.tsx                    # 작업자 화면 (별도 메뉴)

src/components/production/
├── ProductionDashboard/
│   ├── index.tsx                   # 메인 컴포넌트
│   ├── types.ts                    # 타입 정의
│   └── mockData.ts                 # Mock 데이터
│
├── WorkerScreen/
│   ├── index.tsx                   # 작업자 화면 메인
│   ├── types.ts                    # 타입 정의
│   ├── WorkCard.tsx                # 작업 카드 컴포넌트
│   ├── ProcessDetailSection.tsx    # 공정상세 섹션
│   ├── MaterialInputModal.tsx      # 자재투입 모달
│   ├── WorkLogModal.tsx            # 작업일지 모달
│   ├── IssueReportModal.tsx        # 이슈보고 모달
│   ├── CompletionConfirmDialog.tsx # 전량완료 확인 다이얼로그
│   └── CompletionToast.tsx         # 완료 토스트/뱃지
```

---

## 6. 구현 체크리스트

### Phase 1: 기본 구조 (생산 현황판 메인) ✅
- [x] 1.1 `/production/dashboard` 라우트 생성
- [x] 1.2 ProductionDashboard 컴포넌트 생성
- [x] 1.3 상단 탭 구현 (전체/스크린공장/슬랫공장/절곡공장)
- [x] 1.4 통계 카드 6개 구현
- [x] 1.5 3컬럼 레이아웃 (긴급작업/지연작업/작업자별현황)
- [x] 1.6 긴급작업 리스트 컴포넌트
- [x] 1.7 지연작업 리스트 컴포넌트
- [x] 1.8 작업자별 현황 컴포넌트
- [x] 1.9 우측 상단 버튼 (작업자 화면/작업지시 목록)

### Phase 2: 작업자 화면 (별도 페이지) ✅
- [x] 2.1 `/production/worker-screen` 라우트 생성
- [x] 2.2 WorkerScreen 컴포넌트 생성
- [x] 2.3 상단 통계 카드 4개 (할당/작업중/완료/긴급)
- [x] 2.4 내 작업 목록 카드 리스트 (2열 그리드)
- [x] 2.5 WorkCard 컴포넌트 (제품명/EA/납기/배지/버튼)

### Phase 3: 작업자 화면 - 버튼 기능 ✅
- [x] 3.1 전량완료 버튼 → CompletionConfirmDialog
- [x] 3.2 자재 미투입 확인 다이얼로그 (AlertDialog)
- [x] 3.3 완료 성공 다이얼로그 (AlertDialog)
- [x] 3.4 완료 뱃지 애니메이션 (CompletionToast)
- [x] 3.5 작업 목록에서 완료 항목 제거

### Phase 4: 공정상세 기능 ✅
- [x] 4.1 ProcessDetailSection 컴포넌트
- [x] 4.2 공정 단계 표시 (5단계)
- [x] 4.3 각 단계 세부 항목 (#1, #2...)
- [x] 4.4 자재 투입 필요 섹션

### Phase 5: 자재투입 기능 ✅
- [x] 5.1 MaterialInputModal 컴포넌트
- [x] 5.2 FIFO 순위 표시
- [x] 5.3 자재 테이블 (BOM 기준)
- [x] 5.4 투입 등록 로직

### Phase 6: 작업일지 기능 ✅
- [x] 6.1 WorkLogModal 컴포넌트
- [x] 6.2 작업일지 양식 (기안함 참고)
- [x] 6.3 인쇄 기능

### Phase 7: 이슈보고 기능 ✅
- [x] 7.1 IssueReportModal 컴포넌트
- [x] 7.2 이슈 유형 선택 (5개 버튼)
- [x] 7.3 상세 내용 textarea
- [x] 7.4 벨리데이션 다이얼로그 (AlertDialog)
- [x] 7.5 보고 완료 다이얼로그 (AlertDialog)

### Phase 8: 네비게이션 연결 (TODO 노티) ✅
- [x] 8.1 긴급/지연 작업 클릭 → console.log + TODO 주석
- [x] 8.2 작업지시 목록 버튼 → console.log + TODO 주석
- [ ] 8.3 추후 작업지시 관리 페이지 생성 시 연결 (대기)

---

## 7. 사용 컴포넌트/라이브러리

| 용도 | 컴포넌트 |
|------|----------|
| 확인/취소 팝업 | `@/components/ui/alert-dialog` |
| 정보 모달 | `@/components/ui/dialog` |
| 버튼 | `@/components/ui/button` |
| 배지 | `@/components/ui/badge` |
| 카드 | `@/components/ui/card` |
| 탭 | `@/components/ui/tabs` |
| 테이블 | `@/components/ui/table` |
| 체크박스 | `@/components/ui/checkbox` |
| Textarea | `@/components/ui/textarea` |

---

## 8. Mock 데이터 구조

### 작업 지시 (WorkOrder)
```typescript
interface WorkOrder {
  id: string;
  orderNo: string;           // KD-WO-251216-01
  productName: string;       // 스크린 서터 (표준형) - 추가
  process: string;           // 스크린, 슬랫, 절곡
  client: string;            // 삼성물산(주)
  projectName: string;       // 강남 타워 신축현장
  assignees: string[];       // 담당자 배열
  quantity: number;          // EA 수량
  dueDate: string;           // 납기
  priority: number;          // 순위 (1~5)
  status: 'waiting' | 'inProgress' | 'completed';
  isUrgent: boolean;
  isDelayed: boolean;
  instruction?: string;      // 지시사항
  createdAt: string;
}
```

### 작업자 현황 (WorkerStatus)
```typescript
interface WorkerStatus {
  id: string;
  name: string;
  inProgress: number;        // 작업중 건수
  completed: number;         // 완료 건수
  assigned: number;          // 배정 건수
}
```

### 공정 단계 (ProcessStep)
```typescript
interface ProcessStep {
  id: string;
  stepNo: number;            // 1~5
  name: string;              // 절곡판/코일 절단, V컷팅...
  isInspection?: boolean;    // 검사 단계 여부
  completed: number;
  total: number;
  items: ProcessStepItem[];
}

interface ProcessStepItem {
  id: string;
  itemNo: string;            // #1, #2
  location: string;          // 1층 1호-A
  isPriority: boolean;       // 선행 생산
  spec: string;              // W2500 × H3000
  material: string;          // 자재: 절곡판
  lot: string;               // LOT-절곡-2025-001
}
```

---

## 9. 확정 사항

### 확인 완료
1. ✅ 모든 alert() → AlertDialog 컴포넌트 사용
2. ✅ 작업자 화면은 별도 메뉴 (`/production/worker-screen`)
3. ✅ 생산 현황판 복귀 버튼 불필요 (사이드바 메뉴로 이동)
4. ✅ 긴급/지연 작업 클릭 → 작업지시 상세로 이동 (페이지 생성 후 연결)
5. ✅ 작업지시 목록 버튼 → 작업지시 리스트로 이동 (페이지 생성 후 연결)
6. ✅ 작업지시 관리 페이지 → 생산 현황판 완료 후 별도 진행 (스샷/설명 별도 제공 예정)
7. ✅ 공정상세 버튼 → 카드 내 토글 확장 방식 (스크린샷 기준)
8. ✅ 완료 뱃지 → 상단 중앙 검은색 뱃지, 3초 후 fade out

---

## 10. 다음 단계

사용자 확정 후:
1. Phase 1부터 순차적으로 구현
2. 각 Phase 완료 시 체크리스트 업데이트
3. 테스트 URL 문서 업데이트

---

**작성일**: 2025-12-22
**작성자**: Claude Code
**상태**: ✅ 구현 완료

---

## 11. 구현 결과

### 생성된 파일
```
src/app/[locale]/(protected)/production/
├── dashboard/page.tsx              ✅ 생산 현황판 페이지
└── worker-screen/page.tsx          ✅ 작업자 화면 페이지

src/components/production/
├── ProductionDashboard/
│   ├── index.tsx                   ✅ 메인 컴포넌트
│   ├── types.ts                    ✅ 타입 정의
│   └── mockData.ts                 ✅ Mock 데이터
│
└── WorkerScreen/
    ├── index.tsx                   ✅ 작업자 화면 메인
    ├── types.ts                    ✅ 타입 정의
    ├── WorkCard.tsx                ✅ 작업 카드 컴포넌트
    ├── ProcessDetailSection.tsx    ✅ 공정상세 섹션
    ├── MaterialInputModal.tsx      ✅ 자재투입 모달
    ├── WorkLogModal.tsx            ✅ 작업일지 모달
    ├── IssueReportModal.tsx        ✅ 이슈보고 모달
    ├── CompletionConfirmDialog.tsx ✅ 전량완료 확인 다이얼로그
    └── CompletionToast.tsx         ✅ 완료 토스트

src/components/ui/
└── collapsible.tsx                 ✅ Collapsible 컴포넌트 추가
```

### 테스트 URL
- 생산 현황판: http://localhost:3000/ko/production/dashboard
- 작업자 화면: http://localhost:3000/ko/production/worker-screen

### 남은 작업
- [ ] **작업일지 모달 개선** - 기안함 상세 화면 스타일로 변경
  - 참고: `src/components/approval/DocumentDetail/` 컴포넌트 활용
  - 수정: `src/components/production/WorkerScreen/WorkLogModal.tsx`
- [ ] 작업지시 관리 페이지 생성 후 네비게이션 연결