diff --git a/backend-node/src/services/DashboardService.ts b/backend-node/src/services/DashboardService.ts
index 6b709235..c25efe4f 100644
--- a/backend-node/src/services/DashboardService.ts
+++ b/backend-node/src/services/DashboardService.ts
@@ -301,29 +301,30 @@ export class DashboardService {
       
       // 3. 요소 데이터 변환
       console.log('📊 대시보드 요소 개수:', elementsResult.rows.length);
-      if (elementsResult.rows.length > 0) {
-        console.log('📊 첫 번째 요소 raw data:', elementsResult.rows[0]);
-      }
       
-      const elements: DashboardElement[] = elementsResult.rows.map((row: any) => ({
-        id: row.id,
-        type: row.element_type,
-        subtype: row.element_subtype,
-        position: {
-          x: row.position_x,
-          y: row.position_y
-        },
-        size: {
-          width: row.width,
-          height: row.height
-        },
-        title: row.title,
-        content: row.content,
-        dataSource: JSON.parse(row.data_source_config || '{}'),
-        chartConfig: JSON.parse(row.chart_config || '{}')
-      }));
-      
-      console.log('📊 변환된 첫 번째 요소:', elements[0]);
+      const elements: DashboardElement[] = elementsResult.rows.map((row: any, index: number) => {
+        const element = {
+          id: row.id,
+          type: row.element_type,
+          subtype: row.element_subtype,
+          position: {
+            x: row.position_x,
+            y: row.position_y
+          },
+          size: {
+            width: row.width,
+            height: row.height
+          },
+          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,
diff --git a/frontend/components/dashboard/DashboardViewer.tsx b/frontend/components/dashboard/DashboardViewer.tsx
index e94d6fe5..036a18ac 100644
--- a/frontend/components/dashboard/DashboardViewer.tsx
+++ b/frontend/components/dashboard/DashboardViewer.tsx
@@ -5,8 +5,113 @@ import { DashboardElement, QueryResult } from "@/components/admin/dashboard/type
 import { ChartRenderer } from "@/components/admin/dashboard/charts/ChartRenderer";
 import dynamic from "next/dynamic";
 
-// 위젯 동적 import
+// 위젯 동적 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 });
+
+/**
+ * 위젯 렌더링 함수 - DashboardSidebar의 모든 subtype 처리
+ * ViewerElement에서 사용하기 위해 컴포넌트 외부에 정의
+ */
+function renderWidget(element: DashboardElement) {
+  switch (element.subtype) {
+    // 차트는 ChartRenderer에서 처리됨 (이 함수 호출 안됨)
+    
+    // === 위젯 종류 ===
+    case "exchange":
+      return <ExchangeWidget />;
+    case "weather":
+      return <WeatherWidget />;
+    case "calculator":
+      return <CalculatorWidget />;
+    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 />;
+    case "calendar":
+      return (
+        <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-green-400 to-teal-600 p-4 text-white">
+          <div className="text-center">
+            <div className="mb-2 text-3xl">📅</div>
+            <div className="text-sm">달력 위젯 (개발 예정)</div>
+          </div>
+        </div>
+      );
+    case "status-summary":
+      return <StatusSummaryWidget element={element} />;
+    
+    // === 운영/작업 지원 ===
+    case "todo":
+      return <TodoWidget />;
+    case "booking-alert":
+      return <BookingAlertWidget />;
+    case "maintenance":
+      return <MaintenanceWidget />;
+    case "document":
+      return <DocumentWidget />;
+    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[];
@@ -202,21 +307,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} />
-        ) : element.subtype === "list" ? (
-          // 리스트 위젯
-          <ListSummaryWidget element={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>
-        )}
+        ) : renderWidget(element)}
       </div>
 
       {/* 로딩 오버레이 */}