오류 수정

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