+ {/* ═══════════════════════════════════════ */}
+ {/* 1단계: 데이터 소스 (테이블 선택) */}
+ {/* ═══════════════════════════════════════ */}
+
+
+
+
+
updateConfig({ useCustomTable: checked })}
+ />
+
+ {config.useCustomTable ? (
+ updateConfig({ customTableName: e.target.value })}
+ placeholder="테이블명을 직접 입력하세요"
+ className="h-8 text-xs"
+ />
+ ) : (
+
+
+
+
+
+ {
+ if (value.toLowerCase().includes(search.toLowerCase())) return 1;
+ return 0;
+ }}
+ >
+
+
+ 테이블을 찾을 수 없습니다.
+
+ {tables.map((table) => (
+ handleTableChange(table.tableName)}
+ className="text-xs"
+ >
+
+
+ {table.displayName}
+ {table.displayName !== table.tableName && (
+ {table.tableName}
+ )}
+
+
+ ))}
+
+
+
+
+
+ )}
+
+
+ {/* ═══════════════════════════════════════ */}
+ {/* 2단계: 그룹화 설정 */}
+ {/* ═══════════════════════════════════════ */}
+ {targetTableName && (
+
+
+
+
+ {/* 그룹화 기준 컬럼 */}
+
+
+
+
+ {/* 그룹 라벨 형식 */}
+
+
+
+ 그룹 라벨 형식
+
+
updateGroupConfig({ groupLabelFormat: e.target.value })}
+ placeholder="{value} ({컬럼명})"
+ className="h-7 text-xs"
+ />
+
+ {"{value}"} = 그룹값, {"{컬럼명}"} = 해당 컬럼 값
+
+
+
+
updateGroupConfig({ defaultExpanded: checked })}
+ />
+
+ {/* 그룹 정렬 */}
+
+
+
+
+
+ updateGroupConfig({
+ summary: { ...config.groupConfig?.summary, showCount: checked },
+ })
+ }
+ />
+
+ {/* 합계 컬럼 */}
+ {tableColumns.length > 0 && (
+
+
+
+ 합계 표시 컬럼
+
+
그룹별 합계를 계산할 컬럼을 선택하세요
+
+ {tableColumns.map((col) => {
+ const isChecked = config.groupConfig?.summary?.sumColumns?.includes(col.columnName) ?? false;
+ return (
+
toggleSumColumn(col.columnName)}
+ >
+ toggleSumColumn(col.columnName)}
+ className="pointer-events-none h-3.5 w-3.5"
+ />
+ {col.displayName || col.columnName}
+
+ );
+ })}
+
+
+ )}
+
+ {/* 테이블 미선택 안내 */}
+ {!targetTableName && (
+
+
+
테이블이 선택되지 않았습니다
+
위 데이터 소스에서 테이블을 선택하세요
+
+ )}
+
+ {/* ═══════════════════════════════════════ */}
+ {/* 3단계: 컬럼 선택 */}
+ {/* ═══════════════════════════════════════ */}
+ {targetTableName && (config.columns || tableColumns).length > 0 && (
+
+
c.visible !== false).length}개 표시)`}
+ description="표시할 컬럼을 선택하세요"
+ />
+
+
+
+ {(config.columns || tableColumns).map((col) => {
+ const isVisible = col.visible !== false;
+ return (
+
toggleColumnVisibility(col.columnName)}
+ >
+ toggleColumnVisibility(col.columnName)}
+ className="pointer-events-none h-3.5 w-3.5"
+ />
+
+ {col.displayName || col.columnName}
+
+ );
+ })}
+
+ )}
+
+ {/* ═══════════════════════════════════════ */}
+ {/* 4단계: 그룹 헤더 스타일 (카드 선택) */}
+ {/* ═══════════════════════════════════════ */}
+ {targetTableName && (
+
+
+
+
+
+ {HEADER_STYLE_CARDS.map((card) => {
+ const Icon = card.icon;
+ const isSelected = (config.groupHeaderStyle || "default") === card.value;
+ return (
+
+ );
+ })}
+
+
+ )}
+
+ {/* ═══════════════════════════════════════ */}
+ {/* 5단계: 표시 설정 (기본 접힘) */}
+ {/* ═══════════════════════════════════════ */}
+
+
+
+
+
+
+
+ {/* 체크박스 */}
+
+
+
+ 체크박스
+
+
+
updateConfig({ showCheckbox: checked })}
+ />
+
+ {config.showCheckbox && (
+
+
+
+
+
+ )}
+
+
+
+
+ {/* UI 옵션 */}
+
updateConfig({ showExpandAllButton: checked })}
+ />
+
+ updateConfig({ rowClickable: checked })}
+ />
+
+
+
+ {/* 높이 및 메시지 */}
+
+ updateConfig({ maxHeight: parseInt(e.target.value) || 600 })}
+ min={200}
+ max={2000}
+ className="h-7 w-[100px] text-xs"
+ />
+
+
+
+ 빈 데이터 메시지
+ updateConfig({ emptyMessage: e.target.value })}
+ placeholder="데이터가 없습니다."
+ className="h-7 text-xs"
+ />
+
+
+
+ {/* ═══════════════════════════════════════ */}
+ {/* 6단계: 연동 설정 (기본 접힘) */}
+ {/* ═══════════════════════════════════════ */}
+
+
+
+
+
+
+
+
+ 다른 컴포넌트(검색필터 등)의 선택 값으로 이 테이블을 필터링합니다
+
+
+
+
+ {(config.linkedFilters || []).length === 0 ? (
+
+ ) : (
+
+ {(config.linkedFilters || []).map((filter, idx) => (
+
+
+
필터 #{idx + 1}
+
+ updateLinkedFilter(idx, { enabled: checked })}
+ />
+
+
+
+
+
+ 소스 컴포넌트 ID
+ updateLinkedFilter(idx, { sourceComponentId: e.target.value })}
+ placeholder="예: search-filter-1"
+ className="h-6 text-xs"
+ />
+
+
+
+ 소스 필드
+ updateLinkedFilter(idx, { sourceField: e.target.value })}
+ placeholder="value"
+ className="h-6 text-xs"
+ />
+
+
+
+ 대상 컬럼
+
+
+
+ ))}
+
+ )}
+
+