802 lines
32 KiB
TypeScript
802 lines
32 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useCallback, useRef, useEffect } from "react";
|
||
import dynamic from "next/dynamic";
|
||
import { DashboardElement, QueryResult } from "./types";
|
||
import { ChartRenderer } from "./charts/ChartRenderer";
|
||
import { snapToGrid, snapSizeToGrid, GRID_CONFIG } from "./gridUtils";
|
||
|
||
// 위젯 동적 임포트
|
||
const WeatherWidget = dynamic(() => import("@/components/dashboard/widgets/WeatherWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
const ExchangeWidget = dynamic(() => import("@/components/dashboard/widgets/ExchangeWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
const CalculatorWidget = dynamic(() => import("@/components/dashboard/widgets/CalculatorWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
const VehicleStatusWidget = dynamic(() => import("@/components/dashboard/widgets/VehicleStatusWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
const VehicleListWidget = dynamic(() => import("@/components/dashboard/widgets/VehicleListWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
const VehicleMapOnlyWidget = dynamic(() => import("@/components/dashboard/widgets/VehicleMapOnlyWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
// 범용 지도 위젯 (차량, 창고, 고객 등 모든 위치 위젯 통합)
|
||
const MapSummaryWidget = dynamic(() => import("@/components/dashboard/widgets/MapSummaryWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
// 범용 상태 요약 위젯 (차량, 배송 등 모든 상태 위젯 통합)
|
||
const StatusSummaryWidget = dynamic(() => import("@/components/dashboard/widgets/StatusSummaryWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
// 범용 목록 위젯 (차량, 기사, 제품 등 모든 목록 위젯 통합) - 다른 분 작업 중, 임시 주석
|
||
/* const ListSummaryWidget = dynamic(() => import("@/components/dashboard/widgets/ListSummaryWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
}); */
|
||
|
||
// 개별 위젯들 (주석 처리 - StatusSummaryWidget으로 통합됨)
|
||
// const DeliveryStatusSummaryWidget = dynamic(() => import("@/components/dashboard/widgets/DeliveryStatusSummaryWidget"), {
|
||
// ssr: false,
|
||
// loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
// });
|
||
// const DeliveryTodayStatsWidget = dynamic(() => import("@/components/dashboard/widgets/DeliveryTodayStatsWidget"), {
|
||
// ssr: false,
|
||
// loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
// });
|
||
// const CargoListWidget = dynamic(() => import("@/components/dashboard/widgets/CargoListWidget"), {
|
||
// ssr: false,
|
||
// loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
// });
|
||
// const CustomerIssuesWidget = dynamic(() => import("@/components/dashboard/widgets/CustomerIssuesWidget"), {
|
||
// ssr: false,
|
||
// loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
// });
|
||
|
||
const RiskAlertWidget = dynamic(() => import("@/components/dashboard/widgets/RiskAlertWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
const TodoWidget = dynamic(() => import("@/components/dashboard/widgets/TodoWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
const BookingAlertWidget = dynamic(() => import("@/components/dashboard/widgets/BookingAlertWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
const MaintenanceWidget = dynamic(() => import("@/components/dashboard/widgets/MaintenanceWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
const DocumentWidget = dynamic(() => import("@/components/dashboard/widgets/DocumentWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
// 시계 위젯 임포트
|
||
import { ClockWidget } from "./widgets/ClockWidget";
|
||
// 달력 위젯 임포트
|
||
import { CalendarWidget } from "./widgets/CalendarWidget";
|
||
// 기사 관리 위젯 임포트
|
||
import { DriverManagementWidget } from "./widgets/DriverManagementWidget";
|
||
import { ListWidget } from "./widgets/ListWidget";
|
||
|
||
// 야드 관리 3D 위젯
|
||
const YardManagement3DWidget = dynamic(() => import("./widgets/YardManagement3DWidget"), {
|
||
ssr: false,
|
||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||
});
|
||
|
||
interface CanvasElementProps {
|
||
element: DashboardElement;
|
||
isSelected: boolean;
|
||
cellSize: number;
|
||
canvasWidth?: number;
|
||
onUpdate: (id: string, updates: Partial<DashboardElement>) => void;
|
||
onRemove: (id: string) => void;
|
||
onSelect: (id: string | null) => void;
|
||
onConfigure?: (element: DashboardElement) => void;
|
||
}
|
||
|
||
/**
|
||
* 캔버스에 배치된 개별 요소 컴포넌트
|
||
* - 드래그로 이동 가능 (그리드 스냅)
|
||
* - 크기 조절 핸들 (그리드 스냅)
|
||
* - 삭제 버튼
|
||
*/
|
||
export function CanvasElement({
|
||
element,
|
||
isSelected,
|
||
cellSize,
|
||
canvasWidth = 1560,
|
||
onUpdate,
|
||
onRemove,
|
||
onSelect,
|
||
onConfigure,
|
||
}: CanvasElementProps) {
|
||
const [isDragging, setIsDragging] = useState(false);
|
||
const [isResizing, setIsResizing] = useState(false);
|
||
const [dragStart, setDragStart] = useState({ x: 0, y: 0, elementX: 0, elementY: 0 });
|
||
const [resizeStart, setResizeStart] = useState({
|
||
x: 0,
|
||
y: 0,
|
||
width: 0,
|
||
height: 0,
|
||
elementX: 0,
|
||
elementY: 0,
|
||
handle: "",
|
||
});
|
||
const [chartData, setChartData] = useState<QueryResult | null>(null);
|
||
const [isLoadingData, setIsLoadingData] = useState(false);
|
||
const elementRef = useRef<HTMLDivElement>(null);
|
||
|
||
// 드래그/리사이즈 중 임시 위치/크기 (스냅 전)
|
||
const [tempPosition, setTempPosition] = useState<{ x: number; y: number } | null>(null);
|
||
const [tempSize, setTempSize] = useState<{ width: number; height: number } | null>(null);
|
||
|
||
// 요소 선택 처리
|
||
const handleMouseDown = useCallback(
|
||
(e: React.MouseEvent) => {
|
||
// 닫기 버튼이나 리사이즈 핸들 클릭 시 무시
|
||
if ((e.target as HTMLElement).closest(".element-close, .resize-handle")) {
|
||
return;
|
||
}
|
||
|
||
// 위젯 내부 (헤더 제외) 클릭 시 드래그 무시 - 인터랙티브 사용 가능
|
||
if ((e.target as HTMLElement).closest(".widget-interactive-area")) {
|
||
return;
|
||
}
|
||
|
||
// 선택되지 않은 경우에만 선택 처리
|
||
if (!isSelected) {
|
||
onSelect(element.id);
|
||
}
|
||
|
||
setIsDragging(true);
|
||
setDragStart({
|
||
x: e.clientX,
|
||
y: e.clientY,
|
||
elementX: element.position.x,
|
||
elementY: element.position.y,
|
||
});
|
||
e.preventDefault();
|
||
},
|
||
[element.id, element.position.x, element.position.y, onSelect, isSelected],
|
||
);
|
||
|
||
// 리사이즈 핸들 마우스다운
|
||
const handleResizeMouseDown = useCallback(
|
||
(e: React.MouseEvent, handle: string) => {
|
||
e.stopPropagation();
|
||
setIsResizing(true);
|
||
setResizeStart({
|
||
x: e.clientX,
|
||
y: e.clientY,
|
||
width: element.size.width,
|
||
height: element.size.height,
|
||
elementX: element.position.x,
|
||
elementY: element.position.y,
|
||
handle,
|
||
});
|
||
},
|
||
[element.size.width, element.size.height, element.position.x, element.position.y],
|
||
);
|
||
|
||
// 마우스 이동 처리 (그리드 스냅 적용)
|
||
const handleMouseMove = useCallback(
|
||
(e: MouseEvent) => {
|
||
if (isDragging) {
|
||
const deltaX = e.clientX - dragStart.x;
|
||
const deltaY = e.clientY - dragStart.y;
|
||
|
||
// 임시 위치 계산
|
||
let rawX = Math.max(0, dragStart.elementX + deltaX);
|
||
const rawY = Math.max(0, dragStart.elementY + deltaY);
|
||
|
||
// X 좌표가 캔버스 너비를 벗어나지 않도록 제한
|
||
const maxX = canvasWidth - element.size.width;
|
||
rawX = Math.min(rawX, maxX);
|
||
|
||
// 드래그 중 실시간 스냅 (마그네틱 스냅)
|
||
const subGridSize = Math.floor(cellSize / 3);
|
||
const gridSize = cellSize + 5; // GAP 포함한 실제 그리드 크기
|
||
const magneticThreshold = 15; // 큰 그리드에 끌리는 거리 (px)
|
||
|
||
// X 좌표 스냅 (큰 그리드 우선, 없으면 서브그리드)
|
||
const nearestGridX = Math.round(rawX / gridSize) * gridSize;
|
||
const distToGridX = Math.abs(rawX - nearestGridX);
|
||
const snappedX = distToGridX <= magneticThreshold ? nearestGridX : Math.round(rawX / subGridSize) * subGridSize;
|
||
|
||
// Y 좌표 스냅 (큰 그리드 우선, 없으면 서브그리드)
|
||
const nearestGridY = Math.round(rawY / gridSize) * gridSize;
|
||
const distToGridY = Math.abs(rawY - nearestGridY);
|
||
const snappedY = distToGridY <= magneticThreshold ? nearestGridY : Math.round(rawY / subGridSize) * subGridSize;
|
||
|
||
setTempPosition({ x: snappedX, y: snappedY });
|
||
} else if (isResizing) {
|
||
const deltaX = e.clientX - resizeStart.x;
|
||
const deltaY = e.clientY - resizeStart.y;
|
||
|
||
let newWidth = resizeStart.width;
|
||
let newHeight = resizeStart.height;
|
||
let newX = resizeStart.elementX;
|
||
let newY = resizeStart.elementY;
|
||
|
||
// 최소 크기 설정: 달력은 2x3, 나머지는 2x2
|
||
const minWidthCells = 2;
|
||
const minHeightCells = element.type === "widget" && element.subtype === "calendar" ? 3 : 2;
|
||
const minWidth = cellSize * minWidthCells;
|
||
const minHeight = cellSize * minHeightCells;
|
||
|
||
switch (resizeStart.handle) {
|
||
case "se": // 오른쪽 아래
|
||
newWidth = Math.max(minWidth, resizeStart.width + deltaX);
|
||
newHeight = Math.max(minHeight, resizeStart.height + deltaY);
|
||
break;
|
||
case "sw": // 왼쪽 아래
|
||
newWidth = Math.max(minWidth, resizeStart.width - deltaX);
|
||
newHeight = Math.max(minHeight, resizeStart.height + deltaY);
|
||
newX = resizeStart.elementX + deltaX;
|
||
break;
|
||
case "ne": // 오른쪽 위
|
||
newWidth = Math.max(minWidth, resizeStart.width + deltaX);
|
||
newHeight = Math.max(minHeight, resizeStart.height - deltaY);
|
||
newY = resizeStart.elementY + deltaY;
|
||
break;
|
||
case "nw": // 왼쪽 위
|
||
newWidth = Math.max(minWidth, resizeStart.width - deltaX);
|
||
newHeight = Math.max(minHeight, resizeStart.height - deltaY);
|
||
newX = resizeStart.elementX + deltaX;
|
||
newY = resizeStart.elementY + deltaY;
|
||
break;
|
||
}
|
||
|
||
// 가로 너비가 캔버스를 벗어나지 않도록 제한
|
||
const maxWidth = canvasWidth - newX;
|
||
newWidth = Math.min(newWidth, maxWidth);
|
||
|
||
// 리사이즈 중 실시간 스냅 (마그네틱 스냅)
|
||
const subGridSize = Math.floor(cellSize / 3);
|
||
const gridSize = cellSize + 5; // GAP 포함한 실제 그리드 크기
|
||
const magneticThreshold = 15;
|
||
|
||
// 위치 스냅
|
||
const nearestGridX = Math.round(newX / gridSize) * gridSize;
|
||
const distToGridX = Math.abs(newX - nearestGridX);
|
||
const snappedX = distToGridX <= magneticThreshold ? nearestGridX : Math.round(newX / subGridSize) * subGridSize;
|
||
|
||
const nearestGridY = Math.round(newY / gridSize) * gridSize;
|
||
const distToGridY = Math.abs(newY - nearestGridY);
|
||
const snappedY = distToGridY <= magneticThreshold ? nearestGridY : Math.round(newY / subGridSize) * subGridSize;
|
||
|
||
// 크기 스냅 (그리드 칸 단위로 스냅하되, 마지막 GAP은 제외)
|
||
// 예: 1칸 = cellSize, 2칸 = cellSize*2 + GAP, 3칸 = cellSize*3 + GAP*2
|
||
const calculateGridWidth = (cells: number) => cells * cellSize + Math.max(0, cells - 1) * 5;
|
||
|
||
// 가장 가까운 그리드 칸 수 계산
|
||
const nearestWidthCells = Math.round(newWidth / gridSize);
|
||
const nearestGridWidth = calculateGridWidth(nearestWidthCells);
|
||
const distToGridWidth = Math.abs(newWidth - nearestGridWidth);
|
||
const snappedWidth =
|
||
distToGridWidth <= magneticThreshold ? nearestGridWidth : Math.round(newWidth / subGridSize) * subGridSize;
|
||
|
||
const nearestHeightCells = Math.round(newHeight / gridSize);
|
||
const nearestGridHeight = calculateGridWidth(nearestHeightCells);
|
||
const distToGridHeight = Math.abs(newHeight - nearestGridHeight);
|
||
const snappedHeight =
|
||
distToGridHeight <= magneticThreshold ? nearestGridHeight : Math.round(newHeight / subGridSize) * subGridSize;
|
||
|
||
// 임시 크기/위치 저장 (스냅됨)
|
||
setTempPosition({ x: Math.max(0, snappedX), y: Math.max(0, snappedY) });
|
||
setTempSize({ width: snappedWidth, height: snappedHeight });
|
||
}
|
||
},
|
||
[
|
||
isDragging,
|
||
isResizing,
|
||
dragStart,
|
||
resizeStart,
|
||
element.size.width,
|
||
element.type,
|
||
element.subtype,
|
||
canvasWidth,
|
||
cellSize,
|
||
],
|
||
);
|
||
|
||
// 마우스 업 처리 (이미 스냅된 위치 사용)
|
||
const handleMouseUp = useCallback(() => {
|
||
if (isDragging && tempPosition) {
|
||
// tempPosition은 이미 드래그 중에 마그네틱 스냅 적용됨
|
||
// 다시 스냅하지 않고 그대로 사용!
|
||
let finalX = tempPosition.x;
|
||
const finalY = tempPosition.y;
|
||
|
||
// X 좌표가 캔버스 너비를 벗어나지 않도록 최종 제한
|
||
const maxX = canvasWidth - element.size.width;
|
||
finalX = Math.min(finalX, maxX);
|
||
|
||
onUpdate(element.id, {
|
||
position: { x: finalX, y: finalY },
|
||
});
|
||
|
||
setTempPosition(null);
|
||
}
|
||
|
||
if (isResizing && tempPosition && tempSize) {
|
||
// tempPosition과 tempSize는 이미 리사이즈 중에 마그네틱 스냅 적용됨
|
||
// 다시 스냅하지 않고 그대로 사용!
|
||
let finalX = tempPosition.x;
|
||
const finalY = tempPosition.y;
|
||
let finalWidth = tempSize.width;
|
||
const finalHeight = tempSize.height;
|
||
|
||
// 가로 너비가 캔버스를 벗어나지 않도록 최종 제한
|
||
const maxWidth = canvasWidth - finalX;
|
||
finalWidth = Math.min(finalWidth, maxWidth);
|
||
|
||
onUpdate(element.id, {
|
||
position: { x: finalX, y: finalY },
|
||
size: { width: finalWidth, height: finalHeight },
|
||
});
|
||
|
||
setTempPosition(null);
|
||
setTempSize(null);
|
||
}
|
||
|
||
setIsDragging(false);
|
||
setIsResizing(false);
|
||
}, [isDragging, isResizing, tempPosition, tempSize, element.id, element.size.width, onUpdate, cellSize, canvasWidth]);
|
||
|
||
// 전역 마우스 이벤트 등록
|
||
React.useEffect(() => {
|
||
if (isDragging || isResizing) {
|
||
document.addEventListener("mousemove", handleMouseMove);
|
||
document.addEventListener("mouseup", handleMouseUp);
|
||
|
||
return () => {
|
||
document.removeEventListener("mousemove", handleMouseMove);
|
||
document.removeEventListener("mouseup", handleMouseUp);
|
||
};
|
||
}
|
||
}, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
|
||
|
||
// 데이터 로딩
|
||
const loadChartData = useCallback(async () => {
|
||
if (!element.dataSource?.query || element.type !== "chart") {
|
||
return;
|
||
}
|
||
|
||
setIsLoadingData(true);
|
||
try {
|
||
let result;
|
||
|
||
// 필터 적용 (날짜 필터 등)
|
||
const { applyQueryFilters } = await import("./utils/queryHelpers");
|
||
const filteredQuery = applyQueryFilters(element.dataSource.query, element.chartConfig);
|
||
|
||
// 외부 DB vs 현재 DB 분기
|
||
if (element.dataSource.connectionType === "external" && element.dataSource.externalConnectionId) {
|
||
// 외부 DB
|
||
const { ExternalDbConnectionAPI } = await import("@/lib/api/externalDbConnection");
|
||
const externalResult = await ExternalDbConnectionAPI.executeQuery(
|
||
parseInt(element.dataSource.externalConnectionId),
|
||
filteredQuery,
|
||
);
|
||
|
||
if (!externalResult.success) {
|
||
throw new Error(externalResult.message || "외부 DB 쿼리 실행 실패");
|
||
}
|
||
|
||
setChartData({
|
||
columns: externalResult.data?.[0] ? Object.keys(externalResult.data[0]) : [],
|
||
rows: externalResult.data || [],
|
||
totalRows: externalResult.data?.length || 0,
|
||
executionTime: 0,
|
||
});
|
||
} else {
|
||
// 현재 DB
|
||
const { dashboardApi } = await import("@/lib/api/dashboard");
|
||
result = await dashboardApi.executeQuery(filteredQuery);
|
||
|
||
setChartData({
|
||
columns: result.columns || [],
|
||
rows: result.rows || [],
|
||
totalRows: result.rowCount || 0,
|
||
executionTime: 0,
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error("Chart data loading error:", error);
|
||
setChartData(null);
|
||
} finally {
|
||
setIsLoadingData(false);
|
||
}
|
||
}, [
|
||
element.dataSource?.query,
|
||
element.dataSource?.connectionType,
|
||
element.dataSource?.externalConnectionId,
|
||
element.chartConfig,
|
||
element.type,
|
||
]);
|
||
|
||
// 컴포넌트 마운트 시 및 쿼리 변경 시 데이터 로딩
|
||
useEffect(() => {
|
||
loadChartData();
|
||
}, [loadChartData]);
|
||
|
||
// 자동 새로고침 설정
|
||
useEffect(() => {
|
||
if (!element.dataSource?.refreshInterval || element.dataSource.refreshInterval === 0) {
|
||
return;
|
||
}
|
||
|
||
const interval = setInterval(loadChartData, element.dataSource.refreshInterval);
|
||
return () => clearInterval(interval);
|
||
}, [element.dataSource?.refreshInterval, loadChartData]);
|
||
|
||
// 요소 삭제
|
||
const handleRemove = useCallback(() => {
|
||
onRemove(element.id);
|
||
}, [element.id, onRemove]);
|
||
|
||
// 스타일 클래스 생성
|
||
const getContentClass = () => {
|
||
if (element.type === "chart") {
|
||
switch (element.subtype) {
|
||
case "bar":
|
||
return "bg-gradient-to-br from-indigo-400 to-purple-600";
|
||
case "pie":
|
||
return "bg-gradient-to-br from-pink-400 to-red-500";
|
||
case "line":
|
||
return "bg-gradient-to-br from-blue-400 to-cyan-400";
|
||
default:
|
||
return "bg-gray-200";
|
||
}
|
||
} else if (element.type === "widget") {
|
||
switch (element.subtype) {
|
||
case "exchange":
|
||
return "bg-gradient-to-br from-pink-400 to-yellow-400";
|
||
case "weather":
|
||
return "bg-gradient-to-br from-cyan-400 to-indigo-800";
|
||
case "clock":
|
||
return "bg-gradient-to-br from-teal-400 to-cyan-600";
|
||
case "calendar":
|
||
return "bg-gradient-to-br from-indigo-400 to-purple-600";
|
||
case "driver-management":
|
||
return "bg-gradient-to-br from-blue-400 to-indigo-600";
|
||
case "list":
|
||
return "bg-gradient-to-br from-cyan-400 to-blue-600";
|
||
default:
|
||
return "bg-gray-200";
|
||
}
|
||
}
|
||
return "bg-gray-200";
|
||
};
|
||
|
||
// 드래그/리사이즈 중일 때는 임시 위치/크기 사용, 아니면 실제 값 사용
|
||
const displayPosition = tempPosition || element.position;
|
||
const displaySize = tempSize || element.size;
|
||
|
||
return (
|
||
<div
|
||
ref={elementRef}
|
||
className={`absolute min-h-[120px] min-w-[120px] cursor-move rounded-lg border-2 bg-white shadow-lg ${isSelected ? "border-blue-500 shadow-blue-200" : "border-gray-400"} ${isDragging || isResizing ? "transition-none" : "transition-all duration-150"} `}
|
||
style={{
|
||
left: displayPosition.x,
|
||
top: displayPosition.y,
|
||
width: displaySize.width,
|
||
height: displaySize.height,
|
||
padding: `${GRID_CONFIG.ELEMENT_PADDING}px`,
|
||
boxSizing: "border-box",
|
||
}}
|
||
onMouseDown={handleMouseDown}
|
||
>
|
||
{/* 헤더 */}
|
||
<div className="flex cursor-move items-center justify-between border-b border-gray-200 bg-gray-50 p-3">
|
||
<span className="text-sm font-bold text-gray-800">{element.customTitle || element.title}</span>
|
||
<div className="flex gap-1">
|
||
{/* 설정 버튼 (시계, 달력, 기사관리 위젯은 자체 설정 UI 사용) */}
|
||
{onConfigure &&
|
||
!(
|
||
element.type === "widget" &&
|
||
(element.subtype === "clock" || element.subtype === "calendar" || element.subtype === "driver-management")
|
||
) && (
|
||
<button
|
||
className="hover:bg-accent0 flex h-6 w-6 items-center justify-center rounded text-gray-400 transition-colors duration-200 hover:text-white"
|
||
onClick={() => onConfigure(element)}
|
||
title="설정"
|
||
>
|
||
⚙️
|
||
</button>
|
||
)}
|
||
{/* 삭제 버튼 */}
|
||
<button
|
||
className="element-close hover:bg-destructive/100 flex h-6 w-6 items-center justify-center rounded text-gray-400 transition-colors duration-200 hover:text-white"
|
||
onClick={handleRemove}
|
||
title="삭제"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 내용 */}
|
||
<div className="relative h-[calc(100%-45px)]">
|
||
{element.type === "chart" ? (
|
||
// 차트 렌더링
|
||
<div className="h-full w-full bg-white">
|
||
{isLoadingData ? (
|
||
<div className="flex h-full w-full items-center justify-center text-gray-500">
|
||
<div className="text-center">
|
||
<div className="border-primary mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" />
|
||
<div className="text-sm">데이터 로딩 중...</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<ChartRenderer
|
||
element={element}
|
||
data={chartData || undefined}
|
||
width={element.size.width}
|
||
height={element.size.height - 45}
|
||
/>
|
||
)}
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "weather" ? (
|
||
// 날씨 위젯 렌더링
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<WeatherWidget city="서울" refreshInterval={600000} />
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "exchange" ? (
|
||
// 환율 위젯 렌더링
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<ExchangeWidget baseCurrency="KRW" targetCurrency="USD" refreshInterval={600000} />
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "clock" ? (
|
||
// 시계 위젯 렌더링
|
||
<div className="h-full w-full">
|
||
<ClockWidget
|
||
element={element}
|
||
onConfigUpdate={(newConfig) => {
|
||
onUpdate(element.id, { clockConfig: newConfig });
|
||
}}
|
||
/>
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "calculator" ? (
|
||
// 계산기 위젯 렌더링
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<CalculatorWidget />
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "vehicle-status" ? (
|
||
// 차량 상태 현황 위젯 렌더링
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<VehicleStatusWidget element={element} />
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "vehicle-list" ? (
|
||
// 차량 목록 위젯 렌더링
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<VehicleListWidget element={element} />
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "map-summary" ? (
|
||
// 커스텀 지도 카드 - 범용 위젯
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<MapSummaryWidget element={element} />
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "vehicle-map" ? (
|
||
// 차량 위치 지도 위젯 렌더링 (구버전 - 호환용)
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<VehicleMapOnlyWidget element={element} />
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "status-summary" ? (
|
||
// 커스텀 상태 카드 - 범용 위젯
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<StatusSummaryWidget element={element} title="상태 요약" icon="📊" bgGradient="from-slate-50 to-blue-50" />
|
||
</div>
|
||
) : /* element.type === "widget" && element.subtype === "list-summary" ? (
|
||
// 커스텀 목록 카드 - 범용 위젯 (다른 분 작업 중 - 임시 주석)
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<ListSummaryWidget element={element} />
|
||
</div>
|
||
) : */ element.type === "widget" && element.subtype === "delivery-status" ? (
|
||
// 배송/화물 현황 위젯 - 범용 위젯 사용 (구버전 호환)
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<StatusSummaryWidget
|
||
element={element}
|
||
title="배송/화물 현황"
|
||
icon="📦"
|
||
bgGradient="from-slate-50 to-blue-50"
|
||
/>
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "delivery-status-summary" ? (
|
||
// 배송 상태 요약 - 범용 위젯 사용
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<StatusSummaryWidget
|
||
element={element}
|
||
title="배송 상태 요약"
|
||
icon="📊"
|
||
bgGradient="from-slate-50 to-blue-50"
|
||
statusConfig={{
|
||
배송중: { label: "배송중", color: "blue" },
|
||
완료: { label: "완료", color: "green" },
|
||
지연: { label: "지연", color: "red" },
|
||
"픽업 대기": { label: "픽업 대기", color: "yellow" },
|
||
}}
|
||
/>
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "delivery-today-stats" ? (
|
||
// 오늘 처리 현황 - 범용 위젯 사용
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<StatusSummaryWidget
|
||
element={element}
|
||
title="오늘 처리 현황"
|
||
icon="📈"
|
||
bgGradient="from-slate-50 to-green-50"
|
||
/>
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "cargo-list" ? (
|
||
// 화물 목록 - 범용 위젯 사용
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<StatusSummaryWidget
|
||
element={element}
|
||
title="화물 목록"
|
||
icon="📦"
|
||
bgGradient="from-slate-50 to-orange-50"
|
||
/>
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "customer-issues" ? (
|
||
// 고객 클레임/이슈 - 범용 위젯 사용
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<StatusSummaryWidget
|
||
element={element}
|
||
title="고객 클레임/이슈"
|
||
icon="⚠️"
|
||
bgGradient="from-slate-50 to-red-50"
|
||
/>
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "risk-alert" ? (
|
||
// 리스크/알림 위젯 렌더링
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<RiskAlertWidget />
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "calendar" ? (
|
||
// 달력 위젯 렌더링
|
||
<div className="h-full w-full">
|
||
<CalendarWidget
|
||
element={element}
|
||
onConfigUpdate={(newConfig) => {
|
||
onUpdate(element.id, { calendarConfig: newConfig });
|
||
}}
|
||
/>
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "driver-management" ? (
|
||
// 기사 관리 위젯 렌더링
|
||
<div className="h-full w-full">
|
||
<DriverManagementWidget
|
||
element={element}
|
||
onConfigUpdate={(newConfig) => {
|
||
onUpdate(element.id, { driverManagementConfig: newConfig });
|
||
}}
|
||
/>
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "list" ? (
|
||
// 리스트 위젯 렌더링
|
||
<div className="h-full w-full">
|
||
<ListWidget
|
||
element={element}
|
||
onConfigUpdate={(newConfig) => {
|
||
onUpdate(element.id, { listConfig: newConfig as any });
|
||
}}
|
||
/>
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "yard-management-3d" ? (
|
||
// 야드 관리 3D 위젯 렌더링
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<YardManagement3DWidget
|
||
isEditMode={true}
|
||
config={element.yardConfig}
|
||
onConfigChange={(newConfig) => {
|
||
onUpdate(element.id, { yardConfig: newConfig });
|
||
}}
|
||
/>
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "todo" ? (
|
||
// To-Do 위젯 렌더링
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<TodoWidget element={element} />
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "booking-alert" ? (
|
||
// 예약 요청 알림 위젯 렌더링
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<BookingAlertWidget />
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "maintenance" ? (
|
||
// 정비 일정 위젯 렌더링
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<MaintenanceWidget />
|
||
</div>
|
||
) : element.type === "widget" && element.subtype === "document" ? (
|
||
// 문서 다운로드 위젯 렌더링
|
||
<div className="widget-interactive-area h-full w-full">
|
||
<DocumentWidget />
|
||
</div>
|
||
) : (
|
||
// 기타 위젯 렌더링
|
||
<div
|
||
className={`flex h-full w-full items-center justify-center p-5 text-center text-sm font-medium text-white ${getContentClass()} `}
|
||
>
|
||
<div>
|
||
<div className="mb-2 text-4xl">🔧</div>
|
||
<div className="whitespace-pre-line">{element.content}</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 리사이즈 핸들 (선택된 요소에만 표시) */}
|
||
{isSelected && (
|
||
<>
|
||
<ResizeHandle position="nw" onMouseDown={handleResizeMouseDown} />
|
||
<ResizeHandle position="ne" onMouseDown={handleResizeMouseDown} />
|
||
<ResizeHandle position="sw" onMouseDown={handleResizeMouseDown} />
|
||
<ResizeHandle position="se" onMouseDown={handleResizeMouseDown} />
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface ResizeHandleProps {
|
||
position: "nw" | "ne" | "sw" | "se";
|
||
onMouseDown: (e: React.MouseEvent, handle: string) => void;
|
||
}
|
||
|
||
/**
|
||
* 크기 조절 핸들 컴포넌트
|
||
*/
|
||
function ResizeHandle({ position, onMouseDown }: ResizeHandleProps) {
|
||
const getPositionClass = () => {
|
||
switch (position) {
|
||
case "nw":
|
||
return "top-[-5px] left-[-5px] cursor-nw-resize";
|
||
case "ne":
|
||
return "top-[-5px] right-[-5px] cursor-ne-resize";
|
||
case "sw":
|
||
return "bottom-[-5px] left-[-5px] cursor-sw-resize";
|
||
case "se":
|
||
return "bottom-[-5px] right-[-5px] cursor-se-resize";
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className={`resize-handle absolute h-3 w-3 border border-white bg-green-500 ${getPositionClass()} `}
|
||
onMouseDown={(e) => onMouseDown(e, position)}
|
||
/>
|
||
);
|
||
}
|