SamProject/sam-react-prod
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(WEB): DatePicker 공통화 및 공정관리/작업자화면 대폭 개선

Browse Source 
DatePicker 공통화:
- date-picker.tsx 공통 컴포넌트 신규 추가
- 전체 폼 컴포넌트 DatePicker 통일 적용 (50+ 파일)
- DateRangeSelector 개선

공정관리:
- RuleModal 대폭 리팩토링 (-592줄 → 간소화)
- ProcessForm, StepForm 개선
- ProcessDetail 수정, actions 확장

작업자화면:
- WorkerScreen 기능 대폭 확장 (+543줄)
- WorkItemCard 개선
- types 확장

회계/인사/영업/품질:
- BadDebtDetail, BillDetail, DepositDetail, SalesDetail 등 DatePicker 적용
- EmployeeForm, VacationDialog 등 DatePicker 적용
- OrderRegistration, QuoteRegistration DatePicker 적용
- InspectionCreate, InspectionDetail DatePicker 적용

공사관리/CEO대시보드:
- BiddingDetail, ContractDetail, HandoverReport 등 DatePicker 적용
- ScheduleDetailModal, TodayIssueSection 개선

기타:
- WorkOrderCreate/Edit/Detail/List 개선
- ShipmentCreate/Edit, ReceivingDetail 개선
- calendar, calendarEvents 수정
- datepicker 마이그레이션 체크리스트 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
유병철
2026-02-06 15:48:00 +09:00
parent e453753bdd
commit c2ed71540f
68 changed files with 1436 additions and 1134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/production/WorkerScreen/WorkItemCard.tsx
View File

@@ -134,13 +134,18 @@ export function WorkItemCard({
</p>
</div>
{/* 공정 단계 버튼 - 중간검사는 포장완료 앞에 위치 */}
{/* 공정 단계 버튼 - 중간검사 포함 인라인 */}
<div className="flex flex-wrap gap-2">
{/* 포장완료 전 단계들 */}
{item.steps.slice(0, -1).map((step) => (
{item.steps.map((step) => (
<button
key={step.id}
onClick={() => handleStepClick(step)}
onClick={() => {
if (step.isInspection && onInspectionClick) {
onInspectionClick(item.id);
} else {
handleStepClick(step);
}
}}
className={cn(
'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
step.isCompleted
@@ -154,36 +159,6 @@ export function WorkItemCard({
)}
</button>
))}
{/* 중간검사 버튼 - 포장완료 앞 */}
{onInspectionClick && (
<button
onClick={() => onInspectionClick(item.id)}
className="px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-gray-800 text-white hover:bg-gray-700"
>
중간검사
</button>
)}
{/* 포장완료 (마지막 단계) */}
{item.steps.length > 0 && (() => {
const lastStep = item.steps[item.steps.length - 1];
return (
<button
key={lastStep.id}
onClick={() => handleStepClick(lastStep)}
className={cn(
'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
lastStep.isCompleted
? 'bg-emerald-500 text-white hover:bg-emerald-600'
: 'bg-gray-800 text-white hover:bg-gray-700'
)}
>
{lastStep.name}
{lastStep.isCompleted && (
<span className="ml-1.5 font-semibold">완료</span>
)}
</button>
);
})()}
</div>
{/* 자재 투입 목록 (토글) */}

543
src/components/production/WorkerScreen/index.tsx
View File

@@ -15,10 +15,11 @@
import { useState, useMemo, useCallback, useEffect } from 'react';
import { useMenuStore } from '@/store/menuStore';
import { ClipboardList, PlayCircle, CheckCircle2, AlertTriangle } from 'lucide-react';
import { ClipboardList, PlayCircle, CheckCircle2, AlertTriangle, ChevronDown, ChevronUp, List } from 'lucide-react';
import { ContentSkeleton } from '@/components/ui/skeleton';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { DatePicker } from '@/components/ui/date-picker';
import { Label } from '@/components/ui/label';
import {
Select,
@@ -30,6 +31,7 @@ import {
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { PageLayout } from '@/components/organisms/PageLayout';
import { cn } from '@/lib/utils';
import { toast } from 'sonner';
import { getMyWorkOrders, completeWorkOrder } from './actions';
import { getProcessList } from '@/components/process-management/actions';
@@ -67,7 +69,8 @@ const MOCK_ITEMS: Record<ProcessTab, WorkItemData[]> = {
{ id: 's1-1', name: '자재투입', isMaterialInput: true, isCompleted: true },
{ id: 's1-2', name: '절단', isMaterialInput: false, isCompleted: true },
{ id: 's1-3', name: '미싱', isMaterialInput: false, isCompleted: false },
{ id: 's1-4', name: '포장완료', isMaterialInput: false, isCompleted: false },
{ id: 's1-4', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
{ id: 's1-5', name: '포장완료', isMaterialInput: false, isCompleted: false },
],
materialInputs: [
{ id: 'm1', lotNo: 'LOT-2026-001', itemName: '스크린 원단 A', quantity: 500, unit: 'm' },
@@ -82,7 +85,8 @@ const MOCK_ITEMS: Record<ProcessTab, WorkItemData[]> = {
{ id: 's2-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
{ id: 's2-2', name: '절단', isMaterialInput: false, isCompleted: false },
{ id: 's2-3', name: '미싱', isMaterialInput: false, isCompleted: false },
{ id: 's2-4', name: '포장완료', isMaterialInput: false, isCompleted: false },
{ id: 's2-4', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
{ id: 's2-5', name: '포장완료', isMaterialInput: false, isCompleted: false },
],
},
{
@@ -93,7 +97,8 @@ const MOCK_ITEMS: Record<ProcessTab, WorkItemData[]> = {
{ id: 's3-1', name: '자재투입', isMaterialInput: true, isCompleted: true },
{ id: 's3-2', name: '절단', isMaterialInput: false, isCompleted: true },
{ id: 's3-3', name: '미싱', isMaterialInput: false, isCompleted: true },
{ id: 's3-4', name: '포장완료', isMaterialInput: false, isCompleted: false },
{ id: 's3-4', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
{ id: 's3-5', name: '포장완료', isMaterialInput: false, isCompleted: false },
],
materialInputs: [
{ id: 'm3', lotNo: 'LOT-2026-005', itemName: '광폭 원단', quantity: 300, unit: 'm' },
@@ -108,7 +113,8 @@ const MOCK_ITEMS: Record<ProcessTab, WorkItemData[]> = {
steps: [
{ id: 'l1-1', name: '자재투입', isMaterialInput: true, isCompleted: true },
{ id: 'l1-2', name: '포밍/절단', isMaterialInput: false, isCompleted: false },
{ id: 'l1-3', name: '포장완료', isMaterialInput: false, isCompleted: false },
{ id: 'l1-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
{ id: 'l1-4', name: '포장완료', isMaterialInput: false, isCompleted: false },
],
materialInputs: [
{ id: 'm4', lotNo: 'LOT-2026-010', itemName: '슬랫 코일 A', quantity: 200, unit: 'kg' },
@@ -121,7 +127,8 @@ const MOCK_ITEMS: Record<ProcessTab, WorkItemData[]> = {
steps: [
{ id: 'l2-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
{ id: 'l2-2', name: '포밍/절단', isMaterialInput: false, isCompleted: false },
{ id: 'l2-3', name: '포장완료', isMaterialInput: false, isCompleted: false },
{ id: 'l2-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
{ id: 'l2-4', name: '포장완료', isMaterialInput: false, isCompleted: false },
],
},
],
@@ -143,7 +150,7 @@ const MOCK_ITEMS: Record<ProcessTab, WorkItemData[]> = {
{ id: 'b1-1', name: '자재투입', isMaterialInput: true, isCompleted: true },
{ id: 'b1-2', name: '절단', isMaterialInput: false, isCompleted: true },
{ id: 'b1-3', name: '절곡', isMaterialInput: false, isCompleted: false },
{ id: 'b1-4', name: '포장완료', isMaterialInput: false, isCompleted: false },
{ id: 'b1-4', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
],
},
],
@@ -159,6 +166,7 @@ const MOCK_ITEMS_BENDING_WIP: WorkItemData[] = [
steps: [
{ id: 'bw1-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
{ id: 'bw1-2', name: '절단', isMaterialInput: false, isCompleted: false },
{ id: 'bw1-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
],
},
{
@@ -169,6 +177,7 @@ const MOCK_ITEMS_BENDING_WIP: WorkItemData[] = [
steps: [
{ id: 'bw2-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
{ id: 'bw2-2', name: '절단', isMaterialInput: false, isCompleted: false },
{ id: 'bw2-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
],
},
{
@@ -179,6 +188,7 @@ const MOCK_ITEMS_BENDING_WIP: WorkItemData[] = [
steps: [
{ id: 'bw3-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
{ id: 'bw3-2', name: '절단', isMaterialInput: false, isCompleted: false },
{ id: 'bw3-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
],
},
];
@@ -193,7 +203,8 @@ const MOCK_ITEMS_SLAT_JOINTBAR: WorkItemData[] = [
steps: [
{ id: 'jb1-1', name: '자재투입', isMaterialInput: true, isCompleted: true },
{ id: 'jb1-2', name: '포밍/절단', isMaterialInput: false, isCompleted: false },
{ id: 'jb1-3', name: '포장완료', isMaterialInput: false, isCompleted: false },
{ id: 'jb1-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
{ id: 'jb1-4', name: '포장완료', isMaterialInput: false, isCompleted: false },
],
materialInputs: [
{ id: 'mjb1', lotNo: 'LOT-2026-020', itemName: '조인트바 코일', quantity: 100, unit: 'kg' },
@@ -207,33 +218,60 @@ const MOCK_ITEMS_SLAT_JOINTBAR: WorkItemData[] = [
steps: [
{ id: 'jb2-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
{ id: 'jb2-2', name: '포밍/절단', isMaterialInput: false, isCompleted: false },
{ id: 'jb2-3', name: '포장완료', isMaterialInput: false, isCompleted: false },
{ id: 'jb2-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
{ id: 'jb2-4', name: '포장완료', isMaterialInput: false, isCompleted: false },
],
},
];
// 사이드바 작업지시 목업 데이터
interface SidebarOrder {
id: string;
siteName: string;
date: string;
quantity: number;
shutterCount: number;
priority: 'urgent' | 'priority' | 'normal';
}
const MOCK_SIDEBAR_ORDERS: SidebarOrder[] = [
{ id: 'order-1', siteName: '현장명', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'urgent' },
{ id: 'order-2', siteName: '현장명', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'priority' },
{ id: 'order-3', siteName: '현장명', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'normal' },
{ id: 'order-4', siteName: '현장명', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'normal' },
];
const PRIORITY_GROUPS = [
{ key: 'urgent' as const, label: '긴급', color: 'text-red-600' },
{ key: 'priority' as const, label: '우선', color: 'text-orange-600' },
{ key: 'normal' as const, label: '일반', color: 'text-gray-600' },
];
// 하드코딩된 공정별 단계 폴백
const PROCESS_STEPS: Record<string, { name: string; isMaterialInput: boolean }[]> = {
const PROCESS_STEPS: Record<string, { name: string; isMaterialInput: boolean; isInspection?: boolean }[]> = {
screen: [
{ name: '자재투입', isMaterialInput: true },
{ name: '절단', isMaterialInput: false },
{ name: '미싱', isMaterialInput: false },
{ name: '중간검사', isMaterialInput: false, isInspection: true },
{ name: '포장완료', isMaterialInput: false },
],
slat: [
{ name: '자재투입', isMaterialInput: true },
{ name: '포밍/절단', isMaterialInput: false },
{ name: '중간검사', isMaterialInput: false, isInspection: true },
{ name: '포장완료', isMaterialInput: false },
],
bending: [
{ name: '자재투입', isMaterialInput: true },
{ name: '절단', isMaterialInput: false },
{ name: '절곡', isMaterialInput: false },
{ name: '포장완료', isMaterialInput: false },
{ name: '중간검사', isMaterialInput: false, isInspection: true },
],
bending_wip: [
{ name: '자재투입', isMaterialInput: true },
{ name: '절단', isMaterialInput: false },
{ name: '중간검사', isMaterialInput: false, isInspection: true },
],
};
@@ -247,9 +285,14 @@ export default function WorkerScreen() {
const [slatSubMode, setSlatSubMode] = useState<'normal' | 'jointbar'>('normal');
// 작업 정보
const [departmentId, setDepartmentId] = useState('');
const [productionManagerId, setProductionManagerId] = useState('');
const [productionDate, setProductionDate] = useState('');
// 좌측 사이드바
const [selectedSidebarOrderId, setSelectedSidebarOrderId] = useState<string>('order-1');
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
// 공정별 step 완료 상태: { [itemId-stepName]: boolean }
const [stepCompletionMap, setStepCompletionMap] = useState<Record<string, boolean>>({});
@@ -276,6 +319,17 @@ export default function WorkerScreen() {
loadData();
}, [loadData]);
// PC에서 사이드바 sticky 동작을 위해 main의 overflow 임시 해제
useEffect(() => {
const mainEl = document.querySelector('main');
if (!mainEl) return;
const original = mainEl.style.overflow;
mainEl.style.overflow = 'visible';
return () => {
mainEl.style.overflow = original;
};
}, []);
// 모달/다이얼로그 상태
const [selectedOrder, setSelectedOrder] = useState<WorkOrder | null>(null);
const [isCompletionDialogOpen, setIsCompletionDialogOpen] = useState(false);
@@ -388,13 +442,15 @@ export default function WorkerScreen() {
// ===== WorkOrder → WorkItemData 변환 + 목업 =====
const workItems: WorkItemData[] = useMemo(() => {
const apiItems: WorkItemData[] = filteredWorkOrders.map((order, index) => {
const stepsTemplate = PROCESS_STEPS[activeTab];
const stepsKey = (activeTab === 'bending' && bendingSubMode === 'wip') ? 'bending_wip' : activeTab;
const stepsTemplate = PROCESS_STEPS[stepsKey];
const steps: WorkStepData[] = stepsTemplate.map((st, si) => {
const stepKey = `${order.id}-${st.name}`;
return {
id: `${order.id}-step-${si}`,
name: st.name,
isMaterialInput: st.isMaterialInput,
isInspection: st.isInspection,
isCompleted: stepCompletionMap[stepKey] || false,
};
});
@@ -708,19 +764,17 @@ export default function WorkerScreen() {
return (
<PageLayout>
<div className="space-y-6 pb-20">
<div className="pb-20">
{/* 완료 토스트 */}
{toastInfo && <CompletionToast info={toastInfo} />}
{/* 헤더 */}
<div className="flex items-center gap-3">
<div className="flex items-center gap-3 mb-6">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
<ClipboardList className="h-5 w-5 text-primary" />
</div>
<div>
<h1 className="text-2xl font-bold">
{hasJointBarItems ? '슬랫 조인트바 공정' : hasWipItems ? '절곡 재공품 공정' : '작업자 화면'}
</h1>
<h1 className="text-2xl font-bold">작업자 화면</h1>
<p className="text-sm text-muted-foreground">작업을 관리합니다</p>
</div>
</div>
@@ -738,183 +792,183 @@ export default function WorkerScreen() {
))}
</TabsList>
{/* 탭 내용은 공통 (탭별 필터링만 다름) */}
{(['screen', 'slat', 'bending'] as ProcessTab[]).map((tab) => (
<TabsContent key={tab} value={tab}>
<div className="space-y-6 mt-4">
{/* 상태 카드 */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<StatCard
title="할일"
value={stats.assigned}
icon={<ClipboardList className="h-4 w-4" />}
variant="default"
/>
<StatCard
title="작업중"
value={stats.inProgress}
icon={<PlayCircle className="h-4 w-4" />}
variant="blue"
/>
<StatCard
title="완료"
value={stats.completed}
icon={<CheckCircle2 className="h-4 w-4" />}
variant="green"
/>
<StatCard
title="긴급"
value={stats.urgent}
icon={<AlertTriangle className="h-4 w-4" />}
variant="red"
/>
</div>
{/* 슬랫 탭: 슬랫/조인트바 전환 토글 */}
{tab === 'slat' && (
<TabsContent key={tab} value={tab} className="mt-4">
{/* 모바일: 사이드바 토글 */}
<div className="md:hidden mb-4">
<button
type="button"
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
className="w-full flex items-center justify-between px-4 py-3 bg-gray-50 rounded-lg border"
>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1 p-1 bg-gray-100 rounded-lg w-fit">
<button
type="button"
onClick={() => setSlatSubMode('normal')}
className={`px-4 py-1.5 text-sm font-medium rounded-md transition-colors ${
slatSubMode === 'normal'
? 'bg-white text-gray-900 shadow-sm'
: 'text-gray-500 hover:text-gray-700'
}`}
>
슬랫
</button>
<button
type="button"
onClick={() => setSlatSubMode('jointbar')}
className={`px-4 py-1.5 text-sm font-medium rounded-md transition-colors ${
slatSubMode === 'jointbar'
? 'bg-blue-500 text-white shadow-sm'
: 'text-gray-500 hover:text-gray-700'
}`}
>
조인트바
</button>
</div>
<span className="text-xs text-gray-400">* 샘플 데이터 전환용</span>
<List className="h-4 w-4" />
<span className="text-sm font-medium">작업 목록</span>
</div>
{isSidebarOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
</button>
{isSidebarOpen && (
<div className="mt-2 p-3 border rounded-lg bg-white max-h-[300px] overflow-y-auto">
<SidebarContent
tab={tab}
slatSubMode={slatSubMode}
setSlatSubMode={setSlatSubMode}
bendingSubMode={bendingSubMode}
setBendingSubMode={setBendingSubMode}
selectedOrderId={selectedSidebarOrderId}
onSelectOrder={(id) => {
setSelectedSidebarOrderId(id);
setIsSidebarOpen(false);
}}
/>
</div>
)}
</div>
{/* 절곡 탭: 절곡/재공품 전환 토글 */}
{tab === 'bending' && (
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="flex items-center gap-1 p-1 bg-gray-100 rounded-lg w-fit">
<button
type="button"
onClick={() => setBendingSubMode('normal')}
className={`px-4 py-1.5 text-sm font-medium rounded-md transition-colors ${
bendingSubMode === 'normal'
? 'bg-white text-gray-900 shadow-sm'
: 'text-gray-500 hover:text-gray-700'
}`}
>
절곡
</button>
<button
type="button"
onClick={() => setBendingSubMode('wip')}
className={`px-4 py-1.5 text-sm font-medium rounded-md transition-colors ${
bendingSubMode === 'wip'
? 'bg-orange-500 text-white shadow-sm'
: 'text-gray-500 hover:text-gray-700'
}`}
>
재공품
</button>
</div>
<span className="text-xs text-gray-400">* 샘플 데이터 전환용</span>
</div>
{/* 2-패널 레이아웃 */}
<div className="flex gap-6">
{/* 좌측 사이드바 - 데스크탑만 (스크롤 따라다님) */}
<aside className="hidden md:block w-[250px] shrink-0 self-start sticky top-[6.5rem]">
<Card className="max-h-[calc(100vh-7.5rem)] overflow-y-auto">
<CardContent className="p-4">
<SidebarContent
tab={tab}
slatSubMode={slatSubMode}
setSlatSubMode={setSlatSubMode}
bendingSubMode={bendingSubMode}
setBendingSubMode={setBendingSubMode}
selectedOrderId={selectedSidebarOrderId}
onSelectOrder={setSelectedSidebarOrderId}
/>
</CardContent>
</Card>
</aside>
{/* 우측 메인 패널 */}
<div className="flex-1 min-w-0 space-y-6">
{/* 상태 카드 */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
<StatCard
title="할일"
value={stats.assigned}
icon={<ClipboardList className="h-4 w-4" />}
variant="default"
/>
<StatCard
title="작업중"
value={stats.inProgress}
icon={<PlayCircle className="h-4 w-4" />}
variant="blue"
/>
<StatCard
title="완료"
value={stats.completed}
icon={<CheckCircle2 className="h-4 w-4" />}
variant="green"
/>
<StatCard
title="긴급"
value={stats.urgent}
icon={<AlertTriangle className="h-4 w-4" />}
variant="red"
/>
</div>
)}
{/* 수주 정보 섹션 */}
<Card>
<CardContent className="p-4">
<h3 className="text-sm font-semibold text-gray-900 mb-3">수주 정보</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3">
<InfoField label="수주일" value={orderInfo?.orderDate} />
<InfoField label="로트번호" value={orderInfo?.lotNo} />
<InfoField label="현장명" value={orderInfo?.siteName} />
<InfoField label="수주처" value={orderInfo?.client} />
<InfoField label="수주 담당자" value={orderInfo?.salesManager} />
<InfoField label="담당자 연락처" value={orderInfo?.managerPhone} />
<InfoField label="출고예정일" value={orderInfo?.shippingDate} />
</div>
</CardContent>
</Card>
{/* 작업 정보 섹션 */}
<Card>
<CardContent className="p-4">
<h3 className="text-sm font-semibold text-gray-900 mb-3">작업 정보</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-1.5">
<Label className="text-sm text-gray-600">생산 담당자</Label>
<Select
value={productionManagerId}
onValueChange={setProductionManagerId}
>
<SelectTrigger>
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{/* 담당자 목록 - 현재 작업 담당자들 */}
{Array.from(
new Set(
filteredWorkOrders.flatMap((o) => o.assignees || []).filter(Boolean)
)
).map((name) => (
<SelectItem key={name} value={name}>
{name}
</SelectItem>
))}
</SelectContent>
</Select>
{/* 수주 정보 */}
<Card>
<CardContent className="p-4">
<h3 className="text-sm font-semibold text-gray-900 mb-3">수주 정보</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3">
<InfoField label="수주일" value={orderInfo?.orderDate} />
<InfoField label="로트번호" value={orderInfo?.lotNo} />
<InfoField label="현장명" value={orderInfo?.siteName} />
<InfoField label="수주처" value={orderInfo?.client} />
<InfoField label="수주 담당자" value={orderInfo?.salesManager} />
<InfoField label="담당자 연락처" value={orderInfo?.managerPhone} />
<InfoField label="출고예정일" value={orderInfo?.shippingDate} />
</div>
<div className="space-y-1.5">
<Label className="text-sm text-gray-600">생산일자</Label>
<Input
type="date"
value={productionDate}
onChange={(e) => setProductionDate(e.target.value)}
/>
</div>
</div>
</CardContent>
</Card>
</CardContent>
</Card>
{/* 작업 목록 */}
<div>
<h3 className="text-sm font-semibold text-gray-900 mb-3">작업 목록</h3>
{isLoading ? (
<ContentSkeleton type="cards" rows={4} />
) : workItems.length === 0 ? (
<Card>
<CardContent className="py-12 text-center text-muted-foreground">
해당 공정에 배정된 작업이 없습니다.
</CardContent>
</Card>
) : (
<div className="space-y-4">
{workItems.map((item) => (
<WorkItemCard
key={item.id}
item={item}
onStepClick={handleStepClick}
onEditMaterial={handleEditMaterial}
onDeleteMaterial={handleDeleteMaterial}
onInspectionClick={handleInspectionClick}
/>
))}
</div>
)}
{/* 작업 정보 - 부서 필드 추가 */}
<Card>
<CardContent className="p-4">
<h3 className="text-sm font-semibold text-gray-900 mb-3">작업 정보</h3>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div className="space-y-1.5">
<Label className="text-sm text-gray-600">부서</Label>
<Select
value={departmentId}
onValueChange={setDepartmentId}
>
<SelectTrigger>
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="production">생산부서</SelectItem>
<SelectItem value="quality">품질관리부</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-1.5">
<Label className="text-sm text-gray-600">생산 담당자</Label>
<Select
value={productionManagerId}
onValueChange={setProductionManagerId}
>
<SelectTrigger>
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{Array.from(
new Set(
filteredWorkOrders.flatMap((o) => o.assignees || []).filter(Boolean)
)
).map((name) => (
<SelectItem key={name} value={name}>
{name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-1.5">
<Label className="text-sm text-gray-600">생산일자</Label>
<DatePicker
value={productionDate}
onChange={(date) => setProductionDate(date)}
/>
</div>
</div>
</CardContent>
</Card>
{/* 작업 목록 */}
<div>
<h3 className="text-sm font-semibold text-gray-900 mb-3">작업 목록</h3>
{isLoading ? (
<ContentSkeleton type="cards" rows={4} />
) : workItems.length === 0 ? (
<Card>
<CardContent className="py-12 text-center text-muted-foreground">
해당 공정에 배정된 작업이 없습니다.
</CardContent>
</Card>
) : (
<div className="space-y-4">
{workItems.map((item) => (
<WorkItemCard
key={item.id}
item={item}
onStepClick={handleStepClick}
onEditMaterial={handleEditMaterial}
onDeleteMaterial={handleDeleteMaterial}
onInspectionClick={handleInspectionClick}
/>
))}
</div>
)}
</div>
</div>
</div>
</TabsContent>
@@ -922,11 +976,10 @@ export default function WorkerScreen() {
</Tabs>
</div>
{/* 하단 고정 버튼 - DetailActions 패턴 적용 */}
{/* 하단 고정 버튼 */}
<div className={`fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[48px] ${sidebarCollapsed ? 'md:left-[156px]' : 'md:left-[316px]'}`}>
<div className="flex gap-3">
{hasWipItems ? (
// 재공품: 버튼 1개
<Button
onClick={handleInspection}
className="flex-1 py-6 text-base font-medium bg-gray-900 hover:bg-gray-800"
@@ -934,7 +987,6 @@ export default function WorkerScreen() {
작업일지 및 검사성적서 보기
</Button>
) : (
// 일반/조인트바: 버튼 2개
<>
<Button
variant="outline"
@@ -1017,6 +1069,121 @@ export default function WorkerScreen() {
);
}
// ===== 사이드바 컨텐츠 =====
interface SidebarContentProps {
tab: ProcessTab;
slatSubMode: 'normal' | 'jointbar';
setSlatSubMode: (mode: 'normal' | 'jointbar') => void;
bendingSubMode: 'normal' | 'wip';
setBendingSubMode: (mode: 'normal' | 'wip') => void;
selectedOrderId: string;
onSelectOrder: (id: string) => void;
}
function SidebarContent({
tab,
slatSubMode,
setSlatSubMode,
bendingSubMode,
setBendingSubMode,
selectedOrderId,
onSelectOrder,
}: SidebarContentProps) {
return (
<div className="space-y-3">
<h3 className="text-sm font-semibold text-gray-900">작업 목록</h3>
{/* 서브 탭: 슬랫 */}
{tab === 'slat' && (
<div className="flex items-center gap-1 p-1 bg-gray-100 rounded-lg">
<button
type="button"
onClick={() => setSlatSubMode('normal')}
className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
slatSubMode === 'normal'
? 'bg-white text-gray-900 shadow-sm'
: 'text-gray-500 hover:text-gray-700'
}`}
>
슬랫
</button>
<button
type="button"
onClick={() => setSlatSubMode('jointbar')}
className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
slatSubMode === 'jointbar'
? 'bg-blue-500 text-white shadow-sm'
: 'text-gray-500 hover:text-gray-700'
}`}
>
조인트바
</button>
</div>
)}
{/* 서브 탭: 절곡 */}
{tab === 'bending' && (
<div className="flex items-center gap-1 p-1 bg-gray-100 rounded-lg">
<button
type="button"
onClick={() => setBendingSubMode('normal')}
className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
bendingSubMode === 'normal'
? 'bg-white text-gray-900 shadow-sm'
: 'text-gray-500 hover:text-gray-700'
}`}
>
절곡
</button>
<button
type="button"
onClick={() => setBendingSubMode('wip')}
className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
bendingSubMode === 'wip'
? 'bg-orange-500 text-white shadow-sm'
: 'text-gray-500 hover:text-gray-700'
}`}
>
재공품
</button>
</div>
)}
{/* 우선순위별 작업지시 카드 */}
{PRIORITY_GROUPS.map((group) => {
const orders = MOCK_SIDEBAR_ORDERS.filter((o) => o.priority === group.key);
if (orders.length === 0) return null;
return (
<div key={group.key}>
<p className={`text-xs font-semibold mb-1.5 ${group.color}`}>{group.label}</p>
<div className="space-y-1.5">
{orders.map((order) => (
<button
key={order.id}
type="button"
onClick={() => onSelectOrder(order.id)}
className={cn(
'w-full text-left p-2.5 rounded-lg border transition-colors text-xs',
selectedOrderId === order.id
? 'border-primary bg-primary/5 ring-1 ring-primary/20'
: 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
)}
>
<p className="font-medium text-gray-900">{order.siteName}</p>
<div className="flex items-center justify-between mt-1 text-gray-500">
<span>{order.date}</span>
<span>{order.quantity}/{order.shutterCount}소</span>
</div>
</button>
))}
</div>
</div>
);
})}
</div>
);
}
// ===== 하위 컴포넌트 =====
interface StatCardProps {

3
src/components/production/WorkerScreen/types.ts
View File

@@ -106,8 +106,9 @@ export interface BendingDetailPart {
// ===== 공정 단계 (pill) =====
export interface WorkStepData {
id: string;
name: string; // 단계명 (자재투입, 절단, 미싱, 포장완료)
name: string; // 단계명 (자재투입, 절단, 미싱, 중간검사, 포장완료)
isMaterialInput: boolean; // 자재투입 단계 여부
isInspection?: boolean; // 중간검사 단계 여부
isCompleted: boolean; // 완료 여부
}