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:
parent
c57e0218fe
commit
6ea9001a50
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue