feat: 순서변경 ▲/▼ 버튼 추가 (터치 지원) + 단가표 테이블 스크롤 수정
- ReorderButtons 공통 컴포넌트 신규 생성 (molecules) - 패턴B(리스트): RankManagement, TitleManagement, CategoryManagement - 패턴A(테이블): ProcessDetail, ProcessForm, ChecklistDetail - 패턴C(컴포넌트): DraggableSection, DraggableField, HierarchyTab - 모바일: GripVertical 숨김, ▲/▼ 버튼만 표시 - 데스크톱: GripVertical + ▲/▼ 버튼 모두 표시 - 단가표 단가정보 테이블 overflow-hidden → overflow-x-auto + min-w 적용
This commit is contained in:
유병철
@@ -11,7 +11,8 @@
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ArrowLeft, Edit, GripVertical, Plus, Package, Trash2 } from 'lucide-react';
|
||||
import { ArrowLeft, Edit, GripVertical, Plus, Trash2 } from 'lucide-react';
|
||||
import { ReorderButtons } from '@/components/molecules';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@@ -49,7 +50,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
|
||||
// 드래그 상태
|
||||
const [dragIndex, setDragIndex] = useState<number | null>(null);
|
||||
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
|
||||
const dragNodeRef = useRef<HTMLTableRowElement | null>(null);
|
||||
const dragNodeRef = useRef<HTMLElement | null>(null);
|
||||
|
||||
// 개별 품목 목록 추출
|
||||
const individualItems = process.classificationRules
|
||||
@@ -103,7 +104,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
|
||||
};
|
||||
|
||||
// ===== 드래그&드롭 (HTML5 네이티브) =====
|
||||
const handleDragStart = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
|
||||
const handleDragStart = useCallback((e: React.DragEvent<HTMLElement>, index: number) => {
|
||||
setDragIndex(index);
|
||||
dragNodeRef.current = e.currentTarget;
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
@@ -115,7 +116,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
|
||||
const handleDragOver = useCallback((e: React.DragEvent<HTMLElement>, index: number) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
setDragOverIndex(index);
|
||||
@@ -130,7 +131,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
|
||||
dragNodeRef.current = null;
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent<HTMLTableRowElement>, dropIndex: number) => {
|
||||
const handleDrop = useCallback((e: React.DragEvent<HTMLElement>, dropIndex: number) => {
|
||||
e.preventDefault();
|
||||
if (dragIndex === null || dragIndex === dropIndex) return;
|
||||
|
||||
@@ -152,6 +153,23 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
|
||||
handleDragEnd();
|
||||
}, [dragIndex, handleDragEnd, process.id]);
|
||||
|
||||
// 화살표 버튼으로 순서 변경
|
||||
const handleMoveStep = useCallback((fromIndex: number, toIndex: number) => {
|
||||
setSteps((prev) => {
|
||||
const updated = [...prev];
|
||||
const [moved] = updated.splice(fromIndex, 1);
|
||||
updated.splice(toIndex, 0, moved);
|
||||
const reordered = updated.map((step, i) => ({ ...step, order: i + 1 }));
|
||||
|
||||
reorderProcessSteps(
|
||||
process.id,
|
||||
reordered.map((s) => ({ id: s.id, order: s.order }))
|
||||
);
|
||||
|
||||
return reordered;
|
||||
});
|
||||
}, [process.id]);
|
||||
|
||||
return (
|
||||
<PageLayout>
|
||||
{/* 헤더 */}
|
||||
@@ -165,7 +183,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
{/* Row 1: 공정번호 | 공정명 | 담당부서 | 담당자 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">공정번호</div>
|
||||
<div className="font-medium">{process.processCode}</div>
|
||||
@@ -184,7 +202,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
|
||||
</div>
|
||||
</div>
|
||||
{/* Row 2: 구분 | 생산일자 | 상태 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mt-4 md:mt-6">
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">구분</div>
|
||||
<div className="font-medium">{process.processCategory || '없음'}</div>
|
||||
@@ -203,7 +221,7 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
|
||||
</div>
|
||||
</div>
|
||||
{/* Row 3: 중간검사여부 | 중간검사양식 | 작업일지여부 | 작업일지양식 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mt-4 md:mt-6">
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">중간검사 여부</div>
|
||||
<Badge variant={process.needsInspection ? 'default' : 'secondary'}>
|
||||
@@ -234,43 +252,37 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
|
||||
|
||||
{/* 품목 설정 정보 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Package className="h-4 w-4" />
|
||||
품목 설정 정보
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
품목을 선택하면 이 공정으로 분류됩니다
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="outline" className="text-sm">
|
||||
{itemCount}개
|
||||
</Badge>
|
||||
<Button variant="outline" size="sm" onClick={handleEdit}>
|
||||
공정 품목 선택
|
||||
</Button>
|
||||
</div>
|
||||
<CardHeader className="bg-muted/50 py-3">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<CardTitle className="text-base shrink-0">
|
||||
품목 설정 정보
|
||||
</CardTitle>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{itemCount}개
|
||||
</Badge>
|
||||
<Button variant="outline" size="sm" onClick={handleEdit} className="shrink-0">
|
||||
공정 품목 선택
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
품목을 선택하면 이 공정으로 분류됩니다
|
||||
</p>
|
||||
</CardHeader>
|
||||
{individualItems.length > 0 && (
|
||||
<CardContent className="pt-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
|
||||
<CardContent className="pt-4 max-h-[240px] md:max-h-none overflow-y-auto">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{individualItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center gap-2 rounded-md border bg-muted/30 px-3 py-1.5 text-sm"
|
||||
className="inline-flex items-center gap-1.5 rounded-full border bg-muted/30 pl-3 pr-1.5 py-1 text-xs"
|
||||
>
|
||||
<span className="font-mono text-muted-foreground shrink-0">{item.code}</span>
|
||||
<span className="truncate flex-1">{item.name}</span>
|
||||
<span className="font-mono">{item.code}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveItem(item.id)}
|
||||
className="shrink-0 ml-auto rounded-sm text-muted-foreground/50 hover:text-destructive transition-colors"
|
||||
className="shrink-0 rounded-full p-0.5 text-muted-foreground/50 hover:text-destructive transition-colors"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
@@ -307,34 +319,59 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
|
||||
등록된 단계가 없습니다. [단계 등록] 버튼으로 추가해주세요.
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<>
|
||||
{/* 모바일: 카드 리스트 */}
|
||||
<div className="md:hidden divide-y">
|
||||
{steps.map((step, index) => (
|
||||
<div
|
||||
key={step.id}
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(e, index)}
|
||||
onDragOver={(e) => handleDragOver(e, index)}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDrop={(e) => handleDrop(e, index)}
|
||||
onClick={() => handleStepClick(step.id)}
|
||||
className={`flex items-center gap-2 px-3 py-2.5 cursor-pointer hover:bg-muted/50 ${
|
||||
dragOverIndex === index && dragIndex !== index
|
||||
? 'border-t-2 border-t-primary'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<ReorderButtons
|
||||
onMoveUp={() => handleMoveStep(index, index - 1)}
|
||||
onMoveDown={() => handleMoveStep(index, index + 1)}
|
||||
isFirst={index === 0}
|
||||
isLast={index === steps.length - 1}
|
||||
size="xs"
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground w-5 shrink-0">{index + 1}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs font-mono text-muted-foreground">{step.stepCode}</span>
|
||||
<span className="text-sm font-medium truncate">{step.stepName}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<Badge variant={step.isRequired ? 'default' : 'outline'} className="text-[10px] px-1.5 py-0">필수</Badge>
|
||||
<Badge variant={step.needsApproval ? 'default' : 'outline'} className="text-[10px] px-1.5 py-0">승인</Badge>
|
||||
<Badge variant={step.needsInspection ? 'default' : 'outline'} className="text-[10px] px-1.5 py-0">검사</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* 데스크탑: 테이블 */}
|
||||
<div className="hidden md:block overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b bg-muted/30">
|
||||
<th className="w-10 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
{/* 드래그 핸들 헤더 */}
|
||||
</th>
|
||||
<th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
No.
|
||||
</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
|
||||
단계코드
|
||||
</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
|
||||
단계명
|
||||
</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
필수여부
|
||||
</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
승인여부
|
||||
</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
검사여부
|
||||
</th>
|
||||
<th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
사용
|
||||
</th>
|
||||
<th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground" />
|
||||
<th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">No.</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">단계코드</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">단계명</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">필수여부</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">승인여부</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">검사여부</th>
|
||||
<th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">사용</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -353,58 +390,39 @@ export function ProcessDetail({ process, onProcessUpdate }: ProcessDetailProps)
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<td
|
||||
className="w-10 px-3 py-3 text-center cursor-grab active:cursor-grabbing"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
|
||||
<td className="w-16 px-3 py-3 text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-center gap-0.5">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground cursor-grab active:cursor-grabbing" />
|
||||
<ReorderButtons
|
||||
onMoveUp={() => handleMoveStep(index, index - 1)}
|
||||
onMoveDown={() => handleMoveStep(index, index + 1)}
|
||||
isFirst={index === 0}
|
||||
isLast={index === steps.length - 1}
|
||||
size="xs"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">
|
||||
{index + 1}
|
||||
</td>
|
||||
<td className="px-3 py-3 text-sm font-mono">
|
||||
{step.stepCode}
|
||||
</td>
|
||||
<td className="px-3 py-3 text-sm font-medium">
|
||||
{step.stepName}
|
||||
<td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">{index + 1}</td>
|
||||
<td className="px-3 py-3 text-sm font-mono">{step.stepCode}</td>
|
||||
<td className="px-3 py-3 text-sm font-medium">{step.stepName}</td>
|
||||
<td className="w-20 px-3 py-3 text-center">
|
||||
<Badge variant={step.isRequired ? 'default' : 'outline'} className="text-xs">{step.isRequired ? 'Y' : 'N'}</Badge>
|
||||
</td>
|
||||
<td className="w-20 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.isRequired ? 'default' : 'outline'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.isRequired ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
<Badge variant={step.needsApproval ? 'default' : 'outline'} className="text-xs">{step.needsApproval ? 'Y' : 'N'}</Badge>
|
||||
</td>
|
||||
<td className="w-20 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.needsApproval ? 'default' : 'outline'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.needsApproval ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="w-20 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.needsInspection ? 'default' : 'outline'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.needsInspection ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
<Badge variant={step.needsInspection ? 'default' : 'outline'} className="text-xs">{step.needsInspection ? 'Y' : 'N'}</Badge>
|
||||
</td>
|
||||
<td className="w-16 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.isActive ? 'default' : 'secondary'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.isActive ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
<Badge variant={step.isActive ? 'default' : 'secondary'} className="text-xs">{step.isActive ? 'Y' : 'N'}</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -13,7 +13,8 @@
|
||||
|
||||
import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Plus, GripVertical, Trash2, Package } from 'lucide-react';
|
||||
import { Plus, GripVertical, Trash2 } from 'lucide-react';
|
||||
import { ReorderButtons } from '@/components/molecules';
|
||||
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
|
||||
import { processCreateConfig, processEditConfig } from './processConfig';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -261,7 +262,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
// 드래그&드롭
|
||||
const dragNodeRef = useRef<HTMLElement | null>(null);
|
||||
|
||||
const handleDragStart = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
|
||||
const handleDragStart = useCallback((e: React.DragEvent<HTMLElement>, index: number) => {
|
||||
setDragIndex(index);
|
||||
dragNodeRef.current = e.currentTarget;
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
@@ -272,7 +273,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
|
||||
const handleDragOver = useCallback((e: React.DragEvent<HTMLElement>, index: number) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
setDragOverIndex(index);
|
||||
@@ -287,8 +288,18 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
setDragOverIndex(null);
|
||||
}, []);
|
||||
|
||||
// 화살표 버튼으로 순서 변경 (로컬 state만 업데이트)
|
||||
const handleMoveStep = useCallback((fromIndex: number, toIndex: number) => {
|
||||
setSteps((prev) => {
|
||||
const updated = [...prev];
|
||||
const [moved] = updated.splice(fromIndex, 1);
|
||||
updated.splice(toIndex, 0, moved);
|
||||
return updated.map((step, i) => ({ ...step, order: i + 1 }));
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(e: React.DragEvent<HTMLTableRowElement>, dropIndex: number) => {
|
||||
(e: React.DragEvent<HTMLElement>, dropIndex: number) => {
|
||||
e.preventDefault();
|
||||
if (dragIndex === null || dragIndex === dropIndex) {
|
||||
handleDragEnd();
|
||||
@@ -388,7 +399,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
{/* Row 1: 공정번호(수정시) | 공정명 | 담당부서 | 담당자 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
||||
{isEdit && initialData?.processCode && (
|
||||
<div className="space-y-2">
|
||||
<Label>공정번호</Label>
|
||||
@@ -439,7 +450,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
</div>
|
||||
</div>
|
||||
{/* Row 2: 구분 | 생산일자 | 상태 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mt-4 md:mt-6">
|
||||
<div className="space-y-2">
|
||||
<Label>구분</Label>
|
||||
<Select
|
||||
@@ -491,7 +502,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
</div>
|
||||
</div>
|
||||
{/* Row 3: 중간검사여부 | 중간검사양식 | 작업일지여부 | 작업일지양식 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mt-4 md:mt-6">
|
||||
<div className="space-y-2">
|
||||
<Label>중간검사 여부</Label>
|
||||
<Select
|
||||
@@ -570,48 +581,43 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
|
||||
{/* 품목 설정 정보 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Package className="h-4 w-4" />
|
||||
품목 설정 정보
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
품목을 선택하면 이 공정으로 분류됩니다
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="outline" className="text-sm">
|
||||
{itemCount}개
|
||||
</Badge>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setRuleModalOpen(true)}
|
||||
>
|
||||
공정 품목 선택
|
||||
</Button>
|
||||
</div>
|
||||
<CardHeader className="bg-muted/50 py-3">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<CardTitle className="text-base shrink-0">
|
||||
품목 설정 정보
|
||||
</CardTitle>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{itemCount}개
|
||||
</Badge>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setRuleModalOpen(true)}
|
||||
className="shrink-0"
|
||||
>
|
||||
공정 품목 선택
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
품목을 선택하면 이 공정으로 분류됩니다
|
||||
</p>
|
||||
</CardHeader>
|
||||
{individualItems.length > 0 && (
|
||||
<CardContent className="pt-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
|
||||
<CardContent className="pt-4 max-h-[240px] md:max-h-none overflow-y-auto">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{individualItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center gap-2 rounded-md border bg-muted/30 px-3 py-1.5 text-sm"
|
||||
className="inline-flex items-center gap-1.5 rounded-full border bg-muted/30 pl-3 pr-1.5 py-1 text-xs"
|
||||
>
|
||||
<span className="font-mono text-muted-foreground shrink-0">{item.code}</span>
|
||||
<span className="truncate flex-1">{item.name}</span>
|
||||
<span className="font-mono">{item.code}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveItem(item.id)}
|
||||
className="shrink-0 ml-auto rounded-sm text-muted-foreground/50 hover:text-destructive transition-colors"
|
||||
className="shrink-0 rounded-full p-0.5 text-muted-foreground/50 hover:text-destructive transition-colors"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
@@ -648,32 +654,71 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
: '공정을 먼저 등록한 후 단계를 추가할 수 있습니다.'}
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<>
|
||||
{/* 모바일: 카드 리스트 */}
|
||||
<div className="md:hidden divide-y">
|
||||
{steps.map((step, index) => (
|
||||
<div
|
||||
key={step.id}
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(e, index)}
|
||||
onDragOver={(e) => handleDragOver(e, index)}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDrop={(e) => handleDrop(e, index)}
|
||||
onClick={() => handleStepClick(step.id)}
|
||||
className={`flex items-center gap-2 px-3 py-2.5 cursor-pointer hover:bg-muted/50 ${
|
||||
dragOverIndex === index && dragIndex !== index
|
||||
? 'border-t-2 border-t-primary'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<ReorderButtons
|
||||
onMoveUp={() => handleMoveStep(index, index - 1)}
|
||||
onMoveDown={() => handleMoveStep(index, index + 1)}
|
||||
isFirst={index === 0}
|
||||
isLast={index === steps.length - 1}
|
||||
size="xs"
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground w-5 shrink-0">{index + 1}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs font-mono text-muted-foreground">{step.stepCode}</span>
|
||||
<span className="text-sm font-medium truncate">{step.stepName}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<Badge variant={step.isRequired ? 'default' : 'outline'} className="text-[10px] px-1.5 py-0">필수</Badge>
|
||||
<Badge variant={step.needsApproval ? 'default' : 'outline'} className="text-[10px] px-1.5 py-0">승인</Badge>
|
||||
<Badge variant={step.needsInspection ? 'default' : 'outline'} className="text-[10px] px-1.5 py-0">검사</Badge>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteStep(step.id);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* 데스크탑: 테이블 */}
|
||||
<div className="hidden md:block overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b bg-muted/30">
|
||||
<th className="w-10 px-3 py-3" />
|
||||
<th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
No.
|
||||
</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
|
||||
단계코드
|
||||
</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
|
||||
단계명
|
||||
</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
필수여부
|
||||
</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
승인여부
|
||||
</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
검사여부
|
||||
</th>
|
||||
<th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
사용
|
||||
</th>
|
||||
<th className="w-16 px-3 py-3" />
|
||||
<th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">No.</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">단계코드</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">단계명</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">필수여부</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">승인여부</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">검사여부</th>
|
||||
<th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">사용</th>
|
||||
<th className="w-12 px-3 py-3" />
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -693,48 +738,32 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<td
|
||||
className="w-10 px-3 py-3 text-center cursor-grab active:cursor-grabbing"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
|
||||
</td>
|
||||
<td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">
|
||||
{index + 1}
|
||||
<td className="w-16 px-3 py-3 text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-center gap-0.5">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground cursor-grab active:cursor-grabbing" />
|
||||
<ReorderButtons
|
||||
onMoveUp={() => handleMoveStep(index, index - 1)}
|
||||
onMoveDown={() => handleMoveStep(index, index + 1)}
|
||||
isFirst={index === 0}
|
||||
isLast={index === steps.length - 1}
|
||||
size="xs"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">{index + 1}</td>
|
||||
<td className="px-3 py-3 text-sm font-mono">{step.stepCode}</td>
|
||||
<td className="px-3 py-3 text-sm font-medium">{step.stepName}</td>
|
||||
<td className="w-20 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.isRequired ? 'default' : 'outline'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.isRequired ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
<Badge variant={step.isRequired ? 'default' : 'outline'} className="text-xs">{step.isRequired ? 'Y' : 'N'}</Badge>
|
||||
</td>
|
||||
<td className="w-20 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.needsApproval ? 'default' : 'outline'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.needsApproval ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
<Badge variant={step.needsApproval ? 'default' : 'outline'} className="text-xs">{step.needsApproval ? 'Y' : 'N'}</Badge>
|
||||
</td>
|
||||
<td className="w-20 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.needsInspection ? 'default' : 'outline'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.needsInspection ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
<Badge variant={step.needsInspection ? 'default' : 'outline'} className="text-xs">{step.needsInspection ? 'Y' : 'N'}</Badge>
|
||||
</td>
|
||||
<td className="w-16 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.isActive ? 'default' : 'secondary'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.isActive ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
<Badge variant={step.isActive ? 'default' : 'secondary'} className="text-xs">{step.isActive ? 'Y' : 'N'}</Badge>
|
||||
</td>
|
||||
<td className="w-12 px-3 py-3 text-center">
|
||||
<Button
|
||||
@@ -755,6 +784,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -808,6 +838,7 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
handleDragOver,
|
||||
handleDragEnd,
|
||||
handleDrop,
|
||||
handleMoveStep,
|
||||
isEdit,
|
||||
initialData?.id,
|
||||
]
|
||||
|
||||
@@ -254,6 +254,7 @@ export function RuleModal({ open, onOpenChange, onAdd, editRule, processId, proc
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{/* TODO: 백엔드 API에서 process_name, process_category 필터/응답 지원 후 구분 필터 활성화
|
||||
<Select
|
||||
key={`category-${processFilter}`}
|
||||
value={categoryFilter}
|
||||
@@ -271,6 +272,7 @@ export function RuleModal({ open, onOpenChange, onAdd, editRule, processId, proc
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
*/}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -283,21 +285,22 @@ export function RuleModal({ open, onOpenChange, onAdd, editRule, processId, proc
|
||||
<TableHead className="w-[80px]">품목유형</TableHead>
|
||||
<TableHead>품목코드</TableHead>
|
||||
<TableHead>품목명</TableHead>
|
||||
{/* TODO: API에서 process_name, process_category 필드 지원 후 실제 데이터 표시 */}
|
||||
{/* TODO: 백엔드 API에서 process_name, process_category 응답 지원 후 공정/구분 컬럼 활성화
|
||||
<TableHead className="w-[80px]">공정</TableHead>
|
||||
<TableHead className="w-[80px]">구분</TableHead>
|
||||
*/}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{isItemsLoading ? (
|
||||
<TableRow key="loading">
|
||||
<TableCell colSpan={6} className="text-center text-muted-foreground py-8">
|
||||
<TableCell colSpan={4} className="text-center text-muted-foreground py-8">
|
||||
품목 목록을 불러오는 중...
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : itemList.length === 0 ? (
|
||||
<TableRow key="empty">
|
||||
<TableCell colSpan={6} className="text-center text-muted-foreground py-8">
|
||||
<TableCell colSpan={4} className="text-center text-muted-foreground py-8">
|
||||
{searchKeyword.trim() === ''
|
||||
? '품목을 검색해주세요 (한글 1자 이상, 영문 2자 이상)'
|
||||
: '검색 결과가 없습니다'}
|
||||
@@ -320,9 +323,10 @@ export function RuleModal({ open, onOpenChange, onAdd, editRule, processId, proc
|
||||
<TableCell>{item.type}</TableCell>
|
||||
<TableCell className="font-medium">{item.code}</TableCell>
|
||||
<TableCell>{item.fullName}</TableCell>
|
||||
{/* TODO: API 지원 후 item.processName / item.processCategory 표시 */}
|
||||
<TableCell className="text-muted-foreground">-</TableCell>
|
||||
<TableCell className="text-muted-foreground">-</TableCell>
|
||||
{/* TODO: 백엔드 API 지원 후 item.processName / item.processCategory 표시
|
||||
<TableCell className="text-muted-foreground">{item.processName || '-'}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{item.processCategory || '-'}</TableCell>
|
||||
*/}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user