위젯 컴팩트 모드 제거
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
@@ -8,9 +8,6 @@ import { RefreshCw, AlertTriangle, Cloud, Construction, Database as DatabaseIcon
|
||||
import { DashboardElement, ChartDataSource } from "@/components/admin/dashboard/types";
|
||||
import { getApiUrl } from "@/lib/utils/apiUrl";
|
||||
|
||||
// 컴팩트 모드 임계값 (픽셀)
|
||||
const COMPACT_HEIGHT_THRESHOLD = 180;
|
||||
|
||||
type AlertType = "accident" | "weather" | "construction" | "system" | "security" | "other";
|
||||
|
||||
interface Alert {
|
||||
@@ -34,29 +31,6 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [filter, setFilter] = useState<AlertType | "all">("all");
|
||||
const [lastRefreshTime, setLastRefreshTime] = useState<Date | null>(null);
|
||||
|
||||
// 컨테이너 높이 측정을 위한 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 dataSources = useMemo(() => {
|
||||
return element?.dataSources || element?.chartConfig?.dataSources;
|
||||
@@ -575,57 +549,8 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
|
||||
);
|
||||
}
|
||||
|
||||
// 통계 계산
|
||||
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, idx) => (
|
||||
<div
|
||||
key={`${alert.id}-${idx}`}
|
||||
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">
|
||||
{getTypeIcon(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 overflow-hidden bg-background">
|
||||
<div className="flex h-full w-full flex-col overflow-hidden bg-background">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b bg-background/80 p-3">
|
||||
<div>
|
||||
@@ -706,7 +631,7 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
|
||||
</Badge>
|
||||
</div>
|
||||
{alert.location && (
|
||||
<p className="text-[10px] text-muted-foreground mt-0.5">{alert.location}</p>
|
||||
<p className="text-[10px] text-muted-foreground mt-0.5">📍 {alert.location}</p>
|
||||
)}
|
||||
<p className="text-[10px] text-foreground mt-0.5 line-clamp-2">{alert.description}</p>
|
||||
<div className="mt-1 flex items-center gap-2 text-[9px] text-muted-foreground">
|
||||
|
||||
Reference in New Issue
Block a user