-
🔧 위젯 종류
+
+
toggleSection("widgets")}
+ className="mb-3 flex w-full items-center justify-between px-1 py-2.5 text-xl font-bold text-foreground transition-colors hover:text-primary"
+ >
+ 위젯 종류
+ {expandedSections.widgets ? (
+
-
-
+ {expandedSections.widgets && (
+
+
+
+ )}
{/* 운영/작업 지원 섹션 */}
-
-
📋 운영/작업 지원
+
+
toggleSection("operations")}
+ className="mb-3 flex w-full items-center justify-between px-1 py-2.5 text-xl font-bold text-foreground transition-colors hover:text-primary"
+ >
+ 운영/작업 지원
+ {expandedSections.operations ? (
+
-
-
+ {expandedSections.operations && (
+
+
+ )}
);
@@ -253,10 +264,9 @@ function DraggableItem({ icon, title, type, subtype, className = "", onDragStart
return (
onDragStart(e, type, subtype)}
>
- {icon}
{title}
);
diff --git a/frontend/components/admin/dashboard/ElementConfigModal.tsx b/frontend/components/admin/dashboard/ElementConfigModal.tsx
index 1c8921eb..05c254bc 100644
--- a/frontend/components/admin/dashboard/ElementConfigModal.tsx
+++ b/frontend/components/admin/dashboard/ElementConfigModal.tsx
@@ -36,11 +36,17 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
const isSimpleWidget =
element.subtype === "vehicle-status" ||
element.subtype === "vehicle-list" ||
+ element.subtype === "status-summary" || // 커스텀 상태 카드
+ // element.subtype === "list-summary" || // 커스텀 목록 카드 (다른 분 작업 중 - 임시 주석)
element.subtype === "delivery-status" ||
+ element.subtype === "delivery-status-summary" ||
+ element.subtype === "delivery-today-stats" ||
+ element.subtype === "cargo-list" ||
+ element.subtype === "customer-issues" ||
element.subtype === "driver-management";
// 지도 위젯 (위도/경도 매핑 필요)
- const isMapWidget = element.subtype === "vehicle-map";
+ const isMapWidget = element.subtype === "vehicle-map" || element.subtype === "map-summary";
// 주석
// 모달이 열릴 때 초기화
diff --git a/frontend/components/admin/dashboard/types.ts b/frontend/components/admin/dashboard/types.ts
index 27cb4992..833c033a 100644
--- a/frontend/components/admin/dashboard/types.ts
+++ b/frontend/components/admin/dashboard/types.ts
@@ -19,11 +19,18 @@ export type ElementSubtype =
| "calendar"
| "calculator"
| "vehicle-status"
- | "vehicle-list"
- | "vehicle-map"
+ | "vehicle-list" // (구버전 - 호환용)
+ | "vehicle-map" // (구버전 - 호환용)
+ | "map-summary" // 범용 지도 카드 (통합)
| "delivery-status"
+ | "status-summary" // 범용 상태 카드 (통합)
+ // | "list-summary" // 범용 목록 카드 (다른 분 작업 중 - 임시 주석)
+ | "delivery-status-summary" // (구버전 - 호환용)
+ | "delivery-today-stats" // (구버전 - 호환용)
+ | "cargo-list" // (구버전 - 호환용)
+ | "customer-issues" // (구버전 - 호환용)
| "risk-alert"
- | "driver-management"
+ | "driver-management" // (구버전 - 호환용)
| "todo"
| "booking-alert"
| "maintenance"
@@ -131,6 +138,9 @@ export interface ChartConfig {
// 애니메이션
enableAnimation?: boolean; // 애니메이션 활성화
+
+ // 상태 필터링 (커스텀 상태 카드용)
+ statusFilter?: string[]; // 표시할 상태 목록 (예: ["driving", "parked"])
animationDuration?: number; // 애니메이션 시간 (ms)
// 툴팁
diff --git a/frontend/components/dashboard/widgets/CargoListWidget.tsx b/frontend/components/dashboard/widgets/CargoListWidget.tsx
new file mode 100644
index 00000000..86b7b726
--- /dev/null
+++ b/frontend/components/dashboard/widgets/CargoListWidget.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { DashboardElement } from "@/components/admin/dashboard/types";
+
+interface CargoListWidgetProps {
+ element: DashboardElement;
+}
+
+interface Cargo {
+ id: string | number;
+ tracking_number?: string;
+ trackingNumber?: string;
+ customer_name?: string;
+ customerName?: string;
+ destination?: string;
+ status?: string;
+ weight?: number;
+}
+
+/**
+ * 화물 목록 위젯
+ * - 화물 목록 테이블 표시
+ * - 상태별 배지 표시
+ */
+export default function CargoListWidget({ element }: CargoListWidgetProps) {
+ const [cargoList, setCargoList] = useState
([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [searchTerm, setSearchTerm] = useState("");
+
+ useEffect(() => {
+ loadData();
+
+ // 자동 새로고침 (30초마다)
+ const interval = setInterval(loadData, 30000);
+ return () => clearInterval(interval);
+ }, [element]);
+
+ const loadData = async () => {
+ if (!element?.dataSource?.query) {
+ setError("쿼리가 설정되지 않았습니다");
+ setLoading(false);
+ return;
+ }
+
+ try {
+ setLoading(true);
+ const token = localStorage.getItem("authToken");
+ const response = await fetch("/api/dashboards/execute-query", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ body: JSON.stringify({
+ query: element.dataSource.query,
+ connectionType: element.dataSource.connectionType || "current",
+ connectionId: element.dataSource.connectionId,
+ }),
+ });
+
+ if (!response.ok) throw new Error("데이터 로딩 실패");
+
+ const result = await response.json();
+
+ if (result.success && result.data?.rows) {
+ setCargoList(result.data.rows);
+ }
+
+ setError(null);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "데이터 로딩 실패");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const getStatusBadge = (status: string) => {
+ const statusLower = status?.toLowerCase() || "";
+
+ if (statusLower.includes("배송중") || statusLower.includes("delivering")) {
+ return "bg-primary text-primary-foreground";
+ } else if (statusLower.includes("완료") || statusLower.includes("delivered")) {
+ return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100";
+ } else if (statusLower.includes("지연") || statusLower.includes("delayed")) {
+ return "bg-destructive text-destructive-foreground";
+ } else if (statusLower.includes("픽업") || statusLower.includes("pending")) {
+ return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100";
+ }
+ return "bg-muted text-muted-foreground";
+ };
+
+ const filteredList = cargoList.filter((cargo) => {
+ if (!searchTerm) return true;
+
+ const trackingNum = cargo.tracking_number || cargo.trackingNumber || "";
+ const customerName = cargo.customer_name || cargo.customerName || "";
+ const destination = cargo.destination || "";
+
+ const searchLower = searchTerm.toLowerCase();
+ return (
+ trackingNum.toLowerCase().includes(searchLower) ||
+ customerName.toLowerCase().includes(searchLower) ||
+ destination.toLowerCase().includes(searchLower)
+ );
+ });
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
⚠️ {error}
+
+ 다시 시도
+
+
+
+
+
⚙️ 톱니바퀴를 클릭하여 데이터를 연결하세요
+
+
+ {/* 헤더 */}
+
+
📦 화물 목록
+
+
+ 🔄
+
+
+
+
+ {/* 총 건수 */}
+
+ 총 {filteredList.length} 건
+
+
+ {/* 테이블 */}
+
+
+
+
+ 운송장번호
+ 고객명
+ 목적지
+ 무게(kg)
+ 상태
+
+
+
+ {filteredList.length === 0 ? (
+
+
+ {searchTerm ? "검색 결과가 없습니다" : "화물이 없습니다"}
+
+
+ ) : (
+ filteredList.map((cargo, index) => (
+
+
+ {cargo.tracking_number || cargo.trackingNumber || "-"}
+
+
+ {cargo.customer_name || cargo.customerName || "-"}
+
+
+ {cargo.destination || "-"}
+
+
+ {cargo.weight ? `${cargo.weight}kg` : "-"}
+
+
+
+ {cargo.status || "알 수 없음"}
+
+
+
+ ))
+ )}
+
+
+
+
([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [filterPriority, setFilterPriority] = useState("all");
+
+ useEffect(() => {
+ loadData();
+
+ // 자동 새로고침 (30초마다)
+ const interval = setInterval(loadData, 30000);
+ return () => clearInterval(interval);
+ }, [element]);
+
+ const loadData = async () => {
+ if (!element?.dataSource?.query) {
+ setError("쿼리가 설정되지 않았습니다");
+ setLoading(false);
+ return;
+ }
+
+ try {
+ setLoading(true);
+ const token = localStorage.getItem("authToken");
+ const response = await fetch("/api/dashboards/execute-query", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ body: JSON.stringify({
+ query: element.dataSource.query,
+ connectionType: element.dataSource.connectionType || "current",
+ connectionId: element.dataSource.connectionId,
+ }),
+ });
+
+ if (!response.ok) throw new Error("데이터 로딩 실패");
+
+ const result = await response.json();
+
+ if (result.success && result.data?.rows) {
+ setIssues(result.data.rows);
+ }
+
+ setError(null);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "데이터 로딩 실패");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const getPriorityBadge = (priority: string) => {
+ const priorityLower = priority?.toLowerCase() || "";
+
+ if (priorityLower.includes("긴급") || priorityLower.includes("high") || priorityLower.includes("urgent")) {
+ return "bg-destructive text-destructive-foreground";
+ } else if (priorityLower.includes("보통") || priorityLower.includes("medium") || priorityLower.includes("normal")) {
+ return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100";
+ } else if (priorityLower.includes("낮음") || priorityLower.includes("low")) {
+ return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100";
+ }
+ return "bg-muted text-muted-foreground";
+ };
+
+ const getStatusBadge = (status: string) => {
+ const statusLower = status?.toLowerCase() || "";
+
+ if (statusLower.includes("처리중") || statusLower.includes("processing") || statusLower.includes("pending")) {
+ return "bg-primary text-primary-foreground";
+ } else if (statusLower.includes("완료") || statusLower.includes("resolved") || statusLower.includes("closed")) {
+ return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100";
+ }
+ return "bg-muted text-muted-foreground";
+ };
+
+ const filteredIssues = filterPriority === "all"
+ ? issues
+ : issues.filter((issue) => {
+ const priority = (issue.priority || "").toLowerCase();
+ return priority.includes(filterPriority);
+ });
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
⚠️ {error}
+
+ 다시 시도
+
+
+
+
+
⚙️ 톱니바퀴를 클릭하여 데이터를 연결하세요
+
+
+ {/* 헤더 */}
+
+
⚠️ 고객 클레임/이슈
+
+ 🔄
+
+
+
+ {/* 필터 버튼 */}
+
+ setFilterPriority("all")}
+ className={`rounded-md px-3 py-1 text-xs transition-colors ${
+ filterPriority === "all"
+ ? "bg-primary text-primary-foreground"
+ : "bg-muted text-muted-foreground hover:bg-muted/80"
+ }`}
+ >
+ 전체
+
+ setFilterPriority("긴급")}
+ className={`rounded-md px-3 py-1 text-xs transition-colors ${
+ filterPriority === "긴급"
+ ? "bg-destructive text-destructive-foreground"
+ : "bg-muted text-muted-foreground hover:bg-muted/80"
+ }`}
+ >
+ 긴급
+
+ setFilterPriority("보통")}
+ className={`rounded-md px-3 py-1 text-xs transition-colors ${
+ filterPriority === "보통"
+ ? "bg-yellow-100 text-yellow-800"
+ : "bg-muted text-muted-foreground hover:bg-muted/80"
+ }`}
+ >
+ 보통
+
+ setFilterPriority("낮음")}
+ className={`rounded-md px-3 py-1 text-xs transition-colors ${
+ filterPriority === "낮음"
+ ? "bg-green-100 text-green-800"
+ : "bg-muted text-muted-foreground hover:bg-muted/80"
+ }`}
+ >
+ 낮음
+
+
+
+ {/* 총 건수 */}
+
+ 총 {filteredIssues.length} 건
+
+
+ {/* 이슈 리스트 */}
+
+ {filteredIssues.length === 0 ? (
+
+ ) : (
+ filteredIssues.map((issue, index) => (
+
+
+
+
+
+ {issue.priority || "보통"}
+
+
+ {issue.status || "처리중"}
+
+
+
+ {issue.issue_type || issue.issueType || "기타"}
+
+
+
+
+
+ 고객: {issue.customer_name || issue.customerName || "-"}
+
+
+
+ {issue.description || "설명 없음"}
+
+
+ {(issue.created_at || issue.createdAt) && (
+
+ {new Date(issue.created_at || issue.createdAt || "").toLocaleDateString("ko-KR")}
+
+ )}
+
+ ))
+ )}
+
+
([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ loadData();
+
+ // 자동 새로고침 (30초마다)
+ const interval = setInterval(loadData, 30000);
+ return () => clearInterval(interval);
+ }, [element]);
+
+ const loadData = async () => {
+ if (!element?.dataSource?.query) {
+ setError("쿼리가 설정되지 않았습니다");
+ setLoading(false);
+ return;
+ }
+
+ try {
+ setLoading(true);
+ const token = localStorage.getItem("authToken");
+ const response = await fetch("/api/dashboards/execute-query", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ body: JSON.stringify({
+ query: element.dataSource.query,
+ connectionType: element.dataSource.connectionType || "current",
+ connectionId: element.dataSource.connectionId,
+ }),
+ });
+
+ if (!response.ok) throw new Error("데이터 로딩 실패");
+
+ const result = await response.json();
+
+ // 데이터 처리
+ if (result.success && result.data?.rows) {
+ const rows = result.data.rows;
+
+ // 상태별 카운트 계산
+ const statusCounts = rows.reduce((acc: any, row: any) => {
+ const status = row.status || "알 수 없음";
+ acc[status] = (acc[status] || 0) + 1;
+ return acc;
+ }, {});
+
+ const formattedData: DeliveryStatus[] = [
+ { status: "배송중", count: statusCounts["배송중"] || statusCounts["delivering"] || 0 },
+ { status: "완료", count: statusCounts["완료"] || statusCounts["delivered"] || 0 },
+ { status: "지연", count: statusCounts["지연"] || statusCounts["delayed"] || 0 },
+ { status: "픽업 대기", count: statusCounts["픽업 대기"] || statusCounts["pending"] || 0 },
+ ];
+
+ setStatusData(formattedData);
+ }
+
+ setError(null);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "데이터 로딩 실패");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const getBorderColor = (status: string) => {
+ switch (status) {
+ case "배송중":
+ return "border-blue-500";
+ case "완료":
+ return "border-green-500";
+ case "지연":
+ return "border-red-500";
+ case "픽업 대기":
+ return "border-yellow-500";
+ default:
+ return "border-gray-500";
+ }
+ };
+
+ const getDotColor = (status: string) => {
+ switch (status) {
+ case "배송중":
+ return "bg-blue-500";
+ case "완료":
+ return "bg-green-500";
+ case "지연":
+ return "bg-red-500";
+ case "픽업 대기":
+ return "bg-yellow-500";
+ default:
+ return "bg-gray-500";
+ }
+ };
+
+ const getTextColor = (status: string) => {
+ switch (status) {
+ case "배송중":
+ return "text-blue-600";
+ case "완료":
+ return "text-green-600";
+ case "지연":
+ return "text-red-600";
+ case "픽업 대기":
+ return "text-yellow-600";
+ default:
+ return "text-gray-600";
+ }
+ };
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
⚠️ {error}
+
+ 다시 시도
+
+
+
+
+
⚙️ 톱니바퀴를 클릭하여 데이터를 연결하세요
+
+
+ {/* 헤더 */}
+
+
+
📊 배송 상태 요약
+ {totalCount > 0 ? (
+
총 {totalCount.toLocaleString()}건
+ ) : (
+
⚙️ 데이터 연결 필요
+ )}
+
+
+ {loading ? "⏳" : "🔄"}
+
+
+
+ {/* 스크롤 가능한 콘텐츠 영역 */}
+
+ {/* 상태별 카드 */}
+
+ {statusData.map((item) => (
+
+
+
{item.count.toLocaleString()}
+
+ ))}
+
+
+
({ shipped: 0, delivered: 0 });
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ loadData();
+
+ // 자동 새로고침 (30초마다)
+ const interval = setInterval(loadData, 30000);
+ return () => clearInterval(interval);
+ }, [element]);
+
+ const loadData = async () => {
+ if (!element?.dataSource?.query) {
+ setError("쿼리가 설정되지 않았습니다");
+ setLoading(false);
+ return;
+ }
+
+ try {
+ setLoading(true);
+ const token = localStorage.getItem("authToken");
+ const response = await fetch("/api/dashboards/execute-query", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ body: JSON.stringify({
+ query: element.dataSource.query,
+ connectionType: element.dataSource.connectionType || "current",
+ connectionId: element.dataSource.connectionId,
+ }),
+ });
+
+ if (!response.ok) throw new Error("데이터 로딩 실패");
+
+ const result = await response.json();
+
+ // 데이터 처리
+ if (result.success && result.data?.rows) {
+ const rows = result.data.rows;
+ const today = new Date().toISOString().split("T")[0];
+
+ // 오늘 발송 건수 (created_at 기준)
+ const shippedToday = rows.filter((row: any) => {
+ const createdDate = row.created_at?.split("T")[0] || row.createdAt?.split("T")[0];
+ return createdDate === today;
+ }).length;
+
+ // 오늘 도착 건수 (status === 'delivered' AND estimated_delivery 기준)
+ const deliveredToday = rows.filter((row: any) => {
+ const status = row.status || "";
+ const deliveryDate = row.estimated_delivery?.split("T")[0] || row.estimatedDelivery?.split("T")[0];
+ return (status === "delivered" || status === "완료") && deliveryDate === today;
+ }).length;
+
+ setTodayStats({
+ shipped: shippedToday,
+ delivered: deliveredToday,
+ });
+ }
+
+ setError(null);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "데이터 로딩 실패");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
⚠️ {error}
+
+ 다시 시도
+
+
+
+
+
⚙️ 톱니바퀴를 클릭하여 데이터를 연결하세요
+
+
+ {/* 헤더 */}
+
+
📅 오늘 처리 현황
+
+ 🔄
+
+
+
+ {/* 통계 카드 */}
+
+ {/* 오늘 발송 */}
+
+
📤
+
오늘 발송
+
{todayStats.shipped.toLocaleString()}
+
건
+
+
+ {/* 오늘 도착 */}
+
+
📥
+
오늘 도착
+
{todayStats.delivered.toLocaleString()}
+
건
+
+
+
([]);
+ const [columns, setColumns] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [tableName, setTableName] = useState(null);
+ const [searchTerm, setSearchTerm] = useState("");
+
+ useEffect(() => {
+ loadData();
+
+ // 자동 새로고침 (30초마다)
+ const interval = setInterval(loadData, 30000);
+ return () => clearInterval(interval);
+ }, [element]);
+
+ const loadData = async () => {
+ if (!element?.dataSource?.query) {
+ setError(null);
+ setLoading(false);
+ setTableName(null);
+ return;
+ }
+
+ // 쿼리에서 테이블 이름 추출
+ const extractTableName = (query: string): string | null => {
+ const fromMatch = query.match(/FROM\s+([a-zA-Z0-9_가-힣]+)/i);
+ if (fromMatch) {
+ return fromMatch[1];
+ }
+ return null;
+ };
+
+ try {
+ setLoading(true);
+ const extractedTableName = extractTableName(element.dataSource.query);
+ setTableName(extractedTableName);
+
+ const token = localStorage.getItem("authToken");
+ const response = await fetch("/api/dashboards/execute-query", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ body: JSON.stringify({
+ query: element.dataSource.query,
+ connectionType: element.dataSource.connectionType || "current",
+ connectionId: element.dataSource.connectionId,
+ }),
+ });
+
+ if (!response.ok) throw new Error("데이터 로딩 실패");
+
+ const result = await response.json();
+
+ if (result.success && result.data?.rows) {
+ const rows = result.data.rows;
+
+ // 컬럼 정보 추출 (한글 번역 적용)
+ if (rows.length > 0) {
+ const cols: ColumnInfo[] = Object.keys(rows[0]).map((key) => ({
+ key,
+ label: translateColumnName(key),
+ }));
+ setColumns(cols);
+ }
+
+ setData(rows);
+ }
+
+ setError(null);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "데이터 로딩 실패");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // 테이블 이름 한글 번역
+ const translateTableName = (name: string): string => {
+ const tableTranslations: { [key: string]: string } = {
+ "drivers": "기사",
+ "driver": "기사",
+ "vehicles": "차량",
+ "vehicle": "차량",
+ "products": "제품",
+ "product": "제품",
+ "orders": "주문",
+ "order": "주문",
+ "customers": "고객",
+ "customer": "고객",
+ "deliveries": "배송",
+ "delivery": "배송",
+ "users": "사용자",
+ "user": "사용자",
+ };
+
+ return tableTranslations[name.toLowerCase()] ||
+ tableTranslations[name.replace(/_/g, '').toLowerCase()] ||
+ name;
+ };
+
+ const displayTitle = tableName ? `${translateTableName(tableName)} 목록` : "데이터 목록";
+
+ // 검색 필터링
+ const filteredData = data.filter((row) =>
+ Object.values(row).some((value) =>
+ String(value).toLowerCase().includes(searchTerm.toLowerCase())
+ )
+ );
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
⚠️ {error}
+
+ 다시 시도
+
+
+
+
+
📋
+
데이터 목록
+
+
📋 테이블 형식 데이터 표시 위젯
+
+ • SQL 쿼리로 데이터를 불러옵니다
+ • 테이블 형식으로 자동 표시
+ • 검색 기능 지원
+ • 실시간 데이터 모니터링 가능
+
+
+
+
⚙️ 설정 방법
+
우측 상단 톱니바퀴 버튼을 클릭하여
+
SQL 쿼리를 입력하고 저장하세요
+
+
+
+ {/* 헤더 */}
+
+
+
📋 {displayTitle}
+
총 {filteredData.length.toLocaleString()}건
+
+
+ {loading ? "⏳" : "🔄"}
+
+
+
+ {/* 검색 */}
+ {data.length > 0 && (
+
+
+ )}
+
+ {/* 테이블 */}
+
+ {filteredData.length > 0 ? (
+
+
+
+ {columns.map((col) => (
+
+ {col.label}
+
+ ))}
+
+
+
+ {filteredData.map((row, idx) => (
+
+ {columns.map((col) => (
+
+ {String(row[col.key] || "")}
+
+ ))}
+
+ ))}
+
+
+ ) : (
+
+ )}
+
+
([]);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [tableName, setTableName] = useState(null);
+
+ useEffect(() => {
+ if (element?.dataSource?.query) {
+ loadMapData();
+ }
+
+ // 자동 새로고침 (30초마다)
+ const interval = setInterval(() => {
+ if (element?.dataSource?.query) {
+ loadMapData();
+ }
+ }, 30000);
+
+ return () => clearInterval(interval);
+ }, [element]);
+
+ const loadMapData = async () => {
+ if (!element?.dataSource?.query) {
+ return;
+ }
+
+ // 쿼리에서 테이블 이름 추출
+ const extractTableName = (query: string): string | null => {
+ const fromMatch = query.match(/FROM\s+([a-zA-Z0-9_가-힣]+)/i);
+ if (fromMatch) {
+ return fromMatch[1];
+ }
+ return null;
+ };
+
+ try {
+ setLoading(true);
+ const extractedTableName = extractTableName(element.dataSource.query);
+ setTableName(extractedTableName);
+
+ const token = localStorage.getItem("authToken");
+ const response = await fetch("/api/dashboards/execute-query", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ body: JSON.stringify({
+ query: element.dataSource.query,
+ connectionType: element.dataSource.connectionType || "current",
+ connectionId: element.dataSource.connectionId,
+ }),
+ });
+
+ if (!response.ok) throw new Error("데이터 로딩 실패");
+
+ const result = await response.json();
+
+ if (result.success && result.data?.rows) {
+ const rows = result.data.rows;
+
+ // 위도/경도 컬럼 찾기
+ const latCol = element.chartConfig?.latitudeColumn || "latitude";
+ const lngCol = element.chartConfig?.longitudeColumn || "longitude";
+
+ // 유효한 좌표 필터링 및 마커 데이터 생성
+ const markerData = rows
+ .filter((row: any) => row[latCol] && row[lngCol])
+ .map((row: any) => ({
+ lat: parseFloat(row[latCol]),
+ lng: parseFloat(row[lngCol]),
+ name: row.name || row.vehicle_number || row.warehouse_name || row.customer_name || "알 수 없음",
+ info: row,
+ }));
+
+ setMarkers(markerData);
+ }
+
+ setError(null);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "데이터 로딩 실패");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const displayTitle = tableName ? `${translateTableName(tableName)} 위치` : "위치 지도";
+
+ return (
+
+ {/* 헤더 */}
+
+
+
📍 {displayTitle}
+ {element?.dataSource?.query ? (
+
총 {markers.length.toLocaleString()}개 마커
+ ) : (
+
⚙️ 톱니바퀴 버튼을 눌러 데이터를 연결하세요
+ )}
+
+
+ {loading ? "⏳" : "🔄"}
+
+
+
+ {/* 에러 메시지 (지도 위에 오버레이) */}
+ {error && (
+
+ ⚠️ {error}
+
+ )}
+
+ {/* 지도 (항상 표시) */}
+
+
+ {/* 브이월드 타일맵 */}
+
+
+
+
{marker.name}
+ {Object.entries(marker.info)
+ .filter(([key]) => !["latitude", "longitude", "lat", "lng"].includes(key.toLowerCase()))
+ .map(([key, value]) => (
+
+ {key}: {String(value)}
+
+ ))}
+
+
+ ))}
+
+
+
([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [tableName, setTableName] = useState(null);
+
+ useEffect(() => {
+ loadData();
+
+ // 자동 새로고침 (30초마다)
+ const interval = setInterval(loadData, 30000);
+ return () => clearInterval(interval);
+ }, [element]);
+
+ const loadData = async () => {
+ if (!element?.dataSource?.query) {
+ // 쿼리가 없으면 에러가 아니라 초기 상태로 처리
+ setError(null);
+ setLoading(false);
+ setTableName(null);
+ return;
+ }
+
+ // 쿼리에서 테이블 이름 추출
+ const extractTableName = (query: string): string | null => {
+ const fromMatch = query.match(/FROM\s+([a-zA-Z0-9_가-힣]+)/i);
+ if (fromMatch) {
+ return fromMatch[1];
+ }
+ return null;
+ };
+
+ try {
+ setLoading(true);
+ const extractedTableName = extractTableName(element.dataSource.query);
+ setTableName(extractedTableName);
+
+ const token = localStorage.getItem("authToken");
+ const response = await fetch("/api/dashboards/execute-query", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ body: JSON.stringify({
+ query: element.dataSource.query,
+ connectionType: element.dataSource.connectionType || "current",
+ connectionId: element.dataSource.connectionId,
+ }),
+ });
+
+ if (!response.ok) throw new Error("데이터 로딩 실패");
+
+ const result = await response.json();
+
+ // 데이터 처리
+ if (result.success && result.data?.rows) {
+ const rows = result.data.rows;
+
+ // 상태별 카운트 계산
+ const statusCounts: { [key: string]: number } = {};
+
+ // GROUP BY 형식인지 확인
+ const isGroupedData = rows.length > 0 && rows[0].count !== undefined;
+
+ if (isGroupedData) {
+ // GROUP BY 형식: SELECT status, COUNT(*) as count
+ rows.forEach((row: any) => {
+ // 다양한 컬럼명 지원 (status, 상태, state 등)
+ let status = row.status || row.상태 || row.state || row.STATUS || row.label || row.name || "알 수 없음";
+ // 영어 → 한글 자동 번역
+ status = statusTranslations[status] || statusTranslations[status.toLowerCase()] || status;
+ const count = parseInt(row.count || row.개수 || row.COUNT || row.cnt) || 0;
+ statusCounts[status] = count;
+ });
+ } else {
+ // SELECT * 형식: 전체 데이터를 가져와서 카운트
+ rows.forEach((row: any) => {
+ // 다양한 컬럼명 지원
+ let status = row.status || row.상태 || row.state || row.STATUS || row.label || row.name || "알 수 없음";
+ // 영어 → 한글 자동 번역
+ status = statusTranslations[status] || statusTranslations[status.toLowerCase()] || status;
+ statusCounts[status] = (statusCounts[status] || 0) + 1;
+ });
+ }
+
+ // statusConfig가 있으면 해당 순서대로, 없으면 전체 표시
+ let formattedData: StatusData[];
+ if (statusConfig) {
+ formattedData = Object.keys(statusConfig).map((key) => ({
+ status: statusConfig[key].label,
+ count: statusCounts[key] || 0,
+ }));
+ } else {
+ formattedData = Object.entries(statusCounts).map(([status, count]) => ({
+ status,
+ count,
+ }));
+ }
+
+ setStatusData(formattedData);
+ }
+
+ setError(null);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "데이터 로딩 실패");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const getColorClasses = (status: string) => {
+ // statusConfig에서 색상 찾기
+ let color: string = "gray";
+ if (statusConfig) {
+ const configEntry = Object.entries(statusConfig).find(([_, v]) => v.label === status);
+ if (configEntry) {
+ color = configEntry[1].color;
+ }
+ }
+
+ const colorMap = {
+ blue: { border: "border-blue-500", dot: "bg-blue-500", text: "text-blue-600" },
+ green: { border: "border-green-500", dot: "bg-green-500", text: "text-green-600" },
+ red: { border: "border-red-500", dot: "bg-red-500", text: "text-red-600" },
+ yellow: { border: "border-yellow-500", dot: "bg-yellow-500", text: "text-yellow-600" },
+ orange: { border: "border-orange-500", dot: "bg-orange-500", text: "text-orange-600" },
+ purple: { border: "border-purple-500", dot: "bg-purple-500", text: "text-purple-600" },
+ gray: { border: "border-gray-500", dot: "bg-gray-500", text: "text-gray-600" },
+ };
+
+ return colorMap[color as keyof typeof colorMap] || colorMap.gray;
+ };
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
⚠️ {error}
+
+ 다시 시도
+
+
+
+
+
{icon}
+
{title}
+
+
📊 상태별 데이터 집계 위젯
+
+ • SQL 쿼리로 데이터를 불러옵니다
+ • 상태별로 자동 집계하여 카드로 표시
+ • 실시간 데이터 모니터링 가능
+ • 색상과 라벨 커스터마이징 지원
+
+
+
+
⚙️ 설정 방법
+
우측 상단 톱니바퀴 버튼을 클릭하여
+
SQL 쿼리를 입력하고 저장하세요
+
+
+
+ {/* 헤더 */}
+
+
+
{icon} {displayTitle}
+ {totalCount > 0 ? (
+
총 {totalCount.toLocaleString()}건
+ ) : (
+
⚙️ 데이터 연결 필요
+ )}
+
+
+ {loading ? "⏳" : "🔄"}
+
+
+
+ {/* 스크롤 가능한 콘텐츠 영역 */}
+
+ {/* 상태별 카드 */}
+
+ {statusData.map((item) => {
+ const colors = getColorClasses(item.status);
+ return (
+
+
+
{item.count.toLocaleString()}
+
+ );
+ })}
+
+
+