From 6ea9001a50187f628cae97736cfe2e731a9f6d11 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 20 Nov 2025 18:21:09 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20select-basic=20=EB=8B=A4=EC=A4=91?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EC=98=B5=EC=85=98=EC=9D=B4=20=EC=8B=A4?=
 =?UTF-8?q?=EC=A0=9C=20=ED=99=94=EB=A9=B4=EC=97=90=20=EB=B0=98=EC=98=81?=
 =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

변경사항:
- isMultiple = props.multiple ?? config.multiple ?? false
- 초기화, 업데이트, 렌더링 로직에 isMultiple 적용
- 상세 디버깅 로그로 문제 추적 가능
---
 .../select-basic/SelectBasicComponent.tsx     | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

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