feat(WEB): 공정관리/작업지시/작업자화면 기능 강화 및 템플릿 개선

- 공정관리: ProcessDetail/ProcessForm/ProcessList 개선, StepDetail/StepForm 신규 추가
- 작업지시: WorkOrderDetail/Edit/List UI 개선, 작업지시서 문서 추가
- 작업자화면: WorkerScreen 대폭 개선, MaterialInputModal/WorkLogModal 수정, WorkItemCard 신규
- 영업주문: 주문 상세 페이지 개선
- 입고관리: 상세/actions 수정
- 템플릿: IntegratedDetailTemplate/IntegratedListTemplateV2/UniversalListPage 기능 확장
- UI: confirm-dialog 개선

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/process-management/StepDetailClient.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+/**
+ * 단계 상세 클라이언트 컴포넌트
+ *
+ * 라우팅:
+ * - /[id]/steps/[stepId] → 상세 보기
+ * - /[id]/steps/[stepId]?mode=edit → 수정
+ * - /[id]/steps/new → 등록
+ */
+
+import { useState, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { StepDetail } from './StepDetail';
+import { StepForm } from './StepForm';
+import { getProcessStepById } from './actions';
+import type { ProcessStep } from '@/types/process';
+import { DetailPageSkeleton } from '@/components/ui/skeleton';
+import { ErrorCard } from '@/components/ui/error-card';
+import { toast } from 'sonner';
+
+type DetailMode = 'view' | 'edit' | 'create';
+
+interface StepDetailClientProps {
+  processId: string;
+  stepId: string;
+}
+
+export function StepDetailClient({ processId, stepId }: StepDetailClientProps) {
+  const searchParams = useSearchParams();
+  const modeFromQuery = searchParams.get('mode') as DetailMode | null;
+  const isNewMode = stepId === 'new';
+
+  const [mode] = useState<DetailMode>(() => {
+    if (isNewMode) return 'create';
+    if (modeFromQuery === 'edit') return 'edit';
+    return 'view';
+  });
+
+  const [stepData, setStepData] = useState<ProcessStep | null>(null);
+  const [isLoading, setIsLoading] = useState(!isNewMode);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isNewMode) {
+      setIsLoading(false);
+      return;
+    }
+
+    const loadData = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const result = await getProcessStepById(processId, stepId);
+        if (result.success && result.data) {
+          setStepData(result.data);
+        } else {
+          setError(result.error || '단계 정보를 찾을 수 없습니다.');
+          toast.error('단계를 불러오는데 실패했습니다.');
+        }
+      } catch (err) {
+        console.error('단계 조회 실패:', err);
+        setError('단계 정보를 불러오는 중 오류가 발생했습니다.');
+        toast.error('단계를 불러오는데 실패했습니다.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadData();
+  }, [processId, stepId, isNewMode]);
+
+  if (isLoading) {
+    return <DetailPageSkeleton sections={1} fieldsPerSection={4} />;
+  }
+
+  if (error && !isNewMode) {
+    return (
+      <ErrorCard
+        type="network"
+        title="단계 정보를 불러올 수 없습니다"
+        description={error}
+        tips={[
+          '해당 단계가 존재하는지 확인해주세요',
+          '인터넷 연결 상태를 확인해주세요',
+        ]}
+        homeButtonLabel="공정 상세로 이동"
+        homeButtonHref={`/ko/master-data/process-management/${processId}`}
+      />
+    );
+  }
+
+  if (mode === 'create') {
+    return <StepForm mode="create" processId={processId} />;
+  }
+
+  if (mode === 'edit' && stepData) {
+    return <StepForm mode="edit" processId={processId} initialData={stepData} />;
+  }
+
+  if (mode === 'view' && stepData) {
+    return <StepDetail step={stepData} processId={processId} />;
+  }
+
+  return (
+    <ErrorCard
+      type="not-found"
+      title="단계를 찾을 수 없습니다"
+      description="요청하신 단계 정보가 존재하지 않습니다."
+      homeButtonLabel="공정 상세로 이동"
+      homeButtonHref={`/ko/master-data/process-management/${processId}`}
+    />
+  );
+}