web_type에 따른 input 변화 구현

This commit is contained in:
hyeonsu
2025-09-21 12:31:37 +09:00
parent c3cb1a0033
commit 0bad11686e
2 changed files with 87 additions and 114 deletions

View File

@@ -33,6 +33,8 @@ export const WebTypeInput: React.FC<WebTypeInputProps> = ({
placeholder,
tableName,
}) => {
// tableName은 props 또는 column.tableName에서 가져옴
const effectiveTableName = tableName || (column as ColumnInfo & { tableName?: string }).tableName;
const webType = column.webType || "text";
const [entityOptions, setEntityOptions] = useState<EntityReferenceOption[]>([]);
const [codeOptions, setCodeOptions] = useState<EntityReferenceOption[]>([]);
@@ -79,20 +81,12 @@ export const WebTypeInput: React.FC<WebTypeInputProps> = ({
const loadEntityData = useCallback(async () => {
try {
setLoading(true);
// tableName이 없으면 referenceTable에서 추론 (dept_code -> dept_info)
const effectiveTableName =
tableName ||
(() => {
if (column.columnName?.endsWith("_code")) {
return column.columnName.replace("_code", "_info");
}
if (column.columnName?.endsWith("_id")) {
return column.columnName.replace("_id", "_info");
}
return "unknown_table";
})();
console.log(`🔍 Entity API 호출: ${effectiveTableName}.${column.columnName}`);
// entity 타입은 반드시 effectiveTableName과 columnName이 있어야 함
if (!effectiveTableName || !column.columnName) {
throw new Error("Entity 타입에는 tableName과 columnName이 필요합니다.");
}
const data = await EntityReferenceAPI.getEntityReferenceData(effectiveTableName, column.columnName, {
limit: 100,
});
@@ -102,7 +96,7 @@ export const WebTypeInput: React.FC<WebTypeInputProps> = ({
} finally {
setLoading(false);
}
}, [tableName, column.columnName]);
}, [effectiveTableName, column.columnName]);
const loadCodeData = useCallback(async () => {
try {
@@ -119,36 +113,41 @@ export const WebTypeInput: React.FC<WebTypeInputProps> = ({
}
}, [column.codeCategory, detailSettings.codeCategory, fallbackCodeCategory]);
// Entity 타입일 때 참조 데이터 로드
// webType에 따른 데이터 로드
useEffect(() => {
// 디버깅: dept_code 필드 정보 확인
if (column.columnName === "dept_code") {
console.log("🔍 dept_code 필드 디버깅:", {
// 디버깅: entity 타입 필드 정보 확인
if (column.columnName === "manager_name" || webType === "entity") {
console.log("🔍 Entity 필드 디버깅:", {
columnName: column.columnName,
webType: webType,
referenceTable: column.referenceTable,
tableName: tableName,
shouldLoadEntity: (webType === "entity" || column.referenceTable) && tableName && column.columnName,
fullColumn: column,
effectiveTableName: effectiveTableName,
referenceTable: column.referenceTable,
referenceColumn: column.referenceColumn,
displayColumn: (column as any).displayColumn,
shouldLoadEntity: webType === "entity" && effectiveTableName && column.columnName,
});
}
// webType이 entity이거나, referenceTable이 있으면 entity로 처리
if ((webType === "entity" || column.referenceTable) && column.columnName) {
// tableName이 없으면 referenceTable에서 추론
const effectiveTableName = tableName || (column.referenceTable ? "unknown" : null);
if (effectiveTableName) {
loadEntityData();
}
if (webType === "entity" && effectiveTableName && column.columnName) {
// entity 타입: 다른 테이블 참조
console.log("🚀 Entity 데이터 로드 시작:", effectiveTableName, column.columnName);
loadEntityData();
} else if (webType === "code" && (column.codeCategory || detailSettings.codeCategory || fallbackCodeCategory)) {
// code 타입: code_info 테이블에서 공통 코드 조회
loadCodeData();
}
// text 타입: 일반 텍스트 입력
// file 타입: 파일 업로드
}, [
webType,
tableName,
effectiveTableName,
column.columnName,
column.codeCategory,
column.referenceTable,
column.referenceColumn,
(column as any).displayColumn,
tableName,
fallbackCodeCategory,
detailSettings.codeCategory,
loadEntityData,
@@ -201,8 +200,8 @@ export const WebTypeInput: React.FC<WebTypeInputProps> = ({
className,
};
// WebType별 렌더링 (referenceTable이 있으면 entity로 처리)
const actualWebType = webType === "entity" || column.referenceTable ? "entity" : webType;
// WebType별 렌더링 (column_labels의 webType을 정확히 따름)
const actualWebType = webType;
switch (actualWebType) {
case "text":