Merge branch 'main' into feature/screen-management
This commit is contained in:
commit
5203d0fa50
|
|
@ -11,5 +11,70 @@
|
||||||
"updatedAt": "2025-10-20T09:00:26.948Z",
|
"updatedAt": "2025-10-20T09:00:26.948Z",
|
||||||
"isUrgent": false,
|
"isUrgent": false,
|
||||||
"order": 3
|
"order": 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "c8292b4d-bb45-487c-aa29-55b78580b837",
|
||||||
|
"title": "오늘의 힐일",
|
||||||
|
"description": "이거 데이터베이스랑 연결하기",
|
||||||
|
"priority": "normal",
|
||||||
|
"status": "pending",
|
||||||
|
"assignedTo": "",
|
||||||
|
"dueDate": "2025-10-23T14:04",
|
||||||
|
"createdAt": "2025-10-23T05:04:50.249Z",
|
||||||
|
"updatedAt": "2025-10-23T05:04:50.249Z",
|
||||||
|
"isUrgent": false,
|
||||||
|
"order": 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "2c7f90a3-947c-4693-8525-7a2a707172c0",
|
||||||
|
"title": "테스트용 일정",
|
||||||
|
"description": "ㅁㄴㅇㄹ",
|
||||||
|
"priority": "low",
|
||||||
|
"status": "pending",
|
||||||
|
"assignedTo": "",
|
||||||
|
"dueDate": "2025-10-16T18:16",
|
||||||
|
"createdAt": "2025-10-23T05:13:14.076Z",
|
||||||
|
"updatedAt": "2025-10-23T05:13:14.076Z",
|
||||||
|
"isUrgent": false,
|
||||||
|
"order": 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "499feff6-92c7-45a9-91fa-ca727edf90f2",
|
||||||
|
"title": "ㅁSdf",
|
||||||
|
"description": "asdfsdfs",
|
||||||
|
"priority": "normal",
|
||||||
|
"status": "pending",
|
||||||
|
"assignedTo": "",
|
||||||
|
"dueDate": "",
|
||||||
|
"createdAt": "2025-10-23T05:15:38.430Z",
|
||||||
|
"updatedAt": "2025-10-23T05:15:38.430Z",
|
||||||
|
"isUrgent": false,
|
||||||
|
"order": 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "166c3910-9908-457f-8c72-8d0183f12e2f",
|
||||||
|
"title": "ㅎㄹㅇㄴ",
|
||||||
|
"description": "ㅎㄹㅇㄴ",
|
||||||
|
"priority": "normal",
|
||||||
|
"status": "pending",
|
||||||
|
"assignedTo": "",
|
||||||
|
"dueDate": "",
|
||||||
|
"createdAt": "2025-10-23T05:21:01.515Z",
|
||||||
|
"updatedAt": "2025-10-23T05:21:01.515Z",
|
||||||
|
"isUrgent": false,
|
||||||
|
"order": 7
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bfa9d476-bb98-41d5-9d74-b016be011bba",
|
||||||
|
"title": "ㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇㄹ",
|
||||||
|
"description": "ㅁㄴㅇㄹㄴㅇㄹ",
|
||||||
|
"priority": "normal",
|
||||||
|
"status": "pending",
|
||||||
|
"assignedTo": "",
|
||||||
|
"dueDate": "",
|
||||||
|
"createdAt": "2025-10-23T05:21:25.781Z",
|
||||||
|
"updatedAt": "2025-10-23T05:21:25.781Z",
|
||||||
|
"isUrgent": false,
|
||||||
|
"order": 8
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
@ -441,7 +441,7 @@ export class DashboardController {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 쿼리 실행
|
* 쿼리 실행 (SELECT만)
|
||||||
* POST /api/dashboards/execute-query
|
* POST /api/dashboards/execute-query
|
||||||
*/
|
*/
|
||||||
async executeQuery(req: AuthenticatedRequest, res: Response): Promise<void> {
|
async executeQuery(req: AuthenticatedRequest, res: Response): Promise<void> {
|
||||||
|
|
@ -506,6 +506,79 @@ export class DashboardController {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DML 쿼리 실행 (INSERT, UPDATE, DELETE)
|
||||||
|
* POST /api/dashboards/execute-dml
|
||||||
|
*/
|
||||||
|
async executeDML(req: AuthenticatedRequest, res: Response): Promise<void> {
|
||||||
|
try {
|
||||||
|
const { query } = req.body;
|
||||||
|
|
||||||
|
// 유효성 검증
|
||||||
|
if (!query || typeof query !== "string" || query.trim().length === 0) {
|
||||||
|
res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
message: "쿼리가 필요합니다.",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// SQL 인젝션 방지를 위한 기본적인 검증
|
||||||
|
const trimmedQuery = query.trim().toLowerCase();
|
||||||
|
const allowedCommands = ["insert", "update", "delete"];
|
||||||
|
const isAllowed = allowedCommands.some((cmd) =>
|
||||||
|
trimmedQuery.startsWith(cmd)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!isAllowed) {
|
||||||
|
res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
message: "INSERT, UPDATE, DELETE 쿼리만 허용됩니다.",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 위험한 명령어 차단
|
||||||
|
const dangerousPatterns = [
|
||||||
|
/drop\s+table/i,
|
||||||
|
/drop\s+database/i,
|
||||||
|
/truncate/i,
|
||||||
|
/alter\s+table/i,
|
||||||
|
/create\s+table/i,
|
||||||
|
];
|
||||||
|
|
||||||
|
if (dangerousPatterns.some((pattern) => pattern.test(query))) {
|
||||||
|
res.status(403).json({
|
||||||
|
success: false,
|
||||||
|
message: "허용되지 않는 쿼리입니다.",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 쿼리 실행
|
||||||
|
const result = await PostgreSQLService.query(query.trim());
|
||||||
|
|
||||||
|
res.status(200).json({
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
rowCount: result.rowCount || 0,
|
||||||
|
command: result.command,
|
||||||
|
},
|
||||||
|
message: "쿼리가 성공적으로 실행되었습니다.",
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("DML execution error:", error);
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: "쿼리 실행 중 오류가 발생했습니다.",
|
||||||
|
error:
|
||||||
|
process.env.NODE_ENV === "development"
|
||||||
|
? (error as Error).message
|
||||||
|
: "쿼리 실행 오류",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 외부 API 프록시 (CORS 우회용)
|
* 외부 API 프록시 (CORS 우회용)
|
||||||
* POST /api/dashboards/fetch-external-api
|
* POST /api/dashboards/fetch-external-api
|
||||||
|
|
|
||||||
|
|
@ -968,9 +968,14 @@ function parseKMADataWeatherData(data: any, gridCoord: { name: string; nx: numbe
|
||||||
clouds = 30;
|
clouds = 30;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 격자좌표 → 위도경도 변환
|
||||||
|
const { lat, lng } = gridToLatLng(gridCoord.nx, gridCoord.ny);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
city: gridCoord.name,
|
city: gridCoord.name,
|
||||||
country: 'KR',
|
country: 'KR',
|
||||||
|
lat,
|
||||||
|
lng,
|
||||||
temperature: Math.round(temperature),
|
temperature: Math.round(temperature),
|
||||||
feelsLike: Math.round(temperature - 2),
|
feelsLike: Math.round(temperature - 2),
|
||||||
humidity: Math.round(humidity),
|
humidity: Math.round(humidity),
|
||||||
|
|
@ -1110,6 +1115,65 @@ function getGridCoordinates(city: string): { name: string; nx: number; ny: numbe
|
||||||
return grids[city] || null;
|
return grids[city] || null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 격자좌표(nx, ny)를 위도경도로 변환
|
||||||
|
* 기상청 격자 → 위경도 변환 공식 사용
|
||||||
|
*/
|
||||||
|
function gridToLatLng(nx: number, ny: number): { lat: number; lng: number } {
|
||||||
|
const RE = 6371.00877; // 지구 반경(km)
|
||||||
|
const GRID = 5.0; // 격자 간격(km)
|
||||||
|
const SLAT1 = 30.0; // 표준위도1(degree)
|
||||||
|
const SLAT2 = 60.0; // 표준위도2(degree)
|
||||||
|
const OLON = 126.0; // 기준점 경도(degree)
|
||||||
|
const OLAT = 38.0; // 기준점 위도(degree)
|
||||||
|
const XO = 43; // 기준점 X좌표
|
||||||
|
const YO = 136; // 기준점 Y좌표
|
||||||
|
|
||||||
|
const DEGRAD = Math.PI / 180.0;
|
||||||
|
const re = RE / GRID;
|
||||||
|
const slat1 = SLAT1 * DEGRAD;
|
||||||
|
const slat2 = SLAT2 * DEGRAD;
|
||||||
|
const olon = OLON * DEGRAD;
|
||||||
|
const olat = OLAT * DEGRAD;
|
||||||
|
|
||||||
|
const sn = Math.tan(Math.PI * 0.25 + slat2 * 0.5) / Math.tan(Math.PI * 0.25 + slat1 * 0.5);
|
||||||
|
const sn_log = Math.log(Math.cos(slat1) / Math.cos(slat2)) / Math.log(sn);
|
||||||
|
const sf = Math.tan(Math.PI * 0.25 + slat1 * 0.5);
|
||||||
|
const sf_pow = Math.pow(sf, sn_log);
|
||||||
|
const sf_result = (Math.cos(slat1) * sf_pow) / sn_log;
|
||||||
|
const ro = Math.tan(Math.PI * 0.25 + olat * 0.5);
|
||||||
|
const ro_pow = Math.pow(ro, sn_log);
|
||||||
|
const ro_result = (re * sf_result) / ro_pow;
|
||||||
|
|
||||||
|
const xn = nx - XO;
|
||||||
|
const yn = ro_result - (ny - YO);
|
||||||
|
const ra = Math.sqrt(xn * xn + yn * yn);
|
||||||
|
let alat: number;
|
||||||
|
|
||||||
|
if (sn_log > 0) {
|
||||||
|
alat = 2.0 * Math.atan(Math.pow((re * sf_result) / ra, 1.0 / sn_log)) - Math.PI * 0.5;
|
||||||
|
} else {
|
||||||
|
alat = -2.0 * Math.atan(Math.pow((re * sf_result) / ra, 1.0 / sn_log)) + Math.PI * 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
let theta: number;
|
||||||
|
if (Math.abs(xn) <= 0.0) {
|
||||||
|
theta = 0.0;
|
||||||
|
} else {
|
||||||
|
if (Math.abs(yn) <= 0.0) {
|
||||||
|
theta = 0.0;
|
||||||
|
} else {
|
||||||
|
theta = Math.atan2(xn, yn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const alon = theta / sn_log + olon;
|
||||||
|
|
||||||
|
return {
|
||||||
|
lat: parseFloat((alat / DEGRAD).toFixed(6)),
|
||||||
|
lng: parseFloat((alon / DEGRAD).toFixed(6)),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 공공데이터포털 초단기실황 응답 파싱
|
* 공공데이터포털 초단기실황 응답 파싱
|
||||||
* @param apiResponse - 공공데이터포털 API 응답 데이터
|
* @param apiResponse - 공공데이터포털 API 응답 데이터
|
||||||
|
|
@ -1171,8 +1235,13 @@ function parseDataPortalWeatherData(apiResponse: any, gridInfo: { name: string;
|
||||||
weatherDescription = '추움';
|
weatherDescription = '추움';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 격자좌표 → 위도경도 변환
|
||||||
|
const { lat, lng } = gridToLatLng(gridInfo.nx, gridInfo.ny);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
city: gridInfo.name,
|
city: gridInfo.name,
|
||||||
|
lat,
|
||||||
|
lng,
|
||||||
temperature: Math.round(temperature * 10) / 10,
|
temperature: Math.round(temperature * 10) / 10,
|
||||||
humidity: Math.round(humidity),
|
humidity: Math.round(humidity),
|
||||||
windSpeed: Math.round(windSpeed * 10) / 10,
|
windSpeed: Math.round(windSpeed * 10) / 10,
|
||||||
|
|
|
||||||
|
|
@ -24,12 +24,18 @@ router.get(
|
||||||
dashboardController.getDashboard.bind(dashboardController)
|
dashboardController.getDashboard.bind(dashboardController)
|
||||||
);
|
);
|
||||||
|
|
||||||
// 쿼리 실행 (인증 불필요 - 개발용)
|
// 쿼리 실행 (SELECT만, 인증 불필요 - 개발용)
|
||||||
router.post(
|
router.post(
|
||||||
"/execute-query",
|
"/execute-query",
|
||||||
dashboardController.executeQuery.bind(dashboardController)
|
dashboardController.executeQuery.bind(dashboardController)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// DML 쿼리 실행 (INSERT/UPDATE/DELETE, 인증 불필요 - 개발용)
|
||||||
|
router.post(
|
||||||
|
"/execute-dml",
|
||||||
|
dashboardController.executeDML.bind(dashboardController)
|
||||||
|
);
|
||||||
|
|
||||||
// 외부 API 프록시 (CORS 우회)
|
// 외부 API 프록시 (CORS 우회)
|
||||||
router.post(
|
router.post(
|
||||||
"/fetch-external-api",
|
"/fetch-external-api",
|
||||||
|
|
|
||||||
|
|
@ -78,7 +78,7 @@ const RiskAlertWidget = dynamic(() => import("@/components/dashboard/widgets/Ris
|
||||||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||||||
});
|
});
|
||||||
|
|
||||||
const TodoWidget = dynamic(() => import("@/components/dashboard/widgets/TodoWidget"), {
|
const TaskWidget = dynamic(() => import("@/components/dashboard/widgets/TaskWidget"), {
|
||||||
ssr: false,
|
ssr: false,
|
||||||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||||||
});
|
});
|
||||||
|
|
@ -88,11 +88,6 @@ const BookingAlertWidget = dynamic(() => import("@/components/dashboard/widgets/
|
||||||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||||||
});
|
});
|
||||||
|
|
||||||
const MaintenanceWidget = dynamic(() => import("@/components/dashboard/widgets/MaintenanceWidget"), {
|
|
||||||
ssr: false,
|
|
||||||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
|
||||||
});
|
|
||||||
|
|
||||||
const DocumentWidget = dynamic(() => import("@/components/dashboard/widgets/DocumentWidget"), {
|
const DocumentWidget = dynamic(() => import("@/components/dashboard/widgets/DocumentWidget"), {
|
||||||
ssr: false,
|
ssr: false,
|
||||||
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
|
||||||
|
|
@ -922,25 +917,20 @@ export function CanvasElement({
|
||||||
<CustomStatsWidget element={element} />
|
<CustomStatsWidget element={element} />
|
||||||
</div>
|
</div>
|
||||||
) : element.type === "widget" && element.subtype === "custom-metric" ? (
|
) : element.type === "widget" && element.subtype === "custom-metric" ? (
|
||||||
// 사용자 커스텀 카드 위젯 렌더링
|
// 사용자 커스텀 카드 위젯 렌더링 (main에서 추가)
|
||||||
<div className="h-full w-full">
|
<div className="h-full w-full">
|
||||||
<CustomMetricWidget element={element} />
|
<CustomMetricWidget element={element} />
|
||||||
</div>
|
</div>
|
||||||
) : element.type === "widget" && element.subtype === "todo" ? (
|
) : element.type === "widget" && (element.subtype === "todo" || element.subtype === "maintenance") ? (
|
||||||
// To-Do 위젯 렌더링
|
// Task 위젯 렌더링 (To-Do + 정비 일정 통합, lhj)
|
||||||
<div className="widget-interactive-area h-full w-full">
|
<div className="widget-interactive-area h-full w-full">
|
||||||
<TodoWidget element={element} />
|
<TaskWidget element={element} />
|
||||||
</div>
|
</div>
|
||||||
) : element.type === "widget" && element.subtype === "booking-alert" ? (
|
) : element.type === "widget" && element.subtype === "booking-alert" ? (
|
||||||
// 예약 요청 알림 위젯 렌더링
|
// 예약 요청 알림 위젯 렌더링
|
||||||
<div className="widget-interactive-area h-full w-full">
|
<div className="widget-interactive-area h-full w-full">
|
||||||
<BookingAlertWidget />
|
<BookingAlertWidget />
|
||||||
</div>
|
</div>
|
||||||
) : element.type === "widget" && element.subtype === "maintenance" ? (
|
|
||||||
// 정비 일정 위젯 렌더링
|
|
||||||
<div className="widget-interactive-area h-full w-full">
|
|
||||||
<MaintenanceWidget />
|
|
||||||
</div>
|
|
||||||
) : element.type === "widget" && element.subtype === "document" ? (
|
) : element.type === "widget" && element.subtype === "document" ? (
|
||||||
// 문서 다운로드 위젯 렌더링
|
// 문서 다운로드 위젯 렌더링
|
||||||
<div className="widget-interactive-area h-full w-full">
|
<div className="widget-interactive-area h-full w-full">
|
||||||
|
|
|
||||||
|
|
@ -190,14 +190,14 @@ export function DashboardTopMenu({
|
||||||
<SelectGroup>
|
<SelectGroup>
|
||||||
<SelectLabel>일반 위젯</SelectLabel>
|
<SelectLabel>일반 위젯</SelectLabel>
|
||||||
<SelectItem value="weather">날씨</SelectItem>
|
<SelectItem value="weather">날씨</SelectItem>
|
||||||
|
{/* <SelectItem value="weather-map">날씨 지도</SelectItem> */}
|
||||||
<SelectItem value="exchange">환율</SelectItem>
|
<SelectItem value="exchange">환율</SelectItem>
|
||||||
<SelectItem value="calculator">계산기</SelectItem>
|
<SelectItem value="calculator">계산기</SelectItem>
|
||||||
<SelectItem value="calendar">달력</SelectItem>
|
<SelectItem value="calendar">달력</SelectItem>
|
||||||
<SelectItem value="clock">시계</SelectItem>
|
<SelectItem value="clock">시계</SelectItem>
|
||||||
<SelectItem value="todo">할 일</SelectItem>
|
<SelectItem value="todo">일정관리 위젯</SelectItem>
|
||||||
{/* <SelectItem value="booking-alert">예약 알림</SelectItem> */}
|
{/* <SelectItem value="booking-alert">예약 알림</SelectItem> */}
|
||||||
<SelectItem value="maintenance">정비 일정</SelectItem>
|
<SelectItem value="document">문서</SelectItem>
|
||||||
{/* <SelectItem value="document">문서</SelectItem> */}
|
|
||||||
<SelectItem value="risk-alert">리스크 알림</SelectItem>
|
<SelectItem value="risk-alert">리스크 알림</SelectItem>
|
||||||
</SelectGroup>
|
</SelectGroup>
|
||||||
{/* 범용 위젯으로 대체 가능하여 주석처리 */}
|
{/* 범용 위젯으로 대체 가능하여 주석처리 */}
|
||||||
|
|
|
||||||
|
|
@ -67,15 +67,42 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
|
||||||
// 모달이 열릴 때 초기화
|
// 모달이 열릴 때 초기화
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isOpen) {
|
if (isOpen) {
|
||||||
setDataSource(element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 });
|
const dataSourceToSet = element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 };
|
||||||
|
setDataSource(dataSourceToSet);
|
||||||
setChartConfig(element.chartConfig || {});
|
setChartConfig(element.chartConfig || {});
|
||||||
setQueryResult(null);
|
setQueryResult(null);
|
||||||
setCurrentStep(1);
|
setCurrentStep(1);
|
||||||
setCustomTitle(element.customTitle || "");
|
setCustomTitle(element.customTitle || "");
|
||||||
setShowHeader(element.showHeader !== false); // showHeader 초기화
|
setShowHeader(element.showHeader !== false); // showHeader 초기화
|
||||||
|
|
||||||
|
// 쿼리가 이미 있으면 자동 실행
|
||||||
|
if (dataSourceToSet.type === "database" && dataSourceToSet.query) {
|
||||||
|
console.log("🔄 기존 쿼리 자동 실행:", dataSourceToSet.query);
|
||||||
|
executeQueryAutomatically(dataSourceToSet);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [isOpen, element]);
|
}, [isOpen, element]);
|
||||||
|
|
||||||
|
// 쿼리 자동 실행 함수
|
||||||
|
const executeQueryAutomatically = async (dataSourceToExecute: ChartDataSource) => {
|
||||||
|
if (dataSourceToExecute.type !== "database" || !dataSourceToExecute.query) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { queryApi } = await import("@/lib/api/query");
|
||||||
|
const result = await queryApi.executeQuery({
|
||||||
|
query: dataSourceToExecute.query,
|
||||||
|
connectionType: dataSourceToExecute.connectionType || "current",
|
||||||
|
externalConnectionId: dataSourceToExecute.externalConnectionId,
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("✅ 쿼리 자동 실행 완료:", result);
|
||||||
|
setQueryResult(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("❌ 쿼리 자동 실행 실패:", error);
|
||||||
|
// 실패해도 모달은 열리도록 (사용자가 다시 실행 가능)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 데이터 소스 타입 변경
|
// 데이터 소스 타입 변경
|
||||||
const handleDataSourceTypeChange = useCallback((type: "database" | "api") => {
|
const handleDataSourceTypeChange = useCallback((type: "database" | "api") => {
|
||||||
if (type === "database") {
|
if (type === "database") {
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,13 @@ export function QueryEditor({ dataSource, onDataSourceChange, onQueryTest }: Que
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [sampleQueryOpen, setSampleQueryOpen] = useState(false);
|
const [sampleQueryOpen, setSampleQueryOpen] = useState(false);
|
||||||
|
|
||||||
|
// dataSource.query가 변경되면 query state 업데이트 (저장된 쿼리 불러오기)
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (dataSource?.query) {
|
||||||
|
setQuery(dataSource.query);
|
||||||
|
}
|
||||||
|
}, [dataSource?.query]);
|
||||||
|
|
||||||
// 쿼리 실행
|
// 쿼리 실행
|
||||||
const executeQuery = useCallback(async () => {
|
const executeQuery = useCallback(async () => {
|
||||||
// console.log("🚀 executeQuery 호출됨!");
|
// console.log("🚀 executeQuery 호출됨!");
|
||||||
|
|
|
||||||
|
|
@ -134,6 +134,37 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 날씨 정보 표시 옵션 */}
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<label className="flex items-center gap-2 text-xs font-medium text-gray-700 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={currentConfig.showWeather || false}
|
||||||
|
onChange={(e) => updateConfig({ showWeather: e.target.checked })}
|
||||||
|
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
|
||||||
|
/>
|
||||||
|
<span>날씨 정보 표시</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-xs text-gray-500 ml-6">
|
||||||
|
마커 팝업에 해당 위치의 날씨 정보를 함께 표시합니다
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<label className="flex items-center gap-2 text-xs font-medium text-gray-700 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={currentConfig.showWeatherAlerts || false}
|
||||||
|
onChange={(e) => updateConfig({ showWeatherAlerts: e.target.checked })}
|
||||||
|
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
|
||||||
|
/>
|
||||||
|
<span>기상특보 영역 표시</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-xs text-gray-500 ml-6">
|
||||||
|
현재 발효 중인 기상특보(주의보/경보)를 지도에 색상 영역으로 표시합니다
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* 설정 미리보기 */}
|
{/* 설정 미리보기 */}
|
||||||
<div className="p-3 bg-gray-50 rounded-lg">
|
<div className="p-3 bg-gray-50 rounded-lg">
|
||||||
<div className="text-xs font-medium text-gray-700 mb-2">📋 설정 미리보기</div>
|
<div className="text-xs font-medium text-gray-700 mb-2">📋 설정 미리보기</div>
|
||||||
|
|
@ -142,6 +173,8 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
|
||||||
<div><strong>경도:</strong> {currentConfig.longitudeColumn || '미설정'}</div>
|
<div><strong>경도:</strong> {currentConfig.longitudeColumn || '미설정'}</div>
|
||||||
<div><strong>라벨:</strong> {currentConfig.labelColumn || '없음'}</div>
|
<div><strong>라벨:</strong> {currentConfig.labelColumn || '없음'}</div>
|
||||||
<div><strong>상태:</strong> {currentConfig.statusColumn || '없음'}</div>
|
<div><strong>상태:</strong> {currentConfig.statusColumn || '없음'}</div>
|
||||||
|
<div><strong>날씨 표시:</strong> {currentConfig.showWeather ? '활성화' : '비활성화'}</div>
|
||||||
|
<div><strong>기상특보 표시:</strong> {currentConfig.showWeatherAlerts ? '활성화' : '비활성화'}</div>
|
||||||
<div><strong>데이터 개수:</strong> {queryResult.rows.length}개</div>
|
<div><strong>데이터 개수:</strong> {queryResult.rows.length}개</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ export type ElementSubtype =
|
||||||
| "combo" // 차트 타입
|
| "combo" // 차트 타입
|
||||||
| "exchange"
|
| "exchange"
|
||||||
| "weather"
|
| "weather"
|
||||||
|
| "weather-map" // 날씨 지도 위젯
|
||||||
| "clock"
|
| "clock"
|
||||||
| "calendar"
|
| "calendar"
|
||||||
| "calculator"
|
| "calculator"
|
||||||
|
|
@ -168,6 +169,8 @@ export interface ChartConfig {
|
||||||
longitudeColumn?: string; // 경도 컬럼
|
longitudeColumn?: string; // 경도 컬럼
|
||||||
labelColumn?: string; // 라벨 컬럼
|
labelColumn?: string; // 라벨 컬럼
|
||||||
statusColumn?: string; // 상태 컬럼
|
statusColumn?: string; // 상태 컬럼
|
||||||
|
showWeather?: boolean; // 날씨 정보 표시 여부
|
||||||
|
showWeatherAlerts?: boolean; // 기상특보 영역 표시 여부
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface QueryResult {
|
export interface QueryResult {
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import { DashboardElement, ChartDataSource, QueryResult } from "../types";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
import { ChevronLeft, ChevronRight, Save, X } from "lucide-react";
|
import { ChevronLeft, ChevronRight, Save, X } from "lucide-react";
|
||||||
import { DataSourceSelector } from "../data-sources/DataSourceSelector";
|
import { DataSourceSelector } from "../data-sources/DataSourceSelector";
|
||||||
import { DatabaseConfig } from "../data-sources/DatabaseConfig";
|
import { DatabaseConfig } from "../data-sources/DatabaseConfig";
|
||||||
|
|
@ -19,23 +20,108 @@ interface TodoWidgetConfigModalProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* To-Do 위젯 설정 모달
|
* 일정관리 위젯 설정 모달 (범용)
|
||||||
* - 2단계 설정: 데이터 소스 → 쿼리 입력/테스트
|
* - 2단계 설정: 데이터 소스 → 쿼리 입력/테스트
|
||||||
*/
|
*/
|
||||||
export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: TodoWidgetConfigModalProps) {
|
export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: TodoWidgetConfigModalProps) {
|
||||||
const [currentStep, setCurrentStep] = useState<1 | 2>(1);
|
const [currentStep, setCurrentStep] = useState<1 | 2>(1);
|
||||||
const [title, setTitle] = useState(element.title || "✅ To-Do / 긴급 지시");
|
const [title, setTitle] = useState(element.title || "일정관리 위젯");
|
||||||
const [dataSource, setDataSource] = useState<ChartDataSource>(
|
const [dataSource, setDataSource] = useState<ChartDataSource>(
|
||||||
element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 },
|
element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 },
|
||||||
);
|
);
|
||||||
const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
|
const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
|
||||||
|
|
||||||
|
// 데이터베이스 연동 설정
|
||||||
|
const [enableDbSync, setEnableDbSync] = useState(element.chartConfig?.enableDbSync || false);
|
||||||
|
const [dbSyncMode, setDbSyncMode] = useState<"simple" | "advanced">(element.chartConfig?.dbSyncMode || "simple");
|
||||||
|
const [tableName, setTableName] = useState(element.chartConfig?.tableName || "");
|
||||||
|
const [columnMapping, setColumnMapping] = useState(element.chartConfig?.columnMapping || {
|
||||||
|
id: "id",
|
||||||
|
title: "title",
|
||||||
|
description: "description",
|
||||||
|
priority: "priority",
|
||||||
|
status: "status",
|
||||||
|
assignedTo: "assigned_to",
|
||||||
|
dueDate: "due_date",
|
||||||
|
isUrgent: "is_urgent",
|
||||||
|
});
|
||||||
|
|
||||||
// 모달 열릴 때 element에서 설정 로드
|
// 모달 열릴 때 element에서 설정 로드
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isOpen) {
|
if (isOpen) {
|
||||||
setTitle(element.title || "✅ To-Do / 긴급 지시");
|
setTitle(element.title || "일정관리 위젯");
|
||||||
if (element.dataSource) {
|
|
||||||
setDataSource(element.dataSource);
|
// 데이터 소스 설정 로드 (저장된 설정 우선, 없으면 기본값)
|
||||||
|
const loadedDataSource = element.dataSource || {
|
||||||
|
type: "database",
|
||||||
|
connectionType: "current",
|
||||||
|
refreshInterval: 0
|
||||||
|
};
|
||||||
|
setDataSource(loadedDataSource);
|
||||||
|
|
||||||
|
// 저장된 쿼리가 있으면 자동으로 실행 (실제 결과 가져오기)
|
||||||
|
if (loadedDataSource.query) {
|
||||||
|
// 쿼리 자동 실행
|
||||||
|
const executeQuery = async () => {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem("authToken");
|
||||||
|
const userLang = localStorage.getItem("userLang") || "KR";
|
||||||
|
|
||||||
|
const apiUrl = loadedDataSource.connectionType === "external" && loadedDataSource.externalConnectionId
|
||||||
|
? `http://localhost:9771/api/external-db/query?userLang=${userLang}`
|
||||||
|
: `http://localhost:9771/api/dashboards/execute-query?userLang=${userLang}`;
|
||||||
|
|
||||||
|
const requestBody = loadedDataSource.connectionType === "external" && loadedDataSource.externalConnectionId
|
||||||
|
? {
|
||||||
|
connectionId: parseInt(loadedDataSource.externalConnectionId),
|
||||||
|
query: loadedDataSource.query,
|
||||||
|
}
|
||||||
|
: { query: loadedDataSource.query };
|
||||||
|
|
||||||
|
const response = await fetch(apiUrl, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
body: JSON.stringify(requestBody),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const result = await response.json();
|
||||||
|
const rows = result.data?.rows || result.data || [];
|
||||||
|
setQueryResult({
|
||||||
|
rows: rows,
|
||||||
|
rowCount: rows.length,
|
||||||
|
executionTime: 0,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 실패해도 더미 결과로 2단계 진입 가능
|
||||||
|
setQueryResult({
|
||||||
|
rows: [{ _info: "저장된 쿼리가 있습니다. 다시 테스트해주세요." }],
|
||||||
|
rowCount: 1,
|
||||||
|
executionTime: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
// 에러 발생해도 2단계 진입 가능
|
||||||
|
setQueryResult({
|
||||||
|
rows: [{ _info: "저장된 쿼리가 있습니다. 다시 테스트해주세요." }],
|
||||||
|
rowCount: 1,
|
||||||
|
executionTime: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
executeQuery();
|
||||||
|
}
|
||||||
|
|
||||||
|
// DB 동기화 설정 로드
|
||||||
|
setEnableDbSync(element.chartConfig?.enableDbSync || false);
|
||||||
|
setDbSyncMode(element.chartConfig?.dbSyncMode || "simple");
|
||||||
|
setTableName(element.chartConfig?.tableName || "");
|
||||||
|
if (element.chartConfig?.columnMapping) {
|
||||||
|
setColumnMapping(element.chartConfig.columnMapping);
|
||||||
}
|
}
|
||||||
setCurrentStep(1);
|
setCurrentStep(1);
|
||||||
}
|
}
|
||||||
|
|
@ -94,13 +180,29 @@ export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: Todo
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 간편 모드에서 테이블명 필수 체크
|
||||||
|
if (enableDbSync && dbSyncMode === "simple" && !tableName.trim()) {
|
||||||
|
alert("데이터베이스 연동을 활성화하려면 테이블명을 입력해주세요.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
onSave({
|
onSave({
|
||||||
title,
|
title,
|
||||||
dataSource,
|
dataSource,
|
||||||
|
chartConfig: {
|
||||||
|
...element.chartConfig,
|
||||||
|
enableDbSync,
|
||||||
|
dbSyncMode,
|
||||||
|
tableName,
|
||||||
|
columnMapping,
|
||||||
|
insertQuery: element.chartConfig?.insertQuery,
|
||||||
|
updateQuery: element.chartConfig?.updateQuery,
|
||||||
|
deleteQuery: element.chartConfig?.deleteQuery,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
onClose();
|
onClose();
|
||||||
}, [title, dataSource, queryResult, onSave, onClose]);
|
}, [title, dataSource, queryResult, enableDbSync, dbSyncMode, tableName, columnMapping, element.chartConfig, onSave, onClose]);
|
||||||
|
|
||||||
// 다음 단계로
|
// 다음 단계로
|
||||||
const handleNext = useCallback(() => {
|
const handleNext = useCallback(() => {
|
||||||
|
|
@ -135,9 +237,9 @@ export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: Todo
|
||||||
{/* 헤더 */}
|
{/* 헤더 */}
|
||||||
<div className="flex items-center justify-between border-b border-gray-200 px-6 py-4">
|
<div className="flex items-center justify-between border-b border-gray-200 px-6 py-4">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-xl font-bold text-gray-800">To-Do 위젯 설정</h2>
|
<h2 className="text-xl font-bold text-gray-800">일정관리 위젯 설정</h2>
|
||||||
<p className="mt-1 text-sm text-gray-500">
|
<p className="mt-1 text-sm text-gray-500">
|
||||||
데이터 소스와 쿼리를 설정하면 자동으로 To-Do 목록이 표시됩니다
|
데이터 소스와 쿼리를 설정하면 자동으로 일정 목록이 표시됩니다
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
|
|
@ -185,7 +287,7 @@ export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: Todo
|
||||||
<Input
|
<Input
|
||||||
value={title}
|
value={title}
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
placeholder="예: ✅ 오늘의 할 일"
|
placeholder="예: 오늘의 일정"
|
||||||
className="mt-2"
|
className="mt-2"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -213,7 +315,7 @@ export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: Todo
|
||||||
<div className="mb-4 rounded-lg bg-blue-50 p-4">
|
<div className="mb-4 rounded-lg bg-blue-50 p-4">
|
||||||
<h3 className="mb-2 font-semibold text-blue-900">💡 컬럼명 가이드</h3>
|
<h3 className="mb-2 font-semibold text-blue-900">💡 컬럼명 가이드</h3>
|
||||||
<p className="mb-2 text-sm text-blue-700">
|
<p className="mb-2 text-sm text-blue-700">
|
||||||
쿼리 결과에 다음 컬럼명이 있으면 자동으로 To-Do 항목으로 변환됩니다:
|
쿼리 결과에 다음 컬럼명이 있으면 자동으로 일정 항목으로 변환됩니다:
|
||||||
</p>
|
</p>
|
||||||
<ul className="space-y-1 text-sm text-blue-600">
|
<ul className="space-y-1 text-sm text-blue-600">
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -278,7 +380,7 @@ export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: Todo
|
||||||
<div className="mt-4 rounded-lg bg-green-50 border-2 border-green-500 p-4">
|
<div className="mt-4 rounded-lg bg-green-50 border-2 border-green-500 p-4">
|
||||||
<h3 className="mb-2 font-semibold text-green-900">✅ 쿼리 테스트 성공!</h3>
|
<h3 className="mb-2 font-semibold text-green-900">✅ 쿼리 테스트 성공!</h3>
|
||||||
<p className="text-sm text-green-700">
|
<p className="text-sm text-green-700">
|
||||||
총 <strong>{queryResult.rows.length}개</strong>의 To-Do 항목을 찾았습니다.
|
총 <strong>{queryResult.rows.length}개</strong>의 일정 항목을 찾았습니다.
|
||||||
</p>
|
</p>
|
||||||
<div className="mt-3 rounded bg-white p-3">
|
<div className="mt-3 rounded bg-white p-3">
|
||||||
<p className="mb-2 text-xs font-semibold text-gray-600">첫 번째 데이터 미리보기:</p>
|
<p className="mb-2 text-xs font-semibold text-gray-600">첫 번째 데이터 미리보기:</p>
|
||||||
|
|
@ -288,6 +390,232 @@ export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: Todo
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* 데이터베이스 연동 쿼리 (선택사항) */}
|
||||||
|
<div className="mt-6 space-y-4 rounded-lg border-2 border-purple-200 bg-purple-50 p-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-purple-900">🔗 데이터베이스 연동 (선택사항)</h3>
|
||||||
|
<p className="text-sm text-purple-700">
|
||||||
|
위젯에서 추가/수정/삭제 시 데이터베이스에 직접 반영
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<label className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={enableDbSync}
|
||||||
|
onChange={(e) => setEnableDbSync(e.target.checked)}
|
||||||
|
className="h-4 w-4 rounded border-purple-300"
|
||||||
|
/>
|
||||||
|
<span className="text-sm font-medium text-purple-900">활성화</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{enableDbSync && (
|
||||||
|
<>
|
||||||
|
{/* 모드 선택 */}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setDbSyncMode("simple")}
|
||||||
|
className={`flex-1 rounded px-4 py-2 text-sm font-medium transition-colors ${
|
||||||
|
dbSyncMode === "simple"
|
||||||
|
? "bg-purple-600 text-white"
|
||||||
|
: "bg-white text-purple-600 hover:bg-purple-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
간편 모드
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setDbSyncMode("advanced")}
|
||||||
|
className={`flex-1 rounded px-4 py-2 text-sm font-medium transition-colors ${
|
||||||
|
dbSyncMode === "advanced"
|
||||||
|
? "bg-purple-600 text-white"
|
||||||
|
: "bg-white text-purple-600 hover:bg-purple-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
고급 모드
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 간편 모드 */}
|
||||||
|
{dbSyncMode === "simple" && (
|
||||||
|
<div className="space-y-4 rounded-lg border border-purple-300 bg-white p-4">
|
||||||
|
<p className="text-sm text-purple-700">
|
||||||
|
테이블명과 컬럼 매핑만 입력하면 자동으로 INSERT/UPDATE/DELETE 쿼리가 생성됩니다.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* 테이블명 */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-sm font-semibold text-purple-900">테이블명 *</Label>
|
||||||
|
<Input
|
||||||
|
value={tableName}
|
||||||
|
onChange={(e) => setTableName(e.target.value)}
|
||||||
|
placeholder="예: tasks"
|
||||||
|
className="mt-2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 컬럼 매핑 */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-sm font-semibold text-purple-900">컬럼 매핑</Label>
|
||||||
|
<div className="mt-2 grid grid-cols-2 gap-3">
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-gray-600">ID 컬럼</label>
|
||||||
|
<Input
|
||||||
|
value={columnMapping.id}
|
||||||
|
onChange={(e) => setColumnMapping({ ...columnMapping, id: e.target.value })}
|
||||||
|
placeholder="id"
|
||||||
|
className="mt-1 h-8 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-gray-600">제목 컬럼</label>
|
||||||
|
<Input
|
||||||
|
value={columnMapping.title}
|
||||||
|
onChange={(e) => setColumnMapping({ ...columnMapping, title: e.target.value })}
|
||||||
|
placeholder="title"
|
||||||
|
className="mt-1 h-8 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-gray-600">설명 컬럼</label>
|
||||||
|
<Input
|
||||||
|
value={columnMapping.description}
|
||||||
|
onChange={(e) => setColumnMapping({ ...columnMapping, description: e.target.value })}
|
||||||
|
placeholder="description"
|
||||||
|
className="mt-1 h-8 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-gray-600">우선순위 컬럼</label>
|
||||||
|
<Input
|
||||||
|
value={columnMapping.priority}
|
||||||
|
onChange={(e) => setColumnMapping({ ...columnMapping, priority: e.target.value })}
|
||||||
|
placeholder="priority"
|
||||||
|
className="mt-1 h-8 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-gray-600">상태 컬럼</label>
|
||||||
|
<Input
|
||||||
|
value={columnMapping.status}
|
||||||
|
onChange={(e) => setColumnMapping({ ...columnMapping, status: e.target.value })}
|
||||||
|
placeholder="status"
|
||||||
|
className="mt-1 h-8 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-gray-600">담당자 컬럼</label>
|
||||||
|
<Input
|
||||||
|
value={columnMapping.assignedTo}
|
||||||
|
onChange={(e) => setColumnMapping({ ...columnMapping, assignedTo: e.target.value })}
|
||||||
|
placeholder="assigned_to"
|
||||||
|
className="mt-1 h-8 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-gray-600">마감일 컬럼</label>
|
||||||
|
<Input
|
||||||
|
value={columnMapping.dueDate}
|
||||||
|
onChange={(e) => setColumnMapping({ ...columnMapping, dueDate: e.target.value })}
|
||||||
|
placeholder="due_date"
|
||||||
|
className="mt-1 h-8 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-gray-600">긴급 여부 컬럼</label>
|
||||||
|
<Input
|
||||||
|
value={columnMapping.isUrgent}
|
||||||
|
onChange={(e) => setColumnMapping({ ...columnMapping, isUrgent: e.target.value })}
|
||||||
|
placeholder="is_urgent"
|
||||||
|
className="mt-1 h-8 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 고급 모드 */}
|
||||||
|
{dbSyncMode === "advanced" && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-sm text-purple-700">
|
||||||
|
복잡한 로직이 필요한 경우 직접 쿼리를 작성하세요.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* INSERT 쿼리 */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-sm font-semibold text-purple-900">INSERT 쿼리 (추가)</Label>
|
||||||
|
<p className="mb-2 text-xs text-purple-600">
|
||||||
|
사용 가능한 변수: ${"{title}"}, ${"{description}"}, ${"{priority}"}, ${"{status}"}, ${"{assignedTo}"}, ${"{dueDate}"}, ${"{isUrgent}"}
|
||||||
|
</p>
|
||||||
|
<textarea
|
||||||
|
value={element.chartConfig?.insertQuery || ""}
|
||||||
|
onChange={(e) => {
|
||||||
|
const updates = {
|
||||||
|
...element,
|
||||||
|
chartConfig: {
|
||||||
|
...element.chartConfig,
|
||||||
|
insertQuery: e.target.value,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
Object.assign(element, updates);
|
||||||
|
}}
|
||||||
|
placeholder="예: INSERT INTO tasks (title, description, status) VALUES ('${title}', '${description}', '${status}')"
|
||||||
|
className="h-20 w-full rounded border border-purple-300 bg-white px-3 py-2 text-sm font-mono focus:border-purple-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* UPDATE 쿼리 */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-sm font-semibold text-purple-900">UPDATE 쿼리 (상태 변경)</Label>
|
||||||
|
<p className="mb-2 text-xs text-purple-600">
|
||||||
|
사용 가능한 변수: ${"{id}"}, ${"{status}"}
|
||||||
|
</p>
|
||||||
|
<textarea
|
||||||
|
value={element.chartConfig?.updateQuery || ""}
|
||||||
|
onChange={(e) => {
|
||||||
|
const updates = {
|
||||||
|
...element,
|
||||||
|
chartConfig: {
|
||||||
|
...element.chartConfig,
|
||||||
|
updateQuery: e.target.value,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
Object.assign(element, updates);
|
||||||
|
}}
|
||||||
|
placeholder="예: UPDATE tasks SET status = '${status}' WHERE id = ${id}"
|
||||||
|
className="h-20 w-full rounded border border-purple-300 bg-white px-3 py-2 text-sm font-mono focus:border-purple-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* DELETE 쿼리 */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-sm font-semibold text-purple-900">DELETE 쿼리 (삭제)</Label>
|
||||||
|
<p className="mb-2 text-xs text-purple-600">
|
||||||
|
사용 가능한 변수: ${"{id}"}
|
||||||
|
</p>
|
||||||
|
<textarea
|
||||||
|
value={element.chartConfig?.deleteQuery || ""}
|
||||||
|
onChange={(e) => {
|
||||||
|
const updates = {
|
||||||
|
...element,
|
||||||
|
chartConfig: {
|
||||||
|
...element.chartConfig,
|
||||||
|
deleteQuery: e.target.value,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
Object.assign(element, updates);
|
||||||
|
}}
|
||||||
|
placeholder="예: DELETE FROM tasks WHERE id = ${id}"
|
||||||
|
className="h-20 w-full rounded border border-purple-300 bg-white px-3 py-2 text-sm font-mono focus:border-purple-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ const MapSummaryWidget = dynamic(() => import("./widgets/MapSummaryWidget"), { s
|
||||||
const StatusSummaryWidget = dynamic(() => import("./widgets/StatusSummaryWidget"), { ssr: false });
|
const StatusSummaryWidget = dynamic(() => import("./widgets/StatusSummaryWidget"), { ssr: false });
|
||||||
const RiskAlertWidget = dynamic(() => import("./widgets/RiskAlertWidget"), { ssr: false });
|
const RiskAlertWidget = dynamic(() => import("./widgets/RiskAlertWidget"), { ssr: false });
|
||||||
const WeatherWidget = dynamic(() => import("./widgets/WeatherWidget"), { ssr: false });
|
const WeatherWidget = dynamic(() => import("./widgets/WeatherWidget"), { ssr: false });
|
||||||
|
const WeatherMapWidget = dynamic(() => import("./widgets/WeatherMapWidget"), { ssr: false });
|
||||||
const ExchangeWidget = dynamic(() => import("./widgets/ExchangeWidget"), { ssr: false });
|
const ExchangeWidget = dynamic(() => import("./widgets/ExchangeWidget"), { ssr: false });
|
||||||
const VehicleStatusWidget = dynamic(() => import("./widgets/VehicleStatusWidget"), { ssr: false });
|
const VehicleStatusWidget = dynamic(() => import("./widgets/VehicleStatusWidget"), { ssr: false });
|
||||||
const VehicleListWidget = dynamic(() => import("./widgets/VehicleListWidget"), { ssr: false });
|
const VehicleListWidget = dynamic(() => import("./widgets/VehicleListWidget"), { ssr: false });
|
||||||
|
|
@ -21,10 +22,9 @@ const CustomerIssuesWidget = dynamic(() => import("./widgets/CustomerIssuesWidge
|
||||||
const DeliveryStatusWidget = dynamic(() => import("./widgets/DeliveryStatusWidget"), { ssr: false });
|
const DeliveryStatusWidget = dynamic(() => import("./widgets/DeliveryStatusWidget"), { ssr: false });
|
||||||
const DeliveryStatusSummaryWidget = dynamic(() => import("./widgets/DeliveryStatusSummaryWidget"), { ssr: false });
|
const DeliveryStatusSummaryWidget = dynamic(() => import("./widgets/DeliveryStatusSummaryWidget"), { ssr: false });
|
||||||
const DeliveryTodayStatsWidget = dynamic(() => import("./widgets/DeliveryTodayStatsWidget"), { ssr: false });
|
const DeliveryTodayStatsWidget = dynamic(() => import("./widgets/DeliveryTodayStatsWidget"), { ssr: false });
|
||||||
const TodoWidget = dynamic(() => import("./widgets/TodoWidget"), { ssr: false });
|
const TaskWidget = dynamic(() => import("./widgets/TaskWidget"), { ssr: false });
|
||||||
const DocumentWidget = dynamic(() => import("./widgets/DocumentWidget"), { ssr: false });
|
const DocumentWidget = dynamic(() => import("./widgets/DocumentWidget"), { ssr: false });
|
||||||
const BookingAlertWidget = dynamic(() => import("./widgets/BookingAlertWidget"), { 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 });
|
const CalculatorWidget = dynamic(() => import("./widgets/CalculatorWidget"), { ssr: false });
|
||||||
const CalendarWidget = dynamic(
|
const CalendarWidget = dynamic(
|
||||||
() => import("@/components/admin/dashboard/widgets/CalendarWidget").then((mod) => ({ default: mod.CalendarWidget })),
|
() => import("@/components/admin/dashboard/widgets/CalendarWidget").then((mod) => ({ default: mod.CalendarWidget })),
|
||||||
|
|
@ -68,6 +68,8 @@ function renderWidget(element: DashboardElement) {
|
||||||
return <ExchangeWidget element={element} />;
|
return <ExchangeWidget element={element} />;
|
||||||
case "weather":
|
case "weather":
|
||||||
return <WeatherWidget element={element} />;
|
return <WeatherWidget element={element} />;
|
||||||
|
case "weather-map":
|
||||||
|
return <WeatherMapWidget element={element} />;
|
||||||
case "calculator":
|
case "calculator":
|
||||||
return <CalculatorWidget element={element} />;
|
return <CalculatorWidget element={element} />;
|
||||||
case "clock":
|
case "clock":
|
||||||
|
|
@ -85,11 +87,10 @@ function renderWidget(element: DashboardElement) {
|
||||||
|
|
||||||
// === 운영/작업 지원 ===
|
// === 운영/작업 지원 ===
|
||||||
case "todo":
|
case "todo":
|
||||||
return <TodoWidget element={element} />;
|
case "maintenance":
|
||||||
|
return <TaskWidget element={element} />;
|
||||||
case "booking-alert":
|
case "booking-alert":
|
||||||
return <BookingAlertWidget element={element} />;
|
return <BookingAlertWidget element={element} />;
|
||||||
case "maintenance":
|
|
||||||
return <MaintenanceWidget />;
|
|
||||||
case "document":
|
case "document":
|
||||||
return <DocumentWidget element={element} />;
|
return <DocumentWidget element={element} />;
|
||||||
case "list":
|
case "list":
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,10 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
import { DashboardElement } from "@/components/admin/dashboard/types";
|
import { DashboardElement } from "@/components/admin/dashboard/types";
|
||||||
|
import { getWeather, WeatherData, getWeatherAlerts, WeatherAlert } from "@/lib/api/openApi";
|
||||||
|
import { Cloud, CloudRain, CloudSnow, Sun, Wind, AlertTriangle } from "lucide-react";
|
||||||
|
import turfUnion from "@turf/union";
|
||||||
|
import { polygon } from "@turf/helpers";
|
||||||
import "leaflet/dist/leaflet.css";
|
import "leaflet/dist/leaflet.css";
|
||||||
|
|
||||||
// Leaflet 아이콘 경로 설정 (엑박 방지)
|
// Leaflet 아이콘 경로 설정 (엑박 방지)
|
||||||
|
|
@ -21,6 +25,8 @@ const MapContainer = dynamic(() => import("react-leaflet").then((mod) => mod.Map
|
||||||
const TileLayer = dynamic(() => import("react-leaflet").then((mod) => mod.TileLayer), { ssr: false });
|
const TileLayer = dynamic(() => import("react-leaflet").then((mod) => mod.TileLayer), { ssr: false });
|
||||||
const Marker = dynamic(() => import("react-leaflet").then((mod) => mod.Marker), { ssr: false });
|
const Marker = dynamic(() => import("react-leaflet").then((mod) => mod.Marker), { ssr: false });
|
||||||
const Popup = dynamic(() => import("react-leaflet").then((mod) => mod.Popup), { ssr: false });
|
const Popup = dynamic(() => import("react-leaflet").then((mod) => mod.Popup), { ssr: false });
|
||||||
|
const GeoJSON = dynamic(() => import("react-leaflet").then((mod) => mod.GeoJSON), { ssr: false });
|
||||||
|
const Polygon = dynamic(() => import("react-leaflet").then((mod) => mod.Polygon), { ssr: false });
|
||||||
|
|
||||||
// 브이월드 API 키
|
// 브이월드 API 키
|
||||||
const VWORLD_API_KEY = "97AD30D5-FDC4-3481-99C3-158E36422033";
|
const VWORLD_API_KEY = "97AD30D5-FDC4-3481-99C3-158E36422033";
|
||||||
|
|
@ -34,6 +40,7 @@ interface MarkerData {
|
||||||
lng: number;
|
lng: number;
|
||||||
name: string;
|
name: string;
|
||||||
info: any;
|
info: any;
|
||||||
|
weather?: WeatherData | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 테이블명 한글 번역
|
// 테이블명 한글 번역
|
||||||
|
|
@ -56,6 +63,160 @@ const translateTableName = (name: string): string => {
|
||||||
return tableTranslations[name.toLowerCase()] || tableTranslations[name.replace(/_/g, "").toLowerCase()] || name;
|
return tableTranslations[name.toLowerCase()] || tableTranslations[name.replace(/_/g, "").toLowerCase()] || name;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 주요 도시 좌표 (날씨 API 지원 도시)
|
||||||
|
const CITY_COORDINATES = [
|
||||||
|
{ name: "서울", lat: 37.5665, lng: 126.978 },
|
||||||
|
{ name: "부산", lat: 35.1796, lng: 129.0756 },
|
||||||
|
{ name: "인천", lat: 37.4563, lng: 126.7052 },
|
||||||
|
{ name: "대구", lat: 35.8714, lng: 128.6014 },
|
||||||
|
{ name: "광주", lat: 35.1595, lng: 126.8526 },
|
||||||
|
{ name: "대전", lat: 36.3504, lng: 127.3845 },
|
||||||
|
{ name: "울산", lat: 35.5384, lng: 129.3114 },
|
||||||
|
{ name: "세종", lat: 36.4800, lng: 127.2890 },
|
||||||
|
{ name: "제주", lat: 33.4996, lng: 126.5312 },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 해상 구역 폴리곤 좌표 (기상청 특보 구역 기준 - 깔끔한 사각형)
|
||||||
|
const MARITIME_ZONES: Record<string, Array<[number, number]>> = {
|
||||||
|
// 제주도 해역
|
||||||
|
"제주도남부앞바다": [
|
||||||
|
[33.25, 126.0], [33.25, 126.85], [33.0, 126.85], [33.0, 126.0]
|
||||||
|
],
|
||||||
|
"제주도남쪽바깥먼바다": [
|
||||||
|
[33.15, 125.7], [33.15, 127.3], [32.5, 127.3], [32.5, 125.7]
|
||||||
|
],
|
||||||
|
"제주도동부앞바다": [
|
||||||
|
[33.4, 126.7], [33.4, 127.25], [33.05, 127.25], [33.05, 126.7]
|
||||||
|
],
|
||||||
|
"제주도남동쪽안쪽먼바다": [
|
||||||
|
[33.3, 126.85], [33.3, 127.95], [32.65, 127.95], [32.65, 126.85]
|
||||||
|
],
|
||||||
|
"제주도남서쪽안쪽먼바다": [
|
||||||
|
[33.3, 125.35], [33.3, 126.45], [32.7, 126.45], [32.7, 125.35]
|
||||||
|
],
|
||||||
|
|
||||||
|
// 남해 해역
|
||||||
|
"남해동부앞바다": [
|
||||||
|
[34.65, 128.3], [34.65, 129.65], [33.95, 129.65], [33.95, 128.3]
|
||||||
|
],
|
||||||
|
"남해동부안쪽먼바다": [
|
||||||
|
[34.25, 127.95], [34.25, 129.75], [33.45, 129.75], [33.45, 127.95]
|
||||||
|
],
|
||||||
|
"남해동부바깥먼바다": [
|
||||||
|
[33.65, 127.95], [33.65, 130.35], [32.45, 130.35], [32.45, 127.95]
|
||||||
|
],
|
||||||
|
|
||||||
|
// 동해 해역
|
||||||
|
"경북북부앞바다": [
|
||||||
|
[36.65, 129.2], [36.65, 130.1], [35.95, 130.1], [35.95, 129.2]
|
||||||
|
],
|
||||||
|
"경북남부앞바다": [
|
||||||
|
[36.15, 129.1], [36.15, 129.95], [35.45, 129.95], [35.45, 129.1]
|
||||||
|
],
|
||||||
|
"동해남부남쪽안쪽먼바다": [
|
||||||
|
[35.65, 129.35], [35.65, 130.65], [34.95, 130.65], [34.95, 129.35]
|
||||||
|
],
|
||||||
|
"동해남부남쪽바깥먼바다": [
|
||||||
|
[35.25, 129.45], [35.25, 131.15], [34.15, 131.15], [34.15, 129.45]
|
||||||
|
],
|
||||||
|
"동해남부북쪽안쪽먼바다": [
|
||||||
|
[36.6, 129.65], [36.6, 130.95], [35.85, 130.95], [35.85, 129.65]
|
||||||
|
],
|
||||||
|
"동해남부북쪽바깥먼바다": [
|
||||||
|
[36.65, 130.35], [36.65, 132.15], [35.85, 132.15], [35.85, 130.35]
|
||||||
|
],
|
||||||
|
|
||||||
|
// 강원 해역
|
||||||
|
"강원북부앞바다": [
|
||||||
|
[38.15, 128.4], [38.15, 129.55], [37.45, 129.55], [37.45, 128.4]
|
||||||
|
],
|
||||||
|
"강원중부앞바다": [
|
||||||
|
[37.65, 128.7], [37.65, 129.6], [36.95, 129.6], [36.95, 128.7]
|
||||||
|
],
|
||||||
|
"강원남부앞바다": [
|
||||||
|
[37.15, 128.9], [37.15, 129.85], [36.45, 129.85], [36.45, 128.9]
|
||||||
|
],
|
||||||
|
"동해중부안쪽먼바다": [
|
||||||
|
[38.55, 129.35], [38.55, 131.15], [37.25, 131.15], [37.25, 129.35]
|
||||||
|
],
|
||||||
|
"동해중부바깥먼바다": [
|
||||||
|
[38.6, 130.35], [38.6, 132.55], [37.65, 132.55], [37.65, 130.35]
|
||||||
|
],
|
||||||
|
|
||||||
|
// 울릉도·독도
|
||||||
|
"울릉도.독도": [
|
||||||
|
[37.7, 130.7], [37.7, 132.0], [37.4, 132.0], [37.4, 130.7]
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
// 두 좌표 간 거리 계산 (Haversine formula)
|
||||||
|
const getDistance = (lat1: number, lng1: number, lat2: number, lng2: number): number => {
|
||||||
|
const R = 6371; // 지구 반경 (km)
|
||||||
|
const dLat = ((lat2 - lat1) * Math.PI) / 180;
|
||||||
|
const dLng = ((lng2 - lng1) * Math.PI) / 180;
|
||||||
|
const a =
|
||||||
|
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
||||||
|
Math.cos((lat1 * Math.PI) / 180) *
|
||||||
|
Math.cos((lat2 * Math.PI) / 180) *
|
||||||
|
Math.sin(dLng / 2) *
|
||||||
|
Math.sin(dLng / 2);
|
||||||
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||||
|
return R * c;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 가장 가까운 도시 찾기
|
||||||
|
const findNearestCity = (lat: number, lng: number): string => {
|
||||||
|
let nearestCity = "서울";
|
||||||
|
let minDistance = Infinity;
|
||||||
|
|
||||||
|
for (const city of CITY_COORDINATES) {
|
||||||
|
const distance = getDistance(lat, lng, city.lat, city.lng);
|
||||||
|
if (distance < minDistance) {
|
||||||
|
minDistance = distance;
|
||||||
|
nearestCity = city.name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return nearestCity;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 날씨 아이콘 반환
|
||||||
|
const getWeatherIcon = (weatherMain: string) => {
|
||||||
|
switch (weatherMain.toLowerCase()) {
|
||||||
|
case "clear":
|
||||||
|
return <Sun className="h-4 w-4 text-yellow-500" />;
|
||||||
|
case "rain":
|
||||||
|
return <CloudRain className="h-4 w-4 text-blue-500" />;
|
||||||
|
case "snow":
|
||||||
|
return <CloudSnow className="h-4 w-4 text-blue-300" />;
|
||||||
|
case "clouds":
|
||||||
|
return <Cloud className="h-4 w-4 text-gray-400" />;
|
||||||
|
default:
|
||||||
|
return <Wind className="h-4 w-4 text-gray-500" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 특보 심각도별 색상 반환
|
||||||
|
const getAlertColor = (severity: string): string => {
|
||||||
|
switch (severity) {
|
||||||
|
case "high":
|
||||||
|
return "#ef4444"; // 빨강 (경보)
|
||||||
|
case "medium":
|
||||||
|
return "#f59e0b"; // 주황 (주의보)
|
||||||
|
case "low":
|
||||||
|
return "#eab308"; // 노랑 (약한 주의보)
|
||||||
|
default:
|
||||||
|
return "#6b7280"; // 회색
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 지역명 정규화 (특보 API 지역명 → GeoJSON 지역명)
|
||||||
|
const normalizeRegionName = (location: string): string => {
|
||||||
|
// 기상청 특보는 "강릉시", "속초시", "인제군" 등으로 옴
|
||||||
|
// GeoJSON도 같은 형식이므로 그대로 반환
|
||||||
|
return location;
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 범용 지도 위젯 (커스텀 지도 카드)
|
* 범용 지도 위젯 (커스텀 지도 카드)
|
||||||
* - 위도/경도가 있는 모든 데이터를 지도에 표시
|
* - 위도/경도가 있는 모든 데이터를 지도에 표시
|
||||||
|
|
@ -67,8 +228,25 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [tableName, setTableName] = useState<string | null>(null);
|
const [tableName, setTableName] = useState<string | null>(null);
|
||||||
|
const [weatherCache, setWeatherCache] = useState<Map<string, WeatherData>>(new Map());
|
||||||
|
const [weatherAlerts, setWeatherAlerts] = useState<WeatherAlert[]>([]);
|
||||||
|
const [geoJsonData, setGeoJsonData] = useState<any>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
console.log("🗺️ MapSummaryWidget 초기화");
|
||||||
|
console.log("🗺️ showWeatherAlerts:", element.chartConfig?.showWeatherAlerts);
|
||||||
|
|
||||||
|
// GeoJSON 데이터 로드
|
||||||
|
loadGeoJsonData();
|
||||||
|
|
||||||
|
// 기상특보 로드 (showWeatherAlerts가 활성화된 경우)
|
||||||
|
if (element.chartConfig?.showWeatherAlerts) {
|
||||||
|
console.log("🚨 기상특보 로드 시작...");
|
||||||
|
loadWeatherAlerts();
|
||||||
|
} else {
|
||||||
|
console.log("⚠️ 기상특보 표시 옵션이 꺼져있습니다");
|
||||||
|
}
|
||||||
|
|
||||||
if (element?.dataSource?.query) {
|
if (element?.dataSource?.query) {
|
||||||
loadMapData();
|
loadMapData();
|
||||||
}
|
}
|
||||||
|
|
@ -78,10 +256,119 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
|
||||||
if (element?.dataSource?.query) {
|
if (element?.dataSource?.query) {
|
||||||
loadMapData();
|
loadMapData();
|
||||||
}
|
}
|
||||||
|
if (element.chartConfig?.showWeatherAlerts) {
|
||||||
|
loadWeatherAlerts();
|
||||||
|
}
|
||||||
}, 30000);
|
}, 30000);
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
return () => clearInterval(interval);
|
||||||
}, [element]);
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [element.id, element.dataSource?.query, element.chartConfig?.showWeather, element.chartConfig?.showWeatherAlerts]);
|
||||||
|
|
||||||
|
// GeoJSON 데이터 로드 (시/군/구 단위)
|
||||||
|
const loadGeoJsonData = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch("/geojson/korea-municipalities.json");
|
||||||
|
const data = await response.json();
|
||||||
|
console.log("🗺️ GeoJSON 로드 완료:", data.features?.length, "개 시/군/구");
|
||||||
|
setGeoJsonData(data);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("❌ GeoJSON 로드 실패:", err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 기상특보 로드
|
||||||
|
const loadWeatherAlerts = async () => {
|
||||||
|
try {
|
||||||
|
const alerts = await getWeatherAlerts();
|
||||||
|
console.log("🚨 기상특보 로드 완료:", alerts.length, "건");
|
||||||
|
console.log("🚨 특보 목록:", alerts);
|
||||||
|
setWeatherAlerts(alerts);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("❌ 기상특보 로드 실패:", err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 마커들의 날씨 정보 로드 (배치 처리 + 딜레이)
|
||||||
|
const loadWeatherForMarkers = async (markerData: MarkerData[]) => {
|
||||||
|
try {
|
||||||
|
// 각 마커의 가장 가까운 도시 찾기
|
||||||
|
const citySet = new Set<string>();
|
||||||
|
markerData.forEach((marker) => {
|
||||||
|
const nearestCity = findNearestCity(marker.lat, marker.lng);
|
||||||
|
citySet.add(nearestCity);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 캐시에 없는 도시만 날씨 조회
|
||||||
|
const citiesToFetch = Array.from(citySet).filter((city) => !weatherCache.has(city));
|
||||||
|
|
||||||
|
console.log(`🌤️ 날씨 로드: 총 ${citySet.size}개 도시, 캐시 미스 ${citiesToFetch.length}개`);
|
||||||
|
|
||||||
|
if (citiesToFetch.length > 0) {
|
||||||
|
// 배치 처리: 5개씩 나눠서 호출
|
||||||
|
const BATCH_SIZE = 5;
|
||||||
|
const newCache = new Map(weatherCache);
|
||||||
|
|
||||||
|
for (let i = 0; i < citiesToFetch.length; i += BATCH_SIZE) {
|
||||||
|
const batch = citiesToFetch.slice(i, i + BATCH_SIZE);
|
||||||
|
console.log(`📦 배치 ${Math.floor(i / BATCH_SIZE) + 1}: ${batch.join(", ")}`);
|
||||||
|
|
||||||
|
// 배치 내에서는 병렬 호출
|
||||||
|
const batchPromises = batch.map(async (city) => {
|
||||||
|
try {
|
||||||
|
const weather = await getWeather(city);
|
||||||
|
return { city, weather };
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`❌ ${city} 날씨 로드 실패:`, err);
|
||||||
|
return { city, weather: null };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const batchResults = await Promise.all(batchPromises);
|
||||||
|
|
||||||
|
// 캐시 업데이트
|
||||||
|
batchResults.forEach(({ city, weather }) => {
|
||||||
|
if (weather) {
|
||||||
|
newCache.set(city, weather);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 다음 배치 전 1초 대기 (서버 부하 방지)
|
||||||
|
if (i + BATCH_SIZE < citiesToFetch.length) {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setWeatherCache(newCache);
|
||||||
|
|
||||||
|
// 마커에 날씨 정보 추가
|
||||||
|
const updatedMarkers = markerData.map((marker) => {
|
||||||
|
const nearestCity = findNearestCity(marker.lat, marker.lng);
|
||||||
|
return {
|
||||||
|
...marker,
|
||||||
|
weather: newCache.get(nearestCity) || null,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
setMarkers(updatedMarkers);
|
||||||
|
console.log("✅ 날씨 로드 완료!");
|
||||||
|
} else {
|
||||||
|
// 캐시에서 날씨 정보 가져오기
|
||||||
|
const updatedMarkers = markerData.map((marker) => {
|
||||||
|
const nearestCity = findNearestCity(marker.lat, marker.lng);
|
||||||
|
return {
|
||||||
|
...marker,
|
||||||
|
weather: weatherCache.get(nearestCity) || null,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
setMarkers(updatedMarkers);
|
||||||
|
console.log("✅ 캐시에서 날씨 로드 완료!");
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("❌ 날씨 정보 로드 실패:", err);
|
||||||
|
// 날씨 로드 실패해도 마커는 표시
|
||||||
|
setMarkers(markerData);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const loadMapData = async () => {
|
const loadMapData = async () => {
|
||||||
if (!element?.dataSource?.query) {
|
if (!element?.dataSource?.query) {
|
||||||
|
|
@ -135,9 +422,15 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
|
||||||
lng: parseFloat(row[lngCol]),
|
lng: parseFloat(row[lngCol]),
|
||||||
name: row.name || row.vehicle_number || row.warehouse_name || row.customer_name || "알 수 없음",
|
name: row.name || row.vehicle_number || row.warehouse_name || row.customer_name || "알 수 없음",
|
||||||
info: row,
|
info: row,
|
||||||
|
weather: null,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
setMarkers(markerData);
|
setMarkers(markerData);
|
||||||
|
|
||||||
|
// 날씨 정보 로드 (showWeather가 활성화된 경우만)
|
||||||
|
if (element.chartConfig?.showWeather) {
|
||||||
|
loadWeatherForMarkers(markerData);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setError(null);
|
setError(null);
|
||||||
|
|
@ -201,24 +494,208 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
|
||||||
keepBuffer={2}
|
keepBuffer={2}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* 기상특보 영역 표시 (육지 - GeoJSON 레이어) */}
|
||||||
|
{element.chartConfig?.showWeatherAlerts && geoJsonData && weatherAlerts && weatherAlerts.length > 0 && (
|
||||||
|
<GeoJSON
|
||||||
|
key={`alerts-${weatherAlerts.length}`}
|
||||||
|
data={geoJsonData}
|
||||||
|
style={(feature) => {
|
||||||
|
// 해당 지역에 특보가 있는지 확인
|
||||||
|
const regionName = feature?.properties?.name;
|
||||||
|
const alert = weatherAlerts.find((a) => normalizeRegionName(a.location) === regionName);
|
||||||
|
|
||||||
|
if (alert) {
|
||||||
|
return {
|
||||||
|
fillColor: getAlertColor(alert.severity),
|
||||||
|
fillOpacity: 0.3,
|
||||||
|
color: getAlertColor(alert.severity),
|
||||||
|
weight: 2,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 특보가 없는 지역은 투명하게
|
||||||
|
return {
|
||||||
|
fillOpacity: 0,
|
||||||
|
color: "transparent",
|
||||||
|
weight: 0,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
onEachFeature={(feature, layer) => {
|
||||||
|
const regionName = feature?.properties?.name;
|
||||||
|
const regionAlerts = weatherAlerts.filter((a) => normalizeRegionName(a.location) === regionName);
|
||||||
|
|
||||||
|
if (regionAlerts.length > 0) {
|
||||||
|
const popupContent = `
|
||||||
|
<div style="min-width: 200px;">
|
||||||
|
<div style="font-weight: bold; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 4px;">
|
||||||
|
<span style="color: ${getAlertColor(regionAlerts[0].severity)};">⚠️</span>
|
||||||
|
${regionName}
|
||||||
|
</div>
|
||||||
|
${regionAlerts
|
||||||
|
.map(
|
||||||
|
(alert) => `
|
||||||
|
<div style="margin-bottom: 8px; padding: 8px; background: #f9fafb; border-radius: 4px; border-left: 3px solid ${getAlertColor(alert.severity)};">
|
||||||
|
<div style="font-weight: 600; font-size: 12px; color: ${getAlertColor(alert.severity)};">
|
||||||
|
${alert.title}
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 11px; color: #6b7280; margin-top: 4px;">
|
||||||
|
${alert.description}
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 10px; color: #9ca3af; margin-top: 4px;">
|
||||||
|
${new Date(alert.timestamp).toLocaleString("ko-KR")}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
)
|
||||||
|
.join("")}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
layer.bindPopup(popupContent);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 기상특보 영역 표시 (해상 - Polygon 레이어) - 개별 표시 */}
|
||||||
|
{element.chartConfig?.showWeatherAlerts && weatherAlerts && weatherAlerts.length > 0 &&
|
||||||
|
weatherAlerts
|
||||||
|
.filter((alert) => MARITIME_ZONES[alert.location])
|
||||||
|
.map((alert, idx) => {
|
||||||
|
const coordinates = MARITIME_ZONES[alert.location];
|
||||||
|
const alertColor = getAlertColor(alert.severity);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Polygon
|
||||||
|
key={`maritime-${idx}`}
|
||||||
|
positions={coordinates}
|
||||||
|
pathOptions={{
|
||||||
|
fillColor: alertColor,
|
||||||
|
fillOpacity: 0.15,
|
||||||
|
color: alertColor,
|
||||||
|
weight: 2,
|
||||||
|
opacity: 0.9,
|
||||||
|
dashArray: "5, 5",
|
||||||
|
lineCap: "round",
|
||||||
|
lineJoin: "round",
|
||||||
|
}}
|
||||||
|
eventHandlers={{
|
||||||
|
mouseover: (e) => {
|
||||||
|
const layer = e.target;
|
||||||
|
layer.setStyle({
|
||||||
|
fillOpacity: 0.3,
|
||||||
|
weight: 3,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
mouseout: (e) => {
|
||||||
|
const layer = e.target;
|
||||||
|
layer.setStyle({
|
||||||
|
fillOpacity: 0.15,
|
||||||
|
weight: 2,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Popup>
|
||||||
|
<div style={{ minWidth: "180px" }}>
|
||||||
|
<div style={{ fontWeight: "bold", fontSize: "13px", marginBottom: "6px", display: "flex", alignItems: "center", gap: "4px" }}>
|
||||||
|
<span style={{ color: alertColor }}>⚠️</span>
|
||||||
|
{alert.location}
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: "6px", background: "#f9fafb", borderRadius: "4px", borderLeft: `3px solid ${alertColor}` }}>
|
||||||
|
<div style={{ fontWeight: "600", fontSize: "11px", color: alertColor }}>
|
||||||
|
{alert.title}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: "10px", color: "#6b7280", marginTop: "3px" }}>
|
||||||
|
{alert.description}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: "9px", color: "#9ca3af", marginTop: "3px" }}>
|
||||||
|
{new Date(alert.timestamp).toLocaleString("ko-KR")}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Popup>
|
||||||
|
</Polygon>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
{/* 마커 표시 */}
|
{/* 마커 표시 */}
|
||||||
{markers.map((marker, idx) => (
|
{markers.map((marker, idx) => (
|
||||||
<Marker key={idx} position={[marker.lat, marker.lng]}>
|
<Marker key={idx} position={[marker.lat, marker.lng]}>
|
||||||
<Popup>
|
<Popup>
|
||||||
<div className="text-xs">
|
<div className="min-w-[200px] text-xs">
|
||||||
<div className="mb-1 text-sm font-bold">{marker.name}</div>
|
{/* 마커 정보 */}
|
||||||
{Object.entries(marker.info)
|
<div className="mb-2 border-b pb-2">
|
||||||
.filter(([key]) => !["latitude", "longitude", "lat", "lng"].includes(key.toLowerCase()))
|
<div className="mb-1 text-sm font-bold">{marker.name}</div>
|
||||||
.map(([key, value]) => (
|
{Object.entries(marker.info)
|
||||||
<div key={key}>
|
.filter(([key]) => !["latitude", "longitude", "lat", "lng"].includes(key.toLowerCase()))
|
||||||
<strong>{key}:</strong> {String(value)}
|
.map(([key, value]) => (
|
||||||
|
<div key={key} className="text-xs">
|
||||||
|
<strong>{key}:</strong> {String(value)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 날씨 정보 */}
|
||||||
|
{marker.weather && (
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="mb-1 flex items-center gap-2">
|
||||||
|
{getWeatherIcon(marker.weather.weatherMain)}
|
||||||
|
<span className="text-xs font-semibold">현재 날씨</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
<div className="text-xs text-gray-600">{marker.weather.weatherDescription}</div>
|
||||||
|
<div className="mt-2 space-y-1 text-xs">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-500">온도</span>
|
||||||
|
<span className="font-medium">{marker.weather.temperature}°C</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-500">체감온도</span>
|
||||||
|
<span className="font-medium">{marker.weather.feelsLike}°C</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-500">습도</span>
|
||||||
|
<span className="font-medium">{marker.weather.humidity}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-500">풍속</span>
|
||||||
|
<span className="font-medium">{marker.weather.windSpeed} m/s</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Popup>
|
</Popup>
|
||||||
</Marker>
|
</Marker>
|
||||||
))}
|
))}
|
||||||
</MapContainer>
|
</MapContainer>
|
||||||
|
|
||||||
|
{/* 범례 (특보가 있을 때만 표시) */}
|
||||||
|
{element.chartConfig?.showWeatherAlerts && weatherAlerts && weatherAlerts.length > 0 && (
|
||||||
|
<div className="absolute bottom-4 right-4 z-10 rounded-lg border bg-white p-3 shadow-lg">
|
||||||
|
<div className="mb-2 flex items-center gap-1 text-xs font-semibold">
|
||||||
|
<AlertTriangle className="h-3 w-3" />
|
||||||
|
기상특보
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1 text-xs">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="h-3 w-3 rounded" style={{ backgroundColor: getAlertColor("high") }}></div>
|
||||||
|
<span>경보</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="h-3 w-3 rounded" style={{ backgroundColor: getAlertColor("medium") }}></div>
|
||||||
|
<span>주의보</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="h-3 w-3 rounded" style={{ backgroundColor: getAlertColor("low") }}></div>
|
||||||
|
<span>약한 주의보</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 border-t pt-2 text-[10px] text-gray-500">
|
||||||
|
총 {weatherAlerts.length}건 발효 중
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,803 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { Plus, Check, X, Clock, AlertCircle, Calendar as CalendarIcon, Wrench, Truck } from "lucide-react";
|
||||||
|
import { DashboardElement } from "@/components/admin/dashboard/types";
|
||||||
|
import { useDashboard } from "@/contexts/DashboardContext";
|
||||||
|
|
||||||
|
interface TaskItem {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
priority: "urgent" | "high" | "normal" | "low";
|
||||||
|
status: "pending" | "in_progress" | "completed" | "overdue";
|
||||||
|
assignedTo?: string;
|
||||||
|
dueDate?: string;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
completedAt?: string;
|
||||||
|
isUrgent: boolean;
|
||||||
|
order: number;
|
||||||
|
// 정비 일정 전용 필드
|
||||||
|
vehicleNumber?: string;
|
||||||
|
vehicleType?: string;
|
||||||
|
maintenanceType?: string;
|
||||||
|
estimatedCost?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TaskStats {
|
||||||
|
total: number;
|
||||||
|
pending: number;
|
||||||
|
inProgress: number;
|
||||||
|
completed: number;
|
||||||
|
urgent: number;
|
||||||
|
overdue: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TaskWidgetProps {
|
||||||
|
element?: DashboardElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TaskWidget({ element }: TaskWidgetProps) {
|
||||||
|
const { selectedDate } = useDashboard();
|
||||||
|
|
||||||
|
const [tasks, setTasks] = useState<TaskItem[]>([]);
|
||||||
|
const [internalTasks, setInternalTasks] = useState<TaskItem[]>([]);
|
||||||
|
const [stats, setStats] = useState<TaskStats | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [filter, setFilter] = useState<"all" | "pending" | "in_progress" | "completed">("all");
|
||||||
|
const [showAddForm, setShowAddForm] = useState(false);
|
||||||
|
const [newTask, setNewTask] = useState({
|
||||||
|
title: "",
|
||||||
|
description: "",
|
||||||
|
priority: "normal" as TaskItem["priority"],
|
||||||
|
isUrgent: false,
|
||||||
|
dueDate: "",
|
||||||
|
assignedTo: "",
|
||||||
|
vehicleNumber: "",
|
||||||
|
vehicleType: "",
|
||||||
|
maintenanceType: "",
|
||||||
|
estimatedCost: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 범용 위젯이므로 모드 구분 제거 - 모든 필드를 선택적으로 사용
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchTasks();
|
||||||
|
const interval = setInterval(fetchTasks, 30000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [selectedDate]); // filter 제거 - 프론트엔드에서만 필터링
|
||||||
|
|
||||||
|
const fetchTasks = async () => {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem("authToken");
|
||||||
|
const userLang = localStorage.getItem("userLang") || "KR";
|
||||||
|
|
||||||
|
// 데이터베이스 쿼리가 있으면 DB에서만 가져오기
|
||||||
|
if (element?.dataSource?.query) {
|
||||||
|
const apiUrl = element.dataSource.connectionType === "external" && element.dataSource.externalConnectionId
|
||||||
|
? `http://localhost:9771/api/external-db/query?userLang=${userLang}`
|
||||||
|
: `http://localhost:9771/api/dashboards/execute-query?userLang=${userLang}`;
|
||||||
|
|
||||||
|
const requestBody = element.dataSource.connectionType === "external" && element.dataSource.externalConnectionId
|
||||||
|
? {
|
||||||
|
connectionId: parseInt(element.dataSource.externalConnectionId),
|
||||||
|
query: element.dataSource.query,
|
||||||
|
}
|
||||||
|
: { query: element.dataSource.query };
|
||||||
|
|
||||||
|
const response = await fetch(apiUrl, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
body: JSON.stringify(requestBody),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const result = await response.json();
|
||||||
|
const rows = result.data?.rows || result.data || [];
|
||||||
|
const externalTasks = mapExternalDataToTasks(rows);
|
||||||
|
setTasks(externalTasks); // DB 데이터만 사용
|
||||||
|
setStats(calculateStatsFromTasks(externalTasks));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 쿼리가 없으면 내장 API 사용 (하위 호환성)
|
||||||
|
const internalResponse = await fetch(`http://localhost:9771/api/todos`, {
|
||||||
|
headers: { Authorization: `Bearer ${token}` },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (internalResponse.ok) {
|
||||||
|
const result = await internalResponse.json();
|
||||||
|
const internalData = result.data || [];
|
||||||
|
setInternalTasks(internalData);
|
||||||
|
setTasks(internalData);
|
||||||
|
setStats(calculateStatsFromTasks(internalData));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
// console.error("Task 로딩 오류:", error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const mapExternalDataToTasks = (data: any[]): TaskItem[] => {
|
||||||
|
return data.map((row, index) => ({
|
||||||
|
id: row.id || `task-${index}`,
|
||||||
|
title: row.title || row.task || row.name || "제목 없음",
|
||||||
|
description: row.description || row.desc || row.content || row.notes,
|
||||||
|
priority: row.priority || "normal",
|
||||||
|
status: row.status || "pending",
|
||||||
|
assignedTo: row.assigned_to || row.assignedTo || row.user,
|
||||||
|
dueDate: row.due_date || row.dueDate || row.deadline || row.scheduled_date || row.scheduledDate,
|
||||||
|
createdAt: row.created_at || row.createdAt || new Date().toISOString(),
|
||||||
|
updatedAt: row.updated_at || row.updatedAt || new Date().toISOString(),
|
||||||
|
completedAt: row.completed_at || row.completedAt,
|
||||||
|
isUrgent: row.is_urgent || row.isUrgent || row.urgent || false,
|
||||||
|
order: row.display_order || row.order || index,
|
||||||
|
vehicleNumber: row.vehicle_number || row.vehicleNumber,
|
||||||
|
vehicleType: row.vehicle_type || row.vehicleType,
|
||||||
|
maintenanceType: row.maintenance_type || row.maintenanceType,
|
||||||
|
estimatedCost: row.estimated_cost || row.estimatedCost,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const calculateStatsFromTasks = (taskList: TaskItem[]): TaskStats => {
|
||||||
|
return {
|
||||||
|
total: taskList.length,
|
||||||
|
pending: taskList.filter((t) => t.status === "pending").length,
|
||||||
|
inProgress: taskList.filter((t) => t.status === "in_progress").length,
|
||||||
|
completed: taskList.filter((t) => t.status === "completed").length,
|
||||||
|
urgent: taskList.filter((t) => t.isUrgent).length,
|
||||||
|
overdue: taskList.filter((t) => {
|
||||||
|
if (!t.dueDate) return false;
|
||||||
|
return new Date(t.dueDate) < new Date() && t.status !== "completed";
|
||||||
|
}).length,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddTask = async () => {
|
||||||
|
if (!newTask.title.trim()) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem("authToken");
|
||||||
|
const userLang = localStorage.getItem("userLang") || "KR";
|
||||||
|
|
||||||
|
// 데이터베이스 저장 (간편/고급 모드만 지원)
|
||||||
|
let insertQuery = "";
|
||||||
|
|
||||||
|
console.log("🔍 데이터베이스 연동 확인:", {
|
||||||
|
enableDbSync: element?.chartConfig?.enableDbSync,
|
||||||
|
dbSyncMode: element?.chartConfig?.dbSyncMode,
|
||||||
|
tableName: element?.chartConfig?.tableName,
|
||||||
|
hasInsertQuery: !!element?.chartConfig?.insertQuery,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 1. 간편 모드: 사용자가 설정한 테이블/컬럼 사용
|
||||||
|
if (element?.chartConfig?.enableDbSync && element.chartConfig.dbSyncMode === "simple" && element.chartConfig.tableName) {
|
||||||
|
const table = element.chartConfig.tableName;
|
||||||
|
const cols = element.chartConfig.columnMapping;
|
||||||
|
|
||||||
|
const columns = [cols.title, cols.description, cols.priority, cols.status, cols.assignedTo, cols.dueDate, cols.isUrgent]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(", ");
|
||||||
|
|
||||||
|
const values = [
|
||||||
|
`'${newTask.title.replace(/'/g, "''")}'`,
|
||||||
|
newTask.description ? `'${newTask.description.replace(/'/g, "''")}'` : "''",
|
||||||
|
`'${newTask.priority}'`,
|
||||||
|
"'pending'",
|
||||||
|
newTask.assignedTo ? `'${newTask.assignedTo.replace(/'/g, "''")}'` : "''",
|
||||||
|
newTask.dueDate ? `'${newTask.dueDate}'` : "NULL",
|
||||||
|
newTask.isUrgent ? "TRUE" : "FALSE",
|
||||||
|
].filter((_, i) => [cols.title, cols.description, cols.priority, cols.status, cols.assignedTo, cols.dueDate, cols.isUrgent][i]);
|
||||||
|
|
||||||
|
insertQuery = `INSERT INTO ${table} (${columns}) VALUES (${values.join(", ")})`;
|
||||||
|
console.log("✅ 간편 모드 INSERT 쿼리 생성:", insertQuery);
|
||||||
|
}
|
||||||
|
// 2. 고급 모드: 사용자가 입력한 쿼리 사용
|
||||||
|
else if (element?.chartConfig?.enableDbSync && element.chartConfig.insertQuery) {
|
||||||
|
insertQuery = element.chartConfig.insertQuery;
|
||||||
|
insertQuery = insertQuery.replace(/\$\{title\}/g, newTask.title);
|
||||||
|
insertQuery = insertQuery.replace(/\$\{description\}/g, newTask.description || '');
|
||||||
|
insertQuery = insertQuery.replace(/\$\{priority\}/g, newTask.priority);
|
||||||
|
insertQuery = insertQuery.replace(/\$\{status\}/g, 'pending');
|
||||||
|
insertQuery = insertQuery.replace(/\$\{assignedTo\}/g, newTask.assignedTo || '');
|
||||||
|
insertQuery = insertQuery.replace(/\$\{dueDate\}/g, newTask.dueDate || '');
|
||||||
|
insertQuery = insertQuery.replace(/\$\{isUrgent\}/g, String(newTask.isUrgent));
|
||||||
|
insertQuery = insertQuery.replace(/\$\{vehicleNumber\}/g, newTask.vehicleNumber || '');
|
||||||
|
insertQuery = insertQuery.replace(/\$\{vehicleType\}/g, newTask.vehicleType || '');
|
||||||
|
insertQuery = insertQuery.replace(/\$\{maintenanceType\}/g, newTask.maintenanceType || '');
|
||||||
|
insertQuery = insertQuery.replace(/\$\{estimatedCost\}/g, String(newTask.estimatedCost || 0));
|
||||||
|
console.log("✅ 고급 모드 INSERT 쿼리 생성:", insertQuery);
|
||||||
|
}
|
||||||
|
// 3. 쿼리 결과가 있으면 자동 생성
|
||||||
|
else if (element?.dataSource?.query && tasks.length > 0) {
|
||||||
|
const firstRow = tasks[0];
|
||||||
|
const availableColumns = Object.keys(firstRow);
|
||||||
|
console.log("🔍 쿼리 결과 컬럼:", availableColumns);
|
||||||
|
|
||||||
|
// 테이블명 추출
|
||||||
|
const selectMatch = element.dataSource.query.match(/FROM\s+(\w+)/i);
|
||||||
|
let tableName = selectMatch ? selectMatch[1] : "unknown_table";
|
||||||
|
|
||||||
|
// 필드 값 매핑 (camelCase와 snake_case 모두 대응)
|
||||||
|
const fieldMapping: Record<string, any> = {
|
||||||
|
title: newTask.title,
|
||||||
|
description: newTask.description || '',
|
||||||
|
priority: newTask.priority,
|
||||||
|
status: 'pending',
|
||||||
|
assignedTo: newTask.assignedTo || '',
|
||||||
|
assigned_to: newTask.assignedTo || '',
|
||||||
|
dueDate: newTask.dueDate || null,
|
||||||
|
due_date: newTask.dueDate || null,
|
||||||
|
isUrgent: newTask.isUrgent,
|
||||||
|
is_urgent: newTask.isUrgent,
|
||||||
|
createdAt: "NOW()",
|
||||||
|
created_at: "NOW()",
|
||||||
|
updatedAt: "NOW()",
|
||||||
|
updated_at: "NOW()",
|
||||||
|
};
|
||||||
|
|
||||||
|
// camelCase를 snake_case로 변환
|
||||||
|
const camelToSnake = (str: string): string => {
|
||||||
|
return str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 쿼리 결과에 있는 컬럼만 매핑 (snake_case로 변환)
|
||||||
|
const columns: string[] = [];
|
||||||
|
const values: string[] = [];
|
||||||
|
|
||||||
|
availableColumns.forEach(col => {
|
||||||
|
// order는 제외하지만 id는 포함 (NOT NULL이므로)
|
||||||
|
if (col === 'order') return;
|
||||||
|
|
||||||
|
if (fieldMapping.hasOwnProperty(col)) {
|
||||||
|
// camelCase를 snake_case로 변환
|
||||||
|
const snakeCol = camelToSnake(col);
|
||||||
|
columns.push(snakeCol);
|
||||||
|
|
||||||
|
const val = fieldMapping[col];
|
||||||
|
if (val === "NOW()") {
|
||||||
|
values.push("NOW()");
|
||||||
|
} else if (val === null) {
|
||||||
|
values.push("NULL");
|
||||||
|
} else if (typeof val === "boolean") {
|
||||||
|
values.push(val ? "TRUE" : "FALSE");
|
||||||
|
} else if (typeof val === "number") {
|
||||||
|
values.push(String(val));
|
||||||
|
} else {
|
||||||
|
values.push(`'${String(val).replace(/'/g, "''")}'`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// id가 없으면 UUID 생성
|
||||||
|
if (!columns.includes('id')) {
|
||||||
|
columns.unshift('id');
|
||||||
|
values.unshift(`'${crypto.randomUUID()}'`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// display_order가 없으면 0으로 추가
|
||||||
|
if (!columns.includes('display_order')) {
|
||||||
|
columns.push('display_order');
|
||||||
|
values.push('0');
|
||||||
|
}
|
||||||
|
|
||||||
|
insertQuery = `INSERT INTO ${tableName} (${columns.join(", ")}) VALUES (${values.join(", ")})`;
|
||||||
|
console.log("✅ 쿼리 결과 기반 자동 INSERT:", insertQuery);
|
||||||
|
}
|
||||||
|
// 4. 설정이 없으면 경고
|
||||||
|
else {
|
||||||
|
console.error("❌ 데이터베이스 연동 설정이 필요합니다!");
|
||||||
|
alert("일정관리 위젯 속성에서 '데이터베이스 연동'을 설정해주세요.\n\n간편 모드: 테이블명과 컬럼 매핑 입력\n고급 모드: INSERT 쿼리 직접 작성\n\n또는 쿼리 결과가 있으면 자동으로 생성됩니다.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 쿼리 실행 (모든 경우 처리: 내장 DB, 외부 DB, API)
|
||||||
|
if (insertQuery) {
|
||||||
|
// 외부 데이터베이스 or 내장 데이터베이스
|
||||||
|
const apiUrl = element?.dataSource?.connectionType === "external" && element.dataSource.externalConnectionId
|
||||||
|
? `http://localhost:9771/api/external-db/execute?userLang=${userLang}`
|
||||||
|
: `http://localhost:9771/api/dashboards/execute-dml?userLang=${userLang}`;
|
||||||
|
|
||||||
|
const requestBody = element?.dataSource?.connectionType === "external" && element.dataSource.externalConnectionId
|
||||||
|
? {
|
||||||
|
connectionId: parseInt(element.dataSource.externalConnectionId),
|
||||||
|
query: insertQuery,
|
||||||
|
}
|
||||||
|
: { query: insertQuery };
|
||||||
|
|
||||||
|
console.log("📤 데이터베이스 INSERT 요청:", { apiUrl, requestBody });
|
||||||
|
|
||||||
|
const response = await fetch(apiUrl, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
body: JSON.stringify(requestBody),
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("📥 데이터베이스 응답:", { status: response.status, ok: response.ok });
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const result = await response.json();
|
||||||
|
console.log("✅ 데이터베이스 INSERT 성공:", result);
|
||||||
|
setNewTask({
|
||||||
|
title: "",
|
||||||
|
description: "",
|
||||||
|
priority: "normal",
|
||||||
|
isUrgent: false,
|
||||||
|
dueDate: "",
|
||||||
|
assignedTo: "",
|
||||||
|
vehicleNumber: "",
|
||||||
|
vehicleType: "",
|
||||||
|
maintenanceType: "",
|
||||||
|
estimatedCost: 0,
|
||||||
|
});
|
||||||
|
setShowAddForm(false);
|
||||||
|
fetchTasks();
|
||||||
|
} else {
|
||||||
|
const errorText = await response.text();
|
||||||
|
console.error("❌ 데이터베이스 INSERT 실패:", { status: response.status, error: errorText });
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error("❌ INSERT 쿼리가 생성되지 않았습니다!");
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("❌ Task 추가 오류:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateStatus = async (id: string, status: TaskItem["status"]) => {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem("authToken");
|
||||||
|
const userLang = localStorage.getItem("userLang") || "KR";
|
||||||
|
|
||||||
|
let updateQuery = "";
|
||||||
|
|
||||||
|
// 1. 간편 모드: 사용자가 설정한 테이블/컬럼 사용
|
||||||
|
if (element?.chartConfig?.enableDbSync && element.chartConfig.dbSyncMode === "simple" && element.chartConfig.tableName) {
|
||||||
|
const table = element.chartConfig.tableName;
|
||||||
|
const cols = element.chartConfig.columnMapping;
|
||||||
|
updateQuery = `UPDATE ${table} SET ${cols.status} = '${status}' WHERE ${cols.id} = '${id}'`;
|
||||||
|
}
|
||||||
|
// 2. 고급 모드: 사용자가 입력한 쿼리 사용
|
||||||
|
else if (element?.chartConfig?.enableDbSync && element.chartConfig.updateQuery) {
|
||||||
|
updateQuery = element.chartConfig.updateQuery;
|
||||||
|
updateQuery = updateQuery.replace(/\$\{id\}/g, id);
|
||||||
|
updateQuery = updateQuery.replace(/\$\{status\}/g, status);
|
||||||
|
}
|
||||||
|
// 3. 쿼리 결과가 있으면 자동 생성
|
||||||
|
else if (element?.dataSource?.query) {
|
||||||
|
const selectMatch = element.dataSource.query.match(/FROM\s+(\w+)/i);
|
||||||
|
const tableName = selectMatch ? selectMatch[1] : "todo_items";
|
||||||
|
updateQuery = `UPDATE ${tableName} SET status = '${status}', updated_at = NOW() WHERE id = '${id}'`;
|
||||||
|
console.log("✅ 자동 생성 UPDATE:", updateQuery);
|
||||||
|
}
|
||||||
|
// 4. 설정이 없으면 무시
|
||||||
|
else {
|
||||||
|
console.warn("⚠️ 데이터베이스 연동 설정이 없어서 상태 변경이 저장되지 않습니다.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 쿼리 실행 (모든 경우 처리)
|
||||||
|
if (updateQuery) {
|
||||||
|
const apiUrl = element?.dataSource?.connectionType === "external" && element.dataSource.externalConnectionId
|
||||||
|
? `http://localhost:9771/api/external-db/execute?userLang=${userLang}`
|
||||||
|
: `http://localhost:9771/api/dashboards/execute-dml?userLang=${userLang}`;
|
||||||
|
|
||||||
|
const requestBody = element?.dataSource?.connectionType === "external" && element.dataSource.externalConnectionId
|
||||||
|
? {
|
||||||
|
connectionId: parseInt(element.dataSource.externalConnectionId),
|
||||||
|
query: updateQuery,
|
||||||
|
}
|
||||||
|
: { query: updateQuery };
|
||||||
|
|
||||||
|
const response = await fetch(apiUrl, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
body: JSON.stringify(requestBody),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
fetchTasks();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
// console.error("상태 업데이트 오류:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (id: string) => {
|
||||||
|
if (!confirm("이 항목을 삭제하시겠습니까?")) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem("authToken");
|
||||||
|
const userLang = localStorage.getItem("userLang") || "KR";
|
||||||
|
|
||||||
|
let deleteQuery = "";
|
||||||
|
|
||||||
|
// 1. 간편 모드: 사용자가 설정한 테이블/컬럼 사용
|
||||||
|
if (element?.chartConfig?.enableDbSync && element.chartConfig.dbSyncMode === "simple" && element.chartConfig.tableName) {
|
||||||
|
const table = element.chartConfig.tableName;
|
||||||
|
const cols = element.chartConfig.columnMapping;
|
||||||
|
deleteQuery = `DELETE FROM ${table} WHERE ${cols.id} = '${id}'`;
|
||||||
|
}
|
||||||
|
// 2. 고급 모드: 사용자가 입력한 쿼리 사용
|
||||||
|
else if (element?.chartConfig?.enableDbSync && element.chartConfig.deleteQuery) {
|
||||||
|
deleteQuery = element.chartConfig.deleteQuery;
|
||||||
|
deleteQuery = deleteQuery.replace(/\$\{id\}/g, id);
|
||||||
|
}
|
||||||
|
// 3. 쿼리 결과가 있으면 자동 생성
|
||||||
|
else if (element?.dataSource?.query) {
|
||||||
|
const selectMatch = element.dataSource.query.match(/FROM\s+(\w+)/i);
|
||||||
|
const tableName = selectMatch ? selectMatch[1] : "todo_items";
|
||||||
|
deleteQuery = `DELETE FROM ${tableName} WHERE id = '${id}'`;
|
||||||
|
console.log("✅ 자동 생성 DELETE:", deleteQuery);
|
||||||
|
}
|
||||||
|
// 4. 설정이 없으면 무시
|
||||||
|
else {
|
||||||
|
console.warn("⚠️ 데이터베이스 연동 설정이 없어서 삭제가 저장되지 않습니다.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 쿼리 실행 (모든 경우 처리)
|
||||||
|
if (deleteQuery) {
|
||||||
|
const apiUrl = element?.dataSource?.connectionType === "external" && element.dataSource.externalConnectionId
|
||||||
|
? `http://localhost:9771/api/external-db/execute?userLang=${userLang}`
|
||||||
|
: `http://localhost:9771/api/dashboards/execute-dml?userLang=${userLang}`;
|
||||||
|
|
||||||
|
const requestBody = element?.dataSource?.connectionType === "external" && element.dataSource.externalConnectionId
|
||||||
|
? {
|
||||||
|
connectionId: parseInt(element.dataSource.externalConnectionId),
|
||||||
|
query: deleteQuery,
|
||||||
|
}
|
||||||
|
: { query: deleteQuery };
|
||||||
|
|
||||||
|
const response = await fetch(apiUrl, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
body: JSON.stringify(requestBody),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
setTimeout(() => fetchTasks(), 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
setTimeout(() => fetchTasks(), 300);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPriorityColor = (priority: TaskItem["priority"]) => {
|
||||||
|
switch (priority) {
|
||||||
|
case "urgent": return "bg-red-100 text-red-700 border-red-300";
|
||||||
|
case "high": return "bg-orange-100 text-orange-700 border-orange-300";
|
||||||
|
case "normal": return "bg-blue-100 text-blue-700 border-blue-300";
|
||||||
|
case "low": return "bg-gray-100 text-gray-700 border-gray-300";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPriorityIcon = (priority: TaskItem["priority"]) => {
|
||||||
|
switch (priority) {
|
||||||
|
case "urgent": return "🔴";
|
||||||
|
case "high": return "🟠";
|
||||||
|
case "normal": return "🟡";
|
||||||
|
case "low": return "🟢";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getMaintenanceIcon = (type?: string) => {
|
||||||
|
if (!type) return "🔧";
|
||||||
|
if (type.includes("점검")) return "🔍";
|
||||||
|
if (type.includes("수리")) return "🔧";
|
||||||
|
if (type.includes("타이어")) return "⚙️";
|
||||||
|
if (type.includes("오일")) return "🛢️";
|
||||||
|
return "🔧";
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTimeRemaining = (dueDate: string) => {
|
||||||
|
const now = new Date();
|
||||||
|
const due = new Date(dueDate);
|
||||||
|
const diff = due.getTime() - now.getTime();
|
||||||
|
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||||||
|
const days = Math.floor(hours / 24);
|
||||||
|
|
||||||
|
if (diff < 0) return "⏰ 기한 초과";
|
||||||
|
if (days > 0) return `📅 ${days}일 남음`;
|
||||||
|
if (hours > 0) return `⏱️ ${hours}시간 남음`;
|
||||||
|
return "⚠️ 오늘 마감";
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredTasks = tasks
|
||||||
|
.filter((task) => {
|
||||||
|
// 날짜 필터
|
||||||
|
if (selectedDate) {
|
||||||
|
if (!task.dueDate) return false;
|
||||||
|
const taskDate = new Date(task.dueDate);
|
||||||
|
const match = (
|
||||||
|
taskDate.getFullYear() === selectedDate.getFullYear() &&
|
||||||
|
taskDate.getMonth() === selectedDate.getMonth() &&
|
||||||
|
taskDate.getDate() === selectedDate.getDate()
|
||||||
|
);
|
||||||
|
if (!match) return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 상태 필터
|
||||||
|
if (filter === "all") return true;
|
||||||
|
return task.status === filter;
|
||||||
|
});
|
||||||
|
|
||||||
|
const formatSelectedDate = () => {
|
||||||
|
if (!selectedDate) return null;
|
||||||
|
const year = selectedDate.getFullYear();
|
||||||
|
const month = selectedDate.getMonth() + 1;
|
||||||
|
const day = selectedDate.getDate();
|
||||||
|
return `${year}년 ${month}월 ${day}일`;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex h-full items-center justify-center">
|
||||||
|
<div className="text-gray-500">로딩 중...</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-full flex-col bg-gradient-to-br from-slate-50 to-blue-50">
|
||||||
|
{/* 제목 */}
|
||||||
|
<div className="border-b border-gray-200 bg-white px-4 py-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold text-gray-800">
|
||||||
|
{element?.customTitle || "일정관리 위젯"}
|
||||||
|
</h3>
|
||||||
|
{selectedDate && (
|
||||||
|
<div className="mt-1 flex items-center gap-1 text-xs text-green-600">
|
||||||
|
<CalendarIcon className="h-3 w-3" />
|
||||||
|
<span className="font-semibold">{formatSelectedDate()} 일정</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
추가
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 헤더 (통계, 필터) */}
|
||||||
|
{element?.showHeader !== false && (
|
||||||
|
<div className="border-b border-gray-200 bg-white px-4 py-3">
|
||||||
|
{stats && (
|
||||||
|
<div className="grid grid-cols-4 gap-2 text-xs mb-3">
|
||||||
|
<div className="rounded bg-blue-50 px-2 py-1.5 text-center">
|
||||||
|
<div className="font-bold text-blue-700">{stats.pending}</div>
|
||||||
|
<div className="text-blue-600">대기</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded bg-amber-50 px-2 py-1.5 text-center">
|
||||||
|
<div className="font-bold text-amber-700">{stats.inProgress}</div>
|
||||||
|
<div className="text-amber-600">진행중</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded bg-red-50 px-2 py-1.5 text-center">
|
||||||
|
<div className="font-bold text-red-700">{stats.urgent}</div>
|
||||||
|
<div className="text-red-600">긴급</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded bg-rose-50 px-2 py-1.5 text-center">
|
||||||
|
<div className="font-bold text-rose-700">{stats.overdue}</div>
|
||||||
|
<div className="text-rose-600">지연</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{(["all", "pending", "in_progress", "completed"] as const).map((f) => (
|
||||||
|
<button
|
||||||
|
key={f}
|
||||||
|
onClick={() => setFilter(f)}
|
||||||
|
className={`rounded px-3 py-1 text-xs font-medium transition-colors ${
|
||||||
|
filter === f ? "bg-primary text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{f === "all" ? "전체" : f === "pending" ? "대기" : f === "in_progress" ? "진행중" : "완료"}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 추가 폼 */}
|
||||||
|
{showAddForm && (
|
||||||
|
<div className="max-h-[400px] overflow-y-auto border-b border-gray-200 bg-white p-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="제목*"
|
||||||
|
value={newTask.title}
|
||||||
|
onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
|
||||||
|
onKeyDown={(e) => e.stopPropagation()}
|
||||||
|
className="w-full rounded border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:outline-none"
|
||||||
|
/>
|
||||||
|
<textarea
|
||||||
|
placeholder="상세 설명 (선택)"
|
||||||
|
value={newTask.description}
|
||||||
|
onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
|
||||||
|
onKeyDown={(e) => e.stopPropagation()}
|
||||||
|
className="w-full rounded border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:outline-none"
|
||||||
|
rows={2}
|
||||||
|
/>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<select
|
||||||
|
value={newTask.priority}
|
||||||
|
onChange={(e) => setNewTask({ ...newTask, priority: e.target.value as TaskItem["priority"] })}
|
||||||
|
className="rounded border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:outline-none"
|
||||||
|
>
|
||||||
|
<option value="low">🟢 낮음</option>
|
||||||
|
<option value="normal">🟡 보통</option>
|
||||||
|
<option value="high">🟠 높음</option>
|
||||||
|
<option value="urgent">🔴 긴급</option>
|
||||||
|
</select>
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
value={newTask.dueDate}
|
||||||
|
onChange={(e) => setNewTask({ ...newTask, dueDate: e.target.value })}
|
||||||
|
className="rounded border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<label className="flex items-center gap-2 text-sm">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={newTask.isUrgent}
|
||||||
|
onChange={(e) => setNewTask({ ...newTask, isUrgent: e.target.checked })}
|
||||||
|
className="h-4 w-4 rounded border-gray-300"
|
||||||
|
/>
|
||||||
|
<span className="text-red-600 font-medium">긴급</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={handleAddTask}
|
||||||
|
className="flex-1 rounded bg-primary px-4 py-2 text-sm text-white hover:bg-primary/90"
|
||||||
|
>
|
||||||
|
추가
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowAddForm(false)}
|
||||||
|
className="rounded bg-gray-200 px-4 py-2 text-sm text-gray-700 hover:bg-gray-300"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Task 리스트 */}
|
||||||
|
<div className="flex-1 overflow-y-auto p-4 min-h-0">
|
||||||
|
{filteredTasks.length === 0 ? (
|
||||||
|
<div className="flex h-full items-center justify-center text-gray-400">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="mb-2 text-4xl">📝</div>
|
||||||
|
<div>{selectedDate ? `${formatSelectedDate()} 일정이 없습니다` : `일정이 없습니다`}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{filteredTasks.map((task) => (
|
||||||
|
<div
|
||||||
|
key={task.id}
|
||||||
|
className={`group relative rounded-lg border-2 bg-white p-3 shadow-sm transition-all hover:shadow-md ${
|
||||||
|
task.isUrgent || task.status === "overdue" ? "border-red-400" : "border-gray-200"
|
||||||
|
} ${task.status === "completed" ? "opacity-60" : ""}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
{/* 아이콘 */}
|
||||||
|
<div className="mt-1 text-lg">
|
||||||
|
{task.maintenanceType ? getMaintenanceIcon(task.maintenanceType) : getPriorityIcon(task.priority)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 내용 */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-start justify-between gap-2">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className={`font-medium ${task.status === "completed" ? "line-through" : ""}`}>
|
||||||
|
{task.isUrgent && <span className="mr-1 text-red-600">⚡</span>}
|
||||||
|
{task.vehicleNumber ? (
|
||||||
|
<>
|
||||||
|
<span className="font-bold">{task.vehicleNumber}</span>
|
||||||
|
{task.vehicleType && <span className="ml-2 text-xs text-gray-600">({task.vehicleType})</span>}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
task.title
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{task.maintenanceType && (
|
||||||
|
<div className="mt-1 rounded bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700">
|
||||||
|
{task.maintenanceType}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{task.description && (
|
||||||
|
<div className="mt-1 text-xs text-gray-600">{task.description}</div>
|
||||||
|
)}
|
||||||
|
{task.dueDate && (
|
||||||
|
<div className="mt-1 text-xs text-gray-500">{getTimeRemaining(task.dueDate)}</div>
|
||||||
|
)}
|
||||||
|
{task.estimatedCost && (
|
||||||
|
<div className="mt-1 text-xs font-bold text-primary">
|
||||||
|
예상 비용: {task.estimatedCost.toLocaleString()}원
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 액션 버튼 */}
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{task.status !== "completed" && (
|
||||||
|
<button
|
||||||
|
onClick={() => handleUpdateStatus(task.id, "completed")}
|
||||||
|
className="rounded p-1 text-green-600 hover:bg-green-50"
|
||||||
|
title="완료"
|
||||||
|
>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(task.id)}
|
||||||
|
className="rounded p-1 text-red-600 hover:bg-red-50"
|
||||||
|
title="삭제"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 상태 변경 */}
|
||||||
|
{task.status !== "completed" && (
|
||||||
|
<div className="mt-2 flex gap-1">
|
||||||
|
<button
|
||||||
|
onClick={() => handleUpdateStatus(task.id, "pending")}
|
||||||
|
className={`rounded px-2 py-1 text-xs ${
|
||||||
|
task.status === "pending"
|
||||||
|
? "bg-blue-100 text-blue-700"
|
||||||
|
: "bg-gray-100 text-gray-600 hover:bg-gray-200"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
대기
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleUpdateStatus(task.id, "in_progress")}
|
||||||
|
className={`rounded px-2 py-1 text-xs ${
|
||||||
|
task.status === "in_progress"
|
||||||
|
? "bg-amber-100 text-amber-700"
|
||||||
|
: "bg-gray-100 text-gray-600 hover:bg-gray-200"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
진행중
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,211 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
|
import { DashboardElement } from "@/components/admin/dashboard/types";
|
||||||
|
import { getMultipleWeather, WeatherData } from "@/lib/api/openApi";
|
||||||
|
import { Cloud, CloudRain, CloudSnow, Sun, Wind } from "lucide-react";
|
||||||
|
import "leaflet/dist/leaflet.css";
|
||||||
|
|
||||||
|
// Leaflet 아이콘 경로 설정 (엑박 방지)
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
const L = require("leaflet");
|
||||||
|
delete (L.Icon.Default.prototype as any)._getIconUrl;
|
||||||
|
L.Icon.Default.mergeOptions({
|
||||||
|
iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
|
||||||
|
iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
|
||||||
|
shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Leaflet 동적 import (SSR 방지)
|
||||||
|
const MapContainer = dynamic(() => import("react-leaflet").then((mod) => mod.MapContainer), { ssr: false });
|
||||||
|
const TileLayer = dynamic(() => import("react-leaflet").then((mod) => mod.TileLayer), { ssr: false });
|
||||||
|
const Marker = dynamic(() => import("react-leaflet").then((mod) => mod.Marker), { ssr: false });
|
||||||
|
const Popup = dynamic(() => import("react-leaflet").then((mod) => mod.Popup), { ssr: false });
|
||||||
|
|
||||||
|
// 브이월드 API 키
|
||||||
|
const VWORLD_API_KEY = "97AD30D5-FDC4-3481-99C3-158E36422033";
|
||||||
|
|
||||||
|
interface WeatherMapWidgetProps {
|
||||||
|
element: DashboardElement;
|
||||||
|
cities?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 날씨 아이콘 반환
|
||||||
|
*/
|
||||||
|
const getWeatherIcon = (weatherMain: string) => {
|
||||||
|
switch (weatherMain.toLowerCase()) {
|
||||||
|
case "clear":
|
||||||
|
return <Sun className="h-6 w-6 text-yellow-500" />;
|
||||||
|
case "rain":
|
||||||
|
return <CloudRain className="h-6 w-6 text-blue-500" />;
|
||||||
|
case "snow":
|
||||||
|
return <CloudSnow className="h-6 w-6 text-blue-300" />;
|
||||||
|
case "clouds":
|
||||||
|
return <Cloud className="h-6 w-6 text-gray-400" />;
|
||||||
|
default:
|
||||||
|
return <Wind className="h-6 w-6 text-gray-500" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 날씨 지도 위젯
|
||||||
|
* - 여러 도시의 날씨를 지도에 표시
|
||||||
|
* - 실시간 날씨 정보 (온도, 습도, 풍속 등)
|
||||||
|
* - Leaflet + 브이월드 지도 사용
|
||||||
|
*/
|
||||||
|
export default function WeatherMapWidget({ element, cities }: WeatherMapWidgetProps) {
|
||||||
|
const [weatherData, setWeatherData] = useState<WeatherData[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// 기본 도시 목록 (사용자가 지정하지 않은 경우)
|
||||||
|
const defaultCities = [
|
||||||
|
"서울",
|
||||||
|
"부산",
|
||||||
|
"인천",
|
||||||
|
"대구",
|
||||||
|
"광주",
|
||||||
|
"대전",
|
||||||
|
"울산",
|
||||||
|
"세종",
|
||||||
|
"제주",
|
||||||
|
];
|
||||||
|
|
||||||
|
const targetCities = cities || defaultCities;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadWeatherData();
|
||||||
|
|
||||||
|
// 자동 새로고침 (5분마다)
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
loadWeatherData();
|
||||||
|
}, 300000);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadWeatherData = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
const data = await getMultipleWeather(targetCities);
|
||||||
|
|
||||||
|
// 위도경도가 있는 데이터만 필터링
|
||||||
|
const validData = data.filter((item) => item.lat && item.lng);
|
||||||
|
|
||||||
|
setWeatherData(validData);
|
||||||
|
} catch (err: any) {
|
||||||
|
console.error("날씨 데이터 로드 실패:", err);
|
||||||
|
setError(err.message || "날씨 데이터를 불러오는데 실패했습니다.");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading && weatherData.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="flex h-full items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="mb-2 h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
|
||||||
|
<p className="text-sm text-muted-foreground">날씨 정보 로딩 중...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="flex h-full items-center justify-center">
|
||||||
|
<div className="text-center text-destructive">
|
||||||
|
<p className="text-sm">{error}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (weatherData.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="flex h-full items-center justify-center">
|
||||||
|
<p className="text-sm text-muted-foreground">날씨 데이터가 없습니다.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 지도 중심 (대한민국 중심)
|
||||||
|
const center: [number, number] = [36.5, 127.5];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full w-full">
|
||||||
|
<MapContainer
|
||||||
|
center={center}
|
||||||
|
zoom={7}
|
||||||
|
scrollWheelZoom={true}
|
||||||
|
style={{ height: "100%", width: "100%" }}
|
||||||
|
className="rounded-lg"
|
||||||
|
>
|
||||||
|
{/* 브이월드 Base Map */}
|
||||||
|
<TileLayer
|
||||||
|
attribution='© <a href="http://www.vworld.kr">VWorld</a>'
|
||||||
|
url={`https://api.vworld.kr/req/wmts/1.0.0/${VWORLD_API_KEY}/Base/{z}/{y}/{x}.png`}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 날씨 마커 */}
|
||||||
|
{weatherData.map((weather, index) => {
|
||||||
|
if (!weather.lat || !weather.lng) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Marker key={index} position={[weather.lat, weather.lng]}>
|
||||||
|
<Popup>
|
||||||
|
<div className="min-w-[200px] p-2">
|
||||||
|
{/* 도시명 */}
|
||||||
|
<div className="mb-2 flex items-center justify-between">
|
||||||
|
<h3 className="text-base font-semibold">{weather.city}</h3>
|
||||||
|
{getWeatherIcon(weather.weatherMain)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 날씨 설명 */}
|
||||||
|
<p className="mb-3 text-sm text-muted-foreground">{weather.weatherDescription}</p>
|
||||||
|
|
||||||
|
{/* 날씨 정보 */}
|
||||||
|
<div className="space-y-1.5 text-xs">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-muted-foreground">온도</span>
|
||||||
|
<span className="font-medium">{weather.temperature}°C</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-muted-foreground">체감온도</span>
|
||||||
|
<span className="font-medium">{weather.feelsLike}°C</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-muted-foreground">습도</span>
|
||||||
|
<span className="font-medium">{weather.humidity}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-muted-foreground">풍속</span>
|
||||||
|
<span className="font-medium">{weather.windSpeed} m/s</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 타임스탬프 */}
|
||||||
|
<div className="mt-3 border-t pt-2 text-[10px] text-muted-foreground">
|
||||||
|
{new Date(weather.timestamp).toLocaleString("ko-KR", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Popup>
|
||||||
|
</Marker>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</MapContainer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1211,32 +1211,129 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
||||||
[layout, screenResolution, saveToHistory],
|
[layout, screenResolution, saveToHistory],
|
||||||
);
|
);
|
||||||
|
|
||||||
// 해상도 변경 핸들러
|
// 해상도 변경 핸들러 (자동 스케일링 포함)
|
||||||
const handleResolutionChange = useCallback(
|
const handleResolutionChange = useCallback(
|
||||||
(newResolution: ScreenResolution) => {
|
(newResolution: ScreenResolution) => {
|
||||||
|
const oldWidth = screenResolution.width;
|
||||||
|
const oldHeight = screenResolution.height;
|
||||||
|
const newWidth = newResolution.width;
|
||||||
|
const newHeight = newResolution.height;
|
||||||
|
|
||||||
console.log("📱 해상도 변경 시작:", {
|
console.log("📱 해상도 변경 시작:", {
|
||||||
from: `${screenResolution.width}x${screenResolution.height}`,
|
from: `${oldWidth}x${oldHeight}`,
|
||||||
to: `${newResolution.width}x${newResolution.height}`,
|
to: `${newWidth}x${newHeight}`,
|
||||||
hasComponents: layout.components.length > 0,
|
hasComponents: layout.components.length > 0,
|
||||||
snapToGrid: layout.gridSettings?.snapToGrid || false,
|
snapToGrid: layout.gridSettings?.snapToGrid || false,
|
||||||
});
|
});
|
||||||
|
|
||||||
setScreenResolution(newResolution);
|
setScreenResolution(newResolution);
|
||||||
|
|
||||||
// 해상도 변경 시에는 격자 스냅을 적용하지 않고 해상도 정보만 업데이트
|
// 컴포넌트가 없으면 해상도만 변경
|
||||||
// 이는 기존 컴포넌트들의 위치를 보존하기 위함
|
if (layout.components.length === 0) {
|
||||||
|
const updatedLayout = {
|
||||||
|
...layout,
|
||||||
|
screenResolution: newResolution,
|
||||||
|
};
|
||||||
|
setLayout(updatedLayout);
|
||||||
|
saveToHistory(updatedLayout);
|
||||||
|
console.log("✅ 해상도 변경 완료 (컴포넌트 없음)");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 비율 계산
|
||||||
|
const scaleX = newWidth / oldWidth;
|
||||||
|
const scaleY = newHeight / oldHeight;
|
||||||
|
|
||||||
|
console.log("📐 스케일링 비율:", {
|
||||||
|
scaleX: `${(scaleX * 100).toFixed(2)}%`,
|
||||||
|
scaleY: `${(scaleY * 100).toFixed(2)}%`,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 컴포넌트 재귀적으로 스케일링하는 함수
|
||||||
|
const scaleComponent = (comp: ComponentData): ComponentData => {
|
||||||
|
// 위치 스케일링
|
||||||
|
const scaledPosition = {
|
||||||
|
x: comp.position.x * scaleX,
|
||||||
|
y: comp.position.y * scaleY,
|
||||||
|
z: comp.position.z || 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 크기 스케일링
|
||||||
|
const scaledSize = {
|
||||||
|
width: comp.size.width * scaleX,
|
||||||
|
height: comp.size.height * scaleY,
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
...comp,
|
||||||
|
position: scaledPosition,
|
||||||
|
size: scaledSize,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 모든 컴포넌트 스케일링 (그룹의 자식도 자동으로 스케일링됨)
|
||||||
|
const scaledComponents = layout.components.map(scaleComponent);
|
||||||
|
|
||||||
|
console.log("🔄 컴포넌트 스케일링 완료:", {
|
||||||
|
totalComponents: scaledComponents.length,
|
||||||
|
groupComponents: scaledComponents.filter((c) => c.type === "group").length,
|
||||||
|
note: "그룹의 자식 컴포넌트도 모두 스케일링됨",
|
||||||
|
});
|
||||||
|
|
||||||
|
// 격자 스냅이 활성화된 경우 격자에 맞춰 재조정
|
||||||
|
let finalComponents = scaledComponents;
|
||||||
|
if (layout.gridSettings?.snapToGrid) {
|
||||||
|
const newGridInfo = calculateGridInfo(newWidth, newHeight, {
|
||||||
|
columns: layout.gridSettings.columns,
|
||||||
|
gap: layout.gridSettings.gap,
|
||||||
|
padding: layout.gridSettings.padding,
|
||||||
|
snapToGrid: layout.gridSettings.snapToGrid || false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const gridUtilSettings = {
|
||||||
|
columns: layout.gridSettings.columns,
|
||||||
|
gap: layout.gridSettings.gap,
|
||||||
|
padding: layout.gridSettings.padding,
|
||||||
|
snapToGrid: layout.gridSettings.snapToGrid,
|
||||||
|
};
|
||||||
|
|
||||||
|
finalComponents = scaledComponents.map((comp) => {
|
||||||
|
const snappedPosition = snapToGrid(comp.position, newGridInfo, gridUtilSettings);
|
||||||
|
const snappedSize = snapSizeToGrid(comp.size, newGridInfo, gridUtilSettings);
|
||||||
|
|
||||||
|
// gridColumns 재계산
|
||||||
|
const adjustedGridColumns = adjustGridColumnsFromSize({ size: snappedSize }, newGridInfo, gridUtilSettings);
|
||||||
|
|
||||||
|
return {
|
||||||
|
...comp,
|
||||||
|
position: snappedPosition,
|
||||||
|
size: snappedSize,
|
||||||
|
gridColumns: adjustedGridColumns,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("🧲 격자 스냅 적용 완료");
|
||||||
|
}
|
||||||
|
|
||||||
const updatedLayout = {
|
const updatedLayout = {
|
||||||
...layout,
|
...layout,
|
||||||
|
components: finalComponents,
|
||||||
screenResolution: newResolution,
|
screenResolution: newResolution,
|
||||||
};
|
};
|
||||||
|
|
||||||
setLayout(updatedLayout);
|
setLayout(updatedLayout);
|
||||||
saveToHistory(updatedLayout);
|
saveToHistory(updatedLayout);
|
||||||
|
|
||||||
|
toast.success(`해상도 변경 완료! ${scaledComponents.length}개 컴포넌트가 자동으로 조정되었습니다.`, {
|
||||||
|
description: `${oldWidth}×${oldHeight} → ${newWidth}×${newHeight}`,
|
||||||
|
});
|
||||||
|
|
||||||
console.log("✅ 해상도 변경 완료:", {
|
console.log("✅ 해상도 변경 완료:", {
|
||||||
newResolution: `${newResolution.width}x${newResolution.height}`,
|
newResolution: `${newWidth}x${newHeight}`,
|
||||||
preservedComponents: layout.components.length,
|
scaledComponents: finalComponents.length,
|
||||||
note: "컴포넌트 위치는 보존됨 (격자 스냅 생략)",
|
scaleX: `${(scaleX * 100).toFixed(2)}%`,
|
||||||
|
scaleY: `${(scaleY * 100).toFixed(2)}%`,
|
||||||
|
note: "모든 컴포넌트가 비율에 맞게 자동 조정됨",
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[layout, saveToHistory, screenResolution],
|
[layout, saveToHistory, screenResolution],
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,8 @@ import { apiClient } from './client';
|
||||||
export interface WeatherData {
|
export interface WeatherData {
|
||||||
city: string;
|
city: string;
|
||||||
country: string;
|
country: string;
|
||||||
|
lat?: number;
|
||||||
|
lng?: number;
|
||||||
temperature: number;
|
temperature: number;
|
||||||
feelsLike: number;
|
feelsLike: number;
|
||||||
humidity: number;
|
humidity: number;
|
||||||
|
|
@ -79,6 +81,33 @@ export async function getWeather(
|
||||||
return response.data.data;
|
return response.data.data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 여러 도시의 날씨 정보 일괄 조회
|
||||||
|
* @param cities 도시명 배열
|
||||||
|
*/
|
||||||
|
export async function getMultipleWeather(cities: string[]): Promise<WeatherData[]> {
|
||||||
|
const promises = cities.map(city => getWeather(city));
|
||||||
|
return Promise.all(promises);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 기상특보 정보 조회
|
||||||
|
*/
|
||||||
|
export interface WeatherAlert {
|
||||||
|
id: string;
|
||||||
|
type: string;
|
||||||
|
severity: "high" | "medium" | "low";
|
||||||
|
title: string;
|
||||||
|
location: string;
|
||||||
|
description: string;
|
||||||
|
timestamp: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getWeatherAlerts(): Promise<WeatherAlert[]> {
|
||||||
|
const response = await apiClient.get<WeatherAlert[]>("/risk-alerts/weather");
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 환율 정보 조회
|
* 환율 정보 조회
|
||||||
* @param base 기준 통화 (기본값: KRW)
|
* @param base 기준 통화 (기본값: KRW)
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -42,6 +42,11 @@
|
||||||
"@react-three/fiber": "^9.4.0",
|
"@react-three/fiber": "^9.4.0",
|
||||||
"@tanstack/react-query": "^5.86.0",
|
"@tanstack/react-query": "^5.86.0",
|
||||||
"@tanstack/react-table": "^8.21.3",
|
"@tanstack/react-table": "^8.21.3",
|
||||||
|
"@turf/buffer": "^7.2.0",
|
||||||
|
"@turf/helpers": "^7.2.0",
|
||||||
|
"@turf/intersect": "^7.2.0",
|
||||||
|
"@turf/turf": "^7.2.0",
|
||||||
|
"@turf/union": "^7.2.0",
|
||||||
"@types/d3": "^7.4.3",
|
"@types/d3": "^7.4.3",
|
||||||
"@types/leaflet": "^1.9.21",
|
"@types/leaflet": "^1.9.21",
|
||||||
"@types/react-window": "^1.8.8",
|
"@types/react-window": "^1.8.8",
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,295 @@
|
||||||
|
{
|
||||||
|
"type": "FeatureCollection",
|
||||||
|
"features": [
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "서울특별시",
|
||||||
|
"code": "11"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[126.734086, 37.413294],
|
||||||
|
[127.183937, 37.413294],
|
||||||
|
[127.183937, 37.701908],
|
||||||
|
[126.734086, 37.701908],
|
||||||
|
[126.734086, 37.413294]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "부산광역시",
|
||||||
|
"code": "26"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[128.891602, 35.002762],
|
||||||
|
[129.274902, 35.002762],
|
||||||
|
[129.274902, 35.396042],
|
||||||
|
[128.891602, 35.396042],
|
||||||
|
[128.891602, 35.002762]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "대구광역시",
|
||||||
|
"code": "27"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[128.473511, 35.698242],
|
||||||
|
[128.798828, 35.698242],
|
||||||
|
[128.798828, 36.014069],
|
||||||
|
[128.473511, 36.014069],
|
||||||
|
[128.473511, 35.698242]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "인천광역시",
|
||||||
|
"code": "28"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[126.312256, 37.263184],
|
||||||
|
[126.878052, 37.263184],
|
||||||
|
[126.878052, 37.639252],
|
||||||
|
[126.312256, 37.639252],
|
||||||
|
[126.312256, 37.263184]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "광주광역시",
|
||||||
|
"code": "29"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[126.708984, 35.059111],
|
||||||
|
[127.012939, 35.059111],
|
||||||
|
[127.012939, 35.278607],
|
||||||
|
[126.708984, 35.278607],
|
||||||
|
[126.708984, 35.059111]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "대전광역시",
|
||||||
|
"code": "30"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[127.264404, 36.227661],
|
||||||
|
[127.504883, 36.227661],
|
||||||
|
[127.504883, 36.480622],
|
||||||
|
[127.264404, 36.480622],
|
||||||
|
[127.264404, 36.227661]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "울산광역시",
|
||||||
|
"code": "31"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[129.136963, 35.362656],
|
||||||
|
[129.487305, 35.362656],
|
||||||
|
[129.487305, 35.698242],
|
||||||
|
[129.136963, 35.698242],
|
||||||
|
[129.136963, 35.362656]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "세종특별자치시",
|
||||||
|
"code": "36"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[127.189941, 36.399532],
|
||||||
|
[127.389526, 36.399532],
|
||||||
|
[127.389526, 36.619987],
|
||||||
|
[127.189941, 36.619987],
|
||||||
|
[127.189941, 36.399532]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "경기도",
|
||||||
|
"code": "41"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[126.470947, 36.899452],
|
||||||
|
[127.869873, 36.899452],
|
||||||
|
[127.869873, 38.289937],
|
||||||
|
[126.470947, 38.289937],
|
||||||
|
[126.470947, 36.899452]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "강원도",
|
||||||
|
"code": "42"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[127.419434, 37.024219],
|
||||||
|
[129.464111, 37.024219],
|
||||||
|
[129.464111, 38.612658],
|
||||||
|
[127.419434, 38.612658],
|
||||||
|
[127.419434, 37.024219]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "충청북도",
|
||||||
|
"code": "43"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[127.264404, 36.227661],
|
||||||
|
[128.342285, 36.227661],
|
||||||
|
[128.342285, 37.239551],
|
||||||
|
[127.264404, 37.239551],
|
||||||
|
[127.264404, 36.227661]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "충청남도",
|
||||||
|
"code": "44"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[125.958252, 35.995083],
|
||||||
|
[127.519531, 35.995083],
|
||||||
|
[127.519531, 37.024219],
|
||||||
|
[125.958252, 37.024219],
|
||||||
|
[125.958252, 35.995083]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "전라북도",
|
||||||
|
"code": "45"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[126.123047, 35.278607],
|
||||||
|
[127.694092, 35.278607],
|
||||||
|
[127.694092, 36.227661],
|
||||||
|
[126.123047, 36.227661],
|
||||||
|
[126.123047, 35.278607]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "전라남도",
|
||||||
|
"code": "46"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[125.068359, 33.943360],
|
||||||
|
[127.562256, 33.943360],
|
||||||
|
[127.562256, 35.460670],
|
||||||
|
[125.068359, 35.460670],
|
||||||
|
[125.068359, 33.943360]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "경상북도",
|
||||||
|
"code": "47"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[127.869873, 35.698242],
|
||||||
|
[129.464111, 35.698242],
|
||||||
|
[129.464111, 37.239551],
|
||||||
|
[127.869873, 37.239551],
|
||||||
|
[127.869873, 35.698242]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "경상남도",
|
||||||
|
"code": "48"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[127.694092, 34.597042],
|
||||||
|
[129.274902, 34.597042],
|
||||||
|
[129.274902, 35.898980],
|
||||||
|
[127.694092, 35.898980],
|
||||||
|
[127.694092, 34.597042]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {
|
||||||
|
"name": "제주특별자치도",
|
||||||
|
"code": "50"
|
||||||
|
},
|
||||||
|
"geometry": {
|
||||||
|
"type": "Polygon",
|
||||||
|
"coordinates": [[
|
||||||
|
[126.123047, 33.189144],
|
||||||
|
[126.958008, 33.189144],
|
||||||
|
[126.958008, 33.578015],
|
||||||
|
[126.123047, 33.578015],
|
||||||
|
[126.123047, 33.189144]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue