+ {/* ═══════════════════════════════════════ */}
+ {/* 1단계: 데이터 소스 (테이블 선택) */}
+ {/* ═══════════════════════════════════════ */}
+
+
+
+
+
+
+
+
+
+
+
+
+ 테이블을 찾을 수 없습니다.
+
+ {availableTables.map((table) => (
+ handleTableChange(table.tableName)}
+ className="text-xs"
+ >
+
+
+ {table.displayName}
+ {table.displayName !== table.tableName && (
+ {table.tableName}
+ )}
+
+
+ ))}
+
+
+
+
+
+
+ {screenTableName && targetTableName !== screenTableName && (
+
+
+ 화면 기본 테이블({screenTableName})과 다른 테이블을 사용 중
+
+
+
+ )}
+
+
+ {/* ═══════════════════════════════════════ */}
+ {/* 2단계: 컬럼 선택 */}
+ {/* ═══════════════════════════════════════ */}
+ {targetTableName && availableColumns.length > 0 && (
+ <>
+
+
+
+
+
+ {availableColumns.map((column) => {
+ const isAdded = config.columns?.some((c) => c.columnName === column.columnName);
+ return (
+
{
+ if (isAdded) {
+ updateField("columns", config.columns?.filter((c) => c.columnName !== column.columnName) || []);
+ } else {
+ addColumn(column.columnName);
+ }
+ }}
+ >
+ {
+ if (isAdded) {
+ updateField("columns", config.columns?.filter((c) => c.columnName !== column.columnName) || []);
+ } else {
+ addColumn(column.columnName);
+ }
+ }}
+ className="pointer-events-none h-3.5 w-3.5"
+ />
+
+ {column.label || column.columnName}
+ {isAdded && (
+
+ )}
+
+ {column.input_type || column.dataType}
+
+
+ );
+ })}
+
+
+
+ {/* Entity 조인 컬럼 */}
+ {entityJoinColumns.joinTables.length > 0 && (
+
+
+
+
+ {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
+
+
+
+ {joinTable.tableName}
+
+ {joinTable.currentDisplayColumn}
+
+
+
+ {joinTable.availableColumns.map((column, colIndex) => {
+ const matchingJoinColumn = entityJoinColumns.availableColumns.find(
+ (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+ );
+ const isAlreadyAdded = config.columns?.some(
+ (col) => col.columnName === matchingJoinColumn?.joinAlias,
+ );
+ if (!matchingJoinColumn) return null;
+
+ return (
+
{
+ if (isAlreadyAdded) {
+ updateField("columns", config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) || []);
+ } else {
+ addEntityColumn(matchingJoinColumn);
+ }
+ }}
+ >
+ {
+ if (isAlreadyAdded) {
+ updateField("columns", config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) || []);
+ } else {
+ addEntityColumn(matchingJoinColumn);
+ }
+ }}
+ className="pointer-events-none h-3.5 w-3.5"
+ />
+
+ {column.columnLabel}
+
+ {column.inputType || column.dataType}
+
+
+ );
+ })}
+
+
+ ))}
+
+
+ )}
+
+ )}
+
+ {/* 테이블 미선택 또는 컬럼 없음 안내 */}
+ {!targetTableName && (
+
+
+
테이블이 선택되지 않았습니다
+
위 데이터 소스에서 테이블을 선택하세요
+
+ )}
+
+ {targetTableName && availableColumns.length === 0 && (
+
+
+
컬럼 정보를 불러오는 중...
+
현재 화면 테이블: {screenTableName}
+
+ )}
+
+ {/* ═══════════════════════════════════════ */}
+ {/* 3단계: 선택된 컬럼 순서 (DnD) */}
+ {/* ═══════════════════════════════════════ */}
+ {config.columns && config.columns.length > 0 && (
+
+
+
+
{
+ const { active, over } = event;
+ if (!over || active.id === over.id) return;
+ const columns = [...(config.columns || [])];
+ const oldIndex = columns.findIndex((c) => c.columnName === active.id);
+ const newIndex = columns.findIndex((c) => c.columnName === over.id);
+ if (oldIndex !== -1 && newIndex !== -1) {
+ const reordered = arrayMove(columns, oldIndex, newIndex);
+ reordered.forEach((col, idx) => { col.order = idx; });
+ updateField("columns", reordered);
+ }
+ }}
+ >
+ c.columnName)}
+ strategy={verticalListSortingStrategy}
+ >
+
+ {(config.columns || []).map((column, idx) => {
+ const resolvedLabel =
+ column.displayName && column.displayName !== column.columnName
+ ? column.displayName
+ : availableColumns.find((c) => c.columnName === column.columnName)?.label || column.displayName || column.columnName;
+ const colWithLabel = { ...column, displayName: resolvedLabel };
+ return (
+ updateColumn(column.columnName, { displayName: value })}
+ onWidthChange={(value) => updateColumn(column.columnName, { width: value })}
+ onRemove={() => removeColumn(column.columnName)}
+ />
+ );
+ })}
+
+
+
+
+ )}
+
+ {/* ═══════════════════════════════════════ */}
+ {/* 엔티티 컬럼 표시 설정 (접이식) */}
+ {/* ═══════════════════════════════════════ */}
+ {config.columns?.some((col) => col.isEntityJoin) && (
+
+
+
+
+
+
+ {config.columns
+ ?.filter((col) => col.isEntityJoin && col.entityDisplayConfig)
+ .map((column) => (
+
+
{column.displayName || column.columnName}
+
+ {entityDisplayConfigs[column.columnName] ? (
+
+ {/* 구분자 */}
+
+ 구분자
+ updateEntityDisplaySeparator(column.columnName, e.target.value)}
+ className="h-6 w-20 text-xs"
+ placeholder=" - "
+ />
+
+
+ {/* 표시 컬럼 선택 */}
+ {entityDisplayConfigs[column.columnName].sourceColumns.length === 0 &&
+ entityDisplayConfigs[column.columnName].joinColumns.length === 0 ? (
+
+ 표시 가능한 컬럼이 없습니다.
+ {!column.entityDisplayConfig?.joinTable && (
+
+ 테이블 타입 관리에서 참조 테이블을 설정하면 더 많은 컬럼을 선택할 수 있습니다.
+
+ )}
+
+ ) : (
+
+
표시할 컬럼 선택
+
+
+
+
+
+
+
+
+ 컬럼을 찾을 수 없습니다.
+ {entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
+
+ {entityDisplayConfigs[column.columnName].sourceColumns.map((col) => (
+ toggleEntityDisplayColumn(column.columnName, col.columnName)}
+ className="text-xs"
+ >
+
+ {col.displayName}
+
+ ))}
+
+ )}
+ {entityDisplayConfigs[column.columnName].joinColumns.length > 0 && (
+
+ {entityDisplayConfigs[column.columnName].joinColumns.map((col) => (
+ toggleEntityDisplayColumn(column.columnName, col.columnName)}
+ className="text-xs"
+ >
+
+ {col.displayName}
+
+ ))}
+
+ )}
+
+
+
+
+
+ )}
+
+ {/* 참조 테이블 미설정 안내 */}
+ {!column.entityDisplayConfig?.joinTable &&
+ entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
+
+ 현재 기본 테이블 컬럼만 표시됩니다. 테이블 타입 관리에서 참조 테이블을 설정하면 조인된 테이블의 컬럼도 선택할 수 있습니다.
+
+ )}
+
+ {/* 선택된 컬럼 미리보기 */}
+ {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
+
+
미리보기
+
+ {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
+
+ {colName}
+ {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
+
+ {entityDisplayConfigs[column.columnName].separator}
+
+ )}
+
+ ))}
+
+
+ )}
+
+ ) : (
+
+
+ 컬럼 정보 로딩 중...
+
+ )}
+
+ {config.columns?.filter((c) => c.isEntityJoin && c.entityDisplayConfig).indexOf(column) !==
+ (config.columns?.filter((c) => c.isEntityJoin && c.entityDisplayConfig).length || 0) - 1 && (
+
+ )}
+
+ ))}
+
+ )}
+
+ {/* ═══════════════════════════════════════ */}
+ {/* 4단계: 툴바 버튼 설정 (Switch 토글) */}
+ {/* ═══════════════════════════════════════ */}
+
+
+
+
+ updateNestedField("toolbar", "showEditMode", checked)}
+ />
+ updateNestedField("toolbar", "showExcel", checked)}
+ />
+ updateNestedField("toolbar", "showPdf", checked)}
+ />
+ updateNestedField("toolbar", "showCopy", checked)}
+ />
+ updateNestedField("toolbar", "showSearch", checked)}
+ />
+ updateNestedField("toolbar", "showFilter", checked)}
+ />
+ updateNestedField("toolbar", "showRefresh", checked)}
+ />
+ updateNestedField("toolbar", "showPaginationRefresh", checked)}
+ />
+
+
+
+ {/* ═══════════════════════════════════════ */}
+ {/* 5단계: 고급 설정 (기본 접힘) */}
+ {/* ═══════════════════════════════════════ */}
+
+
+
+
+
+
+
+ {/* 체크박스 설정 */}
+
+
+
+ 체크박스
+
+
+
updateNestedField("checkbox", "enabled", checked)}
+ />
+
+ {config.checkbox?.enabled && (
+
+
updateNestedField("checkbox", "selectAll", checked)}
+ />
+
+ 체크박스 위치
+
+
+
+
+
+
+ {/* 기본 정렬 설정 */}
+
+
+
테이블 로드 시 기본 정렬 순서를 지정합니다
+
+
+ 정렬 컬럼
+
+
+
+ {config.defaultSort?.columnName && (
+
+ 정렬 방향
+
+
+ )}
+
+
+
+
+ {/* 가로 스크롤 */}
+
+
+
+ 가로 스크롤 및 컬럼 고정
+
+
+
updateNestedField("horizontalScroll", "enabled", checked)}
+ />
+
+ {config.horizontalScroll?.enabled && (
+
+
+
+
최대 표시 컬럼 수
+
이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다
+
+
updateNestedField("horizontalScroll", "maxVisibleColumns", parseInt(e.target.value) || 8)}
+ min={3}
+ max={20}
+ className="h-7 w-[80px] text-xs"
+ />
+
+
+
+
+ {/* ═══════════════════════════════════════ */}
+ {/* 6단계: 데이터 필터링 */}
+ {/* ═══════════════════════════════════════ */}
+
+
+
+
+ ({
+ columnName: col.columnName,
+ columnLabel: col.label || col.columnName,
+ dataType: col.dataType,
+ input_type: col.input_type,
+ }) as any,
+ )}
+ config={config.dataFilter}
+ onConfigChange={(dataFilter) => updateField("dataFilter", dataFilter)}
+ />
+
+