alarm

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

@@ -5,22 +5,42 @@ import {
 	useSetHeaderType,
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { useState } from 'react';
 
 export const ListPage = () => {
   useSetHeaderTitle('알림함');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
 
+  const [category, setCategory] = useState<string>('all');
+
+  let btnList = [
+    {name: '전체', category: 'all'},
+    {name: '혜택/이벤트', category: 'event'},
+    {name: '공지사항', category: 'notice'}
+  ];
+
+  const onClickToCategory = (value: any) => {
+    setCategory(value.category);
+  };
+
   return (
     <>
       <main className="pop">
         <div className="sub-wrap">
           <div className="notice-tabs">
-            <button className="tab36 on">전체</button>
-            <button className="tab36">혜택/이벤트</button>
-            <button className="tab36">공지사항</button>
+            {
+              btnList.map((value, index) => (
+                <button 
+                  className={ `tab36 ${(category === value.category)? 'on': ''}`}
+                  onClick={ () => onClickToCategory(value) }
+                >{ value.name }</button>    
+              ))
+            }
           </div>
-          <AlarmList></AlarmList>
+          <AlarmList
+            category={ category }
+          ></AlarmList>
         </div>
       </main>
     </>