1098 lines
42 KiB
TypeScript
1098 lines
42 KiB
TypeScript
"use client";
|
||
|
||
import React, { useEffect, useState, useMemo, useCallback, useRef } from "react";
|
||
import { ComponentRendererProps } from "@/types/component";
|
||
import { CardDisplayConfig } from "./types";
|
||
import { tableTypeApi } from "@/lib/api/screen";
|
||
import { getFullImageUrl, apiClient } from "@/lib/api/client";
|
||
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { useScreenContextOptional } from "@/contexts/ScreenContext";
|
||
import { useSplitPanelContext } from "@/contexts/SplitPanelContext";
|
||
import { useModalDataStore } from "@/stores/modalDataStore";
|
||
import { useTableOptions } from "@/contexts/TableOptionsContext";
|
||
import { TableFilter, ColumnVisibility, TableColumn } from "@/types/table-options";
|
||
|
||
export interface CardDisplayComponentProps extends ComponentRendererProps {
|
||
config?: CardDisplayConfig;
|
||
tableData?: any[];
|
||
tableColumns?: any[];
|
||
}
|
||
|
||
/**
|
||
* CardDisplay 컴포넌트
|
||
* 테이블 데이터를 카드 형태로 표시하는 컴포넌트
|
||
*/
|
||
export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
|
||
component,
|
||
isDesignMode = false,
|
||
isSelected = false,
|
||
isInteractive = false,
|
||
onClick,
|
||
onDragStart,
|
||
onDragEnd,
|
||
config,
|
||
className,
|
||
style,
|
||
formData,
|
||
onFormDataChange,
|
||
screenId,
|
||
tableName,
|
||
tableData = [],
|
||
tableColumns = [],
|
||
...props
|
||
}) => {
|
||
// 컨텍스트 (선택적 - 디자인 모드에서는 없을 수 있음)
|
||
const screenContext = useScreenContextOptional();
|
||
const splitPanelContext = useSplitPanelContext();
|
||
const splitPanelPosition = screenContext?.splitPanelPosition;
|
||
|
||
// TableOptions Context (검색 필터 위젯 연동용)
|
||
let tableOptionsContext: ReturnType<typeof useTableOptions> | null = null;
|
||
try {
|
||
tableOptionsContext = useTableOptions();
|
||
} catch (e) {
|
||
// Context가 없으면 (디자이너 모드) 무시
|
||
}
|
||
|
||
// 테이블 데이터 상태 관리
|
||
const [loadedTableData, setLoadedTableData] = useState<any[]>([]);
|
||
const [loadedTableColumns, setLoadedTableColumns] = useState<any[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
// 필터 상태 (검색 필터 위젯에서 전달받은 필터)
|
||
const [filters, setFiltersInternal] = useState<TableFilter[]>([]);
|
||
|
||
// 필터 상태 변경 래퍼 (로깅용)
|
||
const setFilters = useCallback((newFilters: TableFilter[]) => {
|
||
console.log("🎴 [CardDisplay] setFilters 호출됨:", {
|
||
componentId: component.id,
|
||
filtersCount: newFilters.length,
|
||
filters: newFilters,
|
||
});
|
||
setFiltersInternal(newFilters);
|
||
}, [component.id]);
|
||
|
||
// 카테고리 매핑 상태 (카테고리 코드 -> 라벨/색상)
|
||
const [columnMeta, setColumnMeta] = useState<
|
||
Record<string, { webType?: string; codeCategory?: string; inputType?: string }>
|
||
>({});
|
||
const [categoryMappings, setCategoryMappings] = useState<
|
||
Record<string, Record<string, { label: string; color?: string }>>
|
||
>({});
|
||
|
||
// 선택된 카드 상태 (Set으로 변경하여 테이블 리스트와 동일하게)
|
||
const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
|
||
|
||
// 상세보기 모달 상태
|
||
const [viewModalOpen, setViewModalOpen] = useState(false);
|
||
const [selectedData, setSelectedData] = useState<any>(null);
|
||
|
||
// 편집 모달 상태
|
||
const [editModalOpen, setEditModalOpen] = useState(false);
|
||
const [editData, setEditData] = useState<any>(null);
|
||
|
||
// 카드 액션 핸들러
|
||
const handleCardView = (data: any) => {
|
||
// console.log("👀 상세보기 클릭:", data);
|
||
setSelectedData(data);
|
||
setViewModalOpen(true);
|
||
};
|
||
|
||
const handleCardEdit = (data: any) => {
|
||
// console.log("✏️ 편집 클릭:", data);
|
||
setEditData({ ...data }); // 복사본 생성
|
||
setEditModalOpen(true);
|
||
};
|
||
|
||
// 편집 폼 데이터 변경 핸들러
|
||
const handleEditFormChange = (key: string, value: string) => {
|
||
setEditData((prev: any) => ({
|
||
...prev,
|
||
[key]: value
|
||
}));
|
||
};
|
||
|
||
// 편집 저장 핸들러
|
||
const handleEditSave = async () => {
|
||
// console.log("💾 편집 저장:", editData);
|
||
|
||
try {
|
||
// TODO: 실제 API 호출로 데이터 업데이트
|
||
// await tableTypeApi.updateTableData(tableName, editData);
|
||
|
||
// console.log("✅ 편집 저장 완료");
|
||
alert("✅ 저장되었습니다!");
|
||
|
||
// 모달 닫기
|
||
setEditModalOpen(false);
|
||
setEditData(null);
|
||
|
||
// 데이터 새로고침 (필요시)
|
||
// loadTableData();
|
||
|
||
} catch (error) {
|
||
console.error("❌ 편집 저장 실패:", error);
|
||
alert("❌ 저장에 실패했습니다.");
|
||
}
|
||
};
|
||
|
||
// 테이블 데이터 로딩
|
||
useEffect(() => {
|
||
const loadTableData = async () => {
|
||
// 디자인 모드에서는 테이블 데이터를 로드하지 않음
|
||
if (isDesignMode) {
|
||
return;
|
||
}
|
||
|
||
// tableName 확인 (props에서 전달받은 tableName 사용)
|
||
const tableNameToUse = tableName || component.componentConfig?.tableName || 'user_info'; // 기본 테이블명 설정
|
||
|
||
if (!tableNameToUse) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setLoading(true);
|
||
|
||
// 테이블 데이터, 컬럼 정보, 입력 타입 정보를 병렬로 로드
|
||
const [dataResponse, columnsResponse, inputTypesResponse] = await Promise.all([
|
||
tableTypeApi.getTableData(tableNameToUse, {
|
||
page: 1,
|
||
size: 50, // 카드 표시용으로 적당한 개수
|
||
}),
|
||
tableTypeApi.getColumns(tableNameToUse),
|
||
tableTypeApi.getColumnInputTypes(tableNameToUse),
|
||
]);
|
||
|
||
setLoadedTableData(dataResponse.data);
|
||
setLoadedTableColumns(columnsResponse);
|
||
|
||
// 컬럼 메타 정보 설정 (inputType 포함)
|
||
const meta: Record<string, { webType?: string; codeCategory?: string; inputType?: string }> = {};
|
||
inputTypesResponse.forEach((item: any) => {
|
||
meta[item.columnName || item.column_name] = {
|
||
webType: item.webType || item.web_type,
|
||
inputType: item.inputType || item.input_type,
|
||
codeCategory: item.codeCategory || item.code_category,
|
||
};
|
||
});
|
||
console.log("📋 [CardDisplay] 컬럼 메타 정보:", meta);
|
||
setColumnMeta(meta);
|
||
|
||
// 카테고리 타입 컬럼 찾기 및 매핑 로드
|
||
const categoryColumns = Object.entries(meta)
|
||
.filter(([_, m]) => m.inputType === "category")
|
||
.map(([columnName]) => columnName);
|
||
|
||
console.log("📋 [CardDisplay] 카테고리 컬럼:", categoryColumns);
|
||
|
||
if (categoryColumns.length > 0) {
|
||
const mappings: Record<string, Record<string, { label: string; color?: string }>> = {};
|
||
|
||
for (const columnName of categoryColumns) {
|
||
try {
|
||
console.log(`📋 [CardDisplay] 카테고리 매핑 로드 시작: ${tableNameToUse}/${columnName}`);
|
||
const response = await apiClient.get(`/table-categories/${tableNameToUse}/${columnName}/values`);
|
||
|
||
console.log(`📋 [CardDisplay] 카테고리 API 응답 [${columnName}]:`, response.data);
|
||
|
||
if (response.data.success && response.data.data) {
|
||
const mapping: Record<string, { label: string; color?: string }> = {};
|
||
response.data.data.forEach((item: any) => {
|
||
// API 응답 형식: valueCode, valueLabel (camelCase)
|
||
const code = item.valueCode || item.value_code || item.category_code || item.code || item.value;
|
||
const label = item.valueLabel || item.value_label || item.category_name || item.name || item.label || code;
|
||
// color가 null/undefined/"none"이면 undefined로 유지 (배지 없음)
|
||
const rawColor = item.color ?? item.badge_color;
|
||
const color = (rawColor && rawColor !== "none") ? rawColor : undefined;
|
||
mapping[code] = { label, color };
|
||
console.log(`📋 [CardDisplay] 매핑 추가: ${code} -> ${label} (color: ${color})`);
|
||
});
|
||
mappings[columnName] = mapping;
|
||
}
|
||
} catch (error) {
|
||
console.error(`❌ CardDisplay: 카테고리 매핑 로드 실패 [${columnName}]`, error);
|
||
}
|
||
}
|
||
|
||
console.log("📋 [CardDisplay] 최종 카테고리 매핑:", mappings);
|
||
setCategoryMappings(mappings);
|
||
}
|
||
} catch (error) {
|
||
console.error(`❌ CardDisplay: 데이터 로딩 실패`, error);
|
||
setLoadedTableData([]);
|
||
setLoadedTableColumns([]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
loadTableData();
|
||
}, [isDesignMode, tableName, component.componentConfig?.tableName]);
|
||
|
||
// 컴포넌트 설정 (기본값 보장)
|
||
const componentConfig = {
|
||
cardsPerRow: 3, // 기본값 3 (한 행당 카드 수)
|
||
cardSpacing: 16,
|
||
cardStyle: {
|
||
showTitle: true,
|
||
showSubtitle: true,
|
||
showDescription: true,
|
||
showImage: false,
|
||
showActions: true,
|
||
maxDescriptionLength: 100,
|
||
imagePosition: "top",
|
||
imageSize: "medium",
|
||
},
|
||
columnMapping: {},
|
||
dataSource: "table",
|
||
staticData: [],
|
||
...config,
|
||
...component.config,
|
||
...component.componentConfig,
|
||
} as CardDisplayConfig;
|
||
|
||
// 컴포넌트 기본 스타일
|
||
const componentStyle: React.CSSProperties = {
|
||
width: "100%",
|
||
height: "100%",
|
||
position: "relative",
|
||
backgroundColor: "transparent",
|
||
};
|
||
|
||
// width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
|
||
// 카드 컴포넌트는 ...style 스프레드가 없으므로 여기서 명시적으로 설정
|
||
|
||
if (isDesignMode) {
|
||
componentStyle.border = "1px dashed hsl(var(--border))";
|
||
componentStyle.borderColor = isSelected ? "hsl(var(--ring))" : "hsl(var(--border))";
|
||
}
|
||
|
||
// 표시할 데이터 결정 (로드된 테이블 데이터 우선 사용)
|
||
const displayData = useMemo(() => {
|
||
// 로드된 테이블 데이터가 있으면 항상 우선 사용 (dataSource 설정 무시)
|
||
if (loadedTableData.length > 0) {
|
||
return loadedTableData;
|
||
}
|
||
|
||
// props로 전달받은 테이블 데이터가 있으면 사용
|
||
if (tableData.length > 0) {
|
||
return tableData;
|
||
}
|
||
|
||
if (componentConfig.staticData && componentConfig.staticData.length > 0) {
|
||
return componentConfig.staticData;
|
||
}
|
||
|
||
// 데이터가 없으면 빈 배열 반환
|
||
return [];
|
||
}, [componentConfig.dataSource, loadedTableData, tableData, componentConfig.staticData]);
|
||
|
||
// 실제 사용할 테이블 컬럼 정보 (로드된 컬럼 우선 사용)
|
||
const actualTableColumns = loadedTableColumns.length > 0 ? loadedTableColumns : tableColumns;
|
||
|
||
// 카드 ID 가져오기 함수 (훅은 조기 리턴 전에 선언)
|
||
const getCardKey = useCallback((data: any, index: number): string => {
|
||
return String(data.id || data.objid || data.ID || index);
|
||
}, []);
|
||
|
||
// 카드 선택 핸들러 (단일 선택 - 다른 카드 선택 시 기존 선택 해제)
|
||
const handleCardSelection = useCallback((cardKey: string, data: any, checked: boolean) => {
|
||
// 단일 선택: 새로운 Set 생성 (기존 선택 초기화)
|
||
const newSelectedRows = new Set<string>();
|
||
|
||
if (checked) {
|
||
// 선택 시 해당 카드만 선택
|
||
newSelectedRows.add(cardKey);
|
||
}
|
||
// checked가 false면 빈 Set (선택 해제)
|
||
|
||
setSelectedRows(newSelectedRows);
|
||
|
||
// 선택된 카드 데이터 계산
|
||
const selectedRowsData = displayData.filter((item, index) =>
|
||
newSelectedRows.has(getCardKey(item, index))
|
||
);
|
||
|
||
// onFormDataChange 호출
|
||
if (onFormDataChange) {
|
||
onFormDataChange({
|
||
selectedRows: Array.from(newSelectedRows),
|
||
selectedRowsData,
|
||
});
|
||
}
|
||
|
||
// modalDataStore에 선택된 데이터 저장
|
||
const tableNameToUse = componentConfig.dataSource?.tableName || tableName;
|
||
if (tableNameToUse && selectedRowsData.length > 0) {
|
||
const modalItems = selectedRowsData.map((row, idx) => ({
|
||
id: getCardKey(row, idx),
|
||
originalData: row,
|
||
additionalData: {},
|
||
}));
|
||
useModalDataStore.getState().setData(tableNameToUse, modalItems);
|
||
console.log("[CardDisplay] modalDataStore에 데이터 저장:", {
|
||
dataSourceId: tableNameToUse,
|
||
count: modalItems.length,
|
||
});
|
||
} else if (tableNameToUse && selectedRowsData.length === 0) {
|
||
useModalDataStore.getState().clearData(tableNameToUse);
|
||
console.log("[CardDisplay] modalDataStore 데이터 제거:", tableNameToUse);
|
||
}
|
||
|
||
// 분할 패널 컨텍스트에 선택된 데이터 저장 (좌측 화면인 경우)
|
||
if (splitPanelContext && splitPanelPosition === "left") {
|
||
if (checked) {
|
||
splitPanelContext.setSelectedLeftData(data);
|
||
console.log("[CardDisplay] 분할 패널 좌측 데이터 저장:", {
|
||
data,
|
||
parentDataMapping: splitPanelContext.parentDataMapping,
|
||
});
|
||
} else {
|
||
splitPanelContext.setSelectedLeftData(null);
|
||
console.log("[CardDisplay] 분할 패널 좌측 데이터 초기화");
|
||
}
|
||
}
|
||
}, [displayData, getCardKey, onFormDataChange, componentConfig.dataSource?.tableName, tableName, splitPanelContext, splitPanelPosition]);
|
||
|
||
const handleCardClick = useCallback((data: any, index: number) => {
|
||
const cardKey = getCardKey(data, index);
|
||
const isCurrentlySelected = selectedRows.has(cardKey);
|
||
|
||
// 단일 선택: 이미 선택된 카드 클릭 시 선택 해제, 아니면 새로 선택
|
||
handleCardSelection(cardKey, data, !isCurrentlySelected);
|
||
|
||
if (componentConfig.onCardClick) {
|
||
componentConfig.onCardClick(data);
|
||
}
|
||
}, [getCardKey, selectedRows, handleCardSelection, componentConfig.onCardClick]);
|
||
|
||
// DataProvidable 인터페이스 구현 (테이블 리스트와 동일)
|
||
const dataProvider = useMemo(() => ({
|
||
componentId: component.id,
|
||
componentType: "card-display" as const,
|
||
|
||
getSelectedData: () => {
|
||
const selectedData = displayData.filter((item, index) =>
|
||
selectedRows.has(getCardKey(item, index))
|
||
);
|
||
return selectedData;
|
||
},
|
||
|
||
getAllData: () => {
|
||
return displayData;
|
||
},
|
||
|
||
clearSelection: () => {
|
||
setSelectedRows(new Set());
|
||
},
|
||
}), [component.id, displayData, selectedRows, getCardKey]);
|
||
|
||
// ScreenContext에 데이터 제공자로 등록
|
||
useEffect(() => {
|
||
if (screenContext && component.id) {
|
||
screenContext.registerDataProvider(component.id, dataProvider);
|
||
|
||
return () => {
|
||
screenContext.unregisterDataProvider(component.id);
|
||
};
|
||
}
|
||
}, [screenContext, component.id, dataProvider]);
|
||
|
||
// TableOptionsContext에 테이블 등록 (검색 필터 위젯 연동용)
|
||
const tableId = `card-display-${component.id}`;
|
||
const tableNameToUse = tableName || component.componentConfig?.tableName || '';
|
||
const tableLabel = component.componentConfig?.title || component.label || "카드 디스플레이";
|
||
|
||
// ref로 최신 데이터 참조 (useCallback 의존성 문제 해결)
|
||
const loadedTableDataRef = useRef(loadedTableData);
|
||
const categoryMappingsRef = useRef(categoryMappings);
|
||
|
||
useEffect(() => {
|
||
loadedTableDataRef.current = loadedTableData;
|
||
}, [loadedTableData]);
|
||
|
||
useEffect(() => {
|
||
categoryMappingsRef.current = categoryMappings;
|
||
}, [categoryMappings]);
|
||
|
||
// 필터가 변경되면 데이터 다시 로드 (테이블 리스트와 동일한 패턴)
|
||
// 초기 로드 여부 추적
|
||
const isInitialLoadRef = useRef(true);
|
||
|
||
useEffect(() => {
|
||
if (!tableNameToUse || isDesignMode) return;
|
||
|
||
// 초기 로드는 별도 useEffect에서 처리하므로 스킵
|
||
if (isInitialLoadRef.current) {
|
||
isInitialLoadRef.current = false;
|
||
return;
|
||
}
|
||
|
||
const loadFilteredData = async () => {
|
||
try {
|
||
setLoading(true);
|
||
|
||
// 필터 값을 검색 파라미터로 변환
|
||
const searchParams: Record<string, any> = {};
|
||
filters.forEach(filter => {
|
||
if (filter.value !== undefined && filter.value !== null && filter.value !== '') {
|
||
searchParams[filter.columnName] = filter.value;
|
||
}
|
||
});
|
||
|
||
console.log("🔍 [CardDisplay] 필터 적용 데이터 로드:", {
|
||
tableName: tableNameToUse,
|
||
filtersCount: filters.length,
|
||
searchParams,
|
||
});
|
||
|
||
// search 파라미터로 검색 조건 전달 (API 스펙에 맞게)
|
||
const dataResponse = await tableTypeApi.getTableData(tableNameToUse, {
|
||
page: 1,
|
||
size: 50,
|
||
search: searchParams,
|
||
});
|
||
|
||
setLoadedTableData(dataResponse.data);
|
||
|
||
// 데이터 건수 업데이트
|
||
if (tableOptionsContext) {
|
||
tableOptionsContext.updateTableDataCount(tableId, dataResponse.data?.length || 0);
|
||
}
|
||
} catch (error) {
|
||
console.error("❌ [CardDisplay] 필터 적용 실패:", error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 필터 변경 시 항상 데이터 다시 로드 (빈 필터 = 전체 데이터)
|
||
loadFilteredData();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [filters, tableNameToUse, isDesignMode, tableId]);
|
||
|
||
// 컬럼 고유 값 조회 함수 (select 타입 필터용)
|
||
const getColumnUniqueValues = useCallback(async (columnName: string): Promise<Array<{ label: string; value: string }>> => {
|
||
if (!tableNameToUse) return [];
|
||
|
||
try {
|
||
// 현재 로드된 데이터에서 고유 값 추출
|
||
const uniqueValues = new Set<string>();
|
||
loadedTableDataRef.current.forEach(row => {
|
||
const value = row[columnName];
|
||
if (value !== null && value !== undefined && value !== '') {
|
||
uniqueValues.add(String(value));
|
||
}
|
||
});
|
||
|
||
// 카테고리 매핑이 있으면 라벨 적용
|
||
const mapping = categoryMappingsRef.current[columnName];
|
||
return Array.from(uniqueValues).map(value => ({
|
||
value,
|
||
label: mapping?.[value]?.label || value,
|
||
}));
|
||
} catch (error) {
|
||
console.error(`❌ [CardDisplay] 고유 값 조회 실패: ${columnName}`, error);
|
||
return [];
|
||
}
|
||
}, [tableNameToUse]);
|
||
|
||
// TableOptionsContext에 등록
|
||
// registerTable과 unregisterTable 함수 참조 저장 (의존성 안정화)
|
||
const registerTableRef = useRef(tableOptionsContext?.registerTable);
|
||
const unregisterTableRef = useRef(tableOptionsContext?.unregisterTable);
|
||
|
||
// setFiltersInternal을 ref로 저장 (등록 시 최신 함수 사용)
|
||
const setFiltersRef = useRef(setFiltersInternal);
|
||
const getColumnUniqueValuesRef = useRef(getColumnUniqueValues);
|
||
|
||
useEffect(() => {
|
||
registerTableRef.current = tableOptionsContext?.registerTable;
|
||
unregisterTableRef.current = tableOptionsContext?.unregisterTable;
|
||
}, [tableOptionsContext]);
|
||
|
||
useEffect(() => {
|
||
setFiltersRef.current = setFiltersInternal;
|
||
}, [setFiltersInternal]);
|
||
|
||
useEffect(() => {
|
||
getColumnUniqueValuesRef.current = getColumnUniqueValues;
|
||
}, [getColumnUniqueValues]);
|
||
|
||
// 테이블 등록 (한 번만 실행, 컬럼 변경 시에만 재등록)
|
||
const columnsKey = JSON.stringify(loadedTableColumns.map((col: any) => col.columnName || col.column_name));
|
||
|
||
useEffect(() => {
|
||
if (!registerTableRef.current || !unregisterTableRef.current) return;
|
||
if (isDesignMode || !tableNameToUse || loadedTableColumns.length === 0) return;
|
||
|
||
// 컬럼 정보를 TableColumn 형식으로 변환
|
||
const columns: TableColumn[] = loadedTableColumns.map((col: any) => ({
|
||
columnName: col.columnName || col.column_name,
|
||
columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
|
||
inputType: columnMeta[col.columnName || col.column_name]?.inputType || 'text',
|
||
visible: true,
|
||
width: 200,
|
||
sortable: true,
|
||
filterable: true,
|
||
}));
|
||
|
||
// onFilterChange는 ref를 통해 최신 함수를 호출하는 래퍼 사용
|
||
const onFilterChangeWrapper = (newFilters: TableFilter[]) => {
|
||
console.log("🎴 [CardDisplay] onFilterChange 래퍼 호출:", {
|
||
tableId,
|
||
filtersCount: newFilters.length,
|
||
});
|
||
setFiltersRef.current(newFilters);
|
||
};
|
||
|
||
const getColumnUniqueValuesWrapper = async (columnName: string) => {
|
||
return getColumnUniqueValuesRef.current(columnName);
|
||
};
|
||
|
||
const registration = {
|
||
tableId,
|
||
label: tableLabel,
|
||
tableName: tableNameToUse,
|
||
columns,
|
||
dataCount: loadedTableData.length,
|
||
onFilterChange: onFilterChangeWrapper,
|
||
onGroupChange: () => {}, // 카드 디스플레이는 그룹핑 미지원
|
||
onColumnVisibilityChange: () => {}, // 카드 디스플레이는 컬럼 가시성 미지원
|
||
getColumnUniqueValues: getColumnUniqueValuesWrapper,
|
||
};
|
||
|
||
console.log("📋 [CardDisplay] TableOptionsContext에 등록:", {
|
||
tableId,
|
||
tableName: tableNameToUse,
|
||
columnsCount: columns.length,
|
||
dataCount: loadedTableData.length,
|
||
});
|
||
|
||
registerTableRef.current(registration);
|
||
|
||
const unregister = unregisterTableRef.current;
|
||
const currentTableId = tableId;
|
||
|
||
return () => {
|
||
console.log("📋 [CardDisplay] TableOptionsContext에서 해제:", currentTableId);
|
||
unregister(currentTableId);
|
||
};
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [
|
||
isDesignMode,
|
||
tableId,
|
||
tableNameToUse,
|
||
tableLabel,
|
||
columnsKey, // 컬럼 변경 시에만 재등록
|
||
]);
|
||
|
||
// 로딩 중인 경우 로딩 표시
|
||
if (loading) {
|
||
return (
|
||
<div
|
||
className={className}
|
||
style={{
|
||
...componentStyle,
|
||
...style,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
padding: "20px",
|
||
}}
|
||
>
|
||
<div className="text-muted-foreground">테이블 데이터를 로드하는 중...</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 컨테이너 스타일 - 통일된 디자인 시스템 적용
|
||
const containerStyle: React.CSSProperties = {
|
||
display: "grid",
|
||
gridTemplateColumns: `repeat(${componentConfig.cardsPerRow || 3}, 1fr)`, // 기본값 3 (한 행당 카드 수)
|
||
gridAutoRows: "min-content", // 자동 행 생성으로 모든 데이터 표시
|
||
gap: `${componentConfig.cardSpacing || 32}px`, // 간격 대폭 증가로 여유로운 느낌
|
||
padding: "32px", // 패딩 대폭 증가
|
||
width: "100%",
|
||
height: "100%",
|
||
background: "#f8fafc", // 연한 하늘색 배경 (채도 낮춤)
|
||
overflow: "auto",
|
||
borderRadius: "12px", // 컨테이너 자체도 라운드 처리
|
||
};
|
||
|
||
// 카드 스타일 - 컴팩트한 디자인
|
||
const cardStyle: React.CSSProperties = {
|
||
backgroundColor: "white",
|
||
border: "1px solid #e5e7eb",
|
||
borderRadius: "8px",
|
||
padding: "16px",
|
||
boxShadow: "0 1px 3px rgba(0, 0, 0, 0.08)",
|
||
transition: "all 0.2s ease",
|
||
overflow: "hidden",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
position: "relative",
|
||
cursor: isDesignMode ? "pointer" : "default",
|
||
};
|
||
|
||
// 텍스트 자르기 함수
|
||
const truncateText = (text: string, maxLength: number) => {
|
||
if (!text) return "";
|
||
if (text.length <= maxLength) return text;
|
||
return text.substring(0, maxLength) + "...";
|
||
};
|
||
|
||
// 컬럼 값을 문자열로 가져오기 (카테고리 타입인 경우 매핑된 라벨 반환)
|
||
const getColumnValueAsString = (data: any, columnName?: string): string => {
|
||
if (!columnName) return "";
|
||
const value = data[columnName];
|
||
if (value === null || value === undefined || value === "") return "";
|
||
|
||
// 카테고리 타입인 경우 매핑된 라벨 반환
|
||
const meta = columnMeta[columnName];
|
||
if (meta?.inputType === "category") {
|
||
const mapping = categoryMappings[columnName];
|
||
const valueStr = String(value);
|
||
const categoryData = mapping?.[valueStr];
|
||
return categoryData?.label || valueStr;
|
||
}
|
||
|
||
return String(value);
|
||
};
|
||
|
||
// 컬럼 매핑에서 값 가져오기 (카테고리 타입인 경우 배지로 표시)
|
||
const getColumnValue = (data: any, columnName?: string): React.ReactNode => {
|
||
if (!columnName) return "";
|
||
const value = data[columnName];
|
||
if (value === null || value === undefined || value === "") return "";
|
||
|
||
// 카테고리 타입인 경우 매핑된 라벨과 배지로 표시
|
||
const meta = columnMeta[columnName];
|
||
if (meta?.inputType === "category") {
|
||
const mapping = categoryMappings[columnName];
|
||
const valueStr = String(value);
|
||
const categoryData = mapping?.[valueStr];
|
||
const displayLabel = categoryData?.label || valueStr;
|
||
const displayColor = categoryData?.color;
|
||
|
||
// 색상이 없거나(null/undefined), 빈 문자열이거나, "none"이면 일반 텍스트로 표시 (배지 없음)
|
||
if (!displayColor || displayColor === "none") {
|
||
return displayLabel;
|
||
}
|
||
|
||
return (
|
||
<Badge
|
||
style={{
|
||
backgroundColor: displayColor,
|
||
borderColor: displayColor,
|
||
}}
|
||
className="text-white text-xs"
|
||
>
|
||
{displayLabel}
|
||
</Badge>
|
||
);
|
||
}
|
||
|
||
return String(value);
|
||
};
|
||
|
||
// 컬럼명을 라벨로 변환하는 헬퍼 함수
|
||
const getColumnLabel = (columnName: string) => {
|
||
if (!actualTableColumns || actualTableColumns.length === 0) {
|
||
// 컬럼 정보가 없으면 컬럼명을 보기 좋게 변환
|
||
return formatColumnName(columnName);
|
||
}
|
||
const column = actualTableColumns.find(
|
||
(col) => col.columnName === columnName || col.column_name === columnName
|
||
);
|
||
// 다양한 라벨 필드명 지원 (displayName이 API에서 반환하는 라벨)
|
||
const label = column?.displayName || column?.columnLabel || column?.column_label || column?.label;
|
||
return label || formatColumnName(columnName);
|
||
};
|
||
|
||
// 컬럼명을 보기 좋은 형태로 변환 (snake_case -> 공백 구분)
|
||
const formatColumnName = (columnName: string) => {
|
||
// 언더스코어를 공백으로 변환하고 각 단어 첫 글자 대문자화
|
||
return columnName
|
||
.replace(/_/g, ' ')
|
||
.replace(/\b\w/g, (char) => char.toUpperCase());
|
||
};
|
||
|
||
// 자동 폴백 로직 - 컬럼이 설정되지 않은 경우 적절한 기본값 찾기
|
||
const getAutoFallbackValue = (data: any, type: "title" | "subtitle" | "description") => {
|
||
const keys = Object.keys(data);
|
||
switch (type) {
|
||
case "title":
|
||
// 이름 관련 필드 우선 검색
|
||
return data.name || data.title || data.label || data[keys[0]] || "제목 없음";
|
||
case "subtitle":
|
||
// 직책, 부서, 카테고리 관련 필드 검색
|
||
return data.position || data.role || data.department || data.category || data.type || "";
|
||
case "description":
|
||
// 설명, 내용 관련 필드 검색
|
||
return data.description || data.content || data.summary || data.memo || "";
|
||
default:
|
||
return "";
|
||
}
|
||
};
|
||
|
||
// 이벤트 핸들러
|
||
const handleClick = (e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
onClick?.();
|
||
};
|
||
|
||
// DOM 안전한 props만 필터링 (filterDOMProps 유틸리티 사용)
|
||
const safeDomProps = filterDOMProps(props);
|
||
|
||
return (
|
||
<>
|
||
<style jsx>{`
|
||
.card-hover {
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.card-hover::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||
transition: left 0.6s ease;
|
||
}
|
||
.card-hover:hover::before {
|
||
left: 100%;
|
||
}
|
||
.card-hover:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow:
|
||
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||
border-color: #3b82f6;
|
||
}
|
||
.card-container {
|
||
position: relative;
|
||
}
|
||
.card-container::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: transparent;
|
||
border-radius: 12px;
|
||
pointer-events: none;
|
||
}
|
||
`}</style>
|
||
<div
|
||
className={className}
|
||
style={{
|
||
...componentStyle,
|
||
...style,
|
||
}}
|
||
onClick={handleClick}
|
||
onDragStart={onDragStart}
|
||
onDragEnd={onDragEnd}
|
||
{...safeDomProps}
|
||
>
|
||
<div style={containerStyle} className="card-container">
|
||
{displayData.length === 0 ? (
|
||
<div
|
||
style={{
|
||
gridColumn: "1 / -1",
|
||
textAlign: "center",
|
||
padding: "40px 20px",
|
||
color: "hsl(var(--muted-foreground))",
|
||
fontSize: "14px",
|
||
}}
|
||
>
|
||
표시할 데이터가 없습니다.
|
||
</div>
|
||
) : (
|
||
displayData.map((data, index) => {
|
||
// 타이틀, 서브타이틀, 설명 값 결정 (문자열로 가져와서 표시)
|
||
const titleValue =
|
||
getColumnValueAsString(data, componentConfig.columnMapping?.titleColumn) || getAutoFallbackValue(data, "title");
|
||
|
||
const subtitleValue =
|
||
getColumnValueAsString(data, componentConfig.columnMapping?.subtitleColumn) ||
|
||
getAutoFallbackValue(data, "subtitle");
|
||
|
||
const descriptionValue =
|
||
getColumnValueAsString(data, componentConfig.columnMapping?.descriptionColumn) ||
|
||
getAutoFallbackValue(data, "description");
|
||
|
||
// 이미지 컬럼 자동 감지 (image_path, photo 등) - 대소문자 무시
|
||
const imageColumn = componentConfig.columnMapping?.imageColumn ||
|
||
Object.keys(data).find(key => {
|
||
const lowerKey = key.toLowerCase();
|
||
return lowerKey.includes('image') || lowerKey.includes('photo') ||
|
||
lowerKey.includes('avatar') || lowerKey.includes('thumbnail') ||
|
||
lowerKey.includes('picture') || lowerKey.includes('img');
|
||
});
|
||
|
||
// 이미지 값 가져오기 (직접 접근 + 폴백)
|
||
const imageValue = imageColumn
|
||
? data[imageColumn]
|
||
: (data.image_path || data.imagePath || data.avatar || data.image || data.photo || "");
|
||
|
||
// 이미지 표시 여부 결정: 이미지 값이 있거나, 설정에서 활성화된 경우
|
||
const shouldShowImage = componentConfig.cardStyle?.showImage !== false;
|
||
|
||
// 이미지 URL 생성 (TableListComponent와 동일한 로직 사용)
|
||
const imageUrl = imageValue ? getFullImageUrl(imageValue) : "";
|
||
|
||
const cardKey = getCardKey(data, index);
|
||
const isCardSelected = selectedRows.has(cardKey);
|
||
|
||
return (
|
||
<div
|
||
key={cardKey}
|
||
style={{
|
||
...cardStyle,
|
||
borderColor: isCardSelected ? "#000" : "#e5e7eb",
|
||
borderWidth: isCardSelected ? "2px" : "1px",
|
||
boxShadow: isCardSelected
|
||
? "0 4px 6px -1px rgba(0, 0, 0, 0.15)"
|
||
: "0 1px 3px rgba(0, 0, 0, 0.08)",
|
||
flexDirection: "row", // 가로 배치
|
||
}}
|
||
className="card-hover group cursor-pointer transition-all duration-150"
|
||
onClick={() => handleCardClick(data, index)}
|
||
>
|
||
{/* 카드 이미지 - 좌측 전체 높이 (이미지 컬럼이 있으면 자동 표시) */}
|
||
{shouldShowImage && (
|
||
<div className="flex-shrink-0 flex items-center justify-center mr-4">
|
||
{imageUrl ? (
|
||
<img
|
||
src={imageUrl}
|
||
alt={titleValue || "이미지"}
|
||
className="h-16 w-16 rounded-lg object-cover border border-gray-200"
|
||
onError={(e) => {
|
||
// 이미지 로드 실패 시 기본 아이콘으로 대체
|
||
e.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='64' height='64' fill='%23e0e7ff' rx='8'/%3E%3Ctext x='32' y='40' text-anchor='middle' fill='%236366f1' font-size='24'%3E👤%3C/text%3E%3C/svg%3E";
|
||
}}
|
||
/>
|
||
) : (
|
||
<div className="flex h-16 w-16 items-center justify-center rounded-lg bg-primary/10">
|
||
<span className="text-2xl text-primary">👤</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 우측 컨텐츠 영역 */}
|
||
<div className="flex flex-col flex-1 min-w-0">
|
||
{/* 타이틀 + 서브타이틀 */}
|
||
{(componentConfig.cardStyle?.showTitle || componentConfig.cardStyle?.showSubtitle) && (
|
||
<div className="mb-1 flex items-center gap-2 flex-wrap">
|
||
{componentConfig.cardStyle?.showTitle && (
|
||
<h3 className="text-base font-semibold text-foreground leading-tight">{titleValue}</h3>
|
||
)}
|
||
{componentConfig.cardStyle?.showSubtitle && subtitleValue && (
|
||
<span className="text-xs font-medium text-primary bg-primary/10 px-2 py-0.5 rounded-full">{subtitleValue}</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 추가 표시 컬럼들 - 가로 배치 */}
|
||
{componentConfig.columnMapping?.displayColumns &&
|
||
componentConfig.columnMapping.displayColumns.length > 0 && (
|
||
<div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground">
|
||
{componentConfig.columnMapping.displayColumns.map((columnName, idx) => {
|
||
const value = getColumnValue(data, columnName);
|
||
if (!value) return null;
|
||
|
||
return (
|
||
<div key={idx} className="flex items-center gap-1">
|
||
<span>{getColumnLabel(columnName)}:</span>
|
||
<span className="font-medium text-foreground">{value}</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* 카드 설명 */}
|
||
{componentConfig.cardStyle?.showDescription && descriptionValue && (
|
||
<div className="mt-1 flex-1">
|
||
<p className="text-xs text-muted-foreground leading-relaxed">
|
||
{truncateText(descriptionValue, componentConfig.cardStyle?.maxDescriptionLength || 100)}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* 카드 액션 - 설정에 따라 표시 */}
|
||
{(componentConfig.cardStyle?.showActions ?? true) && (
|
||
<div className="mt-2 flex justify-end space-x-2">
|
||
{(componentConfig.cardStyle?.showViewButton ?? true) && (
|
||
<button
|
||
className="text-xs text-blue-600 hover:text-blue-800 transition-colors"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleCardView(data);
|
||
}}
|
||
>
|
||
상세보기
|
||
</button>
|
||
)}
|
||
{(componentConfig.cardStyle?.showEditButton ?? true) && (
|
||
<button
|
||
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleCardEdit(data);
|
||
}}
|
||
>
|
||
편집
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 상세보기 모달 */}
|
||
<Dialog open={viewModalOpen} onOpenChange={setViewModalOpen}>
|
||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle className="flex items-center gap-2">
|
||
<span className="text-lg">📋</span>
|
||
상세 정보
|
||
</DialogTitle>
|
||
</DialogHeader>
|
||
|
||
{selectedData && (
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{Object.entries(selectedData)
|
||
.filter(([key, value]) => value !== null && value !== undefined && value !== '')
|
||
.map(([key, value]) => {
|
||
// 카테고리 타입인 경우 배지로 표시
|
||
const meta = columnMeta[key];
|
||
let displayValue: React.ReactNode = String(value);
|
||
|
||
if (meta?.inputType === "category") {
|
||
const mapping = categoryMappings[key];
|
||
const valueStr = String(value);
|
||
const categoryData = mapping?.[valueStr];
|
||
const displayLabel = categoryData?.label || valueStr;
|
||
const displayColor = categoryData?.color;
|
||
|
||
// 색상이 있고 "none"이 아닌 경우에만 배지로 표시
|
||
if (displayColor && displayColor !== "none") {
|
||
displayValue = (
|
||
<Badge
|
||
style={{
|
||
backgroundColor: displayColor,
|
||
borderColor: displayColor,
|
||
}}
|
||
className="text-white"
|
||
>
|
||
{displayLabel}
|
||
</Badge>
|
||
);
|
||
} else {
|
||
// 배지 없음: 일반 텍스트로 표시
|
||
displayValue = displayLabel;
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div key={key} className="bg-muted rounded-lg p-3">
|
||
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">
|
||
{getColumnLabel(key)}
|
||
</div>
|
||
<div className="text-sm font-medium text-foreground break-words">
|
||
{displayValue}
|
||
</div>
|
||
</div>
|
||
);
|
||
})
|
||
}
|
||
</div>
|
||
|
||
<div className="flex justify-end pt-4 border-t">
|
||
<button
|
||
onClick={() => setViewModalOpen(false)}
|
||
className="px-4 py-2 text-sm font-medium text-foreground bg-muted hover:bg-muted/80 rounded-md transition-colors"
|
||
>
|
||
닫기
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* 편집 모달 */}
|
||
<Dialog open={editModalOpen} onOpenChange={setEditModalOpen}>
|
||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle className="flex items-center gap-2">
|
||
<span className="text-lg">✏️</span>
|
||
데이터 편집
|
||
</DialogTitle>
|
||
</DialogHeader>
|
||
|
||
{editData && (
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-1 gap-4">
|
||
{Object.entries(editData)
|
||
.filter(([key, value]) => value !== null && value !== undefined)
|
||
.map(([key, value]) => (
|
||
<div key={key} className="space-y-2">
|
||
<label className="text-sm font-medium text-foreground block">
|
||
{key.replace(/_/g, ' ').toUpperCase()}
|
||
</label>
|
||
<Input
|
||
type="text"
|
||
value={String(value)}
|
||
onChange={(e) => handleEditFormChange(key, e.target.value)}
|
||
className="w-full"
|
||
placeholder={`${key} 입력`}
|
||
/>
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
|
||
<div className="flex justify-end gap-2 pt-4 border-t">
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => {
|
||
setEditModalOpen(false);
|
||
setEditData(null);
|
||
}}
|
||
>
|
||
취소
|
||
</Button>
|
||
<Button
|
||
onClick={handleEditSave}
|
||
className="bg-primary hover:bg-primary/90"
|
||
>
|
||
저장
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</DialogContent>
|
||
</Dialog>
|
||
</>
|
||
);
|
||
};
|