From 687dccb52246231c80b49eaa236dd6b6ee6d4525 Mon Sep 17 00:00:00 2001
From: leeheejin <imleesinok@gmail.com>
Date: Tue, 21 Oct 2025 12:51:57 +0900
Subject: [PATCH] =?UTF-8?q?=EC=95=8C=EB=A6=BC=20api=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/services/riskAlertCacheService.ts     | 25 ++++++++--
 .../dashboard/widgets/RiskAlertWidget.tsx     | 48 +++++++++++++++++--
 2 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/backend-node/src/services/riskAlertCacheService.ts b/backend-node/src/services/riskAlertCacheService.ts
index cc4de181..ce8b6089 100644
--- a/backend-node/src/services/riskAlertCacheService.ts
+++ b/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);
+    }
+  }
+
   /**
    * 자동 갱신 중지
    */
diff --git a/frontend/components/dashboard/widgets/RiskAlertWidget.tsx b/frontend/components/dashboard/widgets/RiskAlertWidget.tsx
index 98278fdd..de6b2af8 100644
--- a/frontend/components/dashboard/widgets/RiskAlertWidget.tsx
+++ b/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>