feat: [process] 공정 단계에 검사범위(InspectionScope) 설정 추가

- 전수검사/샘플링/그룹 유형 선택 UI - 샘플링 시 샘플 크기(n) 입력 - options JSON으로 API 저장/복원
2026-03-04 21:56:28 +09:00
parent f653960a30
commit 0b81e9c1dd
3 changed files with 121 additions and 0 deletions
--- a/src/components/process-management/StepForm.tsx
+++ b/src/components/process-management/StepForm.tsx
@@ -30,12 +30,16 @@ import type {
  StepConnectionType,
  StepCompletionType,
  InspectionSetting,
+  InspectionScope,
+  InspectionScopeType,
 } from '@/types/process';
 import {
  STEP_CONNECTION_TYPE_OPTIONS,
  STEP_COMPLETION_TYPE_OPTIONS,
  STEP_CONNECTION_TARGET_OPTIONS,
  DEFAULT_INSPECTION_SETTING,
+  DEFAULT_INSPECTION_SCOPE,
+  INSPECTION_SCOPE_TYPE_OPTIONS,
 } from '@/types/process';
 import { createProcessStep, updateProcessStep } from './actions';
 import type { DetailConfig } from '@/components/templates/IntegratedDetailTemplate/types';
@@ -108,6 +112,9 @@ export function StepForm({ mode, processId, initialData }: StepFormProps) {
  const [inspectionSetting, setInspectionSetting] = useState<InspectionSetting>(
    initialData?.inspectionSetting || DEFAULT_INSPECTION_SETTING
  );
+  const [inspectionScope, setInspectionScope] = useState<InspectionScope>(
+    initialData?.inspectionScope || DEFAULT_INSPECTION_SCOPE
+  );

  // 모달 상태
  const [isInspectionSettingOpen, setIsInspectionSettingOpen] = useState(false);
@@ -137,6 +144,7 @@ export function StepForm({ mode, processId, initialData }: StepFormProps) {
      connectionTarget: connectionType === '팝업' ? connectionTarget : undefined,
      completionType,
      inspectionSetting: isInspectionEnabled ? inspectionSetting : undefined,
+      inspectionScope: isInspectionEnabled ? inspectionScope : undefined,
    };

    setIsLoading(true);
@@ -237,6 +245,52 @@ export function StepForm({ mode, processId, initialData }: StepFormProps) {
                  </SelectContent>
                </Select>
              </div>
+              {isInspectionEnabled && (
+                <>
+                  <div className="space-y-2">
+                    <Label>검사범위</Label>
+                    <Select
+                      value={inspectionScope.type}
+                      onValueChange={(v) =>
+                        setInspectionScope((prev) => ({
+                          ...prev,
+                          type: v as InspectionScopeType,
+                          ...(v === 'all' ? { sampleSize: undefined, sampleBase: undefined } : {}),
+                          ...(v === 'sampling' ? { sampleSize: prev.sampleSize || 1, sampleBase: prev.sampleBase || 'order' } : {}),
+                        }))
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {INSPECTION_SCOPE_TYPE_OPTIONS.map((opt) => (
+                          <SelectItem key={opt.value} value={opt.value}>
+                            {opt.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  {inspectionScope.type === 'sampling' && (
+                    <div className="space-y-2">
+                      <Label>샘플 크기 (n)</Label>
+                      <Input
+                        type="number"
+                        min={1}
+                        value={inspectionScope.sampleSize ?? 1}
+                        onChange={(e) =>
+                          setInspectionScope((prev) => ({
+                            ...prev,
+                            sampleSize: Math.max(1, parseInt(e.target.value) || 1),
+                          }))
+                        }
+                        placeholder="검사할 개소 수"
+                      />
+                    </div>
+                  )}
+                </>
+              )}
              <div className="space-y-2">
                <Label>상태</Label>
                <Select value={isActive} onValueChange={setIsActive}>
@@ -338,6 +392,7 @@ export function StepForm({ mode, processId, initialData }: StepFormProps) {
      completionType,
      initialData?.stepCode,
      isInspectionEnabled,
+      inspectionScope,
    ]
  );

--- a/src/components/process-management/actions.ts
+++ b/src/components/process-management/actions.ts
@@ -576,6 +576,15 @@ export async function getDocumentTemplates(): Promise<{
 // 공정 단계 (Process Step) API
 // ============================================================================

+interface ApiProcessStepOptions {
+  inspection_setting?: Record<string, unknown>;
+  inspection_scope?: {
+    type: string;
+    sample_size?: number;
+    sample_base?: string;
+  };
+}
+
 interface ApiProcessStep {
  id: number;
  process_id: number;
@@ -589,11 +598,13 @@ interface ApiProcessStep {
  connection_type: string | null;
  connection_target: string | null;
  completion_type: string | null;
+  options: ApiProcessStepOptions | null;
  created_at: string;
  updated_at: string;
 }

 function transformStepApiToFrontend(apiStep: ApiProcessStep): ProcessStep {
+  const opts = apiStep.options;
  return {
    id: String(apiStep.id),
    stepCode: apiStep.step_code,
@@ -606,6 +617,12 @@ function transformStepApiToFrontend(apiStep: ApiProcessStep): ProcessStep {
    connectionType: (apiStep.connection_type as ProcessStep['connectionType']) || '없음',
    connectionTarget: apiStep.connection_target ?? undefined,
    completionType: (apiStep.completion_type as ProcessStep['completionType']) || 'click_complete',
+    inspectionSetting: opts?.inspection_setting as ProcessStep['inspectionSetting'],
+    inspectionScope: opts?.inspection_scope ? {
+      type: opts.inspection_scope.type as 'all' | 'sampling' | 'group',
+      sampleSize: opts.inspection_scope.sample_size,
+      sampleBase: opts.inspection_scope.sample_base as 'order' | 'lot' | undefined,
+    } : undefined,
  };
 }

@@ -660,6 +677,14 @@ export async function createProcessStep(
      connection_type: data.connectionType || null,
      connection_target: data.connectionTarget || null,
      completion_type: data.completionType || null,
+      options: (data.inspectionSetting || data.inspectionScope) ? {
+        inspection_setting: data.inspectionSetting || null,
+        inspection_scope: data.inspectionScope ? {
+          type: data.inspectionScope.type,
+          sample_size: data.inspectionScope.sampleSize,
+          sample_base: data.inspectionScope.sampleBase,
+        } : null,
+      } : null,
    },
    transform: (d: ApiProcessStep) => transformStepApiToFrontend(d),
    errorMessage: '공정 단계 등록에 실패했습니다.',
@@ -684,6 +709,16 @@ export async function updateProcessStep(
  if (data.connectionType !== undefined) apiData.connection_type = data.connectionType || null;
  if (data.connectionTarget !== undefined) apiData.connection_target = data.connectionTarget || null;
  if (data.completionType !== undefined) apiData.completion_type = data.completionType || null;
+  if (data.inspectionSetting !== undefined || data.inspectionScope !== undefined) {
+    apiData.options = {
+      inspection_setting: data.inspectionSetting || null,
+      inspection_scope: data.inspectionScope ? {
+        type: data.inspectionScope.type,
+        sample_size: data.inspectionScope.sampleSize,
+        sample_base: data.inspectionScope.sampleBase,
+      } : null,
+    };
+  }

  const result = await executeServerAction({
    url: buildApiUrl(`/api/v1/processes/${processId}/steps/${stepId}`),