From 77d6136901bd273388f6d712637d0c1abf854df7 Mon Sep 17 00:00:00 2001
From: "focp212@naver.com" <focp212@naver.com>
Date: Mon, 27 Oct 2025 12:45:18 +0900
Subject: [PATCH] =?UTF-8?q?=ED=99=88=20=EC=95=8C=EB=A6=BC=20unread=20?=
 =?UTF-8?q?=EB=B1=83=EC=A7=80=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../use-app-alarm-unread-count-mutation.ts    | 29 ++++++++++++++++++
 src/entities/alarm/model/types.ts             |  7 +++++
 src/pages/home/home-page.tsx                  |  8 ++---
 src/shared/api/api-url-alarm.ts               |  4 +++
 src/widgets/navigation/header.tsx             | 30 +++++++++++++++++--
 5 files changed, 71 insertions(+), 7 deletions(-)
 create mode 100644 src/entities/alarm/api/use-app-alarm-unread-count-mutation.ts

diff --git a/src/entities/alarm/api/use-app-alarm-unread-count-mutation.ts b/src/entities/alarm/api/use-app-alarm-unread-count-mutation.ts
new file mode 100644
index 0000000..ca91700
--- /dev/null
+++ b/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,
+  };
+};
diff --git a/src/entities/alarm/model/types.ts b/src/entities/alarm/model/types.ts
index 60e7416..1209a20 100644
--- a/src/entities/alarm/model/types.ts
+++ b/src/entities/alarm/model/types.ts
@@ -53,4 +53,11 @@ export interface AppAlarmConsentParams {
 };
 export interface AppAlarmConsentResponse {
 
+};
+export interface AppAlarmUnreadCountParams {
+  usrid: string;
+  appCl: MERCHANT_ADMIN_APP;
+};
+export interface AppAlarmUnreadCountResponse {
+  unreadCount: number;
 };
\ No newline at end of file
diff --git a/src/pages/home/home-page.tsx b/src/pages/home/home-page.tsx
index b0831af..3aeb1f9 100644
--- a/src/pages/home/home-page.tsx
+++ b/src/pages/home/home-page.tsx
@@ -58,6 +58,8 @@ export const HomePage = () => {
        setAuthRegisterOn(true);
     });
   };
+
+  
     
   useEffect(() => {
     let firstAccess = useStore.getState().UserStore.firstAccess;
@@ -70,9 +72,9 @@ export const HomePage = () => {
       useStore.getState().UserStore.setFirstAccess(false);
     }
     
-
     let userFavorite = useStore.getState().UserStore.userFavorite;
     setFavoriteItems(userFavorite);
+   
   }, []);
   
   const setBottomBannerEffect = (mode: boolean) => {
@@ -86,9 +88,7 @@ export const HomePage = () => {
       }
     }
   };
-
- 
-  // useRefreshUserInfo();
+  
   return (
     <>
       <main className="home-main">
diff --git a/src/shared/api/api-url-alarm.ts b/src/shared/api/api-url-alarm.ts
index efa9915..f42e690 100644
--- a/src/shared/api/api-url-alarm.ts
+++ b/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`;
+  }
 };
\ No newline at end of file
diff --git a/src/widgets/navigation/header.tsx b/src/widgets/navigation/header.tsx
index 18e4b3e..6457111 100644
--- a/src/widgets/navigation/header.tsx
+++ b/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>
               {
               /*