홈 알림 unread 뱃지 처리

src/entities/alarm/api/use-app-alarm-unread-count-mutation.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_ALARM } from '@/shared/api/api-url-alarm';
+import { resultify } from '@/shared/lib/resultify';
+import { NiceAxiosError } from '@/shared/@types/error';
+import { 
+  AppAlarmUnreadCountParams,
+  AppAlarmUnreadCountResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const appAlarmUnreadCount = (params: AppAlarmUnreadCountParams) => {
+  return resultify(
+    axios.post<AppAlarmUnreadCountResponse>(API_URL_ALARM.appAlarmUnreadCount(), params),
+  );
+};
+
+export const useAppAlarmUnreadCountMutation = (options?: UseMutationOptions<AppAlarmUnreadCountResponse, NiceAxiosError, AppAlarmUnreadCountParams>) => {
+  const mutation = useMutation<AppAlarmUnreadCountResponse, NiceAxiosError, AppAlarmUnreadCountParams>({
+    ...options,
+    mutationFn: (params: AppAlarmUnreadCountParams) => appAlarmUnreadCount(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/alarm/model/types.ts

@@ -54,3 +54,10 @@ export interface AppAlarmConsentParams {
 export interface AppAlarmConsentResponse {
 
 };
+export interface AppAlarmUnreadCountParams {
+  usrid: string;
+  appCl: MERCHANT_ADMIN_APP;
+};
+export interface AppAlarmUnreadCountResponse {
+  unreadCount: number;
+};

src/pages/home/home-page.tsx

@@ -59,6 +59,8 @@ export const HomePage = () => {
     });
   };
 
+  
+    
   useEffect(() => {
     let firstAccess = useStore.getState().UserStore.firstAccess;
     checkBottomBannerOpen();
@@ -70,9 +72,9 @@ export const HomePage = () => {
       useStore.getState().UserStore.setFirstAccess(false);
     }
     
-
     let userFavorite = useStore.getState().UserStore.userFavorite;
     setFavoriteItems(userFavorite);
+   
   }, []);
   
   const setBottomBannerEffect = (mode: boolean) => {
@@ -87,8 +89,6 @@ export const HomePage = () => {
     }
   };
   
- 
-  // useRefreshUserInfo();
   return (
     <>
       <main className="home-main">

src/shared/api/api-url-alarm.ts

@@ -21,4 +21,8 @@ export const API_URL_ALARM = {
     // POST: 가맹점관리자 앱 알림 동의/미동의 저장 API
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/app/alarm/consent`;
   },
+  appAlarmUnreadCount: () => {
+    // POST: 안읽은 앱 알림 갯수 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/app/alarm/unread-count`;
+  }
 };

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>
+                { (unreadCount > 0) &&
                   <span className="notification-badge"></span>
+                }
               </button>
               {
               /*