fix: select-basic 다중선택 옵션이 실제 화면에 반영되지 않는 문제 해결

문제:
- 설정 패널에서 '다중 선택' 체크했지만 실제 화면에서 작동하지 않음
- componentConfig.multiple이 저장되었지만 컴포넌트에서 인식 못함

원인:
- DynamicComponentRenderer에서 componentConfig를 spread하여 props로 전달
- 하지만 config.multiple만 체크하고 props.multiple를 체크하지 않음

해결:
- isMultiple 변수 추가: props.multiple > config.multiple 우선순위
- 모든 다중선택 로직에서 isMultiple 사용하도록 수정
- 디버깅 로그 추가하여 각 값의 출처 확인

변경사항:
- isMultiple = props.multiple ?? config.multiple ?? false
- 초기화, 업데이트, 렌더링 로직에 isMultiple 적용
- 상세 디버깅 로그로 문제 추적 가능
This commit is contained in:
kjs 2025-11-20 18:21:09 +09:00
parent c57e0218fe
commit 6ea9001a50
1 changed files with 23 additions and 4 deletions

View File

@ -55,6 +55,25 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
// 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<SelectBasicComponentProps> = ({
// multiselect의 경우 배열로 관리 (콤마 구분자로 파싱)
const [selectedValues, setSelectedValues] = useState<string[]>(() => {
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<SelectBasicComponentProps> = ({
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<SelectBasicComponentProps> = ({
// select (기본 선택박스)
// 다중선택 모드인 경우
if (config?.multiple) {
if (isMultiple) {
return (
<div className="w-full">
<div