sam-react-prod/claudedocs/production/[IMPL-2025-12-22] production-dashboard-checklist.md

[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: 기본 구조 (생산 현황판 메인) ✅

• 1.1 /production/dashboard 라우트 생성
• 1.2 ProductionDashboard 컴포넌트 생성
• 1.3 상단 탭 구현 (전체/스크린공장/슬랫공장/절곡공장)
• 1.4 통계 카드 6개 구현
• 1.5 3컬럼 레이아웃 (긴급작업/지연작업/작업자별현황)
• 1.6 긴급작업 리스트 컴포넌트
• 1.7 지연작업 리스트 컴포넌트
• 1.8 작업자별 현황 컴포넌트
• 1.9 우측 상단 버튼 (작업자 화면/작업지시 목록)

Phase 2: 작업자 화면 (별도 페이지) ✅

• 2.1 /production/worker-screen 라우트 생성
• 2.2 WorkerScreen 컴포넌트 생성
• 2.3 상단 통계 카드 4개 (할당/작업중/완료/긴급)
• 2.4 내 작업 목록 카드 리스트 (2열 그리드)
• 2.5 WorkCard 컴포넌트 (제품명/EA/납기/배지/버튼)

Phase 3: 작업자 화면 - 버튼 기능 ✅

• 3.1 전량완료 버튼 → CompletionConfirmDialog
• 3.2 자재 미투입 확인 다이얼로그 (AlertDialog)
• 3.3 완료 성공 다이얼로그 (AlertDialog)
• 3.4 완료 뱃지 애니메이션 (CompletionToast)
• 3.5 작업 목록에서 완료 항목 제거

Phase 4: 공정상세 기능 ✅

• 4.1 ProcessDetailSection 컴포넌트
• 4.2 공정 단계 표시 (5단계)
• 4.3 각 단계 세부 항목 (#1, #2...)
• 4.4 자재 투입 필요 섹션

Phase 5: 자재투입 기능 ✅

• 5.1 MaterialInputModal 컴포넌트
• 5.2 FIFO 순위 표시
• 5.3 자재 테이블 (BOM 기준)
• 5.4 투입 등록 로직

Phase 6: 작업일지 기능 ✅

• 6.1 WorkLogModal 컴포넌트
• 6.2 작업일지 양식 (기안함 참고)
• 6.3 인쇄 기능

Phase 7: 이슈보고 기능 ✅

• 7.1 IssueReportModal 컴포넌트
• 7.2 이슈 유형 선택 (5개 버튼)
• 7.3 상세 내용 textarea
• 7.4 벨리데이션 다이얼로그 (AlertDialog)
• 7.5 보고 완료 다이얼로그 (AlertDialog)

Phase 8: 네비게이션 연결 (TODO 노티) ✅

• 8.1 긴급/지연 작업 클릭 → console.log + TODO 주석
• 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)

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)

interface WorkerStatus {
  id: string;
  name: string;
  inProgress: number;        // 작업중 건수
  completed: number;         // 완료 건수
  assigned: number;          // 배정 건수
}

공정 단계 (ProcessStep)

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
• 작업지시 관리 페이지 생성 후 네비게이션 연결