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:
parent
dd568b7235
commit
fc16f27640
|
|
@ -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) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue