현금영수증 리스트

src/entities/alarm/ui/alarm-item.tsx

@@ -1,13 +1,22 @@
 import { PATHS } from '@/shared/constants/paths';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { AlarmItemProps } from '../model/types';
+import moment from 'moment';
+
+export interface AlarmItemProps {
+  appNotificationCategory?: string;
+  notificationReceivedDate?: string;
+  appNotificationTitle?: string;
+  appNotificationContent?: string;
+  appNotificationLink?: string;
+};
 
 export const AlarmItem = ({
-  title,
-  name,
-  category,
-  date
+  appNotificationCategory,
+  notificationReceivedDate,
+  appNotificationTitle,
+  appNotificationContent,
+  appNotificationLink
 }: AlarmItemProps) => {
   const { navigate } = useNavigate();
   const onClickToNavigate = (alarmId: number) => {
@@ -18,10 +27,10 @@ export const AlarmItem = ({
   return (
     <div className="notice-item">
       <div className="notice-content">
-        <div className="notice-title">{ title }</div>
+        <div className="notice-title">{ appNotificationTitle }</div>
         <div className="notice-meta">
-          <strong>{ name }</strong>
-          <span>{ date }</span>
+          <strong>{ appNotificationCategory }</strong>
+          <span>{ moment(notificationReceivedDate).format('YYYY.MM.DD HH:mm:ss') }</span>
         </div>
       </div>
       <div 
@@ -30,7 +39,7 @@ export const AlarmItem = ({
       >
         <img 
           src={ IMAGE_ROOT + '/Forward.svg' }
-          alt={ category + '바로가기' }
+          alt={ appNotificationCategory + ' 바로가기' }
         />
       </div>
     </div>

src/entities/alarm/ui/alarm-list.tsx

@@ -1,6 +1,13 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { AlarmItem  } from './alarm-item';
-import { AlarmItemProps } from '../model/types';
+import { AlarmListContent, AppAlarmListParams, AppAlarmListResponse, MERCHANT_ADMIN_APP } from '../model/types';
+import { useEffect, useState } from 'react';
+import { useAppAlarmListMutation } from '../api/use-app-alarm-list-mutation';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from '@/shared/lib/hooks';
+import useIntersectionObserver from '@/widgets/intersection-observer';
+import { useStore } from '@/shared/model/store';
 
 export interface AlarmListProps {
   category: string;
@@ -9,35 +16,106 @@ export interface AlarmListProps {
 export const AlarmList = ({
   category
 }: AlarmListProps) => {
+  const { navigate } = useNavigate();
+  const { t } = useTranslation();
+  const userInfo = useStore.getState().UserStore.userInfo;
+  
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
+  const [appCl, setAppCl] = useState<MERCHANT_ADMIN_APP>(MERCHANT_ADMIN_APP.MERCHANT_ADMIN_APP)
+  const [appNotificationCategory, setAppNotificationCategory] = useState<string>('');
+  const [resultList, setResultList] = useState<Array<AlarmListContent>>([]);
+  const [selectedCategory, setSelectedCategory] = useState<string>('');
+  
+  const { mutateAsync: appAlarmList } = useAppAlarmListMutation();
 
-  const alarmItems: Array<AlarmItemProps> = [
-    {title: '시스템 안정화를 위한 정기 점검이 예정되어 있습니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '가맹점 관리 메뉴에 거래내역 엑셀 다운로드 기능이 추가 되었습니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '신규 가맹점을 대상으로 거래수수료 인하 혜택을 12월까지 제공합니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '앱의 안정성과 사용성을 개선한 버전 2.3.1이 출시되었습니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '점검 시간 동안 일부 서비스 이용이 제한될 수 있으니 미리 확인해주세요.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '가맹점 관리 메뉴에 거래내역 엑셀 다운로드 기능이 추가 되었습니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '신규 가맹점을 대상으로 거래수수료 인하 혜택을 12월까지 제공합니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '앱의 안정성과 사용성을 개선한 버전 2.3.1이 출시되었습니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '점검 시간 동안 일부 서비스 이용이 제한될 수 있으니 미리 확인해주세요.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-  ];
   const getAlarmItems = () => {
     let rs = [];
-    for(let i=0;i<alarmItems.length;i++){
-      if(category === 'all' || (alarmItems[i]?.category === category)){
-        rs.push(
-          <AlarmItem
-            title={ alarmItems[i]?.title }
-            name={ alarmItems[i]?.name }
-            category={ alarmItems[i]?.category }
-            date={ alarmItems[i]?.date }
-          ></AlarmItem>
-        )
-      }
-      
+    for(let i=0;i<resultList.length;i++){
+      rs.push(
+        <AlarmItem
+          appNotificationCategory={ resultList[i]?.appNotificationCategory }
+          notificationReceivedDate={ resultList[i]?.notificationReceivedDate }
+          appNotificationTitle={ resultList[i]?.appNotificationTitle }
+          appNotificationContent={ resultList[i]?.appNotificationContent }
+          appNotificationLink={ resultList[i]?.appNotificationLink }
+        ></AlarmItem>
+      )
     }
     return rs;
   };
+
+  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
+    entries.forEach((entry: IntersectionObserverEntry) => {
+      if(entry.isIntersecting){
+        console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
+        if(onActionIntersect && !!nextCursor){
+          callList('page');
+        } 
+      }
+      else{
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };
+
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+  const callList = (type?: string) => {
+    if(userInfo.usrid){
+      let params: AppAlarmListParams = {
+        usrid: userInfo.usrid,
+        appCl: appCl,
+        appNotificationCategory: appNotificationCategory,
+        ...{
+          page: pageParam
+        }
+      }
+
+      if(type === 'page'){
+        if(params.page){
+          params.page.cursor = nextCursor;
+        }
+      }
+      else{
+        setNextCursor(null);
+        if(params.page){
+          params.page.cursor = null;
+        }
+      }
+
+      appAlarmList(params).then((rs: AppAlarmListResponse) => {
+        if(rs){
+          if(type === 'page'){
+            setResultList([
+              ...resultList,
+              ...rs.content
+            ]);
+          }
+          else{
+            setResultList(rs.content);
+          }
+          if(rs.hasNext){
+            setNextCursor(rs.nextCursor);
+            setOnActionIntersect(true);
+          }
+          else{
+            setNextCursor(null);
+          }
+        }
+      });
+    }
+    
+  };
+
+  useEffect(() => {
+    callList();
+  }, [selectedCategory]);
+
   return (
     <>
       <div className="notice-box sub">