[FIX] 알림 API 수정 및 실시간 알림 뱃지/SSE 연동 (#491)

bonsng · web-flow · commit 35817362349f · 2026-02-24T10:29:14.000+09:00
diff --git a/frontend/src/api/client/notificationApi.ts b/frontend/src/api/client/notificationApi.ts
@@ -27,11 +27,18 @@ export async function getNotifications(
   return data!;
 }
 
-export async function deleteAllNotifications(notificationIds: number[]): Promise<void> {
-  const { response } = await client.DELETE("/api/notifications", {
-    params: { query: {} as never },
-    body: { notificationIds } as never,
-  });
+export async function getUnreadCount(): Promise<number> {
+  try {
+    const { data } = await client.GET("/api/notifications/count");
+    return data?.count ?? 0;
+  } catch (error) {
+    console.error("getUnreadCount error:", error instanceof Error ? error.message : error);
+    return 0;
+  }
+}
+
+export async function deleteAllNotifications(): Promise<void> {
+  const { response } = await client.DELETE("/api/notifications");
 
   if (!response.ok) {
     throw new Error("알림 전체 삭제에 실패했어요.");
diff --git a/frontend/src/api/server/forecastApi.ts b/frontend/src/api/server/forecastApi.ts
@@ -6,10 +6,18 @@ import type {
   GetDiseaseCostResponse,
   GetAIRecommendationResponse,
 } from "@/api/types/forecastApi.type";
+import { isApiHttpError } from "@/api/utils/isApiHttpError";
 
-export async function getAIRecommendation(): Promise<GetAIRecommendationResponse> {
-  const { data } = await client.GET("/api/group/medical/info");
-  return data as GetAIRecommendationResponse;
+export async function getAIRecommendation(): Promise<GetAIRecommendationResponse | null> {
+  try {
+    const { data } = await client.GET("/api/group/medical/info");
+    return data as GetAIRecommendationResponse;
+  } catch (error) {
+    if (isApiHttpError(error) && error.status === 404) {
+      return null;
+    }
+    throw error;
+  }
 }
 
 /**
diff --git a/frontend/src/api/types/forecastApi.type.ts b/frontend/src/api/types/forecastApi.type.ts
@@ -19,13 +19,13 @@ export type GetDiseaseRankingResponse = NonNullable<
 >;
 
 export type GetDiseaseStatisticsResponse = NonNullable<
-  components["schemas"]["GroupMedicalStatisticsResponse"]
+  components["schemas"]["PetMedicalStatisticsResponse"]
 >;
 
 export type GetDiseaseCostResponse = NonNullable<
   components["schemas"]["TreatmentsResponse"]["treatments"]
 >;
 
 export type GetAIRecommendationResponse = NonNullable<
-  components["schemas"]["GroupMedicalInfoResponse"]
+  components["schemas"]["PetMedicalInfoResponse"]
 >;
diff --git a/frontend/src/app/(sidebar)/forecast/_components/ai-recommendation/AIRecommendationRefresher.tsx b/frontend/src/app/(sidebar)/forecast/_components/ai-recommendation/AIRecommendationRefresher.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useServerEvent } from "@/store/ServerEventProvider";
+import { useServerEvent } from "@/hooks/ServerEventProvider";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
diff --git a/frontend/src/app/(sidebar)/forecast/_types/aiRecommendation.ts b/frontend/src/app/(sidebar)/forecast/_types/aiRecommendation.ts
@@ -1,4 +1,2 @@
 import type { components } from "@/types/schema";
-export type AIRecommendationResponse = NonNullable<
-  components["schemas"]["GroupMedicalInfoResponse"]
->;
+export type AIRecommendationResponse = NonNullable<components["schemas"]["PetMedicalInfoResponse"]>;
diff --git a/frontend/src/app/(sidebar)/forecast/_types/annualDiseaseRisk.ts b/frontend/src/app/(sidebar)/forecast/_types/annualDiseaseRisk.ts
@@ -1,7 +1,7 @@
 import type { components } from "@/types/schema";
 import type { DiseaseCode } from "./disease";
 
-export type AnnualDiseases = NonNullable<components["schemas"]["GroupMedicalStatisticsResponse"]>;
+export type AnnualDiseases = NonNullable<components["schemas"]["PetMedicalStatisticsResponse"]>;
 
 export type RiskLineRow = { year: number } & Partial<Record<DiseaseCode, number>>; // Recharts용 row 타입: year + 질병코드별 number
 
diff --git a/frontend/src/app/(sidebar)/layout.tsx b/frontend/src/app/(sidebar)/layout.tsx
@@ -1,7 +1,7 @@
 import Header from "@/components/layout/Header";
 import Sidebar from "@/components/layout/Sidebar/SideBar";
 import SSEListener from "@/app/_components/SSEListener";
-import { ServerEventProvider } from "@/store/ServerEventProvider";
+import { ServerEventProvider } from "@/hooks/ServerEventProvider";
 
 export default function SidebarLayout({
   children,
diff --git a/frontend/src/app/(sidebar)/saving/_hooks/useSSESaving.ts b/frontend/src/app/(sidebar)/saving/_hooks/useSSESaving.ts
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import { useServerEvent } from "@/store/ServerEventProvider";
+import { useServerEvent } from "@/hooks/ServerEventProvider";
 import { useSavingStatus } from "@/app/(sidebar)/saving/_hooks/useSavingStatus";
 import { getBank } from "@/api/client/savingApi";
 
diff --git a/frontend/src/app/_components/SSEListener.tsx b/frontend/src/app/_components/SSEListener.tsx
@@ -4,7 +4,7 @@ import { useToast } from "@/components/ui/Toast/ToastProvider";
 import { useSSE } from "@/hooks/useSSE";
 import { useSSEToken } from "@/hooks/useSSEToken";
 import { getSSENotificationMessage } from "@/lib/sse/sseNotification";
-import { useServerEvent } from "@/store/ServerEventProvider";
+import { useServerEvent } from "@/hooks/ServerEventProvider";
 import type { SSEEvent } from "@/types/sse";
 import { useCallback } from "react";
 import { EVENT_TOAST_DURATION } from "@/constants/sseConnection";
diff --git a/frontend/src/components/layout/Notification/NotificationCard.tsx b/frontend/src/components/layout/Notification/NotificationCard.tsx
@@ -6,9 +6,11 @@ import { NotificationItem } from "./notification.type";
 
 export default function NotificationCard({
   item,
+  index,
   onDelete,
 }: {
   item: NotificationItem;
+  index: number;
   onDelete: (id: number) => void;
 }) {
   const icon =
@@ -19,7 +21,7 @@ export default function NotificationCard({
     );
 
   return (
-    <div className="flex flex-col border-b border-gray-100 px-[30px] py-[12px]">
+    <div className={`flex flex-col px-[30px] py-[12px] ${index % 2 === 1 ? "bg-gray-50" : ""}`}>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-[18px]">
           <div
diff --git a/frontend/src/components/layout/Notification/NotificationModal.tsx b/frontend/src/components/layout/Notification/NotificationModal.tsx
@@ -48,16 +48,16 @@ export default function NotificationModal({
           </div>
         ) : (
           <>
-            {notifications.map((item) => (
+            {notifications.map((item, index) => (
               <div key={item.id}>
                 {hasNewNotifications && item.id === lastSeenNotificationId && <LastSeenDivider />}
-                <NotificationCard item={item} onDelete={onDelete} />
+                <NotificationCard item={item} index={index} onDelete={onDelete} />
               </div>
             ))}
-            {hasNext && <div ref={observerRef} className="h-1 shrink-0" />}
+            {hasNext && !isLoading && <div ref={observerRef} className="h-1 shrink-0" />}
           </>
         )}
-        {isLoading && (
+        {isLoading && isInitialized && (
           <div className="flex shrink-0 items-center justify-center py-4">
             <div className="size-5 animate-spin rounded-full border-2 border-gray-200 border-t-gray-500" />
           </div>
diff --git a/frontend/src/components/layout/Notification/index.tsx b/frontend/src/components/layout/Notification/index.tsx
@@ -5,11 +5,16 @@ import NotificationIcon from "@/assets/components/ic_notification.svg";
 import ClientModal from "@/components/ui/Modal/ClientModal";
 import { NOTIFICATION_TEXT } from "@/constants/notification";
 import { useNotifications } from "@/hooks/useNotifications";
+import { useUnreadNotiCount } from "@/hooks/useUnreadNotiCount";
+import { useServerEvent } from "@/hooks/ServerEventProvider";
 import NotificationModal from "./NotificationModal";
 
 export default function Notification() {
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef<HTMLDivElement>(null);
+  const isOpenRef = useRef(isOpen);
+  const { lastEvent } = useServerEvent();
+
   const {
     notifications,
     isLoading,
@@ -20,13 +25,38 @@ export default function Notification() {
     fetchPage,
     deleteOne,
     deleteAll,
+    addNotification,
   } = useNotifications();
 
+  const {
+    unreadCount,
+    effectiveLastSeenId,
+    incrementUnreadCount,
+    resetUnreadCount,
+    updateClientLastSeen,
+  } = useUnreadNotiCount(lastSeenNotificationId);
+
+  useEffect(() => {
+    isOpenRef.current = isOpen;
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!lastEvent || !lastEvent.id) return;
+
+    if (isOpenRef.current) {
+      addNotification(lastEvent);
+      updateClientLastSeen(lastEvent.id);
+    } else {
+      incrementUnreadCount();
+    }
+  }, [lastEvent, addNotification, updateClientLastSeen, incrementUnreadCount]);
+
   useEffect(() => {
     if (isOpen) {
       fetchPage(0);
+      resetUnreadCount();
     }
-  }, [isOpen, fetchPage]);
+  }, [isOpen, fetchPage, resetUnreadCount]);
 
   return (
     <div ref={buttonRef} className="relative">
@@ -38,6 +68,11 @@ export default function Notification() {
         className={`relative flex items-center cursor-pointer ${isOpen ? "text-yellow-300" : "hover-bell-swing"}`}
       >
         <NotificationIcon className="size-8 transition-colors" />
+        {unreadCount > 0 && (
+          <span className="animate-badge-pop absolute -top-1 -right-1 flex min-w-[18px] h-[18px] items-center justify-center rounded-full bg-red-500 px-1 text-[11px] font-bold leading-[18px] text-white">
+            {unreadCount > 99 ? "99+" : unreadCount}
+          </span>
+        )}
       </button>
       <ClientModal
         open={isOpen}
@@ -52,7 +87,7 @@ export default function Notification() {
           isLoading={isLoading}
           isInitialized={isInitialized}
           hasNext={hasNext}
-          lastSeenNotificationId={lastSeenNotificationId}
+          lastSeenNotificationId={effectiveLastSeenId}
           observerRef={observerRef}
           onClearAll={deleteAll}
           onDelete={deleteOne}
diff --git a/frontend/src/components/layout/Notification/notification.type.ts b/frontend/src/components/layout/Notification/notification.type.ts
@@ -1,6 +1,5 @@
 import { NOTIFICATION_TEXT } from "@/constants/notification";
 
-// API 응답 타입 (백엔드 스키마 미반영 → 직접 정의)
 export type NotificationReadResponse = {
   lastSeenNotificationId?: number;
   page?: number;
diff --git a/frontend/src/hooks/ServerEventProvider.tsx b/frontend/src/hooks/ServerEventProvider.tsx
diff --git a/frontend/src/hooks/useNotifications.ts b/frontend/src/hooks/useNotifications.ts
@@ -17,6 +17,8 @@ import {
   EVENT_TYPE_TITLE,
   NOTIFICATION_TEXT,
 } from "@/constants/notification";
+import { useToast } from "@/components/ui/Toast/ToastProvider";
+import type { SSEEvent } from "@/types/sse";
 
 export function useNotifications() {
   const [notifications, setNotifications] = useState<NotificationItem[]>([]);
@@ -26,6 +28,7 @@ export function useNotifications() {
   const [isInitialized, setIsInitialized] = useState(false);
   const [lastSeenNotificationId, setLastSeenNotificationId] = useState(0);
   const observerRef = useRef<HTMLDivElement | null>(null);
+  const { showToast } = useToast();
 
   const fetchPage = useCallback(async (pageNum: number) => {
     setIsLoading(true);
@@ -66,15 +69,29 @@ export function useNotifications() {
   }, []);
 
   const deleteAll = useCallback(async () => {
-    const ids = notifications.map((n) => n.id);
-    setNotifications([]);
-    setHasNext(false);
     try {
-      await deleteAllNotifications(ids);
+      await deleteAllNotifications();
+      setNotifications([]);
+      setHasNext(false);
     } catch (e) {
       console.error(e);
+      showToast({
+        message: "알림 전체 삭제에 실패했어요.",
+        variant: "error",
+      });
     }
-  }, [notifications]);
+  }, [showToast]);
+
+  const addNotification = useCallback((event: SSEEvent) => {
+    const item: NotificationItem = {
+      id: event.id ?? 0,
+      type: event.event,
+      title: EVENT_TYPE_TITLE[event.event] ?? NOTIFICATION_TEXT.TITLE,
+      content: getNotificationContent(event.event, event.data as Record<string, unknown>),
+      time: formatRelativeTime(new Date().toISOString()),
+    };
+    setNotifications((prev) => [item, ...prev]);
+  }, []);
 
   useEffect(() => {
     const sentinel = observerRef.current;
@@ -103,6 +120,7 @@ export function useNotifications() {
     fetchPage,
     deleteOne,
     deleteAll,
+    addNotification,
   };
 }
 
diff --git a/frontend/src/hooks/useSSE.ts b/frontend/src/hooks/useSSE.ts
@@ -54,7 +54,10 @@ export function useSSE({ onEvent, onError, connectionToken }: SSEProps) {
 
         for (const event of events) {
           if (event.id) lastEventIdRef.current = event.id;
+          const parsed = event.id ? Number(event.id) : undefined;
+          const numericId = parsed !== undefined && Number.isFinite(parsed) ? parsed : undefined;
           onEventRef.current({
+            id: numericId,
             event: event.event,
             data: event.data,
           } as SSEEvent);
diff --git a/frontend/src/hooks/useUnreadNotiCount.ts b/frontend/src/hooks/useUnreadNotiCount.ts
@@ -0,0 +1,35 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { getUnreadCount } from "@/api/client/notificationApi";
+
+export function useUnreadNotiCount(lastSeenNotificationId: number) {
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [clientLastSeenId, setClientLastSeenId] = useState(0);
+
+  const effectiveLastSeenId = Math.max(lastSeenNotificationId, clientLastSeenId);
+
+  useEffect(() => {
+    getUnreadCount().then(setUnreadCount);
+  }, []);
+
+  const incrementUnreadCount = useCallback(() => {
+    setUnreadCount((prev) => prev + 1);
+  }, []);
+
+  const resetUnreadCount = useCallback(() => {
+    setUnreadCount(0);
+  }, []);
+
+  const updateClientLastSeen = useCallback((id: number) => {
+    setClientLastSeenId((prev) => Math.max(prev, id));
+  }, []);
+
+  return {
+    unreadCount,
+    effectiveLastSeenId,
+    incrementUnreadCount,
+    resetUnreadCount,
+    updateClientLastSeen,
+  };
+}
diff --git a/frontend/src/store/.gitkeep b/frontend/src/store/.gitkeep
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
@@ -13,6 +13,22 @@ body {
     sans-serif;
 }
 
+@keyframes badge-pop {
+  0% {
+    transform: scale(0);
+  }
+  70% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.animate-badge-pop {
+  animation: badge-pop 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
 @keyframes toast-in {
   from {
     opacity: 0;
diff --git a/frontend/src/test/TestUtils.tsx b/frontend/src/test/TestUtils.tsx
diff --git a/frontend/src/types/schema.d.ts b/frontend/src/types/schema.d.ts
diff --git a/frontend/src/types/sse/index.ts b/frontend/src/types/sse/index.ts
