370 lines
13 KiB
TypeScript
370 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useRef } from "react";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { RefreshCw, AlertTriangle, Cloud, Construction } from "lucide-react";
|
|
import { apiClient } from "@/lib/api/client";
|
|
import { DashboardElement } from "@/components/admin/dashboard/types";
|
|
|
|
// 컴팩트 모드 임계값 (픽셀)
|
|
const COMPACT_HEIGHT_THRESHOLD = 180;
|
|
|
|
// 알림 타입
|
|
type AlertType = "accident" | "weather" | "construction";
|
|
|
|
// 알림 인터페이스
|
|
interface Alert {
|
|
id: string;
|
|
type: AlertType;
|
|
severity: "high" | "medium" | "low";
|
|
title: string;
|
|
location: string;
|
|
description: string;
|
|
timestamp: string;
|
|
}
|
|
|
|
interface RiskAlertWidgetProps {
|
|
element?: DashboardElement;
|
|
}
|
|
|
|
export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
|
|
const [alerts, setAlerts] = useState<Alert[]>([]);
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
const [filter, setFilter] = useState<AlertType | "all">("all");
|
|
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
|
|
const [newAlertIds, setNewAlertIds] = useState<Set<string>>(new Set());
|
|
|
|
// 컨테이너 높이 측정을 위한 ref
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [containerHeight, setContainerHeight] = useState<number>(300);
|
|
|
|
// 컴팩트 모드 여부 (element.size.height 또는 실제 컨테이너 높이 기반)
|
|
const isCompact = element?.size?.height
|
|
? element.size.height < COMPACT_HEIGHT_THRESHOLD
|
|
: containerHeight < COMPACT_HEIGHT_THRESHOLD;
|
|
|
|
// 컨테이너 높이 측정
|
|
useEffect(() => {
|
|
if (!containerRef.current) return;
|
|
|
|
const observer = new ResizeObserver((entries) => {
|
|
for (const entry of entries) {
|
|
setContainerHeight(entry.contentRect.height);
|
|
}
|
|
});
|
|
|
|
observer.observe(containerRef.current);
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
// 데이터 로드 (백엔드 캐시 조회)
|
|
const loadData = async () => {
|
|
setIsRefreshing(true);
|
|
try {
|
|
// 백엔드 API 호출 (캐시된 데이터)
|
|
const response = await apiClient.get<{
|
|
success: boolean;
|
|
data: Alert[];
|
|
count: number;
|
|
lastUpdated?: string;
|
|
cached?: boolean;
|
|
}>("/risk-alerts");
|
|
|
|
if (response.data.success && response.data.data) {
|
|
const newData = response.data.data;
|
|
|
|
// 새로운 알림 감지
|
|
const oldIds = new Set(alerts.map(a => a.id));
|
|
const newIds = new Set<string>();
|
|
newData.forEach(alert => {
|
|
if (!oldIds.has(alert.id)) {
|
|
newIds.add(alert.id);
|
|
}
|
|
});
|
|
|
|
setAlerts(newData);
|
|
setNewAlertIds(newIds);
|
|
setLastUpdated(new Date());
|
|
|
|
// 3초 후 새 알림 애니메이션 제거
|
|
if (newIds.size > 0) {
|
|
setTimeout(() => setNewAlertIds(new Set()), 3000);
|
|
}
|
|
} else {
|
|
console.error("❌ 리스크 알림 데이터 로드 실패");
|
|
setAlerts([]);
|
|
}
|
|
} catch (error: any) {
|
|
console.error("❌ 리스크 알림 API 오류:", error.message);
|
|
// API 오류 시 빈 배열 유지
|
|
setAlerts([]);
|
|
} finally {
|
|
setIsRefreshing(false);
|
|
}
|
|
};
|
|
|
|
// 강제 새로고침 (실시간 API 호출)
|
|
const forceRefresh = async () => {
|
|
setIsRefreshing(true);
|
|
try {
|
|
// 강제 갱신 API 호출 (실시간 데이터)
|
|
const response = await apiClient.post<{
|
|
success: boolean;
|
|
data: Alert[];
|
|
count: number;
|
|
message?: string;
|
|
}>("/risk-alerts/refresh", {});
|
|
|
|
if (response.data.success && response.data.data) {
|
|
const newData = response.data.data;
|
|
|
|
// 새로운 알림 감지
|
|
const oldIds = new Set(alerts.map(a => a.id));
|
|
const newIds = new Set<string>();
|
|
newData.forEach(alert => {
|
|
if (!oldIds.has(alert.id)) {
|
|
newIds.add(alert.id);
|
|
}
|
|
});
|
|
|
|
setAlerts(newData);
|
|
setNewAlertIds(newIds);
|
|
setLastUpdated(new Date());
|
|
|
|
// 3초 후 새 알림 애니메이션 제거
|
|
if (newIds.size > 0) {
|
|
setTimeout(() => setNewAlertIds(new Set()), 3000);
|
|
}
|
|
} else {
|
|
console.error("❌ 리스크 알림 강제 갱신 실패");
|
|
}
|
|
} catch (error: any) {
|
|
console.error("❌ 리스크 알림 강제 갱신 오류:", error.message);
|
|
} finally {
|
|
setIsRefreshing(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
// 1분마다 자동 새로고침 (60000ms)
|
|
const interval = setInterval(loadData, 60000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
// 필터링된 알림
|
|
const filteredAlerts = filter === "all" ? alerts : alerts.filter((alert) => alert.type === filter);
|
|
|
|
// 알림 타입별 아이콘
|
|
const getAlertIcon = (type: AlertType) => {
|
|
switch (type) {
|
|
case "accident":
|
|
return <AlertTriangle className="h-5 w-5 text-destructive" />;
|
|
case "weather":
|
|
return <Cloud className="h-5 w-5 text-primary" />;
|
|
case "construction":
|
|
return <Construction className="h-5 w-5 text-warning" />;
|
|
}
|
|
};
|
|
|
|
// 알림 타입별 한글명
|
|
const getAlertTypeName = (type: AlertType) => {
|
|
switch (type) {
|
|
case "accident":
|
|
return "교통사고";
|
|
case "weather":
|
|
return "날씨특보";
|
|
case "construction":
|
|
return "도로공사";
|
|
}
|
|
};
|
|
|
|
// 시간 포맷
|
|
const formatTime = (isoString: string) => {
|
|
const date = new Date(isoString);
|
|
const now = new Date();
|
|
const diffMinutes = Math.floor((now.getTime() - date.getTime()) / 60000);
|
|
|
|
if (diffMinutes < 1) return "방금 전";
|
|
if (diffMinutes < 60) return `${diffMinutes}분 전`;
|
|
const diffHours = Math.floor(diffMinutes / 60);
|
|
if (diffHours < 24) return `${diffHours}시간 전`;
|
|
return `${Math.floor(diffHours / 24)}일 전`;
|
|
};
|
|
|
|
// 통계 계산
|
|
const stats = {
|
|
accident: alerts.filter((a) => a.type === "accident").length,
|
|
weather: alerts.filter((a) => a.type === "weather").length,
|
|
construction: alerts.filter((a) => a.type === "construction").length,
|
|
high: alerts.filter((a) => a.severity === "high").length,
|
|
};
|
|
|
|
// 컴팩트 모드 렌더링 - 알림 목록만 스크롤
|
|
if (isCompact) {
|
|
return (
|
|
<div ref={containerRef} className="h-full w-full overflow-y-auto bg-background p-1.5 space-y-1">
|
|
{filteredAlerts.length === 0 ? (
|
|
<div className="flex h-full items-center justify-center text-muted-foreground">
|
|
<p className="text-xs">알림 없음</p>
|
|
</div>
|
|
) : (
|
|
filteredAlerts.map((alert) => (
|
|
<div
|
|
key={alert.id}
|
|
className={`rounded px-2 py-1.5 ${
|
|
alert.severity === "high"
|
|
? "bg-destructive/10 border-l-2 border-destructive"
|
|
: alert.severity === "medium"
|
|
? "bg-warning/10 border-l-2 border-warning"
|
|
: "bg-muted/50 border-l-2 border-muted-foreground"
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-1.5">
|
|
{getAlertIcon(alert.type)}
|
|
<span className="text-[11px] font-medium truncate flex-1">{alert.title}</span>
|
|
<Badge
|
|
variant={alert.severity === "high" ? "destructive" : "secondary"}
|
|
className="h-4 text-[9px] px-1 flex-shrink-0"
|
|
>
|
|
{alert.severity === "high" ? "긴급" : alert.severity === "medium" ? "주의" : "정보"}
|
|
</Badge>
|
|
</div>
|
|
{alert.location && (
|
|
<p className="text-[10px] text-muted-foreground truncate mt-0.5 pl-5">{alert.location}</p>
|
|
)}
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 일반 모드 렌더링
|
|
return (
|
|
<div ref={containerRef} className="flex h-full w-full flex-col gap-4 overflow-hidden bg-background p-4">
|
|
{/* 헤더 */}
|
|
<div className="flex items-center justify-between border-b pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<AlertTriangle className="h-5 w-5 text-destructive" />
|
|
<h3 className="text-lg font-semibold">{element?.customTitle || "리스크 / 알림"}</h3>
|
|
{stats.high > 0 && (
|
|
<Badge variant="destructive">긴급 {stats.high}건</Badge>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{lastUpdated && newAlertIds.size > 0 && (
|
|
<Badge variant="secondary" className="animate-pulse">
|
|
새 알림 {newAlertIds.size}건
|
|
</Badge>
|
|
)}
|
|
{lastUpdated && (
|
|
<span className="text-xs text-muted-foreground">
|
|
{lastUpdated.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}
|
|
</span>
|
|
)}
|
|
<Button variant="ghost" size="sm" onClick={forceRefresh} disabled={isRefreshing} title="실시간 데이터 갱신">
|
|
<RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 통계 카드 */}
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<Card
|
|
className={`cursor-pointer p-3 transition-all hover:shadow-md ${
|
|
filter === "accident" ? "bg-destructive/10" : ""
|
|
}`}
|
|
onClick={() => setFilter(filter === "accident" ? "all" : "accident")}
|
|
>
|
|
<div className="text-xs text-muted-foreground">교통사고</div>
|
|
<div className="text-2xl font-bold text-destructive">{stats.accident}건</div>
|
|
</Card>
|
|
<Card
|
|
className={`cursor-pointer p-3 transition-all hover:shadow-md ${
|
|
filter === "weather" ? "bg-primary/10" : ""
|
|
}`}
|
|
onClick={() => setFilter(filter === "weather" ? "all" : "weather")}
|
|
>
|
|
<div className="text-xs text-muted-foreground">날씨특보</div>
|
|
<div className="text-2xl font-bold text-primary">{stats.weather}건</div>
|
|
</Card>
|
|
<Card
|
|
className={`cursor-pointer p-3 transition-all hover:shadow-md ${
|
|
filter === "construction" ? "bg-warning/10" : ""
|
|
}`}
|
|
onClick={() => setFilter(filter === "construction" ? "all" : "construction")}
|
|
>
|
|
<div className="text-xs text-muted-foreground">도로공사</div>
|
|
<div className="text-2xl font-bold text-warning">{stats.construction}건</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 필터 상태 표시 */}
|
|
{filter !== "all" && (
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="outline">
|
|
{getAlertTypeName(filter)} 필터 적용 중
|
|
</Badge>
|
|
<Button
|
|
variant="link"
|
|
size="sm"
|
|
onClick={() => setFilter("all")}
|
|
className="h-auto p-0 text-xs"
|
|
>
|
|
전체 보기
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* 알림 목록 */}
|
|
<div className="flex-1 space-y-2 overflow-y-auto">
|
|
{filteredAlerts.length === 0 ? (
|
|
<Card className="p-4 text-center">
|
|
<div className="text-sm text-muted-foreground">알림이 없습니다</div>
|
|
</Card>
|
|
) : (
|
|
filteredAlerts.map((alert) => (
|
|
<Card
|
|
key={alert.id}
|
|
className={`p-3 transition-all duration-300 ${
|
|
newAlertIds.has(alert.id) ? 'bg-accent ring-1 ring-primary' : ''
|
|
}`}
|
|
>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex items-start gap-2">
|
|
{getAlertIcon(alert.type)}
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<h4 className="text-sm font-semibold">{alert.title}</h4>
|
|
{newAlertIds.has(alert.id) && (
|
|
<Badge variant="secondary">
|
|
NEW
|
|
</Badge>
|
|
)}
|
|
<Badge variant={alert.severity === "high" ? "destructive" : alert.severity === "medium" ? "default" : "secondary"}>
|
|
{alert.severity === "high" ? "긴급" : alert.severity === "medium" ? "주의" : "정보"}
|
|
</Badge>
|
|
</div>
|
|
<p className="mt-1 text-xs font-medium text-foreground">{alert.location}</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">{alert.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 text-right text-xs text-muted-foreground">{formatTime(alert.timestamp)}</div>
|
|
</Card>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{/* 안내 메시지 */}
|
|
<div className="border-t pt-3 text-center text-xs text-muted-foreground">
|
|
1분마다 자동으로 업데이트됩니다
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|