위젯 컴팩트 모드 제거

frontend/components/dashboard/widgets/RiskAlertWidget.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect } 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 } 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";
 
@@ -35,29 +32,6 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
   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 () => {
@@ -202,49 +176,8 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
     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 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">
@@ -361,7 +294,7 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
 
       {/* 안내 메시지 */}
       <div className="border-t pt-3 text-center text-xs text-muted-foreground">
-        1분마다 자동으로 업데이트됩니다
+        💡 1분마다 자동으로 업데이트됩니다
       </div>
     </div>
   );