필요없는 종류 정리 및 대시보드 이젠 렌더링 되고 모든 위젯들 이름 수정 가능하게 해달라고 했는데 지금은 데이터베이스 연결하는 것만 이름 변경이 됩니다.

- DashboardViewer에 ListSummaryWidget 연결
- list 위젯이 실제 DB 데이터 표시하도록 수정
- ITS_API_KEY (국토교통부 교통사고 API) 추가
- KMA_API_KEY (기상청 특보 API) 재적용
- dashboard.ts API URL 수정 (/api로 통일)

backend-node/src/services/DashboardService.ts

@@ -300,23 +300,31 @@ export class DashboardService {
       const elementsResult = await PostgreSQLService.query(elementsQuery, [dashboardId]);
       
       // 3. 요소 데이터 변환
-      const elements: DashboardElement[] = elementsResult.rows.map((row: any) => ({
+      console.log('📊 대시보드 요소 개수:', elementsResult.rows.length);
-        id: row.id,
+      
-        type: row.element_type,
+      const elements: DashboardElement[] = elementsResult.rows.map((row: any, index: number) => {
-        subtype: row.element_subtype,
+        const element = {
-        position: {
+          id: row.id,
-          x: row.position_x,
+          type: row.element_type,
-          y: row.position_y
+          subtype: row.element_subtype,
-        },
+          position: {
-        size: {
+            x: row.position_x,
-          width: row.width,
+            y: row.position_y
-          height: row.height
+          },
-        },
+          size: {
-        title: row.title,
+            width: row.width,
-        content: row.content,
+            height: row.height
-        dataSource: JSON.parse(row.data_source_config || '{}'),
+          },
-        chartConfig: JSON.parse(row.chart_config || '{}')
+          title: row.title,
-      }));
+          content: row.content,
+          dataSource: JSON.parse(row.data_source_config || '{}'),
+          chartConfig: JSON.parse(row.chart_config || '{}')
+        };
+        
+        console.log(`📊 위젯 #${index + 1}: type="${element.type}", subtype="${element.subtype}", title="${element.title}"`);
+        
+        return element;
+      });
       
       return {
         id: dashboard.id,

docker/dev/docker-compose.backend.mac.yml

@@ -20,7 +20,7 @@ services:
       - LOG_LEVEL=debug
       - ENCRYPTION_KEY=ilshin-plm-mail-encryption-key-32characters-2024-secure
       - KMA_API_KEY=ogdXr2e9T4iHV69nvV-IwA
-      - ITS_API_KEY=${ITS_API_KEY:-}
+      - ITS_API_KEY=d6b9befec3114d648284674b8fddcc32
       - EXPRESSWAY_API_KEY=${EXPRESSWAY_API_KEY:-}
     volumes:
       - ../../backend-node:/app # 개발 모드: 코드 변경 시 자동 반영

frontend/components/admin/dashboard/DashboardSidebar.tsx

@@ -220,13 +220,7 @@ export function DashboardSidebar() {
               subtype="booking-alert"
               onDragStart={handleDragStart}
             />
-            <DraggableItem
+            {/* 정비 일정 관리 위젯 제거 - 커스텀 목록 카드로 대체 가능 */}
-              icon="🔧"
-              title="정비 일정 관리"
-              type="widget"
-              subtype="maintenance"
-              onDragStart={handleDragStart}
-            />
             <DraggableItem
               icon="📂"
               title="문서 다운로드"

frontend/components/admin/dashboard/ElementConfigModal.tsx

@@ -31,6 +31,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
   const [chartConfig, setChartConfig] = useState<ChartConfig>(element.chartConfig || {});
   const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
   const [currentStep, setCurrentStep] = useState<1 | 2>(1);
+  const [customTitle, setCustomTitle] = useState<string>(element.customTitle || "");
 
   // 차트 설정이 필요 없는 위젯 (쿼리/API만 필요)
   const isSimpleWidget =
@@ -56,6 +57,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
       setChartConfig(element.chartConfig || {});
       setQueryResult(null);
       setCurrentStep(1);
+      setCustomTitle(element.customTitle || "");
     }
   }, [isOpen, element]);
 
@@ -119,13 +121,14 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
       ...element,
       dataSource,
       chartConfig,
+      customTitle: customTitle.trim() || undefined, // 빈 문자열이면 undefined
     };
 
     console.log("  저장할 element:", updatedElement);
 
     onSave(updatedElement);
     onClose();
-  }, [element, dataSource, chartConfig, onSave, onClose]);
+  }, [element, dataSource, chartConfig, customTitle, onSave, onClose]);
 
   // 모달이 열려있지 않으면 렌더링하지 않음
   if (!isOpen) return null;
@@ -147,28 +150,32 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
     chartConfig.yAxis &&
     (typeof chartConfig.yAxis === "string" || (Array.isArray(chartConfig.yAxis) && chartConfig.yAxis.length > 0));
 
-  const canSave = isSimpleWidget
+  // customTitle이 변경되었는지 확인
-    ? // 간단한 위젯: 2단계에서 쿼리 테스트 후 저장 가능
+  const isTitleChanged = customTitle.trim() !== (element.customTitle || "");
-      currentStep === 2 && queryResult && queryResult.rows.length > 0
+
-    : isMapWidget
+  const canSave = isTitleChanged || // 제목만 변경해도 저장 가능
-      ? // 지도 위젯: 위도/경도 매핑 필요
+    (isSimpleWidget
-        currentStep === 2 &&
+      ? // 간단한 위젯: 2단계에서 쿼리 테스트 후 저장 가능
-        queryResult &&
+        currentStep === 2 && queryResult && queryResult.rows.length > 0
-        queryResult.rows.length > 0 &&
+      : isMapWidget
-        chartConfig.latitudeColumn &&
+        ? // 지도 위젯: 위도/경도 매핑 필요
-        chartConfig.longitudeColumn
+          currentStep === 2 &&
-      : // 차트: 기존 로직 (2단계에서 차트 설정 필요)
+          queryResult &&
-        currentStep === 2 &&
+          queryResult.rows.length > 0 &&
-        queryResult &&
+          chartConfig.latitudeColumn &&
-        queryResult.rows.length > 0 &&
+          chartConfig.longitudeColumn
-        chartConfig.xAxis &&
+        : // 차트: 기존 로직 (2단계에서 차트 설정 필요)
-        (isPieChart || isApiSource
+          currentStep === 2 &&
-          ? // 파이/도넛 차트 또는 REST API
+          queryResult &&
-            chartConfig.aggregation === "count"
+          queryResult.rows.length > 0 &&
-            ? true // count는 Y축 없어도 됨
+          chartConfig.xAxis &&
-            : hasYAxis // 다른 집계(sum, avg, max, min) 또는 집계 없음 → Y축 필수
+          (isPieChart || isApiSource
-          : // 일반 차트 (DB): Y축 필수
+            ? // 파이/도넛 차트 또는 REST API
-            hasYAxis);
+              chartConfig.aggregation === "count"
+              ? true // count는 Y축 없어도 됨
+              : hasYAxis // 다른 집계(sum, avg, max, min) 또는 집계 없음 → Y축 필수
+            : // 일반 차트 (DB): Y축 필수
+              hasYAxis));
 
   return (
     <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm">
@@ -178,20 +185,39 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
         }`}
       >
         {/* 모달 헤더 */}
-        <div className="flex items-center justify-between border-b p-6">
+        <div className="border-b p-6">
-          <div>
+          <div className="flex items-center justify-between">
-            <h2 className="text-xl font-semibold text-gray-900">{element.title} 설정</h2>
+            <div className="flex-1">
-            <p className="mt-1 text-sm text-gray-500">
+              <h2 className="text-xl font-semibold text-gray-900">{element.title} 설정</h2>
-              {isSimpleWidget
+              <p className="mt-1 text-sm text-gray-500">
-                ? "데이터 소스를 설정하세요"
+                {isSimpleWidget
-                : currentStep === 1
+                  ? "데이터 소스를 설정하세요"
-                  ? "데이터 소스를 선택하세요"
+                  : currentStep === 1
-                  : "쿼리를 실행하고 차트를 설정하세요"}
+                    ? "데이터 소스를 선택하세요"
+                    : "쿼리를 실행하고 차트를 설정하세요"}
+              </p>
+            </div>
+            <Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8">
+              <X className="h-5 w-5" />
+            </Button>
+          </div>
+          
+          {/* 커스텀 제목 입력 */}
+          <div className="mt-4">
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              위젯 제목 (선택사항)
+            </label>
+            <input
+              type="text"
+              value={customTitle}
+              onChange={(e) => setCustomTitle(e.target.value)}
+              placeholder={`예: 정비 일정 목록, 창고 위치 현황 등 (비워두면 자동 생성)`}
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            />
+            <p className="mt-1 text-xs text-gray-500">
+              💡 비워두면 테이블명으로 자동 생성됩니다 (예: "maintenance_schedules 목록")
             </p>
           </div>
-          <Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8">
-            <X className="h-5 w-5" />
-          </Button>
         </div>
 
         {/* 진행 상황 표시 - 간단한 위젯은 표시 안 함 */}

frontend/components/admin/dashboard/types.ts

@@ -54,6 +54,7 @@ export interface DashboardElement {
   position: Position;
   size: Size;
   title: string;
+  customTitle?: string; // 사용자 정의 제목 (옵션)
   content: string;
   dataSource?: ChartDataSource; // 데이터 소스 설정
   chartConfig?: ChartConfig; // 차트 설정

frontend/components/dashboard/DashboardViewer.tsx

@@ -3,6 +3,109 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { DashboardElement, QueryResult } from "@/components/admin/dashboard/types";
 import { ChartRenderer } from "@/components/admin/dashboard/charts/ChartRenderer";
+import dynamic from "next/dynamic";
+
+// 위젯 동적 import - 모든 위젯
+const ListSummaryWidget = dynamic(() => import("./widgets/ListSummaryWidget"), { ssr: false });
+const MapSummaryWidget = dynamic(() => import("./widgets/MapSummaryWidget"), { ssr: false });
+const StatusSummaryWidget = dynamic(() => import("./widgets/StatusSummaryWidget"), { ssr: false });
+const RiskAlertWidget = dynamic(() => import("./widgets/RiskAlertWidget"), { ssr: false });
+const WeatherWidget = dynamic(() => import("./widgets/WeatherWidget"), { ssr: false });
+const ExchangeWidget = dynamic(() => import("./widgets/ExchangeWidget"), { ssr: false });
+const VehicleStatusWidget = dynamic(() => import("./widgets/VehicleStatusWidget"), { ssr: false });
+const VehicleListWidget = dynamic(() => import("./widgets/VehicleListWidget"), { ssr: false });
+const VehicleMapOnlyWidget = dynamic(() => import("./widgets/VehicleMapOnlyWidget"), { ssr: false });
+const CargoListWidget = dynamic(() => import("./widgets/CargoListWidget"), { ssr: false });
+const CustomerIssuesWidget = dynamic(() => import("./widgets/CustomerIssuesWidget"), { ssr: false });
+const DeliveryStatusWidget = dynamic(() => import("./widgets/DeliveryStatusWidget"), { ssr: false });
+const DeliveryStatusSummaryWidget = dynamic(() => import("./widgets/DeliveryStatusSummaryWidget"), { ssr: false });
+const DeliveryTodayStatsWidget = dynamic(() => import("./widgets/DeliveryTodayStatsWidget"), { ssr: false });
+const TodoWidget = dynamic(() => import("./widgets/TodoWidget"), { ssr: false });
+const DocumentWidget = dynamic(() => import("./widgets/DocumentWidget"), { ssr: false });
+const BookingAlertWidget = dynamic(() => import("./widgets/BookingAlertWidget"), { ssr: false });
+const MaintenanceWidget = dynamic(() => import("./widgets/MaintenanceWidget"), { ssr: false });
+const CalculatorWidget = dynamic(() => import("./widgets/CalculatorWidget"), { ssr: false });
+const CalendarWidget = dynamic(() => import("@/components/admin/dashboard/widgets/CalendarWidget").then(mod => ({ default: mod.CalendarWidget })), { ssr: false });
+
+/**
+ * 위젯 렌더링 함수 - DashboardSidebar의 모든 subtype 처리
+ * ViewerElement에서 사용하기 위해 컴포넌트 외부에 정의
+ */
+function renderWidget(element: DashboardElement) {
+  switch (element.subtype) {
+    // 차트는 ChartRenderer에서 처리됨 (이 함수 호출 안됨)
+    
+    // === 위젯 종류 ===
+    case "exchange":
+      return <ExchangeWidget element={element} />;
+    case "weather":
+      return <WeatherWidget element={element} />;
+    case "calculator":
+      return <CalculatorWidget element={element} />;
+    case "clock":
+      return (
+        <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-blue-400 to-purple-600 p-4 text-white">
+          <div className="text-center">
+            <div className="mb-2 text-3xl">⏰</div>
+            <div className="text-sm">시계 위젯 (개발 예정)</div>
+          </div>
+        </div>
+      );
+    case "map-summary":
+      return <MapSummaryWidget element={element} />;
+    case "list-summary":
+      return <ListSummaryWidget element={element} />;
+    case "risk-alert":
+      return <RiskAlertWidget element={element} />;
+    case "calendar":
+      return <CalendarWidget element={element} />;
+    case "status-summary":
+      return <StatusSummaryWidget element={element} />;
+    
+    // === 운영/작업 지원 ===
+    case "todo":
+      return <TodoWidget element={element} />;
+    case "booking-alert":
+      return <BookingAlertWidget element={element} />;
+    case "maintenance":
+      return <MaintenanceWidget element={element} />;
+    case "document":
+      return <DocumentWidget element={element} />;
+    case "list":
+      return <ListSummaryWidget element={element} />;
+    
+    // === 차량 관련 (추가 위젯) ===
+    case "vehicle-status":
+      return <VehicleStatusWidget />;
+    case "vehicle-list":
+      return <VehicleListWidget />;
+    case "vehicle-map":
+      return <VehicleMapOnlyWidget element={element} />;
+    
+    // === 배송 관련 (추가 위젯) ===
+    case "delivery-status":
+      return <DeliveryStatusWidget />;
+    case "delivery-status-summary":
+      return <DeliveryStatusSummaryWidget />;
+    case "delivery-today-stats":
+      return <DeliveryTodayStatsWidget />;
+    case "cargo-list":
+      return <CargoListWidget />;
+    case "customer-issues":
+      return <CustomerIssuesWidget />;
+    
+    // === 기본 fallback ===
+    default:
+      return (
+        <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-gray-400 to-gray-600 p-4 text-white">
+          <div className="text-center">
+            <div className="mb-2 text-3xl">❓</div>
+            <div className="text-sm">알 수 없는 위젯 타입: {element.subtype}</div>
+          </div>
+        </div>
+      );
+  }
+}
 
 interface DashboardViewerProps {
   elements: DashboardElement[];
@@ -198,18 +301,7 @@ function ViewerElement({ element, data, isLoading, onRefresh }: ViewerElementPro
       <div className="h-[calc(100%-57px)]">
         {element.type === "chart" ? (
           <ChartRenderer element={element} data={data} width={element.size.width} height={element.size.height - 57} />
-        ) : (
+        ) : renderWidget(element)}
-          // 위젯 렌더링
-          <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-blue-400 to-purple-600 p-4 text-white">
-            <div className="text-center">
-              <div className="mb-2 text-3xl">
-                {element.subtype === "exchange" && "💱"}
-                {element.subtype === "weather" && "☁️"}
-              </div>
-              <div className="text-sm whitespace-pre-line">{element.content}</div>
-            </div>
-          </div>
-        )}
       </div>
 
       {/* 로딩 오버레이 */}

frontend/components/dashboard/widgets/BookingAlertWidget.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import { Check, X, Phone, MapPin, Package, Clock, AlertCircle } from "lucide-react";
+import { DashboardElement } from "@/components/admin/dashboard/types";
 
 interface BookingRequest {
   id: string;
@@ -19,7 +20,11 @@ interface BookingRequest {
   estimatedCost?: number;
 }
 
-export default function BookingAlertWidget() {
+interface BookingAlertWidgetProps {
+  element?: DashboardElement;
+}
+
+export default function BookingAlertWidget({ element }: BookingAlertWidgetProps) {
   const [bookings, setBookings] = useState<BookingRequest[]>([]);
   const [newCount, setNewCount] = useState(0);
   const [loading, setLoading] = useState(true);
@@ -156,7 +161,7 @@ export default function BookingAlertWidget() {
       <div className="border-b border-gray-200 bg-white px-4 py-3">
         <div className="mb-3 flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <h3 className="text-lg font-bold text-gray-800">🔔 예약 요청 알림</h3>
+            <h3 className="text-lg font-bold text-gray-800">🔔 {element?.customTitle || "예약 요청 알림"}</h3>
             {newCount > 0 && (
               <span className="flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white">
                 {newCount}

frontend/components/dashboard/widgets/CalculatorWidget.tsx

@@ -9,12 +9,14 @@
 
 import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
+import { DashboardElement } from '@/components/admin/dashboard/types';
 
 interface CalculatorWidgetProps {
+  element?: DashboardElement;
   className?: string;
 }
 
-export default function CalculatorWidget({ className = '' }: CalculatorWidgetProps) {
+export default function CalculatorWidget({ element, className = '' }: CalculatorWidgetProps) {
   const [display, setDisplay] = useState<string>('0');
   const [previousValue, setPreviousValue] = useState<number | null>(null);
   const [operation, setOperation] = useState<string | null>(null);
@@ -117,7 +119,10 @@ export default function CalculatorWidget({ className = '' }: CalculatorWidgetPro
 
   return (
     <div className={`h-full w-full p-3 bg-gradient-to-br from-slate-50 to-gray-100 ${className}`}>
-      <div className="h-full flex flex-col justify-center gap-2">
+      <div className="h-full flex flex-col gap-2">
+        {/* 제목 */}
+        <h3 className="text-base font-semibold text-gray-900 text-center">🧮 {element?.customTitle || "계산기"}</h3>
+        
         {/* 디스플레이 */}
         <div className="bg-white border-2 border-gray-200 rounded-lg p-4 shadow-inner min-h-[80px]">
           <div className="text-right h-full flex flex-col justify-center">

frontend/components/dashboard/widgets/DocumentWidget.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from "react";
 import { FileText, Download, Calendar, Folder, Search } from "lucide-react";
+import { DashboardElement } from "@/components/admin/dashboard/types";
 
 interface Document {
   id: string;
@@ -13,64 +14,69 @@ interface Document {
   description?: string;
 }
 
-// 목 데이터
+// 목 데이터 (하드코딩 - 주석처리됨)
-const mockDocuments: Document[] = [
+// const mockDocuments: Document[] = [
-  {
+//   {
-    id: "1",
+//     id: "1",
-    name: "2025년 1월 세금계산서.pdf",
+//     name: "2025년 1월 세금계산서.pdf",
-    category: "세금계산서",
+//     category: "세금계산서",
-    size: "1.2 MB",
+//     size: "1.2 MB",
-    uploadDate: "2025-01-05",
+//     uploadDate: "2025-01-05",
-    url: "/documents/tax-invoice-202501.pdf",
+//     url: "/documents/tax-invoice-202501.pdf",
-    description: "1월 매출 세금계산서",
+//     description: "1월 매출 세금계산서",
-  },
+//   },
-  {
+//   {
-    id: "2",
+//     id: "2",
-    name: "차량보험증권_서울12가3456.pdf",
+//     name: "차량보험증권_서울12가3456.pdf",
-    category: "보험",
+//     category: "보험",
-    size: "856 KB",
+//     size: "856 KB",
-    uploadDate: "2024-12-20",
+//     uploadDate: "2024-12-20",
-    url: "/documents/insurance-vehicle-1.pdf",
+//     url: "/documents/insurance-vehicle-1.pdf",
-    description: "1톤 트럭 종합보험",
+//     description: "1톤 트럭 종합보험",
-  },
+//   },
-  {
+//   {
-    id: "3",
+//     id: "3",
-    name: "운송계약서_ABC물류.pdf",
+//     name: "운송계약서_ABC물류.pdf",
-    category: "계약서",
+//     category: "계약서",
-    size: "2.4 MB",
+//     size: "2.4 MB",
-    uploadDate: "2024-12-15",
+//     uploadDate: "2024-12-15",
-    url: "/documents/contract-abc-logistics.pdf",
+//     url: "/documents/contract-abc-logistics.pdf",
-    description: "ABC물류 연간 운송 계약",
+//     description: "ABC물류 연간 운송 계약",
-  },
+//   },
-  {
+//   {
-    id: "4",
+//     id: "4",
-    name: "2024년 12월 세금계산서.pdf",
+//     name: "2024년 12월 세금계산서.pdf",
-    category: "세금계산서",
+//     category: "세금계산서",
-    size: "1.1 MB",
+//     size: "1.1 MB",
-    uploadDate: "2024-12-05",
+//     uploadDate: "2024-12-05",
-    url: "/documents/tax-invoice-202412.pdf",
+//     url: "/documents/tax-invoice-202412.pdf",
-  },
+//   },
-  {
+//   {
-    id: "5",
+//     id: "5",
-    name: "화물배상책임보험증권.pdf",
+//     name: "화물배상책임보험증권.pdf",
-    category: "보험",
+//     category: "보험",
-    size: "720 KB",
+//     size: "720 KB",
-    uploadDate: "2024-11-30",
+//     uploadDate: "2024-11-30",
-    url: "/documents/cargo-insurance.pdf",
+//     url: "/documents/cargo-insurance.pdf",
-    description: "화물 배상책임보험",
+//     description: "화물 배상책임보험",
-  },
+//   },
-  {
+//   {
-    id: "6",
+//     id: "6",
-    name: "차고지 임대계약서.pdf",
+//     name: "차고지 임대계약서.pdf",
-    category: "계약서",
+//     category: "계약서",
-    size: "1.8 MB",
+//     size: "1.8 MB",
-    uploadDate: "2024-11-15",
+//     uploadDate: "2024-11-15",
-    url: "/documents/garage-lease-contract.pdf",
+//     url: "/documents/garage-lease-contract.pdf",
-  },
+//   },
-];
+// ];
 
-export default function DocumentWidget() {
+interface DocumentWidgetProps {
-  const [documents] = useState<Document[]>(mockDocuments);
+  element?: DashboardElement;
+}
+
+export default function DocumentWidget({ element }: DocumentWidgetProps) {
+  // TODO: 실제 API 연동 필요
+  const [documents] = useState<Document[]>([]);
   const [filter, setFilter] = useState<"all" | Document["category"]>("all");
   const [searchTerm, setSearchTerm] = useState("");
 
@@ -126,7 +132,7 @@ export default function DocumentWidget() {
       {/* 헤더 */}
       <div className="border-b border-gray-200 bg-white px-4 py-3">
         <div className="mb-3 flex items-center justify-between">
-          <h3 className="text-lg font-bold text-gray-800">📂 문서 관리</h3>
+          <h3 className="text-lg font-bold text-gray-800">📂 {element?.customTitle || "문서 관리"}</h3>
           <button className="rounded-lg bg-primary px-3 py-1.5 text-sm text-white transition-colors hover:bg-primary/90">
             + 업로드
           </button>

frontend/components/dashboard/widgets/ExchangeWidget.tsx

@@ -12,14 +12,17 @@ import { TrendingUp, TrendingDown, RefreshCw, ArrowRightLeft } from 'lucide-reac
 import { Button } from '@/components/ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Input } from '@/components/ui/input';
+import { DashboardElement } from '@/components/admin/dashboard/types';
 
 interface ExchangeWidgetProps {
+  element?: DashboardElement;
   baseCurrency?: string;
   targetCurrency?: string;
   refreshInterval?: number; // 새로고침 간격 (ms), 기본값: 600000 (10분)
 }
 
 export default function ExchangeWidget({
+  element,
   baseCurrency = 'KRW',
   targetCurrency = 'USD',
   refreshInterval = 600000,
@@ -136,7 +139,7 @@ export default function ExchangeWidget({
       {/* 헤더 */}
       <div className="flex items-center justify-between mb-3">
         <div className="flex-1">
-          <h3 className="text-base font-semibold text-gray-900 mb-1">💱 환율</h3>
+          <h3 className="text-base font-semibold text-gray-900 mb-1">💱 {element?.customTitle || "환율"}</h3>
           <p className="text-xs text-gray-500">
             {lastUpdated
               ? `업데이트: ${lastUpdated.toLocaleTimeString('ko-KR', {

frontend/components/dashboard/widgets/MaintenanceWidget.tsx

@@ -14,51 +14,52 @@ interface MaintenanceSchedule {
   estimatedCost?: number;
 }
 
-// 목 데이터
+// 목 데이터 (하드코딩 - 주석처리됨)
-const mockSchedules: MaintenanceSchedule[] = [
+// const mockSchedules: MaintenanceSchedule[] = [
-  {
+//   {
-    id: "1",
+//     id: "1",
-    vehicleNumber: "서울12가3456",
+//     vehicleNumber: "서울12가3456",
-    vehicleType: "1톤 트럭",
+//     vehicleType: "1톤 트럭",
-    maintenanceType: "정기점검",
+//     maintenanceType: "정기점검",
-    scheduledDate: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(),
+//     scheduledDate: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(),
-    status: "scheduled",
+//     status: "scheduled",
-    notes: "6개월 정기점검",
+//     notes: "6개월 정기점검",
-    estimatedCost: 300000,
+//     estimatedCost: 300000,
-  },
+//   },
-  {
+//   {
-    id: "2",
+//     id: "2",
-    vehicleNumber: "경기34나5678",
+//     vehicleNumber: "경기34나5678",
-    vehicleType: "2.5톤 트럭",
+//     vehicleType: "2.5톤 트럭",
-    maintenanceType: "오일교환",
+//     maintenanceType: "오일교환",
-    scheduledDate: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000).toISOString(),
+//     scheduledDate: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000).toISOString(),
-    status: "scheduled",
+//     status: "scheduled",
-    estimatedCost: 150000,
+//     estimatedCost: 150000,
-  },
+//   },
-  {
+//   {
-    id: "3",
+//     id: "3",
-    vehicleNumber: "인천56다7890",
+//     vehicleNumber: "인천56다7890",
-    vehicleType: "라보",
+//     vehicleType: "라보",
-    maintenanceType: "타이어교체",
+//     maintenanceType: "타이어교체",
-    scheduledDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
+//     scheduledDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
-    status: "overdue",
+//     status: "overdue",
-    notes: "긴급",
+//     notes: "긴급",
-    estimatedCost: 400000,
+//     estimatedCost: 400000,
-  },
+//   },
-  {
+//   {
-    id: "4",
+//     id: "4",
-    vehicleNumber: "부산78라1234",
+//     vehicleNumber: "부산78라1234",
-    vehicleType: "1톤 트럭",
+//     vehicleType: "1톤 트럭",
-    maintenanceType: "수리",
+//     maintenanceType: "수리",
-    scheduledDate: new Date().toISOString(),
+//     scheduledDate: new Date().toISOString(),
-    status: "in_progress",
+//     status: "in_progress",
-    notes: "엔진 점검 중",
+//     notes: "엔진 점검 중",
-    estimatedCost: 800000,
+//     estimatedCost: 800000,
-  },
+//   },
-];
+// ];
 
 export default function MaintenanceWidget() {
-  const [schedules] = useState<MaintenanceSchedule[]>(mockSchedules);
+  // TODO: 실제 API 연동 필요
+  const [schedules] = useState<MaintenanceSchedule[]>([]);
   const [filter, setFilter] = useState<"all" | MaintenanceSchedule["status"]>("all");
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
 

frontend/components/dashboard/widgets/MapSummaryWidget.tsx

@@ -150,7 +150,8 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
     }
   };
 
-  const displayTitle = tableName ? `${translateTableName(tableName)} 위치` : "위치 지도";
+  // customTitle이 있으면 사용, 없으면 테이블명으로 자동 생성
+  const displayTitle = element.customTitle || (tableName ? `${translateTableName(tableName)} 위치` : "위치 지도");
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden bg-gradient-to-br from-slate-50 to-blue-50 p-2">
@@ -181,13 +182,15 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
       )}
 
       {/* 지도 (항상 표시) */}
-      <div className="flex-1 rounded border border-gray-300 bg-white overflow-hidden">
+      <div className="relative flex-1 rounded border border-gray-300 bg-white overflow-hidden z-0">
         <MapContainer
+          key={`map-${element.id}`}
           center={[36.5, 127.5]}
           zoom={7}
-          style={{ height: "100%", width: "100%" }}
+          style={{ height: "100%", width: "100%", zIndex: 0 }}
           zoomControl={true}
           preferCanvas={true}
+          className="z-0"
         >
           {/* 브이월드 타일맵 */}
           <TileLayer

frontend/components/dashboard/widgets/RiskAlertWidget.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { RefreshCw, AlertTriangle, Cloud, Construction } from "lucide-react";
 import { apiClient } from "@/lib/api/client";
+import { DashboardElement } from "@/components/admin/dashboard/types";
 
 // 알림 타입
 type AlertType = "accident" | "weather" | "construction";
@@ -21,7 +22,11 @@ interface Alert {
   timestamp: string;
 }
 
-export default function RiskAlertWidget() {
+interface RiskAlertWidgetProps {
+  element?: DashboardElement;
+}
+
+export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
   const [alerts, setAlerts] = useState<Alert[]>([]);
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [filter, setFilter] = useState<AlertType | "all">("all");
@@ -163,7 +168,7 @@ export default function RiskAlertWidget() {
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <AlertTriangle className="h-5 w-5 text-red-600" />
-          <h3 className="text-base font-semibold text-gray-900">리스크 / 알림</h3>
+          <h3 className="text-base font-semibold text-gray-900">{element?.customTitle || "리스크 / 알림"}</h3>
           {stats.high > 0 && (
             <Badge className="bg-red-100 text-red-700 hover:bg-red-100">긴급 {stats.high}건</Badge>
           )}

frontend/components/dashboard/widgets/StatusSummaryWidget.tsx

@@ -349,7 +349,8 @@ export default function StatusSummaryWidget({
     return name;
   };
 
-  const displayTitle = tableName ? `${translateTableName(tableName)} 현황` : title;
+  // customTitle이 있으면 사용, 없으면 테이블명으로 자동 생성
+  const displayTitle = element.customTitle || (tableName ? `${translateTableName(tableName)} 현황` : title);
 
   return (
     <div className={`flex h-full w-full flex-col overflow-hidden bg-gradient-to-br ${bgGradient} p-2`}>

frontend/components/dashboard/widgets/TodoWidget.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import { Plus, Check, X, Clock, AlertCircle, GripVertical, ChevronDown } from "lucide-react";
+import { DashboardElement } from "@/components/admin/dashboard/types";
 
 interface TodoItem {
   id: string;
@@ -27,7 +28,11 @@ interface TodoStats {
   overdue: number;
 }
 
-export default function TodoWidget() {
+interface TodoWidgetProps {
+  element?: DashboardElement;
+}
+
+export default function TodoWidget({ element }: TodoWidgetProps) {
   const [todos, setTodos] = useState<TodoItem[]>([]);
   const [stats, setStats] = useState<TodoStats | null>(null);
   const [loading, setLoading] = useState(true);
@@ -193,7 +198,7 @@ export default function TodoWidget() {
       {/* 헤더 */}
       <div className="border-b border-gray-200 bg-white px-4 py-3">
         <div className="mb-3 flex items-center justify-between">
-          <h3 className="text-lg font-bold text-gray-800">✅ To-Do / 긴급 지시</h3>
+          <h3 className="text-lg font-bold text-gray-800">✅ {element?.customTitle || "To-Do / 긴급 지시"}</h3>
           <button
             onClick={() => setShowAddForm(!showAddForm)}
             className="flex items-center gap-1 rounded-lg bg-primary px-3 py-1.5 text-sm text-white transition-colors hover:bg-primary/90"

frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx

@@ -172,13 +172,15 @@ export default function VehicleMapOnlyWidget({ element, refreshInterval = 30000
 
       {/* 지도 영역 - 브이월드 타일맵 */}
       <div className="h-[calc(100%-60px)]">
-        <div className="relative h-full overflow-hidden rounded-lg border-2 border-gray-300 bg-white">
+        <div className="relative h-full overflow-hidden rounded-lg border-2 border-gray-300 bg-white z-0">
           <MapContainer
+            key={`vehicle-map-${element.id}`}
             center={[36.5, 127.5]}
             zoom={7}
-            style={{ height: "100%", width: "100%" }}
+            style={{ height: "100%", width: "100%", zIndex: 0 }}
             zoomControl={true}
             preferCanvas={true}
+            className="z-0"
           >
               {/* 브이월드 타일맵 (HTTPS, 캐싱 적용) */}
               <TileLayer

frontend/components/dashboard/widgets/WeatherWidget.tsx

@@ -24,13 +24,16 @@ import { Button } from '@/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
 import { cn } from '@/lib/utils';
+import { DashboardElement } from '@/components/admin/dashboard/types';
 
 interface WeatherWidgetProps {
+  element?: DashboardElement;
   city?: string;
   refreshInterval?: number; // 새로고침 간격 (ms), 기본값: 600000 (10분)
 }
 
 export default function WeatherWidget({
+  element,
   city = '서울',
   refreshInterval = 600000,
 }: WeatherWidgetProps) {
@@ -309,6 +312,7 @@ export default function WeatherWidget({
       {/* 헤더 */}
       <div className="flex items-center justify-between mb-3">
         <div className="flex-1">
+          <h3 className="text-lg font-semibold text-gray-900 mb-1">🌤️ {element?.customTitle || "날씨"}</h3>
           <div className="flex items-center gap-2 mb-1">
             <Popover open={open} onOpenChange={setOpen}>
               <PopoverTrigger asChild>
@@ -316,10 +320,10 @@ export default function WeatherWidget({
                   variant="ghost"
                   role="combobox"
                   aria-expanded={open}
-                  className="justify-between text-lg font-semibold text-gray-900 hover:bg-white/50 h-auto py-1 px-2"
+                  className="justify-between text-sm text-gray-600 hover:bg-white/50 h-auto py-0.5 px-2"
                 >
                   {cities.find((city) => city.value === selectedCity)?.label || '도시 선택'}
-                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
                 </Button>
               </PopoverTrigger>
               <PopoverContent className="w-[200px] p-0" align="start">

frontend/lib/api/dashboard.ts

@@ -5,7 +5,7 @@
 import { DashboardElement } from "@/components/admin/dashboard/types";
 
 // API 기본 설정
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001/api";
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "/api";
 
 // 토큰 가져오기 (실제 인증 시스템에 맞게 수정)
 function getAuthToken(): string | null {