홈 알림 unread 뱃지 처리

src/widgets/navigation/header.tsx

@@ -8,6 +8,8 @@ import {
 } from '@/entities/common/model/types';
 import { useStore } from '@/shared/model/store';
 import { ChangeEvent, useEffect, useState } from 'react';
+import { AppAlarmUnreadCountParams, AppAlarmUnreadCountResponse, MERCHANT_ADMIN_APP } from '@/entities/alarm/model/types';
+import { useAppAlarmUnreadCountMutation } from '@/entities/alarm/api/use-app-alarm-unread-count-mutation';
 
 export const HeaderNavigation = ({ 
   onBack, 
@@ -18,8 +20,10 @@ export const HeaderNavigation = ({
   favoriteEdit,
   loginSuccess
 }: HeaderNavigationProps) => {
-
+  const { mutateAsync: appAlarmUnreadCount } = useAppAlarmUnreadCountMutation();
+  
   let [selectOptions, setSelectOptions] = useState<Array<Record<string, string>>>([]);
+  const [unreadCount, setUnreadCount] = useState<number>(0);
 
   const {
     navigate,
@@ -50,10 +54,28 @@ export const HeaderNavigation = ({
     useStore.getState().UserStore.setMid(value);
   };
 
+  const callAlarmCount = () => {
+    const userInfo = useStore.getState().UserStore.userInfo;
+    if(userInfo.usrid){
+      let params: AppAlarmUnreadCountParams = {
+        usrid: userInfo.usrid,
+        appCl: MERCHANT_ADMIN_APP.MERCHANT_ADMIN_APP
+      };
+      appAlarmUnreadCount(params).then((rs: AppAlarmUnreadCountResponse) => {
+        setUnreadCount(rs.unreadCount);
+      });
+    }
+  };
+
   useEffect(() => {
     let mids = useStore.getState().UserStore.selectOptionsMids;
     setSelectOptions(mids);
-  }, [loginSuccess])
+    
+    if(headerType === HeaderType.Alim){
+      callAlarmCount();
+    }
+  }, [loginSuccess]);
+  
   return (
     <>
       {
@@ -98,7 +120,9 @@ export const HeaderNavigation = ({
                 onClick={ () => onClickToGoToAlarm() }
               >
                 <span className="notification-icon"></span>
-                <span className="notification-badge"></span>
+                { (unreadCount > 0) &&
+                  <span className="notification-badge"></span>
+                }
               </button>
               {
               /*