알림 api 수정

backend-node/src/services/riskAlertCacheService.ts

@@ -34,16 +34,35 @@ export class RiskAlertCacheService {
    */
   public startAutoRefresh(): void {
     console.log('🔄 리스크/알림 자동 갱신 시작 (10분 간격)');
+    console.log('   - 기상특보: 즉시 호출');
+    console.log('   - 교통사고/도로공사: 10분 후 첫 호출');
     
-    // 즉시 첫 갱신
-    this.refreshCache();
+    // 기상특보만 즉시 호출 (ITS API는 10분 후부터)
+    this.refreshWeatherOnly();
 
-    // 10분마다 갱신 (600,000ms)
+    // 10분마다 전체 갱신 (600,000ms)
     this.updateInterval = setInterval(() => {
       this.refreshCache();
     }, 10 * 60 * 1000);
   }
 
+  /**
+   * 기상특보만 갱신 (재시작 시 사용)
+   */
+  private async refreshWeatherOnly(): Promise<void> {
+    try {
+      console.log('🌤️ 기상특보만 즉시 갱신 중...');
+      const weatherAlerts = await this.riskAlertService.getWeatherAlerts();
+      
+      this.cachedAlerts = weatherAlerts;
+      this.lastUpdated = new Date();
+
+      console.log(`✅ 기상특보 갱신 완료! (${weatherAlerts.length}건)`);
+    } catch (error: any) {
+      console.error('❌ 기상특보 갱신 실패:', error.message);
+    }
+  }
+
   /**
    * 자동 갱신 중지
    */

frontend/components/dashboard/widgets/RiskAlertWidget.tsx

@@ -33,11 +33,11 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
   const [newAlertIds, setNewAlertIds] = useState<Set<string>>(new Set());
 
-  // 데이터 로드 (백엔드 통합 호출)
+  // 데이터 로드 (백엔드 캐시 조회)
   const loadData = async () => {
     setIsRefreshing(true);
     try {
-      // 백엔드 API 호출 (교통사고, 기상특보, 도로공사 통합)
+      // 백엔드 API 호출 (캐시된 데이터)
       const response = await apiClient.get<{ 
         success: boolean; 
         data: Alert[]; 
@@ -79,6 +79,48 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
     }
   };
 
+  // 강제 새로고침 (실시간 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)
@@ -156,7 +198,7 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
               {lastUpdated.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}
             </span>
           )}
-          <Button variant="ghost" size="sm" onClick={loadData} disabled={isRefreshing}>
+          <Button variant="ghost" size="sm" onClick={forceRefresh} disabled={isRefreshing} title="실시간 데이터 갱신">
             <RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
           </Button>
         </div>