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>
|
||
);
|
||
}
|
||
|