..

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

@@ -1,6 +1,6 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { AlarmItem  } from './alarm-item';
-import { AlarmListContent, AppAlarmListParams, AppAlarmListResponse, MERCHANT_ADMIN_APP } from '../model/types';
+import { AlarmLinkOptions, 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';
@@ -9,6 +9,7 @@ import { useNavigate } from '@/shared/lib/hooks';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useStore } from '@/shared/model/store';
 import { DefaultRequestPagination } from '@/entities/common/model/types';
+import { AlarmRoutes } from './alarm-routes';
 
 export interface AlarmListProps {
   appNotificationCategory: string;
@@ -27,7 +28,9 @@ export const AlarmList = ({
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [appCl, setAppCl] = useState<MERCHANT_ADMIN_APP>(MERCHANT_ADMIN_APP.MERCHANT_ADMIN_APP)
   const [resultList, setResultList] = useState<Array<AlarmListContent>>([]);
-  
+  const [alarmRoutesOn, setAlarmRoutesOn] = useState<boolean>(false);
+  const [alarmOptions, setAlarmOptions] = useState<AlarmLinkOptions>();
+
   const { mutateAsync: appAlarmList } = useAppAlarmListMutation();
 
   const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
@@ -107,6 +110,8 @@ export const AlarmList = ({
           appNotificationContent={ resultList[i]?.appNotificationContent }
           appNotificationLink={ resultList[i]?.appNotificationLink }
           appNotificationCategories={ appNotificationCategories }
+          setAlarmRoutesOn={ setAlarmRoutesOn }
+          setAlarmOptions={ setAlarmOptions }
         ></AlarmItem>
       );
     }
@@ -116,6 +121,12 @@ export const AlarmList = ({
   useEffect(() => {
     callList();
   }, [appNotificationCategory]);
+
+  useEffect(() => {
+    if(!!alarmRoutesOn){
+      console.log(alarmOptions)
+    }
+  }, [alarmRoutesOn, alarmOptions]);
   
   return (
     <>
@@ -124,6 +135,11 @@ export const AlarmList = ({
       </div>
       <div ref={ setTarget }></div>
       <div className="notice-alert">{t('alarm.retentionNotice')}</div>
+      { alarmRoutesOn &&
+        <AlarmRoutes
+          options={ alarmOptions }
+        ></AlarmRoutes>
+      }
     </>
   );
 };