배지 표시 수정
This commit is contained in:
parent
2e674e13d0
commit
832e80cd7f
|
|
@ -133,7 +133,7 @@ export function RoleDeleteModal({ isOpen, onClose, onSuccess, role }: RoleDelete
|
|||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<ResizableDialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
|
|
|
|||
|
|
@ -359,7 +359,7 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
|
|||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<ResizableDialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
|
|
|
|||
|
|
@ -455,83 +455,130 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
// 카테고리 값 매핑 로드
|
||||
// ========================================
|
||||
|
||||
// 카테고리 컬럼 목록 추출 (useMemo로 최적화)
|
||||
const categoryColumns = useMemo(() => {
|
||||
const cols = Object.entries(columnMeta)
|
||||
.filter(([_, meta]) => meta.inputType === "category")
|
||||
.map(([columnName, _]) => columnName);
|
||||
|
||||
console.log("🔍 [TableList] 카테고리 컬럼 추출:", {
|
||||
columnMeta,
|
||||
categoryColumns: cols,
|
||||
columnMetaKeys: Object.keys(columnMeta),
|
||||
});
|
||||
|
||||
return cols;
|
||||
}, [columnMeta]);
|
||||
|
||||
// 카테고리 매핑 로드 (columnMeta 변경 시 즉시 실행)
|
||||
useEffect(() => {
|
||||
const loadCategoryMappings = async () => {
|
||||
if (!tableConfig.selectedTable) return;
|
||||
console.log("🔄 [TableList] loadCategoryMappings 트리거:", {
|
||||
hasTable: !!tableConfig.selectedTable,
|
||||
table: tableConfig.selectedTable,
|
||||
categoryColumnsLength: categoryColumns.length,
|
||||
categoryColumns,
|
||||
columnMetaKeys: Object.keys(columnMeta),
|
||||
});
|
||||
|
||||
// columnMeta가 비어있으면 대기
|
||||
const columnMetaKeys = Object.keys(columnMeta || {});
|
||||
if (columnMetaKeys.length === 0) {
|
||||
console.log("⏳ [TableList] columnMeta 로딩 대기 중...");
|
||||
if (!tableConfig.selectedTable) {
|
||||
console.log("⏭️ [TableList] 테이블 선택 안됨, 카테고리 매핑 로드 스킵");
|
||||
return;
|
||||
}
|
||||
|
||||
if (categoryColumns.length === 0) {
|
||||
console.log("⏭️ [TableList] 카테고리 컬럼 없음, 카테고리 매핑 로드 스킵");
|
||||
setCategoryMappings({});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("🚀 [TableList] 카테고리 매핑 로드 트리거:", {
|
||||
console.log("🚀 [TableList] 카테고리 매핑 로드 시작:", {
|
||||
table: tableConfig.selectedTable,
|
||||
columnMetaKeys,
|
||||
dataLength: data.length,
|
||||
categoryColumns,
|
||||
columnMetaKeys: Object.keys(columnMeta),
|
||||
});
|
||||
|
||||
try {
|
||||
const categoryColumns = Object.entries(columnMeta)
|
||||
.filter(([_, meta]) => meta.inputType === "category")
|
||||
.map(([columnName, _]) => columnName);
|
||||
|
||||
if (categoryColumns.length === 0) {
|
||||
console.log("⚠️ [TableList] 카테고리 컬럼 없음:", {
|
||||
table: tableConfig.selectedTable,
|
||||
columnMetaKeys,
|
||||
columnMeta,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("🔄 [TableList] 카테고리 매핑 로드 시작:", {
|
||||
table: tableConfig.selectedTable,
|
||||
categoryColumns,
|
||||
dataLength: data.length,
|
||||
loading,
|
||||
});
|
||||
|
||||
const mappings: Record<string, Record<string, { label: string; color?: string }>> = {};
|
||||
|
||||
for (const columnName of categoryColumns) {
|
||||
try {
|
||||
console.log(`📡 [TableList] API 호출 시작 [${columnName}]:`, {
|
||||
url: `/table-categories/${tableConfig.selectedTable}/${columnName}/values`,
|
||||
});
|
||||
|
||||
const apiClient = (await import("@/lib/api/client")).apiClient;
|
||||
const response = await apiClient.get(`/table-categories/${tableConfig.selectedTable}/${columnName}/values`);
|
||||
|
||||
if (response.data.success && response.data.data) {
|
||||
console.log(`📡 [TableList] API 응답 [${columnName}]:`, {
|
||||
success: response.data.success,
|
||||
dataLength: response.data.data?.length,
|
||||
rawData: response.data,
|
||||
items: response.data.data,
|
||||
});
|
||||
|
||||
if (response.data.success && response.data.data && Array.isArray(response.data.data)) {
|
||||
const mapping: Record<string, { label: string; color?: string }> = {};
|
||||
|
||||
response.data.data.forEach((item: any) => {
|
||||
mapping[item.valueCode] = {
|
||||
// valueCode를 문자열로 변환하여 키로 사용
|
||||
const key = String(item.valueCode);
|
||||
mapping[key] = {
|
||||
label: item.valueLabel,
|
||||
color: item.color,
|
||||
};
|
||||
console.log(` 🔑 [${columnName}] "${key}" => "${item.valueLabel}" (색상: ${item.color})`);
|
||||
});
|
||||
|
||||
if (Object.keys(mapping).length > 0) {
|
||||
mappings[columnName] = mapping;
|
||||
console.log(`✅ [TableList] 카테고리 매핑 로드 완료 [${columnName}]:`, {
|
||||
columnName,
|
||||
mappingCount: Object.keys(mapping).length,
|
||||
mappingKeys: Object.keys(mapping),
|
||||
mapping,
|
||||
});
|
||||
} else {
|
||||
console.warn(`⚠️ [TableList] 매핑 데이터가 비어있음 [${columnName}]`);
|
||||
}
|
||||
} else {
|
||||
console.warn(`⚠️ [TableList] 카테고리 값 없음 [${columnName}]:`, {
|
||||
success: response.data.success,
|
||||
hasData: !!response.data.data,
|
||||
isArray: Array.isArray(response.data.data),
|
||||
response: response.data,
|
||||
});
|
||||
mappings[columnName] = mapping;
|
||||
console.log(`✅ [TableList] 카테고리 매핑 로드 [${columnName}]:`, mapping);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`❌ [TableList] 카테고리 값 로드 실패 [${columnName}]:`, error);
|
||||
} catch (error: any) {
|
||||
console.error(`❌ [TableList] 카테고리 값 로드 실패 [${columnName}]:`, {
|
||||
error: error.message,
|
||||
stack: error.stack,
|
||||
response: error.response?.data,
|
||||
status: error.response?.status,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
console.log("📊 [TableList] 전체 카테고리 매핑:", mappings);
|
||||
console.log("🔄 [TableList] setCategoryMappings 호출 전:", categoryMappings);
|
||||
setCategoryMappings(mappings);
|
||||
setCategoryMappingsKey((prev) => prev + 1); // 리렌더링 트리거
|
||||
console.log("📊 [TableList] 전체 카테고리 매핑 설정:", {
|
||||
mappingsCount: Object.keys(mappings).length,
|
||||
mappingsKeys: Object.keys(mappings),
|
||||
mappings,
|
||||
});
|
||||
|
||||
// 상태 업데이트 확인을 위한 setTimeout
|
||||
setTimeout(() => {
|
||||
console.log("✅ [TableList] setCategoryMappings 호출 후 (비동기):", categoryMappings);
|
||||
}, 100);
|
||||
if (Object.keys(mappings).length > 0) {
|
||||
setCategoryMappings(mappings);
|
||||
setCategoryMappingsKey((prev) => prev + 1);
|
||||
console.log("✅ [TableList] setCategoryMappings 호출 완료");
|
||||
} else {
|
||||
console.warn("⚠️ [TableList] 매핑이 비어있어 상태 업데이트 스킵");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("TableListComponent 카테고리 매핑 로드 실패:", error);
|
||||
console.error("❌ [TableList] 카테고리 매핑 로드 실패:", error);
|
||||
}
|
||||
};
|
||||
|
||||
loadCategoryMappings();
|
||||
}, [tableConfig.selectedTable, Object.keys(columnMeta || {}).length]); // columnMeta가 로드되면 실행!
|
||||
}, [tableConfig.selectedTable, categoryColumns.length, JSON.stringify(categoryColumns)]); // 더 명확한 의존성
|
||||
|
||||
// ========================================
|
||||
// 데이터 가져오기
|
||||
|
|
@ -1141,7 +1188,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
return String(value);
|
||||
}
|
||||
},
|
||||
[columnMeta, optimizedConvertCode],
|
||||
[columnMeta, optimizedConvertCode, categoryMappings],
|
||||
);
|
||||
|
||||
// ========================================
|
||||
|
|
|
|||
Loading…
Reference in New Issue