diff --git a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx index c2d4bcb3..7e905912 100644 --- a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx +++ b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx @@ -55,6 +55,25 @@ const SelectBasicComponent: React.FC = ({ // webTypeConfig 또는 componentConfig 사용 (DynamicWebTypeRenderer 호환성) const config = (props as any).webTypeConfig || componentConfig || {}; + // 🆕 multiple 값: props.multiple (spread된 값) > config.multiple 순서로 우선순위 + const isMultiple = (props as any).multiple ?? config?.multiple ?? false; + + // 🔍 디버깅: config 및 multiple 확인 + useEffect(() => { + console.log("🔍 [SelectBasicComponent] config 및 multiple 확인:", { + componentId: component.id, + "config (전체)": config, + "config.multiple": config?.multiple, + "props.multiple": (props as any).multiple, + "componentConfig (prop)": componentConfig, + "componentConfig.multiple": componentConfig?.multiple, + "component.componentConfig": component.componentConfig, + "component.componentConfig.multiple": component.componentConfig?.multiple, + "webTypeConfig": (props as any).webTypeConfig, + "최종 isMultiple 값": isMultiple, + }); + }, [(props as any).multiple, config?.multiple, componentConfig?.multiple, component.componentConfig?.multiple]); + // webType에 따른 세부 타입 결정 (TextInputComponent와 동일한 방식) const webType = component.componentConfig?.webType || "select"; @@ -65,7 +84,7 @@ const SelectBasicComponent: React.FC = ({ // multiselect의 경우 배열로 관리 (콤마 구분자로 파싱) const [selectedValues, setSelectedValues] = useState(() => { const initialValue = externalValue || config?.value || ""; - if (config?.multiple && typeof initialValue === "string" && initialValue) { + if (isMultiple && typeof initialValue === "string" && initialValue) { return initialValue.split(",").map(v => v.trim()).filter(v => v); } return []; @@ -124,12 +143,12 @@ const SelectBasicComponent: React.FC = ({ setSelectedValue(newValue); // 다중선택 모드인 경우 selectedValues도 업데이트 - if (config?.multiple && typeof newValue === "string" && newValue) { + if (isMultiple && typeof newValue === "string" && newValue) { const values = newValue.split(",").map(v => v.trim()).filter(v => v); setSelectedValues(values); } } - }, [externalValue, config?.value, config?.multiple]); + }, [externalValue, config?.value, isMultiple]); // ✅ React Query가 자동으로 처리하므로 복잡한 전역 상태 관리 제거 // - 캐싱: React Query가 자동 관리 (10분 staleTime, 30분 gcTime) @@ -513,7 +532,7 @@ const SelectBasicComponent: React.FC = ({ // select (기본 선택박스) // 다중선택 모드인 경우 - if (config?.multiple) { + if (isMultiple) { return (