From fc16f2764076a3c54d0d272686579b0d7c0ef2d8 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 20 Nov 2025 18:35:48 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20select-basic=EC=97=90=20=EC=B9=B4?=
 =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC(category)=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EC=98=B5=EC=85=98=20=EB=A1=9C=EB=94=A9=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

문제:
- select-basic이 webType='category'일 때 옵션이 안 보임
- CATEGORY_218152 같은 코드값만 표시됨
- 체크박스는 보이지만 라벨이 비어있음

원인:
- select-basic은 useCodeOptions만 사용 (code 타입용)
- category 타입은 getCategoryValues API 필요

해결:
1. categoryOptions 상태 추가
2. webType === 'category'일 때 getCategoryValues 호출
3. getAllOptions에 categoryOptions 포함
4. 로딩 상태에 isLoadingCategories 추가

디버깅:
- 카테고리 로딩 시작/완료 로그
- API 응답 로그
- 최종 allOptions 로그 추가

다음 단계:
- 콘솔에서 categoryOptions가 제대로 로드되는지 확인
---
 .../select-basic/SelectBasicComponent.tsx     | 65 ++++++++++++++++++-
 1 file changed, 62 insertions(+), 3 deletions(-)

diff --git a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
index 9f151509..0e438da6 100644
--- a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
+++ b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
@@ -138,6 +138,53 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
     isFetching,
   } = useCodeOptions(codeCategory, isCodeCategoryValid, menuObjid);
 
+  // 🆕 카테고리 타입 (category webType)을 위한 옵션 로딩
+  const [categoryOptions, setCategoryOptions] = useState<Option[]>([]);
+  const [isLoadingCategories, setIsLoadingCategories] = useState(false);
+
+  useEffect(() => {
+    if (webType === "category" && component.tableName && component.columnName) {
+      console.log("🔍 [SelectBasic] 카테고리 값 로딩 시작:", {
+        tableName: component.tableName,
+        columnName: component.columnName,
+        webType,
+      });
+      
+      setIsLoadingCategories(true);
+      
+      import("@/lib/api/tableCategoryValue").then(({ getCategoryValues }) => {
+        getCategoryValues(component.tableName!, component.columnName!)
+          .then((response) => {
+            console.log("🔍 [SelectBasic] 카테고리 API 응답:", response);
+            
+            if (response.success && response.data) {
+              const activeValues = response.data.filter((v) => v.isActive !== false);
+              const options = activeValues.map((v) => ({
+                value: v.categoryValue,
+                label: v.categoryLabel || v.categoryValue,
+              }));
+              
+              console.log("✅ [SelectBasic] 카테고리 옵션 설정:", {
+                activeValuesCount: activeValues.length,
+                options,
+                sampleOption: options[0],
+              });
+              
+              setCategoryOptions(options);
+            } else {
+              console.error("❌ [SelectBasic] 카테고리 응답 실패:", response);
+            }
+          })
+          .catch((error) => {
+            console.error("❌ [SelectBasic] 카테고리 값 조회 실패:", error);
+          })
+          .finally(() => {
+            setIsLoadingCategories(false);
+          });
+      });
+    }
+  }, [webType, component.tableName, component.columnName]);
+
   // 디버깅: menuObjid가 제대로 전달되는지 확인
   useEffect(() => {
     if (codeCategory && codeCategory !== "none") {
@@ -176,7 +223,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   useEffect(() => {
     const getAllOptions = () => {
       const configOptions = config.options || [];
-      return [...codeOptions, ...configOptions];
+      return [...codeOptions, ...categoryOptions, ...configOptions];
     };
 
     const options = getAllOptions();
@@ -252,12 +299,24 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   // 모든 옵션 가져오기
   const getAllOptions = () => {
     const configOptions = config.options || [];
-    return [...codeOptions, ...configOptions];
+    return [...codeOptions, ...categoryOptions, ...configOptions];
   };
 
   const allOptions = getAllOptions();
   const placeholder = componentConfig.placeholder || "선택하세요";
 
+  // 🔍 디버깅: 최종 옵션 확인
+  useEffect(() => {
+    if (webType === "category" && allOptions.length > 0) {
+      console.log("🔍 [SelectBasic] 최종 allOptions:", {
+        count: allOptions.length,
+        categoryOptionsCount: categoryOptions.length,
+        codeOptionsCount: codeOptions.length,
+        sampleOptions: allOptions.slice(0, 3),
+      });
+    }
+  }, [webType, allOptions.length, categoryOptions.length, codeOptions.length]);
+
   // DOM props에서 React 전용 props 필터링
   const {
     component: _component,
@@ -590,7 +649,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
           </div>
           {isOpen && !isDesignMode && (
             <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
-              {isLoadingCodes ? (
+              {(isLoadingCodes || isLoadingCategories) ? (
                 <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
               ) : allOptions.length > 0 ? (
                 allOptions.map((option, index) => {