Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into feature/dashboard

frontend/components/admin/dashboard/CanvasElement.tsx

@@ -22,6 +22,11 @@ const CalculatorWidget = dynamic(() => import("@/components/dashboard/widgets/Ca
   loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
 });
 
+const VehicleMapWidget = dynamic(() => import("@/components/dashboard/widgets/VehicleMapWidget"), {
+  ssr: false,
+  loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
+});
+
 // 시계 위젯 임포트
 import { ClockWidget } from "./widgets/ClockWidget";
 // 달력 위젯 임포트
@@ -402,6 +407,11 @@ export function CanvasElement({
           <div className="widget-interactive-area h-full w-full">
             <CalculatorWidget />
           </div>
+        ) : element.type === "widget" && element.subtype === "vehicle-map" ? (
+          // 차량 위치 지도 위젯 렌더링
+          <div className="widget-interactive-area h-full w-full">
+            <VehicleMapWidget />
+          </div>
         ) : element.type === "widget" && element.subtype === "calendar" ? (
           // 달력 위젯 렌더링
           <div className="h-full w-full">

frontend/components/admin/dashboard/DashboardDesigner.tsx

@@ -23,6 +23,7 @@ export default function DashboardDesigner() {
   const [dashboardId, setDashboardId] = useState<string | null>(null);
   const [dashboardTitle, setDashboardTitle] = useState<string>("");
   const [isLoading, setIsLoading] = useState(false);
+  const [canvasBackgroundColor, setCanvasBackgroundColor] = useState<string>("#f9fafb");
   const canvasRef = useRef<HTMLDivElement>(null);
 
   // URL 파라미터에서 대시보드 ID 읽기 및 데이터 로드
@@ -239,12 +240,17 @@ export default function DashboardDesigner() {
       <div className="relative flex-1 overflow-auto border-r-2 border-gray-300 bg-gray-100">
         {/* 편집 중인 대시보드 표시 */}
         {dashboardTitle && (
-          <div className="bg-accent0 absolute left-6 top-6 z-10 rounded-lg px-3 py-1 text-sm font-medium text-white shadow-lg">
+          <div className="bg-accent0 absolute top-6 left-6 z-10 rounded-lg px-3 py-1 text-sm font-medium text-white shadow-lg">
             📝 편집 중: {dashboardTitle}
           </div>
         )}
 
-        <DashboardToolbar onClearCanvas={clearCanvas} onSaveLayout={saveLayout} />
+        <DashboardToolbar
+          onClearCanvas={clearCanvas}
+          onSaveLayout={saveLayout}
+          canvasBackgroundColor={canvasBackgroundColor}
+          onCanvasBackgroundColorChange={setCanvasBackgroundColor}
+        />
 
         {/* 캔버스 중앙 정렬 컨테이너 */}
         <div className="flex justify-center p-4">
@@ -257,6 +263,7 @@ export default function DashboardDesigner() {
             onRemoveElement={removeElement}
             onSelectElement={setSelectedElement}
             onConfigureElement={openConfigModal}
+            backgroundColor={canvasBackgroundColor}
           />
         </div>
       </div>
@@ -300,6 +307,8 @@ function getElementTitle(type: ElementType, subtype: ElementSubtype): string {
         return "⏰ 시계 위젯";
       case "calculator":
         return "🧮 계산기 위젯";
+      case "vehicle-map":
+        return "🚚 차량 위치 지도";
       case "calendar":
         return "📅 달력 위젯";
       case "driver-management":
@@ -334,6 +343,8 @@ function getElementContent(type: ElementType, subtype: ElementSubtype): string {
         return "clock";
       case "calculator":
         return "calculator";
+      case "vehicle-map":
+        return "vehicle-map";
       case "calendar":
         return "calendar";
       case "driver-management":

frontend/components/admin/dashboard/DashboardSidebar.tsx

@@ -119,6 +119,14 @@ export function DashboardSidebar() {
             onDragStart={handleDragStart}
             className="border-l-4 border-teal-500"
           />
+          <DraggableItem
+            icon="🚚"
+            title="차량 위치 지도"
+            type="widget"
+            subtype="vehicle-map"
+            onDragStart={handleDragStart}
+            className="border-l-4 border-red-500"
+          />
           <DraggableItem
             icon="📅"
             title="달력 위젯"

frontend/components/admin/dashboard/types.ts

@@ -17,6 +17,7 @@ export type ElementSubtype =
   | "clock"
   | "calendar"
   | "calculator"
+  | "vehicle-map"
   | "driver-management"; // 위젯 타입
 
 export interface Position {