feat(WEB): 공정 관리 UI 개선

- ProcessDetail: 공정 상세 정보 표시 개선
- ProcessForm: 공정 등록/수정 폼 유효성 검사 강화
- RuleModal: 공정 규칙 설정 모달 리팩토링

src/components/process-management/ProcessForm.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { X, Save, Plus, Wrench, Trash2, Loader2, Pencil } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -22,16 +22,7 @@ import { RuleModal } from './RuleModal';
 import { toast } from 'sonner';
 import type { Process, ClassificationRule, ProcessType } from '@/types/process';
 import { PROCESS_TYPE_OPTIONS, MATCHING_TYPE_OPTIONS } from '@/types/process';
-import { createProcess, updateProcess } from './actions';
-
-// 담당부서 옵션 (추후 API 연동 가능)
-const DEPARTMENT_OPTIONS = [
-  { value: '스크린생산부서', label: '스크린생산부서' },
-  { value: '절곡생산부서', label: '절곡생산부서' },
-  { value: '슬랫생산부서', label: '슬랫생산부서' },
-  { value: '품질관리부서', label: '품질관리부서' },
-  { value: '포장/출하부서', label: '포장/출하부서' },
-];
+import { createProcess, updateProcess, getDepartmentOptions, type DepartmentOption } from './actions';
 
 // 작업일지 양식 옵션 (추후 API 연동 가능)
 const WORK_LOG_OPTIONS = [
@@ -72,10 +63,27 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
   const [isActive, setIsActive] = useState(initialData ? initialData.status === '사용중' : true);
   const [isLoading, setIsLoading] = useState(false);
 
+  // 부서 목록 상태
+  const [departmentOptions, setDepartmentOptions] = useState<DepartmentOption[]>([]);
+  const [isDepartmentsLoading, setIsDepartmentsLoading] = useState(true);
+
   // 규칙 모달 상태
   const [ruleModalOpen, setRuleModalOpen] = useState(false);
   const [editingRule, setEditingRule] = useState<ClassificationRule | undefined>(undefined);
 
+  // 부서 목록 로드
+  useEffect(() => {
+    const loadDepartments = async () => {
+      setIsDepartmentsLoading(true);
+      const result = await getDepartmentOptions();
+      if (result.success && result.data) {
+        setDepartmentOptions(result.data);
+      }
+      setIsDepartmentsLoading(false);
+    };
+    loadDepartments();
+  }, []);
+
   // 규칙 추가/수정
   const handleSaveRule = useCallback(
     (ruleData: Omit<ClassificationRule, 'id' | 'createdAt'>) => {
@@ -242,14 +250,14 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
               </div>
               <div className="space-y-2">
                 <Label>담당부서 *</Label>
-                <Select value={department} onValueChange={setDepartment}>
+                <Select value={department} onValueChange={setDepartment} disabled={isDepartmentsLoading}>
                   <SelectTrigger>
-                    <SelectValue placeholder="선택하세요" />
+                    <SelectValue placeholder={isDepartmentsLoading ? "로딩 중..." : "선택하세요"} />
                   </SelectTrigger>
                   <SelectContent>
-                    {DEPARTMENT_OPTIONS.map((opt) => (
-                      <SelectItem key={opt.value} value={opt.value}>
-                        {opt.label}
+                    {departmentOptions.map((opt) => (
+                      <SelectItem key={opt.id} value={opt.name}>
+                        {opt.name}
                       </SelectItem>
                     ))}
                   </SelectContent>