diff --git a/src/components/hr/CardManagement/CardDetail.tsx b/src/components/hr/CardManagement/CardDetail.tsx
index 29853597..efa47a72 100644
--- a/src/components/hr/CardManagement/CardDetail.tsx
+++ b/src/components/hr/CardManagement/CardDetail.tsx
@@ -79,6 +79,29 @@ const FORM_TO_API_FIELD: Record<string, string> = {
   memo: 'memo',
 };
 
+// card prop → formData 변환 헬퍼
+function buildFormData(card?: CardType): CardFormData {
+  return {
+    cardCompany: card?.cardCompany || '',
+    cardType: card?.cardType || '',
+    cardNumber: card?.cardNumber || '',
+    cardName: card?.cardName || '',
+    alias: card?.alias || '',
+    expiryDate: card?.expiryDate || '',
+    csv: card?.csv || '',
+    paymentDay: card?.paymentDay || '',
+    pinPrefix: '',
+    totalLimit: card?.totalLimit || 0,
+    usedAmount: card?.usedAmount || 0,
+    remainingLimit: card?.remainingLimit || 0,
+    status: card?.status || 'active',
+    userId: card?.user?.id || '',
+    departmentId: card?.user?.departmentId || '',
+    positionId: card?.user?.positionId || '',
+    memo: card?.memo || '',
+  };
+}
+
 interface CardDetailProps {
   card?: CardType;
   mode: 'create' | 'view' | 'edit';
@@ -108,25 +131,14 @@ export function CardDetail({ card, mode: initialMode, isLoading }: CardDetailPro
     }
   }, [mode]);
 
-  const [formData, setFormData] = useState<CardFormData>({
-    cardCompany: card?.cardCompany || '',
-    cardType: card?.cardType || '',
-    cardNumber: card?.cardNumber || '',
-    cardName: card?.cardName || '',
-    alias: card?.alias || '',
-    expiryDate: card?.expiryDate || '',
-    csv: card?.csv || '',
-    paymentDay: card?.paymentDay || '',
-    pinPrefix: '',
-    totalLimit: card?.totalLimit || 0,
-    usedAmount: card?.usedAmount || 0,
-    remainingLimit: card?.remainingLimit || 0,
-    status: card?.status || 'active',
-    userId: card?.user?.id || '',
-    departmentId: card?.user?.departmentId || '',
-    positionId: card?.user?.positionId || '',
-    memo: card?.memo || '',
-  });
+  const [formData, setFormData] = useState<CardFormData>(() => buildFormData(card));
+
+  // card prop 변경 시 formData 동기화 (API 로딩 완료 후)
+  useEffect(() => {
+    if (card) {
+      setFormData(buildFormData(card));
+    }
+  }, [card]);
 
   const isViewMode = mode === 'view';
   const isCreateMode = mode === 'create';
@@ -193,27 +205,7 @@ export function CardDetail({ card, mode: initialMode, isLoading }: CardDetailPro
       router.push('/ko/hr/card-management');
     } else {
       setMode('view');
-      if (card) {
-        setFormData({
-          cardCompany: card.cardCompany || '',
-          cardType: card.cardType || '',
-          cardNumber: card.cardNumber || '',
-          cardName: card.cardName || '',
-          alias: card.alias || '',
-          expiryDate: card.expiryDate || '',
-          csv: card.csv || '',
-          paymentDay: card.paymentDay || '',
-          pinPrefix: '',
-          totalLimit: card.totalLimit || 0,
-          usedAmount: card.usedAmount || 0,
-          remainingLimit: card.remainingLimit || 0,
-          status: card.status || 'active',
-          userId: card.user?.id || '',
-          departmentId: card.user?.departmentId || '',
-          positionId: card.user?.positionId || '',
-          memo: card.memo || '',
-        });
-      }
+      setFormData(buildFormData(card));
     }
   };