feat(WEB): 공정 단계 API 연동 - mock 데이터 제거

- actions.ts: 목데이터/스텁 함수를 실제 API 호출로 교체 (CRUD + reorder)
- actions.ts: ApiProcessStep 타입 + transformStepApiToFrontend 변환 추가
- actions.ts: ApiProcess에 steps 관계 매핑 추가
- ProcessListClient: 단계 수 workSteps → steps 기반으로 변경
- ProcessDetail: 드래그&드롭 후 reorder API 호출 추가

src/components/process-management/ProcessDetail.tsx

@@ -19,7 +19,7 @@ import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import { useMenuStore } from '@/store/menuStore';
 import { usePermission } from '@/hooks/usePermission';
-import { getProcessSteps } from './actions';
+import { getProcessSteps, reorderProcessSteps } from './actions';
 import type { Process, ProcessStep } from '@/types/process';
 
 interface ProcessDetailProps {
@@ -111,12 +111,19 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
       const updated = [...prev];
       const [moved] = updated.splice(dragIndex, 1);
       updated.splice(dropIndex, 0, moved);
-      // 순서 재할당
-      return updated.map((step, i) => ({ ...step, order: i + 1 }));
+      const reordered = updated.map((step, i) => ({ ...step, order: i + 1 }));
+
+      // API 순서 변경 호출
+      reorderProcessSteps(
+        process.id,
+        reordered.map((s) => ({ id: s.id, order: s.order }))
+      );
+
+      return reordered;
     });
 
     handleDragEnd();
-  }, [dragIndex, handleDragEnd]);
+  }, [dragIndex, handleDragEnd, process.id]);
 
   return (
     <PageLayout>