대시보드관리디벨롭

frontend/components/dashboard/widgets/RiskAlertWidget.tsx

@@ -89,34 +89,6 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
   // 필터링된 알림
   const filteredAlerts = filter === "all" ? alerts : alerts.filter((alert) => alert.type === filter);
 
-  // 심각도별 색상
-  const getSeverityColor = (severity: string) => {
-    switch (severity) {
-      case "high":
-        return "border-red-500";
-      case "medium":
-        return "border-yellow-500";
-      case "low":
-        return "border-blue-500";
-      default:
-        return "border-gray-500";
-    }
-  };
-
-  // 심각도별 배지 색상
-  const getSeverityBadge = (severity: string) => {
-    switch (severity) {
-      case "high":
-        return "bg-red-100 text-red-700";
-      case "medium":
-        return "bg-yellow-100 text-yellow-700";
-      case "low":
-        return "bg-blue-100 text-blue-700";
-      default:
-        return "bg-gray-100 text-gray-700";
-    }
-  };
-
   // 알림 타입별 아이콘
   const getAlertIcon = (type: AlertType) => {
     switch (type) {
@@ -163,69 +135,75 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
   };
 
   return (
-    <div className="flex h-full w-full flex-col gap-3 overflow-hidden bg-slate-50 p-3">
+    <div className="flex h-full w-full flex-col gap-4 overflow-hidden bg-background p-4">
       {/* 헤더 */}
-      <div className="flex items-center justify-between">
+      <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-red-600" />
-          <h3 className="text-base font-semibold text-gray-900">{element?.customTitle || "리스크 / 알림"}</h3>
+          <AlertTriangle className="h-5 w-5 text-destructive" />
+          <h3 className="text-lg font-semibold">{element?.customTitle || "리스크 / 알림"}</h3>
           {stats.high > 0 && (
-            <Badge className="bg-red-100 text-red-700 hover:bg-red-100">긴급 {stats.high}건</Badge>
+            <Badge variant="destructive">긴급 {stats.high}건</Badge>
           )}
         </div>
         <div className="flex items-center gap-2">
           {lastUpdated && newAlertIds.size > 0 && (
-            <Badge className="bg-blue-100 text-blue-700 text-xs animate-pulse">
+            <Badge variant="secondary" className="animate-pulse">
               새 알림 {newAlertIds.size}건
             </Badge>
           )}
           {lastUpdated && (
-            <span className="text-xs text-gray-500">
+            <span className="text-xs text-muted-foreground">
               {lastUpdated.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}
             </span>
           )}
-          <Button variant="ghost" size="sm" onClick={loadData} disabled={isRefreshing} className="h-8 px-2">
+          <Button variant="ghost" size="sm" onClick={loadData} disabled={isRefreshing}>
             <RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
           </Button>
         </div>
       </div>
 
       {/* 통계 카드 */}
-      <div className="grid grid-cols-3 gap-2">
+      <div className="grid grid-cols-3 gap-3">
         <Card
-          className={`cursor-pointer border-l-4 border-red-500 p-2 transition-colors hover:bg-gray-50 ${filter === "accident" ? "bg-gray-100" : ""}`}
+          className={`cursor-pointer p-3 transition-all hover:shadow-md ${
+            filter === "accident" ? "bg-red-50" : ""
+          }`}
           onClick={() => setFilter(filter === "accident" ? "all" : "accident")}
         >
-          <div className="text-xs text-gray-600">교통사고</div>
-          <div className="text-lg font-bold text-gray-900">{stats.accident}건</div>
+          <div className="text-xs text-muted-foreground">교통사고</div>
+          <div className="text-2xl font-bold text-red-600">{stats.accident}건</div>
         </Card>
         <Card
-          className={`cursor-pointer border-l-4 border-blue-500 p-2 transition-colors hover:bg-gray-50 ${filter === "weather" ? "bg-gray-100" : ""}`}
+          className={`cursor-pointer p-3 transition-all hover:shadow-md ${
+            filter === "weather" ? "bg-blue-50" : ""
+          }`}
           onClick={() => setFilter(filter === "weather" ? "all" : "weather")}
         >
-          <div className="text-xs text-gray-600">날씨특보</div>
-          <div className="text-lg font-bold text-gray-900">{stats.weather}건</div>
+          <div className="text-xs text-muted-foreground">날씨특보</div>
+          <div className="text-2xl font-bold text-blue-600">{stats.weather}건</div>
         </Card>
         <Card
-          className={`cursor-pointer border-l-4 border-yellow-500 p-2 transition-colors hover:bg-gray-50 ${filter === "construction" ? "bg-gray-100" : ""}`}
+          className={`cursor-pointer p-3 transition-all hover:shadow-md ${
+            filter === "construction" ? "bg-yellow-50" : ""
+          }`}
           onClick={() => setFilter(filter === "construction" ? "all" : "construction")}
         >
-          <div className="text-xs text-gray-600">도로공사</div>
-          <div className="text-lg font-bold text-gray-900">{stats.construction}건</div>
+          <div className="text-xs text-muted-foreground">도로공사</div>
+          <div className="text-2xl font-bold text-yellow-600">{stats.construction}건</div>
         </Card>
       </div>
 
       {/* 필터 상태 표시 */}
       {filter !== "all" && (
         <div className="flex items-center gap-2">
-          <Badge variant="outline" className="text-xs">
+          <Badge variant="outline">
             {getAlertTypeName(filter)} 필터 적용 중
           </Badge>
           <Button
-            variant="ghost"
+            variant="link"
             size="sm"
             onClick={() => setFilter("all")}
-            className="h-6 px-2 text-xs text-gray-600"
+            className="h-auto p-0 text-xs"
           >
             전체 보기
           </Button>
@@ -236,44 +214,44 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
       <div className="flex-1 space-y-2 overflow-y-auto">
         {filteredAlerts.length === 0 ? (
           <Card className="p-4 text-center">
-            <div className="text-sm text-gray-500">알림이 없습니다</div>
+            <div className="text-sm text-muted-foreground">알림이 없습니다</div>
           </Card>
         ) : (
           filteredAlerts.map((alert) => (
             <Card 
               key={alert.id} 
-              className={`border-l-4 p-3 transition-all duration-300 ${getSeverityColor(alert.severity)} ${
-                newAlertIds.has(alert.id) ? 'bg-blue-50/30 ring-1 ring-blue-200' : ''
+              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">
-                      <h4 className="text-sm font-semibold text-gray-900">{alert.title}</h4>
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <h4 className="text-sm font-semibold">{alert.title}</h4>
                       {newAlertIds.has(alert.id) && (
-                        <Badge className="bg-blue-100 text-blue-700 text-xs">
+                        <Badge variant="secondary">
                           NEW
                         </Badge>
                       )}
-                      <Badge className={`text-xs ${getSeverityBadge(alert.severity)}`}>
+                      <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-gray-700">{alert.location}</p>
-                    <p className="mt-1 text-xs text-gray-600">{alert.description}</p>
+                    <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-gray-500">{formatTime(alert.timestamp)}</div>
+              <div className="mt-2 text-right text-xs text-muted-foreground">{formatTime(alert.timestamp)}</div>
             </Card>
           ))
         )}
       </div>
 
       {/* 안내 메시지 */}
-      <div className="border-t border-gray-200 pt-2 text-center text-xs text-gray-500">
+      <div className="border-t pt-3 text-center text-xs text-muted-foreground">
         💡 1분마다 자동으로 업데이트됩니다
       </div>
     </div>