오류 수정

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