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

2025-10-15 18:25:16 +09:00
parent 4addf8dccf
commit 7e38f82d0c
15 changed files with 229 additions and 168 deletions
--- a/frontend/components/admin/dashboard/DashboardSidebar.tsx
+++ b/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="문서 다운로드"
--- a/frontend/components/admin/dashboard/ElementConfigModal.tsx
+++ b/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
-    ? // 간단한 위젯: 2단계에서 쿼리 테스트 후 저장 가능
-      currentStep === 2 && queryResult && queryResult.rows.length > 0
-    : isMapWidget
-      ? // 지도 위젯: 위도/경도 매핑 필요
-        currentStep === 2 &&
-        queryResult &&
-        queryResult.rows.length > 0 &&
-        chartConfig.latitudeColumn &&
-        chartConfig.longitudeColumn
-      : // 차트: 기존 로직 (2단계에서 차트 설정 필요)
-        currentStep === 2 &&
-        queryResult &&
-        queryResult.rows.length > 0 &&
-        chartConfig.xAxis &&
-        (isPieChart || isApiSource
-          ? // 파이/도넛 차트 또는 REST API
-            chartConfig.aggregation === "count"
-            ? true // count는 Y축 없어도 됨
-            : hasYAxis // 다른 집계(sum, avg, max, min) 또는 집계 없음 → Y축 필수
-          : // 일반 차트 (DB): Y축 필수
-            hasYAxis);
+  // customTitle이 변경되었는지 확인
+  const isTitleChanged = customTitle.trim() !== (element.customTitle || "");
+
+  const canSave = isTitleChanged || // 제목만 변경해도 저장 가능
+    (isSimpleWidget
+      ? // 간단한 위젯: 2단계에서 쿼리 테스트 후 저장 가능
+        currentStep === 2 && queryResult && queryResult.rows.length > 0
+      : isMapWidget
+        ? // 지도 위젯: 위도/경도 매핑 필요
+          currentStep === 2 &&
+          queryResult &&
+          queryResult.rows.length > 0 &&
+          chartConfig.latitudeColumn &&
+          chartConfig.longitudeColumn
+        : // 차트: 기존 로직 (2단계에서 차트 설정 필요)
+          currentStep === 2 &&
+          queryResult &&
+          queryResult.rows.length > 0 &&
+          chartConfig.xAxis &&
+          (isPieChart || isApiSource
+            ? // 파이/도넛 차트 또는 REST API
+              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>
-            <h2 className="text-xl font-semibold text-gray-900">{element.title} 설정</h2>
-            <p className="mt-1 text-sm text-gray-500">
-              {isSimpleWidget
-                ? "데이터 소스를 설정하세요"
-                : currentStep === 1
-                  ? "데이터 소스를 선택하세요"
-                  : "쿼리를 실행하고 차트를 설정하세요"}
+        <div className="border-b p-6">
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <h2 className="text-xl font-semibold text-gray-900">{element.title} 설정</h2>
+              <p className="mt-1 text-sm text-gray-500">
+                {isSimpleWidget
+                  ? "데이터 소스를 설정하세요"
+                  : 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>

        {/* 진행 상황 표시 - 간단한 위젯은 표시 안 함 */}
--- a/frontend/components/admin/dashboard/types.ts
+++ b/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; // 차트 설정
--- a/frontend/components/dashboard/DashboardViewer.tsx
+++ b/frontend/components/dashboard/DashboardViewer.tsx
@@ -37,11 +37,11 @@ function renderWidget(element: DashboardElement) {
    
    // === 위젯 종류 ===
    case "exchange":
-      return <ExchangeWidget />;
+      return <ExchangeWidget element={element} />;
    case "weather":
-      return <WeatherWidget />;
+      return <WeatherWidget element={element} />;
    case "calculator":
-      return <CalculatorWidget />;
+      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">
@@ -56,7 +56,7 @@ function renderWidget(element: DashboardElement) {
    case "list-summary":
      return <ListSummaryWidget element={element} />;
    case "risk-alert":
-      return <RiskAlertWidget />;
+      return <RiskAlertWidget element={element} />;
    case "calendar":
      return <CalendarWidget element={element} />;
    case "status-summary":
@@ -64,13 +64,13 @@ function renderWidget(element: DashboardElement) {
    
    // === 운영/작업 지원 ===
    case "todo":
-      return <TodoWidget />;
+      return <TodoWidget element={element} />;
    case "booking-alert":
-      return <BookingAlertWidget />;
+      return <BookingAlertWidget element={element} />;
    case "maintenance":
-      return <MaintenanceWidget />;
+      return <MaintenanceWidget element={element} />;
    case "document":
-      return <DocumentWidget />;
+      return <DocumentWidget element={element} />;
    case "list":
      return <ListSummaryWidget element={element} />;
    
--- a/frontend/components/dashboard/widgets/BookingAlertWidget.tsx
+++ b/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}
--- a/frontend/components/dashboard/widgets/CalculatorWidget.tsx
+++ b/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">
--- a/frontend/components/dashboard/widgets/DocumentWidget.tsx
+++ b/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[] = [
-  {
-    id: "1",
-    name: "2025년 1월 세금계산서.pdf",
-    category: "세금계산서",
-    size: "1.2 MB",
-    uploadDate: "2025-01-05",
-    url: "/documents/tax-invoice-202501.pdf",
-    description: "1월 매출 세금계산서",
-  },
-  {
-    id: "2",
-    name: "차량보험증권_서울12가3456.pdf",
-    category: "보험",
-    size: "856 KB",
-    uploadDate: "2024-12-20",
-    url: "/documents/insurance-vehicle-1.pdf",
-    description: "1톤 트럭 종합보험",
-  },
-  {
-    id: "3",
-    name: "운송계약서_ABC물류.pdf",
-    category: "계약서",
-    size: "2.4 MB",
-    uploadDate: "2024-12-15",
-    url: "/documents/contract-abc-logistics.pdf",
-    description: "ABC물류 연간 운송 계약",
-  },
-  {
-    id: "4",
-    name: "2024년 12월 세금계산서.pdf",
-    category: "세금계산서",
-    size: "1.1 MB",
-    uploadDate: "2024-12-05",
-    url: "/documents/tax-invoice-202412.pdf",
-  },
-  {
-    id: "5",
-    name: "화물배상책임보험증권.pdf",
-    category: "보험",
-    size: "720 KB",
-    uploadDate: "2024-11-30",
-    url: "/documents/cargo-insurance.pdf",
-    description: "화물 배상책임보험",
-  },
-  {
-    id: "6",
-    name: "차고지 임대계약서.pdf",
-    category: "계약서",
-    size: "1.8 MB",
-    uploadDate: "2024-11-15",
-    url: "/documents/garage-lease-contract.pdf",
-  },
-];
+// 목 데이터 (하드코딩 - 주석처리됨)
+// const mockDocuments: Document[] = [
+//   {
+//     id: "1",
+//     name: "2025년 1월 세금계산서.pdf",
+//     category: "세금계산서",
+//     size: "1.2 MB",
+//     uploadDate: "2025-01-05",
+//     url: "/documents/tax-invoice-202501.pdf",
+//     description: "1월 매출 세금계산서",
+//   },
+//   {
+//     id: "2",
+//     name: "차량보험증권_서울12가3456.pdf",
+//     category: "보험",
+//     size: "856 KB",
+//     uploadDate: "2024-12-20",
+//     url: "/documents/insurance-vehicle-1.pdf",
+//     description: "1톤 트럭 종합보험",
+//   },
+//   {
+//     id: "3",
+//     name: "운송계약서_ABC물류.pdf",
+//     category: "계약서",
+//     size: "2.4 MB",
+//     uploadDate: "2024-12-15",
+//     url: "/documents/contract-abc-logistics.pdf",
+//     description: "ABC물류 연간 운송 계약",
+//   },
+//   {
+//     id: "4",
+//     name: "2024년 12월 세금계산서.pdf",
+//     category: "세금계산서",
+//     size: "1.1 MB",
+//     uploadDate: "2024-12-05",
+//     url: "/documents/tax-invoice-202412.pdf",
+//   },
+//   {
+//     id: "5",
+//     name: "화물배상책임보험증권.pdf",
+//     category: "보험",
+//     size: "720 KB",
+//     uploadDate: "2024-11-30",
+//     url: "/documents/cargo-insurance.pdf",
+//     description: "화물 배상책임보험",
+//   },
+//   {
+//     id: "6",
+//     name: "차고지 임대계약서.pdf",
+//     category: "계약서",
+//     size: "1.8 MB",
+//     uploadDate: "2024-11-15",
+//     url: "/documents/garage-lease-contract.pdf",
+//   },
+// ];

-export default function DocumentWidget() {
-  const [documents] = useState<Document[]>(mockDocuments);
+interface DocumentWidgetProps {
+  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>
--- a/frontend/components/dashboard/widgets/ExchangeWidget.tsx
+++ b/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', {
--- a/frontend/components/dashboard/widgets/MaintenanceWidget.tsx
+++ b/frontend/components/dashboard/widgets/MaintenanceWidget.tsx
@@ -14,51 +14,52 @@ interface MaintenanceSchedule {
  estimatedCost?: number;
 }

-// 목 데이터
-const mockSchedules: MaintenanceSchedule[] = [
-  {
-    id: "1",
-    vehicleNumber: "서울12가3456",
-    vehicleType: "1톤 트럭",
-    maintenanceType: "정기점검",
-    scheduledDate: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(),
-    status: "scheduled",
-    notes: "6개월 정기점검",
-    estimatedCost: 300000,
-  },
-  {
-    id: "2",
-    vehicleNumber: "경기34나5678",
-    vehicleType: "2.5톤 트럭",
-    maintenanceType: "오일교환",
-    scheduledDate: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000).toISOString(),
-    status: "scheduled",
-    estimatedCost: 150000,
-  },
-  {
-    id: "3",
-    vehicleNumber: "인천56다7890",
-    vehicleType: "라보",
-    maintenanceType: "타이어교체",
-    scheduledDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
-    status: "overdue",
-    notes: "긴급",
-    estimatedCost: 400000,
-  },
-  {
-    id: "4",
-    vehicleNumber: "부산78라1234",
-    vehicleType: "1톤 트럭",
-    maintenanceType: "수리",
-    scheduledDate: new Date().toISOString(),
-    status: "in_progress",
-    notes: "엔진 점검 중",
-    estimatedCost: 800000,
-  },
-];
+// 목 데이터 (하드코딩 - 주석처리됨)
+// const mockSchedules: MaintenanceSchedule[] = [
+//   {
+//     id: "1",
+//     vehicleNumber: "서울12가3456",
+//     vehicleType: "1톤 트럭",
+//     maintenanceType: "정기점검",
+//     scheduledDate: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(),
+//     status: "scheduled",
+//     notes: "6개월 정기점검",
+//     estimatedCost: 300000,
+//   },
+//   {
+//     id: "2",
+//     vehicleNumber: "경기34나5678",
+//     vehicleType: "2.5톤 트럭",
+//     maintenanceType: "오일교환",
+//     scheduledDate: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000).toISOString(),
+//     status: "scheduled",
+//     estimatedCost: 150000,
+//   },
+//   {
+//     id: "3",
+//     vehicleNumber: "인천56다7890",
+//     vehicleType: "라보",
+//     maintenanceType: "타이어교체",
+//     scheduledDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
+//     status: "overdue",
+//     notes: "긴급",
+//     estimatedCost: 400000,
+//   },
+//   {
+//     id: "4",
+//     vehicleNumber: "부산78라1234",
+//     vehicleType: "1톤 트럭",
+//     maintenanceType: "수리",
+//     scheduledDate: new Date().toISOString(),
+//     status: "in_progress",
+//     notes: "엔진 점검 중",
+//     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());

--- a/frontend/components/dashboard/widgets/MapSummaryWidget.tsx
+++ b/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
--- a/frontend/components/dashboard/widgets/RiskAlertWidget.tsx
+++ b/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>
          )}
--- a/frontend/components/dashboard/widgets/StatusSummaryWidget.tsx
+++ b/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`}>
--- a/frontend/components/dashboard/widgets/TodoWidget.tsx
+++ b/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"
--- a/frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx
+++ b/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
--- a/frontend/components/dashboard/widgets/WeatherWidget.tsx
+++ b/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">