327 lines
10 KiB
TypeScript
327 lines
10 KiB
TypeScript
|
/**
|
|||
|
|
* ⚠️ 임시 주석 처리된 파일
|
|||
|
|
* 다른 분이 범용 리스트 작업 중이어서 충돌 방지를 위해 주석 처리
|
|||
|
|
* 나중에 merge 시 활성화 필요
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
"use client";
|
|||
|
|
|
|||
|
|
import React, { useState, useEffect } from "react";
|
|||
|
|
import { DashboardElement } from "@/components/admin/dashboard/types";
|
|||
|
|
|
|||
|
|
interface ListSummaryWidgetProps {
|
|||
|
|
element: DashboardElement;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface ColumnInfo {
|
|||
|
|
key: string;
|
|||
|
|
label: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 컬럼명 한글 번역
|
|||
|
|
const translateColumnName = (colName: string): string => {
|
|||
|
|
const columnTranslations: { [key: string]: string } = {
|
|||
|
|
// 공통
|
|||
|
|
"id": "ID",
|
|||
|
|
"name": "이름",
|
|||
|
|
"status": "상태",
|
|||
|
|
"created_at": "생성일",
|
|||
|
|
"updated_at": "수정일",
|
|||
|
|
"created_date": "생성일",
|
|||
|
|
"updated_date": "수정일",
|
|||
|
|
|
|||
|
|
// 기사 관련
|
|||
|
|
"driver_id": "기사ID",
|
|||
|
|
"phone": "전화번호",
|
|||
|
|
"license_number": "면허번호",
|
|||
|
|
"vehicle_id": "차량ID",
|
|||
|
|
"current_location": "현재위치",
|
|||
|
|
"rating": "평점",
|
|||
|
|
"total_deliveries": "총배송건수",
|
|||
|
|
"average_delivery_time": "평균배송시간",
|
|||
|
|
"total_distance": "총운행거리",
|
|||
|
|
"join_date": "가입일",
|
|||
|
|
"last_active": "마지막활동",
|
|||
|
|
|
|||
|
|
// 차량 관련
|
|||
|
|
"vehicle_number": "차량번호",
|
|||
|
|
"model": "모델",
|
|||
|
|
"year": "연식",
|
|||
|
|
"color": "색상",
|
|||
|
|
"type": "종류",
|
|||
|
|
|
|||
|
|
// 배송 관련
|
|||
|
|
"delivery_id": "배송ID",
|
|||
|
|
"order_id": "주문ID",
|
|||
|
|
"customer_name": "고객명",
|
|||
|
|
"address": "주소",
|
|||
|
|
"delivery_date": "배송일",
|
|||
|
|
"estimated_time": "예상시간",
|
|||
|
|
|
|||
|
|
// 제품 관련
|
|||
|
|
"product_id": "제품ID",
|
|||
|
|
"product_name": "제품명",
|
|||
|
|
"price": "가격",
|
|||
|
|
"stock": "재고",
|
|||
|
|
"category": "카테고리",
|
|||
|
|
"description": "설명",
|
|||
|
|
|
|||
|
|
// 주문 관련
|
|||
|
|
"order_date": "주문일",
|
|||
|
|
"quantity": "수량",
|
|||
|
|
"total_amount": "총금액",
|
|||
|
|
"payment_status": "결제상태",
|
|||
|
|
|
|||
|
|
// 고객 관련
|
|||
|
|
"customer_id": "고객ID",
|
|||
|
|
"email": "이메일",
|
|||
|
|
"company": "회사",
|
|||
|
|
"department": "부서",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return columnTranslations[colName.toLowerCase()] ||
|
|||
|
|
columnTranslations[colName.replace(/_/g, '').toLowerCase()] ||
|
|||
|
|
colName;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 범용 목록 위젯
|
|||
|
|
* - SQL 쿼리 결과를 테이블 형식으로 표시
|
|||
|
|
* - 어떤 데이터든 표시 가능 (기사, 차량, 제품, 주문 등)
|
|||
|
|
*/
|
|||
|
|
export default function ListSummaryWidget({ element }: ListSummaryWidgetProps) {
|
|||
|
|
const [data, setData] = useState<any[]>([]);
|
|||
|
|
const [columns, setColumns] = useState<ColumnInfo[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [error, setError] = useState<string | null>(null);
|
|||
|
|
const [tableName, setTableName] = useState<string | null>(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 (
|
|||
|
|
<div className="flex h-full items-center justify-center">
|
|||
|
|
<div className="text-center">
|
|||
|
|
<div className="border-primary mx-auto h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" />
|
|||
|
|
<p className="mt-2 text-sm text-gray-500">데이터 로딩 중...</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (error) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex h-full items-center justify-center">
|
|||
|
|
<div className="text-center text-red-500">
|
|||
|
|
<p className="text-sm">⚠️ {error}</p>
|
|||
|
|
<button
|
|||
|
|
onClick={loadData}
|
|||
|
|
className="mt-2 rounded bg-red-100 px-3 py-1 text-xs text-red-700 hover:bg-red-200"
|
|||
|
|
>
|
|||
|
|
다시 시도
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!element?.dataSource?.query) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex h-full items-center justify-center p-3">
|
|||
|
|
<div className="max-w-xs space-y-2 text-center">
|
|||
|
|
<div className="text-3xl">📋</div>
|
|||
|
|
<h3 className="text-sm font-bold text-gray-900">데이터 목록</h3>
|
|||
|
|
<div className="space-y-1.5 text-xs text-gray-600">
|
|||
|
|
<p className="font-medium">📋 테이블 형식 데이터 표시 위젯</p>
|
|||
|
|
<ul className="space-y-0.5 text-left">
|
|||
|
|
<li>• SQL 쿼리로 데이터를 불러옵니다</li>
|
|||
|
|
<li>• 테이블 형식으로 자동 표시</li>
|
|||
|
|
<li>• 검색 기능 지원</li>
|
|||
|
|
<li>• 실시간 데이터 모니터링 가능</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-2 rounded-lg bg-blue-50 p-2 text-[10px] text-blue-700">
|
|||
|
|
<p className="font-medium">⚙️ 설정 방법</p>
|
|||
|
|
<p className="mt-0.5">우측 상단 톱니바퀴 버튼을 클릭하여</p>
|
|||
|
|
<p>SQL 쿼리를 입력하고 저장하세요</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex h-full w-full flex-col overflow-hidden bg-gradient-to-br from-slate-50 to-blue-50 p-2">
|
|||
|
|
{/* 헤더 */}
|
|||
|
|
<div className="mb-2 flex flex-shrink-0 items-center justify-between">
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<h3 className="text-sm font-bold text-gray-900">📋 {displayTitle}</h3>
|
|||
|
|
<p className="text-xs text-gray-500">총 {filteredData.length.toLocaleString()}건</p>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={loadData}
|
|||
|
|
className="flex h-7 w-7 items-center justify-center rounded border border-border bg-white p-0 text-xs hover:bg-accent disabled:opacity-50"
|
|||
|
|
disabled={loading}
|
|||
|
|
>
|
|||
|
|
{loading ? "⏳" : "🔄"}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 검색 */}
|
|||
|
|
{data.length > 0 && (
|
|||
|
|
<div className="mb-2 flex-shrink-0">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="검색..."
|
|||
|
|
value={searchTerm}
|
|||
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|||
|
|
className="w-full rounded border border-gray-300 px-2 py-1 text-xs focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 테이블 */}
|
|||
|
|
<div className="flex-1 overflow-auto">
|
|||
|
|
{filteredData.length > 0 ? (
|
|||
|
|
<table className="w-full border-collapse text-xs">
|
|||
|
|
<thead className="sticky top-0 bg-gray-100">
|
|||
|
|
<tr>
|
|||
|
|
{columns.map((col) => (
|
|||
|
|
<th
|
|||
|
|
key={col.key}
|
|||
|
|
className="border border-gray-300 px-2 py-1 text-left font-semibold text-gray-700"
|
|||
|
|
>
|
|||
|
|
{col.label}
|
|||
|
|
</th>
|
|||
|
|
))}
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody className="bg-white">
|
|||
|
|
{filteredData.map((row, idx) => (
|
|||
|
|
<tr key={idx} className="hover:bg-gray-50">
|
|||
|
|
{columns.map((col) => (
|
|||
|
|
<td
|
|||
|
|
key={col.key}
|
|||
|
|
className="border border-gray-300 px-2 py-1 text-gray-800"
|
|||
|
|
>
|
|||
|
|
{String(row[col.key] || "")}
|
|||
|
|
</td>
|
|||
|
|
))}
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
) : (
|
|||
|
|
<div className="flex h-full items-center justify-center text-gray-500">
|
|||
|
|
<p className="text-sm">검색 결과가 없습니다</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|