diff --git a/src/components/process-management/StepDetailClient.tsx b/src/components/process-management/StepDetailClient.tsx
index b29ff0d9..b726bc1a 100644
--- a/src/components/process-management/StepDetailClient.tsx
+++ b/src/components/process-management/StepDetailClient.tsx
@@ -9,7 +9,7 @@
  * - /[id]/steps/new → 등록
  */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { StepDetail } from './StepDetail';
 import { StepForm } from './StepForm';
@@ -31,11 +31,11 @@ export function StepDetailClient({ processId, stepId }: StepDetailClientProps) {
   const modeFromQuery = searchParams.get('mode') as DetailMode | null;
   const isNewMode = stepId === 'new';
 
-  const [mode] = useState<DetailMode>(() => {
+  const mode = useMemo<DetailMode>(() => {
     if (isNewMode) return 'create';
     if (modeFromQuery === 'edit') return 'edit';
     return 'view';
-  });
+  }, [isNewMode, modeFromQuery]);
 
   const [stepData, setStepData] = useState<ProcessStep | null>(null);
   const [isLoading, setIsLoading] = useState(!isNewMode);