diff --git a/frontend/components/screen/ScreenList.tsx b/frontend/components/screen/ScreenList.tsx
index d2d3e367..eff55312 100644
--- a/frontend/components/screen/ScreenList.tsx
+++ b/frontend/components/screen/ScreenList.tsx
@@ -47,6 +47,7 @@ import dynamic from "next/dynamic";
 import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
 import { DynamicWebTypeRenderer } from "@/lib/registry";
 import { isFileComponent, getComponentWebType } from "@/lib/utils/componentTypeUtils";
+import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
 
 // InteractiveScreenViewer를 동적으로 import (SSR 비활성화)
 const InteractiveScreenViewer = dynamic(
@@ -1315,15 +1316,16 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
           <DialogHeader>
             <DialogTitle>화면 미리보기 - {screenToPreview?.screenName}</DialogTitle>
           </DialogHeader>
-          <div className="flex flex-1 items-center justify-center overflow-hidden bg-gradient-to-br from-gray-50 to-slate-100 p-6">
-            {isLoadingPreview ? (
-              <div className="flex h-full items-center justify-center">
-                <div className="text-center">
-                  <div className="mb-2 text-lg font-medium">레이아웃 로딩 중...</div>
-                  <div className="text-muted-foreground text-sm">화면 정보를 불러오고 있습니다.</div>
+          <TableOptionsProvider>
+            <div className="flex flex-1 items-center justify-center overflow-hidden bg-gradient-to-br from-gray-50 to-slate-100 p-6">
+              {isLoadingPreview ? (
+                <div className="flex h-full items-center justify-center">
+                  <div className="text-center">
+                    <div className="mb-2 text-lg font-medium">레이아웃 로딩 중...</div>
+                    <div className="text-muted-foreground text-sm">화면 정보를 불러오고 있습니다.</div>
+                  </div>
                 </div>
-              </div>
-            ) : previewLayout && previewLayout.components ? (
+              ) : previewLayout && previewLayout.components ? (
               (() => {
                 const screenWidth = previewLayout.screenResolution?.width || 1200;
                 const screenHeight = previewLayout.screenResolution?.height || 800;
@@ -1536,7 +1538,8 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                 </div>
               </div>
             )}
-          </div>
+            </div>
+          </TableOptionsProvider>
           <DialogFooter>
             <Button variant="outline" onClick={() => setPreviewDialogOpen(false)}>
               닫기
diff --git a/frontend/components/screen/config-panels/CheckboxConfigPanel.tsx b/frontend/components/screen/config-panels/CheckboxConfigPanel.tsx
index bff983dc..9677a889 100644
--- a/frontend/components/screen/config-panels/CheckboxConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/CheckboxConfigPanel.tsx
@@ -47,6 +47,14 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   // 새 옵션 추가용 상태
   const [newOptionLabel, setNewOptionLabel] = useState("");
   const [newOptionValue, setNewOptionValue] = useState("");
+  
+  // 입력 필드용 로컬 상태
+  const [localInputs, setLocalInputs] = useState({
+    label: config.label || "",
+    checkedValue: config.checkedValue || "Y",
+    uncheckedValue: config.uncheckedValue || "N",
+    groupLabel: config.groupLabel || "",
+  });
 
   // 컴포넌트 변경 시 로컬 상태 동기화
   useEffect(() => {
@@ -63,6 +71,14 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
       readonly: currentConfig.readonly || false,
       inline: currentConfig.inline !== false,
     });
+    
+    // 입력 필드 로컬 상태도 동기화
+    setLocalInputs({
+      label: currentConfig.label || "",
+      checkedValue: currentConfig.checkedValue || "Y",
+      uncheckedValue: currentConfig.uncheckedValue || "N",
+      groupLabel: currentConfig.groupLabel || "",
+    });
   }, [widget.webTypeConfig]);
 
   // 설정 업데이트 핸들러
@@ -107,11 +123,16 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
     updateConfig("options", newOptions);
   };
 
-  // 옵션 업데이트
-  const updateOption = (index: number, field: keyof CheckboxOption, value: any) => {
+  // 옵션 업데이트 (입력 필드용 - 로컬 상태만)
+  const updateOptionLocal = (index: number, field: keyof CheckboxOption, value: any) => {
     const newOptions = [...localConfig.options];
     newOptions[index] = { ...newOptions[index], [field]: value };
-    updateConfig("options", newOptions);
+    setLocalConfig({ ...localConfig, options: newOptions });
+  };
+
+  // 옵션 업데이트 완료 (onBlur)
+  const handleOptionBlur = () => {
+    onUpdateProperty("webTypeConfig", localConfig);
   };
 
   return (
@@ -170,8 +191,9 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               </Label>
               <Input
                 id="label"
-                value={localConfig.label || ""}
-                onChange={(e) => updateConfig("label", e.target.value)}
+                value={localInputs.label}
+                onChange={(e) => setLocalInputs({ ...localInputs, label: e.target.value })}
+                onBlur={() => updateConfig("label", localInputs.label)}
                 placeholder="체크박스 라벨"
                 className="text-xs"
               />
@@ -184,8 +206,9 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 </Label>
                 <Input
                   id="checkedValue"
-                  value={localConfig.checkedValue || ""}
-                  onChange={(e) => updateConfig("checkedValue", e.target.value)}
+                  value={localInputs.checkedValue}
+                  onChange={(e) => setLocalInputs({ ...localInputs, checkedValue: e.target.value })}
+                  onBlur={() => updateConfig("checkedValue", localInputs.checkedValue)}
                   placeholder="Y"
                   className="text-xs"
                 />
@@ -196,8 +219,9 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                 </Label>
                 <Input
                   id="uncheckedValue"
-                  value={localConfig.uncheckedValue || ""}
-                  onChange={(e) => updateConfig("uncheckedValue", e.target.value)}
+                  value={localInputs.uncheckedValue}
+                  onChange={(e) => setLocalInputs({ ...localInputs, uncheckedValue: e.target.value })}
+                  onBlur={() => updateConfig("uncheckedValue", localInputs.uncheckedValue)}
                   placeholder="N"
                   className="text-xs"
                 />
@@ -229,8 +253,9 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               </Label>
               <Input
                 id="groupLabel"
-                value={localConfig.groupLabel || ""}
-                onChange={(e) => updateConfig("groupLabel", e.target.value)}
+                value={localInputs.groupLabel}
+                onChange={(e) => setLocalInputs({ ...localInputs, groupLabel: e.target.value })}
+                onBlur={() => updateConfig("groupLabel", localInputs.groupLabel)}
                 placeholder="체크박스 그룹 제목"
                 className="text-xs"
               />
@@ -268,26 +293,40 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               <Label className="text-xs">옵션 목록 ({localConfig.options.length}개)</Label>
               <div className="max-h-40 space-y-2 overflow-y-auto">
                 {localConfig.options.map((option, index) => (
-                  <div key={index} className="flex items-center gap-2 rounded border p-2">
+                  <div key={`${option.value}-${index}`} className="flex items-center gap-2 rounded border p-2">
                     <Switch
                       checked={option.checked || false}
-                      onCheckedChange={(checked) => updateOption(index, "checked", checked)}
+                      onCheckedChange={(checked) => {
+                        const newOptions = [...localConfig.options];
+                        newOptions[index] = { ...newOptions[index], checked };
+                        const newConfig = { ...localConfig, options: newOptions };
+                        setLocalConfig(newConfig);
+                        onUpdateProperty("webTypeConfig", newConfig);
+                      }}
                     />
                     <Input
                       value={option.label}
-                      onChange={(e) => updateOption(index, "label", e.target.value)}
+                      onChange={(e) => updateOptionLocal(index, "label", e.target.value)}
+                      onBlur={handleOptionBlur}
                       placeholder="라벨"
                       className="flex-1 text-xs"
                     />
                     <Input
                       value={option.value}
-                      onChange={(e) => updateOption(index, "value", e.target.value)}
+                      onChange={(e) => updateOptionLocal(index, "value", e.target.value)}
+                      onBlur={handleOptionBlur}
                       placeholder="값"
                       className="flex-1 text-xs"
                     />
                     <Switch
                       checked={!option.disabled}
-                      onCheckedChange={(checked) => updateOption(index, "disabled", !checked)}
+                      onCheckedChange={(checked) => {
+                        const newOptions = [...localConfig.options];
+                        newOptions[index] = { ...newOptions[index], disabled: !checked };
+                        const newConfig = { ...localConfig, options: newOptions };
+                        setLocalConfig(newConfig);
+                        onUpdateProperty("webTypeConfig", newConfig);
+                      }}
                     />
                     <Button size="sm" variant="destructive" onClick={() => removeOption(index)} className="p-1 text-xs">
                       <Trash2 className="h-3 w-3" />
diff --git a/frontend/components/screen/config-panels/EntityConfigPanel.tsx b/frontend/components/screen/config-panels/EntityConfigPanel.tsx
index a9dff775..7c1b74eb 100644
--- a/frontend/components/screen/config-panels/EntityConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/EntityConfigPanel.tsx
@@ -51,32 +51,29 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   const [newFieldName, setNewFieldName] = useState("");
   const [newFieldLabel, setNewFieldLabel] = useState("");
   const [newFieldType, setNewFieldType] = useState("string");
-  const [isUserEditing, setIsUserEditing] = useState(false);
 
-  // 컴포넌트 변경 시 로컬 상태 동기화 (사용자가 입력 중이 아닐 때만)
+  // 컴포넌트 변경 시 로컬 상태 동기화
   useEffect(() => {
-    if (!isUserEditing) {
-      const currentConfig = (widget.webTypeConfig as EntityTypeConfig) || {};
-      setLocalConfig({
-        entityType: currentConfig.entityType || "",
-        displayFields: currentConfig.displayFields || [],
-        searchFields: currentConfig.searchFields || [],
-        valueField: currentConfig.valueField || "id",
-        labelField: currentConfig.labelField || "name",
-        multiple: currentConfig.multiple || false,
-        searchable: currentConfig.searchable !== false,
-        placeholder: currentConfig.placeholder || "엔티티를 선택하세요",
-        emptyMessage: currentConfig.emptyMessage || "검색 결과가 없습니다",
-        pageSize: currentConfig.pageSize || 20,
-        minSearchLength: currentConfig.minSearchLength || 1,
-        defaultValue: currentConfig.defaultValue || "",
-        required: currentConfig.required || false,
-        readonly: currentConfig.readonly || false,
-        apiEndpoint: currentConfig.apiEndpoint || "",
-        filters: currentConfig.filters || {},
-      });
-    }
-  }, [widget.webTypeConfig, isUserEditing]);
+    const currentConfig = (widget.webTypeConfig as EntityTypeConfig) || {};
+    setLocalConfig({
+      entityType: currentConfig.entityType || "",
+      displayFields: currentConfig.displayFields || [],
+      searchFields: currentConfig.searchFields || [],
+      valueField: currentConfig.valueField || "id",
+      labelField: currentConfig.labelField || "name",
+      multiple: currentConfig.multiple || false,
+      searchable: currentConfig.searchable !== false,
+      placeholder: currentConfig.placeholder || "엔티티를 선택하세요",
+      emptyMessage: currentConfig.emptyMessage || "검색 결과가 없습니다",
+      pageSize: currentConfig.pageSize || 20,
+      minSearchLength: currentConfig.minSearchLength || 1,
+      defaultValue: currentConfig.defaultValue || "",
+      required: currentConfig.required || false,
+      readonly: currentConfig.readonly || false,
+      apiEndpoint: currentConfig.apiEndpoint || "",
+      filters: currentConfig.filters || {},
+    });
+  }, [widget.webTypeConfig]);
 
   // 설정 업데이트 핸들러 (즉시 부모에게 전달 - 드롭다운, 체크박스 등)
   const updateConfig = (field: keyof EntityTypeConfig, value: any) => {
@@ -87,13 +84,11 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
 
   // 입력 필드용 업데이트 (로컬 상태만)
   const updateConfigLocal = (field: keyof EntityTypeConfig, value: any) => {
-    setIsUserEditing(true);
     setLocalConfig({ ...localConfig, [field]: value });
   };
 
   // 입력 완료 시 부모에게 전달
   const handleInputBlur = () => {
-    setIsUserEditing(false);
     onUpdateProperty("webTypeConfig", localConfig);
   };
 
@@ -121,17 +116,15 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
     updateConfig("displayFields", newFields);
   };
 
-  // 필드 업데이트 (입력 중)
+  // 필드 업데이트 (입력 중) - 로컬 상태만 업데이트
   const updateDisplayField = (index: number, field: keyof EntityField, value: any) => {
-    setIsUserEditing(true);
     const newFields = [...localConfig.displayFields];
     newFields[index] = { ...newFields[index], [field]: value };
     setLocalConfig({ ...localConfig, displayFields: newFields });
   };
 
-  // 필드 업데이트 완료 (onBlur)
+  // 필드 업데이트 완료 (onBlur) - 부모에게 전달
   const handleFieldBlur = () => {
-    setIsUserEditing(false);
     onUpdateProperty("webTypeConfig", localConfig);
   };
 
@@ -325,12 +318,15 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
             <Label className="text-xs">표시 필드 ({localConfig.displayFields.length}개)</Label>
             <div className="max-h-40 space-y-2 overflow-y-auto">
               {localConfig.displayFields.map((field, index) => (
-                <div key={index} className="flex items-center gap-2 rounded border p-2">
+                <div key={`${field.name}-${index}`} className="flex items-center gap-2 rounded border p-2">
                   <Switch
                     checked={field.visible}
                     onCheckedChange={(checked) => {
-                      updateDisplayField(index, "visible", checked);
-                      handleFieldBlur();
+                      const newFields = [...localConfig.displayFields];
+                      newFields[index] = { ...newFields[index], visible: checked };
+                      const newConfig = { ...localConfig, displayFields: newFields };
+                      setLocalConfig(newConfig);
+                      onUpdateProperty("webTypeConfig", newConfig);
                     }}
                   />
                   <Input
@@ -347,7 +343,16 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
                     placeholder="라벨"
                     className="flex-1 text-xs"
                   />
-                  <Select value={field.type} onValueChange={(value) => updateDisplayField(index, "type", value)}>
+                  <Select 
+                    value={field.type} 
+                    onValueChange={(value) => {
+                      const newFields = [...localConfig.displayFields];
+                      newFields[index] = { ...newFields[index], type: value };
+                      const newConfig = { ...localConfig, displayFields: newFields };
+                      setLocalConfig(newConfig);
+                      onUpdateProperty("webTypeConfig", newConfig);
+                    }}
+                  >
                     <SelectTrigger className="w-24 text-xs">
                       <SelectValue />
                     </SelectTrigger>
diff --git a/frontend/components/screen/config-panels/RadioConfigPanel.tsx b/frontend/components/screen/config-panels/RadioConfigPanel.tsx
index d3e37028..bd048146 100644
--- a/frontend/components/screen/config-panels/RadioConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/RadioConfigPanel.tsx
@@ -43,6 +43,12 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   const [newOptionLabel, setNewOptionLabel] = useState("");
   const [newOptionValue, setNewOptionValue] = useState("");
   const [bulkOptions, setBulkOptions] = useState("");
+  
+  // 입력 필드용 로컬 상태
+  const [localInputs, setLocalInputs] = useState({
+    groupLabel: config.groupLabel || "",
+    groupName: config.groupName || "",
+  });
 
   // 컴포넌트 변경 시 로컬 상태 동기화
   useEffect(() => {
@@ -59,6 +65,12 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
       inline: currentConfig.inline !== false,
       groupLabel: currentConfig.groupLabel || "",
     });
+    
+    // 입력 필드 로컬 상태도 동기화
+    setLocalInputs({
+      groupLabel: currentConfig.groupLabel || "",
+      groupName: currentConfig.groupName || "",
+    });
   }, [widget.webTypeConfig]);
 
   // 설정 업데이트 핸들러
@@ -95,17 +107,24 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
     }
   };
 
-  // 옵션 업데이트
-  const updateOption = (index: number, field: keyof RadioOption, value: any) => {
+  // 옵션 업데이트 (입력 필드용 - 로컬 상태만)
+  const updateOptionLocal = (index: number, field: keyof RadioOption, value: any) => {
     const newOptions = [...localConfig.options];
     const oldValue = newOptions[index].value;
     newOptions[index] = { ...newOptions[index], [field]: value };
-    updateConfig("options", newOptions);
-
+    
     // 값이 변경되고 해당 값이 기본값이었다면 기본값도 업데이트
+    const newConfig = { ...localConfig, options: newOptions };
     if (field === "value" && localConfig.defaultValue === oldValue) {
-      updateConfig("defaultValue", value);
+      newConfig.defaultValue = value;
     }
+    
+    setLocalConfig(newConfig);
+  };
+
+  // 옵션 업데이트 완료 (onBlur)
+  const handleOptionBlur = () => {
+    onUpdateProperty("webTypeConfig", localConfig);
   };
 
   // 벌크 옵션 추가
@@ -185,8 +204,9 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
             </Label>
             <Input
               id="groupLabel"
-              value={localConfig.groupLabel || ""}
-              onChange={(e) => updateConfig("groupLabel", e.target.value)}
+              value={localInputs.groupLabel}
+              onChange={(e) => setLocalInputs({ ...localInputs, groupLabel: e.target.value })}
+              onBlur={() => updateConfig("groupLabel", localInputs.groupLabel)}
               placeholder="라디오버튼 그룹 제목"
               className="text-xs"
             />
@@ -198,8 +218,9 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
             </Label>
             <Input
               id="groupName"
-              value={localConfig.groupName || ""}
-              onChange={(e) => updateConfig("groupName", e.target.value)}
+              value={localInputs.groupName}
+              onChange={(e) => setLocalInputs({ ...localInputs, groupName: e.target.value })}
+              onBlur={() => updateConfig("groupName", localInputs.groupName)}
               placeholder="자동 생성 (필드명 기반)"
               className="text-xs"
             />
@@ -290,22 +311,30 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
             <Label className="text-xs">현재 옵션 ({localConfig.options.length}개)</Label>
             <div className="max-h-40 space-y-2 overflow-y-auto">
               {localConfig.options.map((option, index) => (
-                <div key={index} className="flex items-center gap-2 rounded border p-2">
+                <div key={`${option.value}-${index}`} className="flex items-center gap-2 rounded border p-2">
                   <Input
                     value={option.label}
-                    onChange={(e) => updateOption(index, "label", e.target.value)}
+                    onChange={(e) => updateOptionLocal(index, "label", e.target.value)}
+                    onBlur={handleOptionBlur}
                     placeholder="라벨"
                     className="flex-1 text-xs"
                   />
                   <Input
                     value={option.value}
-                    onChange={(e) => updateOption(index, "value", e.target.value)}
+                    onChange={(e) => updateOptionLocal(index, "value", e.target.value)}
+                    onBlur={handleOptionBlur}
                     placeholder="값"
                     className="flex-1 text-xs"
                   />
                   <Switch
                     checked={!option.disabled}
-                    onCheckedChange={(checked) => updateOption(index, "disabled", !checked)}
+                    onCheckedChange={(checked) => {
+                      const newOptions = [...localConfig.options];
+                      newOptions[index] = { ...newOptions[index], disabled: !checked };
+                      const newConfig = { ...localConfig, options: newOptions };
+                      setLocalConfig(newConfig);
+                      onUpdateProperty("webTypeConfig", newConfig);
+                    }}
                   />
                   <Button size="sm" variant="destructive" onClick={() => removeOption(index)} className="p-1 text-xs">
                     <Trash2 className="h-3 w-3" />
diff --git a/frontend/components/screen/config-panels/SelectConfigPanel.tsx b/frontend/components/screen/config-panels/SelectConfigPanel.tsx
index f2598a76..68bbbce9 100644
--- a/frontend/components/screen/config-panels/SelectConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/SelectConfigPanel.tsx
@@ -44,6 +44,12 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
   const [newOptionLabel, setNewOptionLabel] = useState("");
   const [newOptionValue, setNewOptionValue] = useState("");
   const [bulkOptions, setBulkOptions] = useState("");
+  
+  // 입력 필드용 로컬 상태
+  const [localInputs, setLocalInputs] = useState({
+    placeholder: config.placeholder || "",
+    emptyMessage: config.emptyMessage || "",
+  });
 
   // 컴포넌트 변경 시 로컬 상태 동기화
   useEffect(() => {
@@ -61,6 +67,12 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
       readonly: currentConfig.readonly || false,
       emptyMessage: currentConfig.emptyMessage || "선택 가능한 옵션이 없습니다",
     });
+    
+    // 입력 필드 로컬 상태도 동기화
+    setLocalInputs({
+      placeholder: currentConfig.placeholder || "",
+      emptyMessage: currentConfig.emptyMessage || "",
+    });
   }, [widget.webTypeConfig]);
 
   // 설정 업데이트 핸들러
@@ -91,11 +103,16 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
     updateConfig("options", newOptions);
   };
 
-  // 옵션 업데이트
-  const updateOption = (index: number, field: keyof SelectOption, value: any) => {
+  // 옵션 업데이트 (입력 필드용 - 로컬 상태만)
+  const updateOptionLocal = (index: number, field: keyof SelectOption, value: any) => {
     const newOptions = [...localConfig.options];
     newOptions[index] = { ...newOptions[index], [field]: value };
-    updateConfig("options", newOptions);
+    setLocalConfig({ ...localConfig, options: newOptions });
+  };
+
+  // 옵션 업데이트 완료 (onBlur)
+  const handleOptionBlur = () => {
+    onUpdateProperty("webTypeConfig", localConfig);
   };
 
   // 벌크 옵션 추가
@@ -170,8 +187,9 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
             </Label>
             <Input
               id="placeholder"
-              value={localConfig.placeholder || ""}
-              onChange={(e) => updateConfig("placeholder", e.target.value)}
+              value={localInputs.placeholder}
+              onChange={(e) => setLocalInputs({ ...localInputs, placeholder: e.target.value })}
+              onBlur={() => updateConfig("placeholder", localInputs.placeholder)}
               placeholder="선택하세요"
               className="text-xs"
             />
@@ -183,8 +201,9 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
             </Label>
             <Input
               id="emptyMessage"
-              value={localConfig.emptyMessage || ""}
-              onChange={(e) => updateConfig("emptyMessage", e.target.value)}
+              value={localInputs.emptyMessage}
+              onChange={(e) => setLocalInputs({ ...localInputs, emptyMessage: e.target.value })}
+              onBlur={() => updateConfig("emptyMessage", localInputs.emptyMessage)}
               placeholder="선택 가능한 옵션이 없습니다"
               className="text-xs"
             />
@@ -285,22 +304,30 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
             <Label className="text-xs">현재 옵션 ({localConfig.options.length}개)</Label>
             <div className="max-h-40 space-y-2 overflow-y-auto">
               {localConfig.options.map((option, index) => (
-                <div key={index} className="flex items-center gap-2 rounded border p-2">
+                <div key={`${option.value}-${index}`} className="flex items-center gap-2 rounded border p-2">
                   <Input
                     value={option.label}
-                    onChange={(e) => updateOption(index, "label", e.target.value)}
+                    onChange={(e) => updateOptionLocal(index, "label", e.target.value)}
+                    onBlur={handleOptionBlur}
                     placeholder="라벨"
                     className="flex-1 text-xs"
                   />
                   <Input
                     value={option.value}
-                    onChange={(e) => updateOption(index, "value", e.target.value)}
+                    onChange={(e) => updateOptionLocal(index, "value", e.target.value)}
+                    onBlur={handleOptionBlur}
                     placeholder="값"
                     className="flex-1 text-xs"
                   />
                   <Switch
                     checked={!option.disabled}
-                    onCheckedChange={(checked) => updateOption(index, "disabled", !checked)}
+                    onCheckedChange={(checked) => {
+                      const newOptions = [...localConfig.options];
+                      newOptions[index] = { ...newOptions[index], disabled: !checked };
+                      const newConfig = { ...localConfig, options: newOptions };
+                      setLocalConfig(newConfig);
+                      onUpdateProperty("webTypeConfig", newConfig);
+                    }}
                   />
                   <Button size="sm" variant="destructive" onClick={() => removeOption(index)} className="p-1 text-xs">
                     <Trash2 className="h-3 w-3" />
diff --git a/frontend/components/screen/templates/NumberingRuleTemplate.ts b/frontend/components/screen/templates/NumberingRuleTemplate.ts
index db61ad11..20e415af 100644
--- a/frontend/components/screen/templates/NumberingRuleTemplate.ts
+++ b/frontend/components/screen/templates/NumberingRuleTemplate.ts
@@ -78,3 +78,4 @@ export const numberingRuleTemplate = {
 
 
 
+
diff --git a/frontend/components/webtypes/config/RepeaterConfigPanel.tsx b/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
index 5d534fb6..c9e44264 100644
--- a/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
+++ b/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, useEffect } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -34,6 +34,21 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
 }) => {
   const [localFields, setLocalFields] = useState<RepeaterFieldDefinition[]>(config.fields || []);
   const [fieldNamePopoverOpen, setFieldNamePopoverOpen] = useState<Record<number, boolean>>({});
+  
+  // 로컬 입력 상태 (각 필드의 라벨, placeholder 등)
+  const [localInputs, setLocalInputs] = useState<Record<number, { label: string; placeholder: string }>>({});
+  
+  // 설정 입력 필드의 로컬 상태
+  const [localConfigInputs, setLocalConfigInputs] = useState({
+    addButtonText: config.addButtonText || "",
+  });
+
+  // config 변경 시 로컬 상태 동기화
+  useEffect(() => {
+    setLocalConfigInputs({
+      addButtonText: config.addButtonText || "",
+    });
+  }, [config.addButtonText]);
 
   // 이미 사용된 컬럼명 목록
   const usedColumnNames = useMemo(() => {
@@ -72,7 +87,32 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
     handleFieldsChange(localFields.filter((_, i) => i !== index));
   };
 
-  // 필드 수정
+  // 필드 수정 (입력 중 - 로컬 상태만)
+  const updateFieldLocal = (index: number, field: 'label' | 'placeholder', value: string) => {
+    setLocalInputs(prev => ({
+      ...prev,
+      [index]: {
+        ...prev[index],
+        [field]: value
+      }
+    }));
+  };
+
+  // 필드 수정 완료 (onBlur - 실제 업데이트)
+  const handleFieldBlur = (index: number) => {
+    const localInput = localInputs[index];
+    if (localInput) {
+      const newFields = [...localFields];
+      newFields[index] = {
+        ...newFields[index],
+        label: localInput.label,
+        placeholder: localInput.placeholder
+      };
+      handleFieldsChange(newFields);
+    }
+  };
+
+  // 필드 수정 (즉시 반영 - 드롭다운, 체크박스 등)
   const updateField = (index: number, updates: Partial<RepeaterFieldDefinition>) => {
     const newFields = [...localFields];
     newFields[index] = { ...newFields[index], ...updates };
@@ -157,7 +197,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
         <Label className="text-sm font-semibold">필드 정의</Label>
 
         {localFields.map((field, index) => (
-          <Card key={index} className="border-2">
+          <Card key={`${field.name}-${index}`} className="border-2">
             <CardContent className="space-y-3 pt-4">
               <div className="flex items-center justify-between">
                 <span className="text-sm font-semibold text-gray-700">필드 {index + 1}</span>
@@ -200,6 +240,14 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                                   label: column.columnLabel || column.columnName,
                                   type: (column.widgetType as RepeaterFieldType) || "text",
                                 });
+                                // 로컬 입력 상태도 업데이트
+                                setLocalInputs(prev => ({
+                                  ...prev,
+                                  [index]: {
+                                    label: column.columnLabel || column.columnName,
+                                    placeholder: prev[index]?.placeholder || ""
+                                  }
+                                }));
                                 setFieldNamePopoverOpen({ ...fieldNamePopoverOpen, [index]: false });
                               }}
                               className="text-xs"
@@ -225,8 +273,9 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                 <div className="space-y-1">
                   <Label className="text-xs">라벨</Label>
                   <Input
-                    value={field.label}
-                    onChange={(e) => updateField(index, { label: e.target.value })}
+                    value={localInputs[index]?.label !== undefined ? localInputs[index].label : field.label}
+                    onChange={(e) => updateFieldLocal(index, 'label', e.target.value)}
+                    onBlur={() => handleFieldBlur(index)}
                     placeholder="필드 라벨"
                     className="h-8 w-full text-xs"
                   />
@@ -258,10 +307,11 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                 <div className="space-y-1">
                   <Label className="text-xs">Placeholder</Label>
                   <Input
-                    value={field.placeholder || ""}
-                    onChange={(e) => updateField(index, { placeholder: e.target.value })}
+                    value={localInputs[index]?.placeholder !== undefined ? localInputs[index].placeholder : (field.placeholder || "")}
+                    onChange={(e) => updateFieldLocal(index, 'placeholder', e.target.value)}
+                    onBlur={() => handleFieldBlur(index)}
                     placeholder="입력 안내"
-                    className="h-8 w-full"
+                    className="h-8 w-full text-xs"
                   />
                 </div>
               </div>
@@ -329,8 +379,9 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
           <Input
             id="repeater-add-button-text"
             type="text"
-            value={config.addButtonText || ""}
-            onChange={(e) => handleChange("addButtonText", e.target.value)}
+            value={localConfigInputs.addButtonText}
+            onChange={(e) => setLocalConfigInputs({ ...localConfigInputs, addButtonText: e.target.value })}
+            onBlur={() => handleChange("addButtonText", localConfigInputs.addButtonText)}
             placeholder="항목 추가"
             className="h-8"
           />
diff --git a/frontend/lib/api/tableCategoryValue.ts b/frontend/lib/api/tableCategoryValue.ts
index 9316beb0..ba830457 100644
--- a/frontend/lib/api/tableCategoryValue.ts
+++ b/frontend/lib/api/tableCategoryValue.ts
@@ -20,6 +20,25 @@ export async function getCategoryColumns(tableName: string) {
   }
 }
 
+/**
+ * 메뉴별 카테고리 컬럼 목록 조회
+ * 
+ * @param menuObjid 메뉴 OBJID
+ * @returns 해당 메뉴와 상위 메뉴들이 설정한 모든 카테고리 컬럼
+ */
+export async function getCategoryColumnsByMenu(menuObjid: number) {
+  try {
+    const response = await apiClient.get<{
+      success: boolean;
+      data: CategoryColumn[];
+    }>(`/table-management/menu/${menuObjid}/category-columns`);
+    return response.data;
+  } catch (error: any) {
+    console.error("메뉴별 카테고리 컬럼 조회 실패:", error);
+    return { success: false, error: error.message };
+  }
+}
+
 /**
  * 카테고리 값 목록 조회 (메뉴 스코프)
  * 
diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
index 7e024776..61f755a4 100644
--- a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
@@ -15,14 +15,14 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { getSecondLevelMenus, getCategoryColumns, getCategoryValues } from "@/lib/api/tableCategoryValue";
+import { getSecondLevelMenus, getCategoryColumns, getCategoryColumnsByMenu, getCategoryValues } from "@/lib/api/tableCategoryValue";
 import { CalculationBuilder } from "./CalculationBuilder";
 
 export interface SelectedItemsDetailInputConfigPanelProps {
   config: SelectedItemsDetailInputConfig;
   onChange: (config: Partial<SelectedItemsDetailInputConfig>) => void;
-  sourceTableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string }>; // 🆕 원본 테이블 컬럼
-  targetTableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string }>; // 🆕 대상 테이블 컬럼
+  sourceTableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string; inputType?: string }>; // 🆕 원본 테이블 컬럼 (inputType 추가)
+  targetTableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string; inputType?: string; codeCategory?: string }>; // 🆕 대상 테이블 컬럼 (inputType, codeCategory 추가)
   allTables?: Array<{ tableName: string; displayName?: string }>;
   screenTableName?: string; // 🆕 현재 화면의 테이블명 (자동 설정용)
   onSourceTableChange?: (tableName: string) => void; // 🆕 원본 테이블 변경 콜백
@@ -53,9 +53,15 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
   // 🆕 그룹 입력값을 위한 로컬 상태 (포커스 유지용)
   const [localGroupInputs, setLocalGroupInputs] = useState<Record<string, { id?: string; title?: string; description?: string; order?: number }>>({});
   
+  // 🆕 필드 입력값을 위한 로컬 상태 (포커스 유지용)
+  const [localFieldInputs, setLocalFieldInputs] = useState<Record<number, { label?: string; placeholder?: string }>>({});
+  
   // 🆕 표시 항목의 입력값을 위한 로컬 상태 (포커스 유지용)
   const [localDisplayItemInputs, setLocalDisplayItemInputs] = useState<Record<string, Record<number, { label?: string; value?: string }>>>({});
   
+  // 🆕 부모 데이터 매핑의 기본값 입력을 위한 로컬 상태 (포커스 유지용)
+  const [localMappingInputs, setLocalMappingInputs] = useState<Record<number, string>>({});
+  
   
   // 🆕 그룹별 펼침/접힘 상태
   const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({});
@@ -63,6 +69,13 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
   // 🆕 그룹별 표시 항목 설정 펼침/접힘 상태
   const [expandedDisplayItems, setExpandedDisplayItems] = useState<Record<string, boolean>>({});
   
+  // 🆕 카테고리 매핑 아코디언 펼침/접힘 상태
+  const [expandedCategoryMappings, setExpandedCategoryMappings] = useState<Record<string, boolean>>({
+    discountType: false,
+    roundingType: false,
+    roundingUnit: false,
+  });
+  
   // 🆕 원본 테이블 선택 상태
   const [sourceTableSelectOpen, setSourceTableSelectOpen] = useState(false);
   const [sourceTableSearchValue, setSourceTableSearchValue] = useState("");
@@ -83,8 +96,8 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
   const [autoFillTableColumns, setAutoFillTableColumns] = useState<Record<number, Array<{ columnName: string; columnLabel?: string; dataType?: string }>>>({});
 
   // 🆕 원본/대상 테이블 컬럼 상태 (내부에서 로드)
-  const [loadedSourceTableColumns, setLoadedSourceTableColumns] = useState<Array<{ columnName: string; columnLabel?: string; dataType?: string }>>([]);
-  const [loadedTargetTableColumns, setLoadedTargetTableColumns] = useState<Array<{ columnName: string; columnLabel?: string; dataType?: string }>>([]);
+  const [loadedSourceTableColumns, setLoadedSourceTableColumns] = useState<Array<{ columnName: string; columnLabel?: string; dataType?: string; inputType?: string }>>([]);
+  const [loadedTargetTableColumns, setLoadedTargetTableColumns] = useState<Array<{ columnName: string; columnLabel?: string; dataType?: string; inputType?: string; codeCategory?: string }>>([]);
 
   // 🆕 원본 테이블 컬럼 로드
   useEffect(() => {
@@ -105,6 +118,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
             columnName: col.columnName,
             columnLabel: col.displayName || col.columnLabel || col.columnName,
             dataType: col.dataType,
+            inputType: col.inputType, // 🔧 inputType 추가
           })));
           console.log("✅ 원본 테이블 컬럼 로드 성공:", columns.length);
         }
@@ -135,6 +149,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
             columnName: col.columnName,
             columnLabel: col.displayName || col.columnLabel || col.columnName,
             dataType: col.dataType,
+            inputType: col.inputType, // 🔧 inputType 추가
           })));
           console.log("✅ 대상 테이블 컬럼 로드 성공:", columns.length);
         }
@@ -165,6 +180,18 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
       });
       return newInputs;
     });
+
+    // 🔧 표시 항목이 있는 그룹은 아코디언을 열린 상태로 초기화
+    setExpandedDisplayItems(prev => {
+      const newExpanded = { ...prev };
+      (config.fieldGroups || []).forEach(group => {
+        // 이미 상태가 있으면 유지, 없으면 displayItems가 있을 때만 열기
+        if (!(group.id in newExpanded) && group.displayItems && group.displayItems.length > 0) {
+          newExpanded[group.id] = true;
+        }
+      });
+      return newExpanded;
+    });
   }, [config.fieldGroups]);
 
   // 🆕 초기 렌더링 시 기존 필드들의 autoFillFromTable 컬럼 로드
@@ -238,6 +265,36 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
     }
   };
 
+  // 🆕 저장된 부모 데이터 매핑의 컬럼 자동 로드
+  useEffect(() => {
+    const loadSavedMappingColumns = async () => {
+      if (!config.parentDataMapping || config.parentDataMapping.length === 0) {
+        console.log("📭 [부모 데이터 매핑] 매핑이 없습니다");
+        return;
+      }
+
+      console.log("🔍 [부모 데이터 매핑] 저장된 매핑 컬럼 자동 로드 시작:", config.parentDataMapping.length);
+      
+      for (let i = 0; i < config.parentDataMapping.length; i++) {
+        const mapping = config.parentDataMapping[i];
+        
+        // 이미 로드된 컬럼이 있으면 스킵
+        if (mappingSourceColumns[i] && mappingSourceColumns[i].length > 0) {
+          console.log(`⏭️ [매핑 ${i}] 이미 로드된 컬럼이 있음`);
+          continue;
+        }
+        
+        // 소스 테이블이 선택되어 있으면 컬럼 로드
+        if (mapping.sourceTable) {
+          console.log(`📡 [매핑 ${i}] 소스 테이블 컬럼 자동 로드:`, mapping.sourceTable);
+          await loadMappingSourceColumns(mapping.sourceTable, i);
+        }
+      }
+    };
+
+    loadSavedMappingColumns();
+  }, [config.parentDataMapping]);
+
   // 2레벨 메뉴 목록 로드
   useEffect(() => {
     const loadMenus = async () => {
@@ -251,26 +308,39 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
 
   // 메뉴 선택 시 카테고리 목록 로드
   const handleMenuSelect = async (menuObjid: number, fieldType: "discountType" | "roundingType" | "roundingUnit") => {
-    if (!config.targetTable) {
-      console.warn("⚠️ targetTable이 설정되지 않았습니다");
-      return;
-    }
+    console.log("🔍 [handleMenuSelect] 시작", { menuObjid, fieldType });
     
-    console.log("🔍 카테고리 목록 로드 시작", { targetTable: config.targetTable, menuObjid, fieldType });
+    // 🔧 1단계: 아코디언 먼저 열기 (리렌더링 전에)
+    setExpandedCategoryMappings(prev => {
+      const newState = { ...prev, [fieldType]: true };
+      console.log("🔄 [handleMenuSelect] 아코디언 열기:", newState);
+      return newState;
+    });
     
-    const response = await getCategoryColumns(config.targetTable);
+    // 🔧 2단계: 메뉴별 카테고리 컬럼 API 호출
+    const response = await getCategoryColumnsByMenu(menuObjid);
     
-    console.log("📥 getCategoryColumns 응답:", response);
+    console.log("📥 [handleMenuSelect] API 응답:", response);
     
     if (response.success && response.data) {
-      console.log("✅ 카테고리 컬럼 데이터:", response.data);
-      setCategoryColumns(prev => ({ ...prev, [fieldType]: response.data }));
+      console.log("✅ [handleMenuSelect] 카테고리 컬럼 데이터:", {
+        fieldType,
+        columns: response.data,
+        count: response.data.length
+      });
+      
+      // 카테고리 컬럼 상태 업데이트
+      setCategoryColumns(prev => {
+        const newState = { ...prev, [fieldType]: response.data };
+        console.log("🔄 [handleMenuSelect] categoryColumns 업데이트:", newState);
+        return newState;
+      });
     } else {
-      console.error("❌ 카테고리 컬럼 로드 실패:", response);
+      console.error("❌ [handleMenuSelect] 카테고리 컬럼 로드 실패:", response);
     }
     
-    // valueMapping 업데이트
-    handleChange("autoCalculation", {
+    // 🔧 3단계: valueMapping 업데이트 (마지막에)
+    const newConfig = {
       ...config.autoCalculation,
       valueMapping: {
         ...config.autoCalculation.valueMapping,
@@ -279,20 +349,50 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
           [fieldType]: menuObjid,
         },
       },
-    });
+    };
+    
+    console.log("🔄 [handleMenuSelect] valueMapping 업데이트:", newConfig);
+    handleChange("autoCalculation", newConfig);
   };
 
   // 카테고리 선택 시 카테고리 값 목록 로드
   const handleCategorySelect = async (columnName: string, menuObjid: number, fieldType: "discountType" | "roundingType" | "roundingUnit") => {
-    if (!config.targetTable) return;
+    console.log("🔍 [handleCategorySelect] 시작", { columnName, menuObjid, fieldType, targetTable: config.targetTable });
     
-    const response = await getCategoryValues(config.targetTable, columnName, false, menuObjid);
-    if (response.success && response.data) {
-      setCategoryValues(prev => ({ ...prev, [fieldType]: response.data }));
+    if (!config.targetTable) {
+      console.warn("⚠️ [handleCategorySelect] targetTable이 없습니다");
+      return;
     }
     
+    const response = await getCategoryValues(config.targetTable, columnName, false, menuObjid);
+    
+    console.log("📥 [handleCategorySelect] API 응답:", response);
+    
+    if (response.success && response.data) {
+      console.log("✅ [handleCategorySelect] 카테고리 값 데이터:", {
+        fieldType,
+        values: response.data,
+        count: response.data.length
+      });
+      
+      setCategoryValues(prev => {
+        const newState = { ...prev, [fieldType]: response.data };
+        console.log("🔄 [handleCategorySelect] categoryValues 업데이트:", newState);
+        return newState;
+      });
+    } else {
+      console.error("❌ [handleCategorySelect] 카테고리 값 로드 실패:", response);
+    }
+    
+    // 🔧 카테고리 선택 시 아코디언 열기 (이미 열려있을 수도 있음)
+    setExpandedCategoryMappings(prev => {
+      const newState = { ...prev, [fieldType]: true };
+      console.log("🔄 [handleCategorySelect] 아코디언 상태:", newState);
+      return newState;
+    });
+    
     // valueMapping 업데이트
-    handleChange("autoCalculation", {
+    const newConfig = {
       ...config.autoCalculation,
       valueMapping: {
         ...config.autoCalculation.valueMapping,
@@ -301,9 +401,99 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
           [fieldType]: columnName,
         },
       },
-    });
+    };
+    
+    console.log("🔄 [handleCategorySelect] valueMapping 업데이트:", newConfig);
+    handleChange("autoCalculation", newConfig);
   };
 
+  // 🆕 저장된 설정에서 카테고리 정보 복원
+  useEffect(() => {
+    const loadSavedCategories = async () => {
+      console.log("🔍 [loadSavedCategories] useEffect 실행", {
+        hasTargetTable: !!config.targetTable,
+        hasAutoCalc: !!config.autoCalculation,
+        hasValueMapping: !!config.autoCalculation?.valueMapping
+      });
+      
+      if (!config.targetTable || !config.autoCalculation?.valueMapping) {
+        console.warn("⚠️ [loadSavedCategories] targetTable 또는 valueMapping이 없어 종료");
+        return;
+      }
+
+      const savedMenus = (config.autoCalculation.valueMapping as any)?._selectedMenus;
+      const savedCategories = (config.autoCalculation.valueMapping as any)?._selectedCategories;
+
+      console.log("🔄 [loadSavedCategories] 저장된 카테고리 설정 복원 시작:", { savedMenus, savedCategories });
+
+      // 각 필드 타입별로 저장된 카테고리 값 로드
+      const fieldTypes: Array<"discountType" | "roundingType" | "roundingUnit"> = ["discountType", "roundingType", "roundingUnit"];
+      
+      // 🔧 복원할 아코디언 상태 준비
+      const newExpandedState: Record<string, boolean> = {};
+
+      for (const fieldType of fieldTypes) {
+        const menuObjid = savedMenus?.[fieldType];
+        const columnName = savedCategories?.[fieldType];
+
+        console.log(`🔍 [loadSavedCategories] ${fieldType} 처리`, { menuObjid, columnName });
+
+        // 🔧 메뉴만 선택된 경우에도 카테고리 컬럼 로드
+        if (menuObjid) {
+          console.log(`✅ [loadSavedCategories] ${fieldType} 메뉴 발견, 카테고리 컬럼 로드 시작:`, { menuObjid });
+
+          // 🔧 메뉴가 선택되어 있으면 아코디언 열기
+          newExpandedState[fieldType] = true;
+
+          // 🔧 메뉴별 카테고리 컬럼 로드 (카테고리 선택 여부와 무관)
+          console.log(`📡 [loadSavedCategories] ${fieldType} 카테고리 컬럼 API 호출`, { menuObjid });
+          const columnsResponse = await getCategoryColumnsByMenu(menuObjid);
+          console.log(`📥 [loadSavedCategories] ${fieldType} 컬럼 응답:`, columnsResponse);
+          
+          if (columnsResponse.success && columnsResponse.data) {
+            setCategoryColumns(prev => {
+              const newState = { ...prev, [fieldType]: columnsResponse.data };
+              console.log(`🔄 [loadSavedCategories] ${fieldType} categoryColumns 업데이트:`, newState);
+              return newState;
+            });
+          } else {
+            console.error(`❌ [loadSavedCategories] ${fieldType} 컬럼 로드 실패:`, columnsResponse);
+          }
+
+          // 🔧 카테고리까지 선택된 경우에만 값 로드
+          if (columnName) {
+            console.log(`📡 [loadSavedCategories] ${fieldType} 카테고리 값 API 호출`, { columnName });
+            const valuesResponse = await getCategoryValues(config.targetTable, columnName, false, menuObjid);
+            console.log(`📥 [loadSavedCategories] ${fieldType} 값 응답:`, valuesResponse);
+            
+            if (valuesResponse.success && valuesResponse.data) {
+              console.log(`✅ [loadSavedCategories] ${fieldType} 카테고리 값:`, valuesResponse.data);
+              setCategoryValues(prev => {
+                const newState = { ...prev, [fieldType]: valuesResponse.data };
+                console.log(`🔄 [loadSavedCategories] ${fieldType} categoryValues 업데이트:`, newState);
+                return newState;
+              });
+            } else {
+              console.error(`❌ [loadSavedCategories] ${fieldType} 값 로드 실패:`, valuesResponse);
+            }
+          }
+        }
+      }
+      
+      // 🔧 저장된 설정이 있는 아코디언들 열기
+      if (Object.keys(newExpandedState).length > 0) {
+        console.log("🔓 [loadSavedCategories] 아코디언 열기:", newExpandedState);
+        setExpandedCategoryMappings(prev => {
+          const finalState = { ...prev, ...newExpandedState };
+          console.log("🔄 [loadSavedCategories] 최종 아코디언 상태:", finalState);
+          return finalState;
+        });
+      }
+    };
+
+    loadSavedCategories();
+  }, [config.targetTable, config.autoCalculation?.valueMapping]);
+
   // 🆕 초기 로드 시 screenTableName을 targetTable로 자동 설정
   React.useEffect(() => {
     if (screenTableName && !config.targetTable) {
@@ -344,10 +534,37 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
 
   // 필드 제거
   const removeField = (index: number) => {
+    // 로컬 입력 상태에서도 제거
+    setLocalFieldInputs(prev => {
+      const newInputs = { ...prev };
+      delete newInputs[index];
+      return newInputs;
+    });
     handleFieldsChange(localFields.filter((_, i) => i !== index));
   };
 
-  // 필드 수정
+  // 🆕 로컬 필드 입력 업데이트 (포커스 유지용)
+  const updateFieldLocal = (index: number, field: 'label' | 'placeholder', value: string) => {
+    setLocalFieldInputs(prev => ({
+      ...prev,
+      [index]: {
+        ...prev[index],
+        [field]: value
+      }
+    }));
+  };
+
+  // 🆕 실제 필드 데이터 업데이트 (onBlur 시 호출)
+  const handleFieldBlur = (index: number) => {
+    const localInput = localFieldInputs[index];
+    if (localInput) {
+      const newFields = [...localFields];
+      newFields[index] = { ...newFields[index], ...localInput };
+      handleFieldsChange(newFields);
+    }
+  };
+
+  // 필드 수정 (Switch 같은 즉시 업데이트가 필요한 경우에만 사용)
   const updateField = (index: number, updates: Partial<AdditionalFieldDefinition>) => {
     const newFields = [...localFields];
     newFields[index] = { ...newFields[index], ...updates };
@@ -386,14 +603,30 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
     handleFieldGroupsChange(localFieldGroups.filter(g => g.id !== groupId));
   };
 
-  const updateFieldGroup = (groupId: string, updates: Partial<FieldGroup>) => {
-    // 1. 로컬 입력 상태 즉시 업데이트 (포커스 유지)
+  // 🆕 로컬 그룹 입력 업데이트 (포커스 유지용)
+  const updateGroupLocal = (groupId: string, field: 'id' | 'title' | 'description' | 'order', value: any) => {
     setLocalGroupInputs(prev => ({
       ...prev,
-      [groupId]: { ...prev[groupId], ...updates }
+      [groupId]: {
+        ...prev[groupId],
+        [field]: value
+      }
     }));
-    
-    // 2. 실제 그룹 데이터 업데이트
+  };
+
+  // 🆕 실제 그룹 데이터 업데이트 (onBlur 시 호출)
+  const handleGroupBlur = (groupId: string) => {
+    const localInput = localGroupInputs[groupId];
+    if (localInput) {
+      const newGroups = localFieldGroups.map(g => 
+        g.id === groupId ? { ...g, ...localInput } : g
+      );
+      handleFieldGroupsChange(newGroups);
+    }
+  };
+
+  const updateFieldGroup = (groupId: string, updates: Partial<FieldGroup>) => {
+    // 2. 실제 그룹 데이터 업데이트 (Switch 같은 즉시 업데이트가 필요한 경우에만 사용)
     const newGroups = localFieldGroups.map(g => 
       g.id === groupId ? { ...g, ...updates } : g
     );
@@ -467,6 +700,12 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
       return g;
     });
     
+    // 🔧 아이템 추가 시 해당 그룹의 아코디언을 열린 상태로 유지
+    setExpandedDisplayItems(prev => ({
+      ...prev,
+      [groupId]: true
+    }));
+    
     setLocalFieldGroups(updatedGroups);
     handleChange("fieldGroups", updatedGroups);
   };
@@ -796,8 +1035,9 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                 <div className="space-y-1">
                   <Label className="text-[10px] sm:text-xs">라벨</Label>
                   <Input
-                    value={field.label}
-                    onChange={(e) => updateField(index, { label: e.target.value })}
+                    value={localFieldInputs[index]?.label !== undefined ? localFieldInputs[index].label : field.label}
+                    onChange={(e) => updateFieldLocal(index, 'label', e.target.value)}
+                    onBlur={() => handleFieldBlur(index)}
                     placeholder="필드 라벨"
                     className="h-6 w-full text-[10px] sm:h-7 sm:text-xs"
                   />
@@ -821,8 +1061,9 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                 <div className="space-y-1">
                   <Label className="text-[10px] sm:text-xs">Placeholder</Label>
                   <Input
-                    value={field.placeholder || ""}
-                    onChange={(e) => updateField(index, { placeholder: e.target.value })}
+                    value={localFieldInputs[index]?.placeholder !== undefined ? localFieldInputs[index].placeholder : (field.placeholder || "")}
+                    onChange={(e) => updateFieldLocal(index, 'placeholder', e.target.value)}
+                    onBlur={() => handleFieldBlur(index)}
                     placeholder="입력 안내"
                     className="h-6 w-full text-[10px] sm:h-7 sm:text-xs"
                   />
@@ -1078,14 +1319,8 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                 <Label className="text-[10px] sm:text-xs">그룹 ID</Label>
                 <Input
                   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 });
-                  }}
+                  onChange={(e) => updateGroupLocal(group.id, 'id', e.target.value)}
+                  onBlur={() => handleGroupBlur(group.id)}
                   className="h-7 text-xs sm:h-8 sm:text-sm"
                   placeholder="group_customer"
                 />
@@ -1096,14 +1331,8 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                 <Label className="text-[10px] sm:text-xs">그룹 제목</Label>
                 <Input
                   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 });
-                  }}
+                  onChange={(e) => updateGroupLocal(group.id, 'title', e.target.value)}
+                  onBlur={() => handleGroupBlur(group.id)}
                   className="h-7 text-xs sm:h-8 sm:text-sm"
                   placeholder="거래처 정보"
                 />
@@ -1114,14 +1343,8 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                 <Label className="text-[10px] sm:text-xs">그룹 설명 (선택사항)</Label>
                 <Input
                   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 });
-                  }}
+                  onChange={(e) => updateGroupLocal(group.id, 'description', e.target.value)}
+                  onBlur={() => handleGroupBlur(group.id)}
                   className="h-7 text-xs sm:h-8 sm:text-sm"
                   placeholder="거래처 관련 정보를 입력합니다"
                 />
@@ -1133,14 +1356,8 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                 <Input
                   type="number"
                   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 });
-                  }}
+                  onChange={(e) => updateGroupLocal(group.id, 'order', parseInt(e.target.value) || 0)}
+                  onBlur={() => handleGroupBlur(group.id)}
                   className="h-7 text-xs sm:h-8 sm:text-sm"
                   min="0"
                 />
@@ -1236,8 +1453,30 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                         {/* 아이콘 설정 */}
                         {item.type === "icon" && (
                           <Input
-                            value={item.icon || ""}
-                            onChange={(e) => updateDisplayItemInGroup(group.id, itemIndex, { icon: e.target.value })}
+                            value={
+                              localDisplayItemInputs[group.id]?.[itemIndex]?.value !== undefined
+                                ? localDisplayItemInputs[group.id][itemIndex].value
+                                : item.icon || ""
+                            }
+                            onChange={(e) => {
+                              const newValue = e.target.value;
+                              setLocalDisplayItemInputs(prev => ({
+                                ...prev,
+                                [group.id]: {
+                                  ...prev[group.id],
+                                  [itemIndex]: {
+                                    ...prev[group.id]?.[itemIndex],
+                                    value: newValue
+                                  }
+                                }
+                              }));
+                            }}
+                            onBlur={() => {
+                              const localValue = localDisplayItemInputs[group.id]?.[itemIndex]?.value;
+                              if (localValue !== undefined) {
+                                updateDisplayItemInGroup(group.id, itemIndex, { icon: localValue });
+                              }
+                            }}
                             placeholder="Building"
                             className="h-6 text-[9px] sm:text-[10px]"
                           />
@@ -1264,8 +1503,12 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                                   }
                                 }
                               }));
-                              // 실제 상태 업데이트
-                              updateDisplayItemInGroup(group.id, itemIndex, { value: newValue });
+                            }}
+                            onBlur={() => {
+                              const localValue = localDisplayItemInputs[group.id]?.[itemIndex]?.value;
+                              if (localValue !== undefined) {
+                                updateDisplayItemInGroup(group.id, itemIndex, { value: localValue });
+                              }
                             }}
                             placeholder="| , / , -"
                             className="h-6 text-[9px] sm:text-[10px]"
@@ -1312,8 +1555,12 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                                     }
                                   }
                                 }));
-                                // 실제 상태 업데이트
-                                updateDisplayItemInGroup(group.id, itemIndex, { label: newValue });
+                              }}
+                              onBlur={() => {
+                                const localValue = localDisplayItemInputs[group.id]?.[itemIndex]?.label;
+                                if (localValue !== undefined) {
+                                  updateDisplayItemInGroup(group.id, itemIndex, { label: localValue });
+                                }
                               }}
                               placeholder="라벨 (예: 거래처:)"
                               className="h-6 w-full text-[9px] sm:text-[10px]"
@@ -1354,8 +1601,30 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                             {/* 기본값 */}
                             {item.emptyBehavior === "default" && (
                               <Input
-                                value={item.defaultValue || ""}
-                                onChange={(e) => updateDisplayItemInGroup(group.id, itemIndex, { defaultValue: e.target.value })}
+                                value={
+                                  localDisplayItemInputs[group.id]?.[itemIndex]?.value !== undefined
+                                    ? localDisplayItemInputs[group.id][itemIndex].value
+                                    : item.defaultValue || ""
+                                }
+                                onChange={(e) => {
+                                  const newValue = e.target.value;
+                                  setLocalDisplayItemInputs(prev => ({
+                                    ...prev,
+                                    [group.id]: {
+                                      ...prev[group.id],
+                                      [itemIndex]: {
+                                        ...prev[group.id]?.[itemIndex],
+                                        value: newValue
+                                      }
+                                    }
+                                  }));
+                                }}
+                                onBlur={() => {
+                                  const localValue = localDisplayItemInputs[group.id]?.[itemIndex]?.value;
+                                  if (localValue !== undefined) {
+                                    updateDisplayItemInGroup(group.id, itemIndex, { defaultValue: localValue });
+                                  }
+                                }}
                                 placeholder="미입력"
                                 className="h-6 w-full text-[9px] sm:text-[10px]"
                               />
@@ -1670,14 +1939,21 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
               <Label className="text-[10px] font-semibold sm:text-xs">카테고리 값 매핑</Label>
               
               {/* 할인 방식 매핑 */}
-              <Collapsible>
+              <Collapsible
+                open={expandedCategoryMappings.discountType}
+                onOpenChange={(open) => setExpandedCategoryMappings(prev => ({ ...prev, discountType: open }))}
+              >
                 <CollapsibleTrigger asChild>
                   <Button
                     variant="ghost"
                     className="flex w-full items-center justify-between p-2 hover:bg-muted"
                   >
                     <span className="text-xs font-medium">할인 방식 연산 매핑</span>
-                    <ChevronDown className="h-4 w-4" />
+                    {expandedCategoryMappings.discountType ? (
+                      <ChevronDown className="h-4 w-4" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4" />
+                    )}
                   </Button>
                 </CollapsibleTrigger>
                 <CollapsibleContent className="space-y-2 pt-2">
@@ -1702,30 +1978,40 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                   </div>
 
                   {/* 2단계: 카테고리 선택 */}
-                  {(config.autoCalculation.valueMapping as any)?._selectedMenus?.discountType && (
-                    <div className="space-y-1">
-                      <Label className="text-[9px] sm:text-[10px]">2단계: 카테고리 선택</Label>
-                      <Select
-                        value={(config.autoCalculation.valueMapping as any)?._selectedCategories?.discountType || ""}
-                        onValueChange={(value) => handleCategorySelect(
-                          value,
-                          (config.autoCalculation.valueMapping as any)._selectedMenus.discountType,
-                          "discountType"
-                        )}
-                      >
-                        <SelectTrigger className="h-7 text-xs">
-                          <SelectValue placeholder="카테고리 선택" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {(categoryColumns.discountType || []).map((col: any) => (
-                            <SelectItem key={col.columnName} value={col.columnName}>
-                              {col.columnLabel || col.columnName}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  )}
+                  {(() => {
+                    const hasSelectedMenu = !!(config.autoCalculation.valueMapping as any)?._selectedMenus?.discountType;
+                    const columns = categoryColumns.discountType || [];
+                    console.log("🎨 [렌더링] 2단계 카테고리 선택", {
+                      hasSelectedMenu,
+                      columns,
+                      columnsCount: columns.length,
+                      categoryColumnsState: categoryColumns
+                    });
+                    return hasSelectedMenu ? (
+                      <div className="space-y-1">
+                        <Label className="text-[9px] sm:text-[10px]">2단계: 카테고리 선택</Label>
+                        <Select
+                          value={(config.autoCalculation.valueMapping as any)?._selectedCategories?.discountType || ""}
+                          onValueChange={(value) => handleCategorySelect(
+                            value,
+                            (config.autoCalculation.valueMapping as any)._selectedMenus.discountType,
+                            "discountType"
+                          )}
+                        >
+                          <SelectTrigger className="h-7 text-xs">
+                            <SelectValue placeholder="카테고리 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {columns.map((col: any) => (
+                              <SelectItem key={col.columnName} value={col.columnName}>
+                                {col.columnLabel || col.columnName}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    ) : null;
+                  })()}
 
                   {/* 3단계: 값 매핑 */}
                   {(config.autoCalculation.valueMapping as any)?._selectedCategories?.discountType && (
@@ -1780,14 +2066,21 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
               </Collapsible>
 
               {/* 반올림 방식 매핑 */}
-              <Collapsible>
+              <Collapsible
+                open={expandedCategoryMappings.roundingType}
+                onOpenChange={(open) => setExpandedCategoryMappings(prev => ({ ...prev, roundingType: open }))}
+              >
                 <CollapsibleTrigger asChild>
                   <Button
                     variant="ghost"
                     className="flex w-full items-center justify-between p-2 hover:bg-muted"
                   >
                     <span className="text-xs font-medium">반올림 방식 연산 매핑</span>
-                    <ChevronDown className="h-4 w-4" />
+                    {expandedCategoryMappings.roundingType ? (
+                      <ChevronDown className="h-4 w-4" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4" />
+                    )}
                   </Button>
                 </CollapsibleTrigger>
                 <CollapsibleContent className="space-y-2 pt-2">
@@ -1890,14 +2183,21 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
               </Collapsible>
 
               {/* 반올림 단위 매핑 */}
-              <Collapsible>
+              <Collapsible
+                open={expandedCategoryMappings.roundingUnit}
+                onOpenChange={(open) => setExpandedCategoryMappings(prev => ({ ...prev, roundingUnit: open }))}
+              >
                 <CollapsibleTrigger asChild>
                   <Button
                     variant="ghost"
                     className="flex w-full items-center justify-between p-2 hover:bg-muted"
                   >
                     <span className="text-xs font-medium">반올림 단위 값 매핑</span>
-                    <ChevronDown className="h-4 w-4" />
+                    {expandedCategoryMappings.roundingUnit ? (
+                      <ChevronDown className="h-4 w-4" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4" />
+                    )}
                   </Button>
                 </CollapsibleTrigger>
                 <CollapsibleContent className="space-y-2 pt-2">
@@ -2235,10 +2535,10 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                         variant="outline"
                         role="combobox"
                         className="h-7 w-full justify-between text-xs font-normal"
-                        disabled={targetTableColumns.length === 0}
+                        disabled={!config.targetTable || loadedTargetTableColumns.length === 0}
                       >
                         {mapping.targetField
-                          ? targetTableColumns.find((c) => c.columnName === mapping.targetField)?.columnLabel ||
+                          ? loadedTargetTableColumns.find((c) => c.columnName === mapping.targetField)?.columnLabel ||
                             mapping.targetField
                           : "저장 테이블 컬럼 선택"}
                         <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
@@ -2248,13 +2548,15 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                       <Command>
                         <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
                         <CommandList>
-                          {targetTableColumns.length === 0 ? (
-                            <CommandEmpty className="text-xs">저장 테이블을 먼저 선택하세요</CommandEmpty>
+                          {!config.targetTable ? (
+                            <CommandEmpty className="text-xs">저장 대상 테이블을 먼저 선택하세요</CommandEmpty>
+                          ) : loadedTargetTableColumns.length === 0 ? (
+                            <CommandEmpty className="text-xs">컬럼 로딩 중...</CommandEmpty>
                           ) : (
                             <>
                               <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
                               <CommandGroup>
-                                {targetTableColumns.map((col) => {
+                                {loadedTargetTableColumns.map((col) => {
                                   const searchValue = `${col.columnLabel || col.columnName} ${col.columnName} ${col.dataType || ""}`.toLowerCase();
                                   return (
                                     <CommandItem
@@ -2276,7 +2578,9 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                                       <div className="flex flex-col">
                                         <span>{col.columnLabel || col.columnName}</span>
                                         {col.dataType && (
-                                          <span className="text-[10px] text-muted-foreground">{col.dataType}</span>
+                                          <span className="text-[10px] text-muted-foreground">
+                                            {col.dataType}
+                                          </span>
                                         )}
                                       </div>
                                     </CommandItem>
@@ -2289,17 +2593,27 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                       </Command>
                     </PopoverContent>
                   </Popover>
+                  <p className="text-[8px] text-muted-foreground">
+                    현재 화면의 저장 대상 테이블 ({config.targetTable || "미선택"})의 컬럼
+                  </p>
                 </div>
 
                 {/* 기본값 (선택사항) */}
                 <div className="space-y-1">
                   <Label className="text-[9px] sm:text-[10px]">기본값 (선택사항)</Label>
                   <Input
-                    value={mapping.defaultValue || ""}
+                    value={localMappingInputs[index] !== undefined ? localMappingInputs[index] : mapping.defaultValue || ""}
                     onChange={(e) => {
-                      const updated = [...(config.parentDataMapping || [])];
-                      updated[index] = { ...updated[index], defaultValue: e.target.value };
-                      handleChange("parentDataMapping", updated);
+                      const newValue = e.target.value;
+                      setLocalMappingInputs(prev => ({ ...prev, [index]: newValue }));
+                    }}
+                    onBlur={() => {
+                      const currentValue = localMappingInputs[index];
+                      if (currentValue !== undefined) {
+                        const updated = [...(config.parentDataMapping || [])];
+                        updated[index] = { ...updated[index], defaultValue: currentValue || undefined };
+                        handleChange("parentDataMapping", updated);
+                      }
                     }}
                     placeholder="값이 없을 때 사용할 기본값"
                     className="h-7 text-xs"
@@ -2307,46 +2621,24 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                 </div>
 
                 {/* 삭제 버튼 */}
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  className="h-6 w-full text-xs text-destructive hover:text-destructive"
-                  onClick={() => {
-                    const updated = (config.parentDataMapping || []).filter((_, i) => i !== index);
-                    handleChange("parentDataMapping", updated);
-                  }}
-                >
-                  <X className="mr-1 h-3 w-3" />
-                  삭제
-                </Button>
+                <div className="flex justify-end pt-2">
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className="h-7 text-xs text-destructive hover:bg-destructive/10 hover:text-destructive"
+                    onClick={() => {
+                      const updated = (config.parentDataMapping || []).filter((_, i) => i !== index);
+                      handleChange("parentDataMapping", updated);
+                    }}
+                  >
+                    <X className="mr-1 h-3 w-3" />
+                    삭제
+                  </Button>
+                </div>
               </div>
             </Card>
           ))}
         </div>
-
-        {(config.parentDataMapping || []).length === 0 && (
-          <p className="text-center text-[10px] text-muted-foreground py-4">
-            매핑 설정이 없습니다. "추가" 버튼을 클릭하여 설정하세요.
-          </p>
-        )}
-
-          {/* 예시 */}
-          <div className="rounded-lg bg-green-50 p-2 text-xs">
-            <p className="mb-1 text-[10px] font-medium text-green-900">💡 예시</p>
-            <div className="space-y-1 text-[9px] text-green-700">
-              <p><strong>매핑 1: 거래처 ID</strong></p>
-              <p className="ml-2">• 소스 테이블: <code className="bg-green-100 px-1">customer_mng</code></p>
-              <p className="ml-2">• 원본 필드: <code className="bg-green-100 px-1">id</code> → 저장 필드: <code className="bg-green-100 px-1">customer_id</code></p>
-              
-              <p className="mt-1"><strong>매핑 2: 품목 ID</strong></p>
-              <p className="ml-2">• 소스 테이블: <code className="bg-green-100 px-1">item_info</code></p>
-              <p className="ml-2">• 원본 필드: <code className="bg-green-100 px-1">id</code> → 저장 필드: <code className="bg-green-100 px-1">item_id</code></p>
-              
-              <p className="mt-1"><strong>매핑 3: 품목 기준단가</strong></p>
-              <p className="ml-2">• 소스 테이블: <code className="bg-green-100 px-1">item_info</code></p>
-              <p className="ml-2">• 원본 필드: <code className="bg-green-100 px-1">standard_price</code> → 저장 필드: <code className="bg-green-100 px-1">base_price</code></p>
-            </div>
-          </div>
       </div>
 
       {/* 사용 예시 */}
@@ -2363,3 +2655,5 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
 };
 
 SelectedItemsDetailInputConfigPanel.displayName = "SelectedItemsDetailInputConfigPanel";
+
+export default SelectedItemsDetailInputConfigPanel;
diff --git a/동적_테이블_접근_시스템_개선_완료.md b/동적_테이블_접근_시스템_개선_완료.md
index da8f5e82..4bbe851f 100644
--- a/동적_테이블_접근_시스템_개선_완료.md
+++ b/동적_테이블_접근_시스템_개선_완료.md
@@ -378,3 +378,4 @@ interface TablePermission {
 
 
 
+