feat: 공정관리 페이지 및 컴포넌트 추가
- 공정관리 목록/상세/등록/수정 페이지 구현 - ProcessListClient, ProcessDetail, ProcessForm 컴포넌트 추가 - ProcessWorkLogPreviewModal, RuleModal 추가 - MobileCard 공통 컴포넌트 추가 - WorkLogModal.tsx 개선 - .gitignore 업데이트 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
byeongcheolryu
219
src/components/process-management/ProcessWorkLogPreviewModal.tsx
Normal file
219
src/components/process-management/ProcessWorkLogPreviewModal.tsx
Normal file
@@ -0,0 +1,219 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 공정 상세 - 작업일지 양식 미리보기 모달
|
||||
*
|
||||
* 기획서 기준 양식:
|
||||
* - 신청업체/신청내용 테이블
|
||||
* - 순번/작업항목/규격/수량/단위/작업자/비고 테이블
|
||||
*/
|
||||
|
||||
import { Printer, X } from 'lucide-react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import type { Process } from '@/types/process';
|
||||
|
||||
interface ProcessWorkLogPreviewModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
process: Process;
|
||||
}
|
||||
|
||||
// 공정명을 문서 코드로 매핑
|
||||
const getDocumentCode = (processName: string): string => {
|
||||
if (processName.includes('스크린')) return 'WL-SCR';
|
||||
if (processName.includes('슬랫')) return 'WL-SLT';
|
||||
if (processName.includes('절곡') || processName.includes('포밍')) return 'WL-BEN';
|
||||
return 'WL-STK';
|
||||
};
|
||||
|
||||
// 공정명을 부서명으로 매핑
|
||||
const getDepartmentName = (processName: string): string => {
|
||||
if (processName.includes('스크린')) return '스크린 생산부서';
|
||||
if (processName.includes('슬랫')) return '슬랫 생산부서';
|
||||
if (processName.includes('절곡')) return '절곡 생산부서';
|
||||
if (processName.includes('포밍')) return '포밍 생산부서';
|
||||
return process?.department || '생산부서';
|
||||
};
|
||||
|
||||
export function ProcessWorkLogPreviewModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
process
|
||||
}: ProcessWorkLogPreviewModalProps) {
|
||||
const handlePrint = () => {
|
||||
window.print();
|
||||
};
|
||||
|
||||
const documentCode = getDocumentCode(process.processName);
|
||||
const departmentName = getDepartmentName(process.processName);
|
||||
const today = new Date().toLocaleDateString('ko-KR', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
}).replace(/\. /g, '-').replace('.', '');
|
||||
|
||||
// 샘플 작업항목 데이터 (기획서 기준)
|
||||
const workItems = [
|
||||
{ no: 1, name: '원단 재단', spec: 'W2900 × H3900', qty: 9, unit: 'EA', worker: '이작업', note: '' },
|
||||
{ no: 2, name: '미싱 작업', spec: 'W2800 × H3800', qty: 8, unit: 'EA', worker: '김작업', note: '' },
|
||||
{ no: 3, name: '앤드락 조립', spec: 'W2700 × H3700', qty: 7, unit: 'EA', worker: '이작업', note: '' },
|
||||
{ no: 4, name: '검수', spec: 'W2600 × H3600', qty: 6, unit: 'EA', worker: '김작업', note: '' },
|
||||
{ no: 5, name: '포장', spec: 'W2500 × H3500', qty: 5, unit: 'EA', worker: '이작업', note: '' },
|
||||
];
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-5xl max-h-[90vh] overflow-y-auto p-0 gap-0 bg-gray-100">
|
||||
{/* 접근성을 위한 숨겨진 타이틀 */}
|
||||
<VisuallyHidden>
|
||||
<DialogTitle>{process.workLogTemplate} 미리보기</DialogTitle>
|
||||
</VisuallyHidden>
|
||||
|
||||
{/* 모달 헤더 */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b bg-white sticky top-0 z-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="font-semibold text-lg">{process.workLogTemplate} 미리보기</span>
|
||||
<span className="text-sm text-muted-foreground">({documentCode})</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handlePrint}>
|
||||
<Printer className="w-4 h-4 mr-1.5" />
|
||||
인쇄
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => onOpenChange(false)}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 문서 본문 */}
|
||||
<div className="m-6 p-6 bg-white rounded-lg shadow-sm">
|
||||
{/* 문서 헤더: 로고 + 제목 + 결재라인 */}
|
||||
<div className="flex border border-gray-300 mb-6">
|
||||
{/* 좌측: 로고 영역 */}
|
||||
<div className="w-24 border-r border-gray-300 flex flex-col items-center justify-center p-3 shrink-0">
|
||||
<div className="text-2xl font-bold">KD</div>
|
||||
<div className="text-xs text-gray-500">정동기업</div>
|
||||
</div>
|
||||
|
||||
{/* 중앙: 문서 제목 */}
|
||||
<div className="flex-1 border-r border-gray-300 flex flex-col items-center justify-center p-3">
|
||||
<h1 className="text-xl font-bold tracking-widest mb-1">작 업 일 지</h1>
|
||||
<p className="text-xs text-gray-500">{documentCode}</p>
|
||||
<p className="text-sm font-medium mt-1">{departmentName}</p>
|
||||
</div>
|
||||
|
||||
{/* 우측: 결재라인 */}
|
||||
<div className="shrink-0">
|
||||
<table className="border-collapse text-xs h-full">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowSpan={3} className="w-8 border-r border-gray-300 text-center align-middle bg-gray-100 font-medium">
|
||||
<div>결</div>
|
||||
<div>재</div>
|
||||
</td>
|
||||
<td className="w-16 p-2 text-center font-medium bg-gray-100 border-r border-b border-gray-300">작성</td>
|
||||
<td className="w-16 p-2 text-center font-medium bg-gray-100 border-r border-b border-gray-300">검토</td>
|
||||
<td className="w-16 p-2 text-center font-medium bg-gray-100 border-b border-gray-300">승인</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="w-16 p-2 text-center border-r border-b border-gray-300">
|
||||
<div>홍길동</div>
|
||||
<div className="text-[10px] text-gray-500">12/17</div>
|
||||
</td>
|
||||
<td className="w-16 p-2 text-center border-r border-b border-gray-300"></td>
|
||||
<td className="w-16 p-2 text-center border-b border-gray-300"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="w-16 p-2 text-center bg-gray-50 border-r border-gray-300">판매/전진</td>
|
||||
<td className="w-16 p-2 text-center bg-gray-50 border-r border-gray-300">생산</td>
|
||||
<td className="w-16 p-2 text-center bg-gray-50">품질</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 신청업체 / 신청내용 테이블 */}
|
||||
<table className="w-full border-collapse border border-gray-300 mb-6 text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={2} className="bg-gray-800 text-white p-2.5 font-medium border-r border-gray-300">
|
||||
신 청 업 체
|
||||
</th>
|
||||
<th colSpan={2} className="bg-gray-800 text-white p-2.5 font-medium">
|
||||
신 청 내 용
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="w-24 bg-gray-100 p-3 font-medium border-r border-gray-300">발 주 일</td>
|
||||
<td className="p-3 border-r border-gray-300">{today}</td>
|
||||
<td className="w-24 bg-gray-100 p-3 font-medium border-r border-gray-300">현 장 명</td>
|
||||
<td className="p-3">송도 오피스텔 A동</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 p-3 font-medium border-r border-gray-300">업 체 명</td>
|
||||
<td className="p-3 border-r border-gray-300">(주)인천건설</td>
|
||||
<td className="bg-gray-100 p-3 font-medium border-r border-gray-300">작업일자</td>
|
||||
<td className="p-3">{today}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 p-3 font-medium border-r border-gray-300">담 당 자</td>
|
||||
<td className="p-3 border-r border-gray-300">김담당</td>
|
||||
<td className="bg-gray-100 p-3 font-medium border-r border-gray-300">제품 LOT NO.</td>
|
||||
<td className="p-3">KD-TS-251217-01-01</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bg-gray-100 p-3 font-medium border-r border-gray-300">제품명</td>
|
||||
<td className="p-3 border-r border-gray-300">SH3040 방화셔터 W3000×H4000</td>
|
||||
<td className="bg-gray-100 p-3 font-medium border-r border-gray-300">마감유형</td>
|
||||
<td className="p-3">스크린 그레이</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* 작업항목 테이블 */}
|
||||
<table className="w-full border-collapse border border-gray-300 text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-800 text-white">
|
||||
<th className="p-2.5 font-medium border-r border-gray-600 w-16">순번</th>
|
||||
<th className="p-2.5 font-medium border-r border-gray-600">작업항목</th>
|
||||
<th className="p-2.5 font-medium border-r border-gray-600 w-40">규격</th>
|
||||
<th className="p-2.5 font-medium border-r border-gray-600 w-20">수량</th>
|
||||
<th className="p-2.5 font-medium border-r border-gray-600 w-16">단위</th>
|
||||
<th className="p-2.5 font-medium border-r border-gray-600 w-20">작업자</th>
|
||||
<th className="p-2.5 font-medium w-24">비고</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{workItems.map((item, index) => (
|
||||
<tr key={item.no} className={index < workItems.length - 1 ? 'border-b border-gray-300' : ''}>
|
||||
<td className="p-3 text-center border-r border-gray-300">{item.no}</td>
|
||||
<td className="p-3 border-r border-gray-300">{item.name}</td>
|
||||
<td className="p-3 text-center border-r border-gray-300">{item.spec}</td>
|
||||
<td className="p-3 text-center border-r border-gray-300">{item.qty}</td>
|
||||
<td className="p-3 text-center border-r border-gray-300">{item.unit}</td>
|
||||
<td className="p-3 text-center border-r border-gray-300">{item.worker}</td>
|
||||
<td className="p-3 text-center">{item.note}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user