feat: select-basic에 카테고리(category) 타입 옵션 로딩 추가

문제:
- 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가 제대로 로드되는지 확인
This commit is contained in:
kjs 2025-11-20 18:35:48 +09:00
parent dd568b7235
commit fc16f27640
1 changed files with 62 additions and 3 deletions

View File

@ -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) => {