오류 수정

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" />