선택박스 설정

frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx

@@ -50,6 +50,9 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
   // 🆕 필드 그룹 상태
   const [localFieldGroups, setLocalFieldGroups] = useState<FieldGroup[]>(config.fieldGroups || []);
   
+  // 🆕 그룹 입력값을 위한 로컬 상태 (포커스 유지용)
+  const [localGroupInputs, setLocalGroupInputs] = useState<Record<string, { id?: string; title?: string; description?: string; order?: number }>>({});
+  
   // 🆕 표시 항목의 입력값을 위한 로컬 상태 (포커스 유지용)
   const [localDisplayItemInputs, setLocalDisplayItemInputs] = useState<Record<string, Record<number, { label?: string; value?: string }>>>({});
   
@@ -146,7 +149,22 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
   // 🆕 필드 그룹 변경 시 로컬 입력 상태 동기화
   useEffect(() => {
     setLocalFieldGroups(config.fieldGroups || []);
-    // 로컬 입력 상태는 기존 값 보존 (사용자가 입력 중인 값 유지)
+    
+    // 로컬 입력 상태는 기존 값 보존하면서 새 그룹만 추가
+    setLocalGroupInputs(prev => {
+      const newInputs = { ...prev };
+      (config.fieldGroups || []).forEach(group => {
+        if (!(group.id in newInputs)) {
+          newInputs[group.id] = {
+            id: group.id,
+            title: group.title,
+            description: group.description,
+            order: group.order,
+          };
+        }
+      });
+      return newInputs;
+    });
   }, [config.fieldGroups]);
 
   // 🆕 초기 렌더링 시 기존 필드들의 autoFillFromTable 컬럼 로드
@@ -352,6 +370,13 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
   };
 
   const removeFieldGroup = (groupId: string) => {
+    // 로컬 입력 상태에서 해당 그룹 제거
+    setLocalGroupInputs(prev => {
+      const newInputs = { ...prev };
+      delete newInputs[groupId];
+      return newInputs;
+    });
+    
     // 그룹 삭제 시 해당 그룹에 속한 필드들의 groupId도 제거
     const updatedFields = localFields.map(field => 
       field.groupId === groupId ? { ...field, groupId: undefined } : field
@@ -362,6 +387,13 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
   };
 
   const updateFieldGroup = (groupId: string, updates: Partial<FieldGroup>) => {
+    // 1. 로컬 입력 상태 즉시 업데이트 (포커스 유지)
+    setLocalGroupInputs(prev => ({
+      ...prev,
+      [groupId]: { ...prev[groupId], ...updates }
+    }));
+    
+    // 2. 실제 그룹 데이터 업데이트
     const newGroups = localFieldGroups.map(g => 
       g.id === groupId ? { ...g, ...updates } : g
     );
@@ -1045,8 +1077,15 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
               <div className="space-y-1">
                 <Label className="text-[10px] sm:text-xs">그룹 ID</Label>
                 <Input
-                  value={group.id}
-                  onChange={(e) => updateFieldGroup(group.id, { id: e.target.value })}
+                  value={localGroupInputs[group.id]?.id !== undefined ? localGroupInputs[group.id].id : group.id}
+                  onChange={(e) => {
+                    const newValue = e.target.value;
+                    setLocalGroupInputs(prev => ({
+                      ...prev,
+                      [group.id]: { ...prev[group.id], id: newValue }
+                    }));
+                    updateFieldGroup(group.id, { id: newValue });
+                  }}
                   className="h-7 text-xs sm:h-8 sm:text-sm"
                   placeholder="group_customer"
                 />
@@ -1056,8 +1095,15 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
               <div className="space-y-1">
                 <Label className="text-[10px] sm:text-xs">그룹 제목</Label>
                 <Input
-                  value={group.title}
-                  onChange={(e) => updateFieldGroup(group.id, { title: e.target.value })}
+                  value={localGroupInputs[group.id]?.title !== undefined ? localGroupInputs[group.id].title : group.title}
+                  onChange={(e) => {
+                    const newValue = e.target.value;
+                    setLocalGroupInputs(prev => ({
+                      ...prev,
+                      [group.id]: { ...prev[group.id], title: newValue }
+                    }));
+                    updateFieldGroup(group.id, { title: newValue });
+                  }}
                   className="h-7 text-xs sm:h-8 sm:text-sm"
                   placeholder="거래처 정보"
                 />
@@ -1067,8 +1113,15 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
               <div className="space-y-1">
                 <Label className="text-[10px] sm:text-xs">그룹 설명 (선택사항)</Label>
                 <Input
-                  value={group.description || ""}
-                  onChange={(e) => updateFieldGroup(group.id, { description: e.target.value })}
+                  value={localGroupInputs[group.id]?.description !== undefined ? localGroupInputs[group.id].description : (group.description || "")}
+                  onChange={(e) => {
+                    const newValue = e.target.value;
+                    setLocalGroupInputs(prev => ({
+                      ...prev,
+                      [group.id]: { ...prev[group.id], description: newValue }
+                    }));
+                    updateFieldGroup(group.id, { description: newValue });
+                  }}
                   className="h-7 text-xs sm:h-8 sm:text-sm"
                   placeholder="거래처 관련 정보를 입력합니다"
                 />
@@ -1079,8 +1132,15 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                 <Label className="text-[10px] sm:text-xs">표시 순서</Label>
                 <Input
                   type="number"
-                  value={group.order || 0}
-                  onChange={(e) => updateFieldGroup(group.id, { order: parseInt(e.target.value) || 0 })}
+                  value={localGroupInputs[group.id]?.order !== undefined ? localGroupInputs[group.id].order : (group.order || 0)}
+                  onChange={(e) => {
+                    const newValue = parseInt(e.target.value) || 0;
+                    setLocalGroupInputs(prev => ({
+                      ...prev,
+                      [group.id]: { ...prev[group.id], order: newValue }
+                    }));
+                    updateFieldGroup(group.id, { order: newValue });
+                  }}
                   className="h-7 text-xs sm:h-8 sm:text-sm"
                   min="0"
                 />