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>

src/components/process-management/ProcessForm.tsx

@@ -0,0 +1,359 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { X, Save, Plus, Wrench, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { RuleModal } from './RuleModal';
+import type { Process, ClassificationRule, ProcessType } from '@/types/process';
+import { PROCESS_TYPE_OPTIONS, MATCHING_TYPE_OPTIONS } from '@/types/process';
+
+// Mock 담당부서 옵션
+const DEPARTMENT_OPTIONS = [
+  { value: '스크린생산부서', label: '스크린생산부서' },
+  { value: '절곡생산부서', label: '절곡생산부서' },
+  { value: '슬랫생산부서', label: '슬랫생산부서' },
+  { value: '품질관리부서', label: '품질관리부서' },
+  { value: '포장/출하부서', label: '포장/출하부서' },
+];
+
+// Mock 작업일지 양식 옵션
+const WORK_LOG_OPTIONS = [
+  { value: '스크린 작업일지', label: '스크린 작업일지' },
+  { value: '절곡 작업일지', label: '절곡 작업일지' },
+  { value: '슬랫 작업일지', label: '슬랫 작업일지' },
+  { value: '재고생산 작업일지', label: '재고생산 작업일지' },
+  { value: '포장 작업일지', label: '포장 작업일지' },
+];
+
+interface ProcessFormProps {
+  mode: 'create' | 'edit';
+  initialData?: Process;
+}
+
+export function ProcessForm({ mode, initialData }: ProcessFormProps) {
+  const router = useRouter();
+  const isEdit = mode === 'edit';
+
+  // 폼 상태
+  const [processName, setProcessName] = useState(initialData?.processName || '');
+  const [processType, setProcessType] = useState<ProcessType>(
+    initialData?.processType || '생산'
+  );
+  const [department, setDepartment] = useState(initialData?.department || '');
+  const [workLogTemplate, setWorkLogTemplate] = useState(
+    initialData?.workLogTemplate || ''
+  );
+  const [classificationRules, setClassificationRules] = useState<ClassificationRule[]>(
+    initialData?.classificationRules || []
+  );
+  const [requiredWorkers, setRequiredWorkers] = useState(
+    initialData?.requiredWorkers || 1
+  );
+  const [equipmentInfo, setEquipmentInfo] = useState(initialData?.equipmentInfo || '');
+  const [workSteps, setWorkSteps] = useState(initialData?.workSteps?.join(', ') || '');
+  const [note, setNote] = useState(initialData?.note || '');
+  const [isActive, setIsActive] = useState(initialData?.status === '사용중' ?? true);
+
+  // 규칙 모달 상태
+  const [ruleModalOpen, setRuleModalOpen] = useState(false);
+
+  // 규칙 추가
+  const handleAddRule = useCallback(
+    (ruleData: Omit<ClassificationRule, 'id' | 'createdAt'>) => {
+      const newRule: ClassificationRule = {
+        ...ruleData,
+        id: `rule-${Date.now()}`,
+        createdAt: new Date().toISOString(),
+      };
+      setClassificationRules((prev) => [...prev, newRule]);
+    },
+    []
+  );
+
+  // 규칙 삭제
+  const handleDeleteRule = useCallback((ruleId: string) => {
+    setClassificationRules((prev) => prev.filter((r) => r.id !== ruleId));
+  }, []);
+
+  // 제출
+  const handleSubmit = () => {
+    if (!processName.trim()) {
+      alert('공정명을 입력해주세요.');
+      return;
+    }
+    if (!department) {
+      alert('담당부서를 선택해주세요.');
+      return;
+    }
+
+    const formData = {
+      processName: processName.trim(),
+      processType,
+      department,
+      workLogTemplate: workLogTemplate || undefined,
+      classificationRules,
+      requiredWorkers,
+      equipmentInfo: equipmentInfo.trim() || undefined,
+      workSteps: workSteps
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean),
+      note: note.trim() || undefined,
+      isActive,
+    };
+
+    console.log(isEdit ? '공정 수정 데이터:' : '공정 등록 데이터:', formData);
+    alert(`공정이 ${isEdit ? '수정' : '등록'}되었습니다.`);
+    router.push('/ko/master-data/process-management');
+  };
+
+  // 취소
+  const handleCancel = () => {
+    router.back();
+  };
+
+  return (
+    <PageLayout>
+      {/* 헤더 */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-xl font-semibold">공정 {isEdit ? '수정' : '등록'}</h1>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={handleCancel}>
+            <X className="h-4 w-4 mr-2" />
+            취소
+          </Button>
+          <Button onClick={handleSubmit}>
+            <Save className="h-4 w-4 mr-2" />
+            {isEdit ? '수정' : '등록'}
+          </Button>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        {/* 기본 정보 */}
+        <Card>
+          <CardHeader className="bg-muted/50">
+            <CardTitle className="text-base">기본 정보</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-2">
+                <Label htmlFor="processName">공정명 *</Label>
+                <Input
+                  id="processName"
+                  value={processName}
+                  onChange={(e) => setProcessName(e.target.value)}
+                  placeholder="예: 스크린"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>공정구분</Label>
+                <Select
+                  value={processType}
+                  onValueChange={(v) => setProcessType(v as ProcessType)}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {PROCESS_TYPE_OPTIONS.map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label>담당부서 *</Label>
+                <Select value={department} onValueChange={setDepartment}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="선택하세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {DEPARTMENT_OPTIONS.map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label>작업일지 양식</Label>
+                <Select value={workLogTemplate} onValueChange={setWorkLogTemplate}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="선택하세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {WORK_LOG_OPTIONS.map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 자동 분류 규칙 */}
+        <Card>
+          <CardHeader className="bg-muted/50">
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-base">자동 분류 규칙</CardTitle>
+                <p className="text-sm text-muted-foreground mt-1">
+                  품목이 이 공정에 이동으로 분류되는 규칙을 생성합니다.
+                </p>
+              </div>
+              <Button onClick={() => setRuleModalOpen(true)}>
+                <Plus className="h-4 w-4 mr-2" />
+                규칙 추가
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="pt-6">
+            {classificationRules.length === 0 ? (
+              <div className="text-center py-12 text-muted-foreground">
+                <Wrench className="h-12 w-12 mx-auto mb-4 opacity-30" />
+                <p className="font-medium">품목별 규칙이 없습니다</p>
+                <p className="text-sm mt-1">
+                  규칙을 추가하면 해당 패턴의 품목이 이 공정으로 분류됩니다
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {classificationRules.map((rule) => (
+                  <div
+                    key={rule.id}
+                    className="flex items-center justify-between p-4 border rounded-lg"
+                  >
+                    <div className="flex items-center gap-4">
+                      <Badge variant={rule.isActive ? 'default' : 'secondary'}>
+                        {rule.isActive ? '활성' : '비활성'}
+                      </Badge>
+                      <div>
+                        <div className="font-medium">
+                          {rule.ruleType}{' '}
+                          {
+                            MATCHING_TYPE_OPTIONS.find(
+                              (o) => o.value === rule.matchingType
+                            )?.label
+                          }{' '}
+                          "{rule.conditionValue}"
+                        </div>
+                        {rule.description && (
+                          <div className="text-sm text-muted-foreground">
+                            {rule.description}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Badge variant="outline">우선순위: {rule.priority}</Badge>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleDeleteRule(rule.id)}
+                        className="text-destructive hover:text-destructive"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* 작업 정보 */}
+        <Card>
+          <CardHeader className="bg-muted/50">
+            <CardTitle className="text-base">작업 정보</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6 space-y-6">
+            <div className="space-y-2">
+              <Label>필요인원</Label>
+              <Input
+                type="number"
+                value={requiredWorkers}
+                onChange={(e) => setRequiredWorkers(Number(e.target.value))}
+                min={1}
+                className="w-32"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>설비정보</Label>
+              <Input
+                value={equipmentInfo}
+                onChange={(e) => setEquipmentInfo(e.target.value)}
+                placeholder="예: 미싱기 3대, 절단기 1대"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>세부 작업단계 (쉼표로 구분)</Label>
+              <Input
+                value={workSteps}
+                onChange={(e) => setWorkSteps(e.target.value)}
+                placeholder="예: 원단절단, 미싱, 핸드작업, 중간검사, 포장"
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 설명 */}
+        <Card>
+          <CardHeader className="bg-muted/50">
+            <CardTitle className="text-base">설명</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6 space-y-6">
+            <div className="space-y-2">
+              <Label>설명</Label>
+              <Textarea
+                value={note}
+                onChange={(e) => setNote(e.target.value)}
+                placeholder="공정에 대한 설명"
+                rows={4}
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="isActive"
+                checked={isActive}
+                onCheckedChange={(checked) => setIsActive(checked as boolean)}
+              />
+              <Label htmlFor="isActive" className="font-normal">
+                사용함
+              </Label>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 규칙 추가 모달 */}
+      <RuleModal
+        open={ruleModalOpen}
+        onOpenChange={setRuleModalOpen}
+        onAdd={handleAddRule}
+      />
+    </PageLayout>
+  );
+}