알림함 카테고리 셋팅

src/pages/alarm/list/list-page.tsx

@@ -1,45 +1,56 @@
 import { AlarmList } from '@/entities/alarm/ui/alarm-list';
 import { HeaderType } from '@/entities/common/model/types';
+import { useStore } from '@/shared/model/store';
 import { 
 	useSetHeaderTitle,
 	useSetHeaderType,
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export const ListPage = () => {
+  let totalAppNotificationCategories = useStore.getState().CommonStore.appNotificationCategories;
+  const [appNotificationCategories, setAppNotificationCategories] = useState<Array<any>>(totalAppNotificationCategories);
+  
   useSetHeaderTitle('알림함');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
 
-  const [category, setCategory] = useState<string>('all');
+  const [appNotificationCategory, setAppNotificationCategory] = useState<string>('');
 
-  let btnList = [
-    {name: '전체', category: 'all'},
-    {name: '혜택/이벤트', category: 'event'},
-    {name: '공지사항', category: 'notice'}
-  ];
-
-  const onClickToCategory = (value: any) => {
-    setCategory(value.category);
+  const resetAlarmCategories = () => {
+    if(appNotificationCategories){
+      let newAppNotificationCategories = appNotificationCategories.filter((value, index) => {
+        return value.code1 !== '****' && value.code2 === '*';
+      });
+      setAppNotificationCategories(newAppNotificationCategories);
+    }
   };
 
+  useEffect(() => {
+    resetAlarmCategories();
+  }, [totalAppNotificationCategories])
+  
   return (
     <>
       <main className="pop">
         <div className="sub-wrap">
           <div className="notice-tabs">
-            {
-              btnList.map((value, index) => (
+            <button 
+              className={ `tab36 ${(appNotificationCategory === '')? 'on': ''}`}
+              onClick={ () => setAppNotificationCategory('') }
+            >전체</button>
+            { !!appNotificationCategories &&
+              appNotificationCategories.map((value, index) => (
                 <button 
-                  className={ `tab36 ${(category === value.category)? 'on': ''}`}
-                  onClick={ () => onClickToCategory(value) }
-                >{ value.name }</button>    
+                  className={ `tab36 ${(appNotificationCategory === value.code1)? 'on': ''}`}
+                  onClick={ () => setAppNotificationCategory(value.code1) }
+                >{ value.desc1 }</button>    
               ))
             }
           </div>
           <AlarmList
-            category={ category }
+            appNotificationCategory={ appNotificationCategory }
           ></AlarmList>
         </div>
       </main>