From 1b8a2d8127dbca689755dec234dffb08df5f55c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 21 Feb 2026 00:52:01 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20[card]=20=EC=88=98=EC=A0=95=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=9C=20=EC=A7=84=EC=9E=85=20=EC=8B=9C=20=ED=8F=BC=20?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=B4=88=EA=B8=B0=ED=99=94=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- card prop 변경 시 formData를 동기화하는 useEffect 추가
- buildFormData 헬퍼 함수로 중복 코드 제거
- useState 초기값은 최초 1회만 적용되는 React 특성 대응
---
 .../hr/CardManagement/CardDetail.tsx          | 72 +++++++++----------
 1 file changed, 32 insertions(+), 40 deletions(-)

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));
     }
   };