From 3d74b9deb2f3fdf160d03ead5ae40747d8c96c33 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Tue, 18 Nov 2025 10:00:56 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=84=A0=ED=83=9D=ED=95=AD=EB=AA=A9=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=EC=9E=85=EB=A0=A5=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20=ED=8F=AC?=
 =?UTF-8?q?=EC=BB=A4=EC=8A=A4=20=EC=9C=A0=EC=A7=80=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 입력 중 onFormDataChange 호출 제거하여 불필요한 리렌더링 방지
- 저장 버튼 클릭 시에만 데이터 전달하도록 변경 (beforeFormSave 이벤트)
- handleSave에서 beforeFormSave 이벤트 발생 및 100ms 대기
- 원본 데이터 표시 버그 수정 (modalData 중첩 구조 처리)
- fieldGroups 구조 감지 로직 수정 (details → fieldGroups)

이제 사용자가 타이핑할 때 포커스가 유지됩니다.
---
 .../SelectedItemsDetailInputComponent.tsx     | 29 ++++++++++++-------
 frontend/lib/utils/buttonActions.ts           | 14 ++++++---
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
index 06c105cd..b50c32fe 100644
--- a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
@@ -220,6 +220,24 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [modalData, component.id, componentConfig.fieldGroups]); // onFormDataChange는 의존성에서 제외
 
+  // 🆕 저장 요청 시에만 데이터 전달 (이벤트 리스너 방식)
+  useEffect(() => {
+    const handleSaveRequest = () => {
+      if (items.length > 0 && onFormDataChange) {
+        const dataToSave = { [component.id || "selected_items"]: items };
+        console.log("📝 [SelectedItemsDetailInput] 저장 요청 시 데이터 전달:", dataToSave);
+        onFormDataChange(dataToSave);
+      }
+    };
+
+    // 저장 버튼 클릭 시 데이터 수집
+    window.addEventListener("beforeFormSave", handleSaveRequest);
+    
+    return () => {
+      window.removeEventListener("beforeFormSave", handleSaveRequest);
+    };
+  }, [items, component.id, onFormDataChange]);
+
   // 스타일 계산
   const componentStyle: React.CSSProperties = {
     width: "100%",
@@ -281,18 +299,9 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
         }
       });
       
-      // 🆕 상태 업데이트 후 즉시 onFormDataChange 호출 (다음 틱에서)
-      setTimeout(() => {
-        if (onFormDataChange) {
-          const dataToSave = { [component.id || "selected_items"]: updatedItems };
-          console.log("📝 [SelectedItemsDetailInput] formData 업데이트:", dataToSave);
-          onFormDataChange(dataToSave);
-        }
-      }, 0);
-      
       return updatedItems;
     });
-  }, [component.id, onFormDataChange]);
+  }, []);
 
   // 🆕 품목 제거 핸들러
   const handleRemoveItem = (itemId: string) => {
diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts
index 9ac4426d..1d39ce91 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -200,10 +200,16 @@ export class ButtonActionExecutor {
 
     console.log("💾 [handleSave] 저장 시작:", { formData, tableName, screenId });
 
-    // 🆕 SelectedItemsDetailInput 배치 저장 처리 (새로운 데이터 구조)
-    const selectedItemsKeys = Object.keys(formData).filter(key => {
-      const value = formData[key];
-      return Array.isArray(value) && value.length > 0 && value[0]?.originalData && value[0]?.details;
+    // 🆕 저장 전 이벤트 발생 (SelectedItemsDetailInput 등에서 최신 데이터 수집)
+    window.dispatchEvent(new CustomEvent("beforeFormSave"));
+    
+    // 약간의 대기 시간을 주어 이벤트 핸들러가 formData를 업데이트할 수 있도록 함
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // 🆕 SelectedItemsDetailInput 배치 저장 처리 (fieldGroups 구조)
+    const selectedItemsKeys = Object.keys(context.formData).filter(key => {
+      const value = context.formData[key];
+      return Array.isArray(value) && value.length > 0 && value[0]?.originalData && value[0]?.fieldGroups;
     });
 
     if (selectedItemsKeys.length > 0) {