alarm

src/entities/alarm/model/types.ts

@@ -1,5 +1,6 @@
 export interface AlarmItemProps {
   title?: string,
+  name?: string,
   category?: string,
   date?: string
 };

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

@@ -5,6 +5,7 @@ import { AlarmItemProps } from '../model/types';
 
 export const AlarmItem = ({
   title,
+  name,
   category,
   date
 }: AlarmItemProps) => {
@@ -19,7 +20,7 @@ export const AlarmItem = ({
       <div className="notice-content">
         <div className="notice-title">{ title }</div>
         <div className="notice-meta">
-          <strong>{ category }</strong>
+          <strong>{ name }</strong>
           <span>{ date }</span>
         </div>
       </div>

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

@@ -2,37 +2,46 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { AlarmItem  } from './alarm-item';
 import { AlarmItemProps } from '../model/types';
 
+export interface AlarmListProps {
+  category: string;
+};
 
-export const AlarmList = () => {
+export const AlarmList = ({
+  category
+}: AlarmListProps) => {
 
   const alarmItems: Array<AlarmItemProps> = [
-    {title: '시스템 안정화를 위한 정기 점검이 예정되어 있습니다.', category: '공지사항', date: '2025.06.01 10:00:00'},
+    {title: '시스템 안정화를 위한 정기 점검이 예정되어 있습니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '가맹점 관리 메뉴에 거래내역 엑셀 다운로드 기능이 추가 되었습니다.', category: '공지사항', date: '2025.06.01 10:00:00'},
+    {title: '가맹점 관리 메뉴에 거래내역 엑셀 다운로드 기능이 추가 되었습니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '신규 가맹점을 대상으로 거래수수료 인하 혜택을 12월까지 제공합니다.', category: '공지사항', date: '2025.06.01 10:00:00'},
+    {title: '신규 가맹점을 대상으로 거래수수료 인하 혜택을 12월까지 제공합니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '앱의 안정성과 사용성을 개선한 버전 2.3.1이 출시되었습니다.', category: '공지사항', date: '2025.06.01 10:00:00'},
+    {title: '앱의 안정성과 사용성을 개선한 버전 2.3.1이 출시되었습니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '점검 시간 동안 일부 서비스 이용이 제한될 수 있으니 미리 확인해주세요.', category: '공지사항', date: '2025.06.01 10:00:00'},
+    {title: '점검 시간 동안 일부 서비스 이용이 제한될 수 있으니 미리 확인해주세요.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '가맹점 관리 메뉴에 거래내역 엑셀 다운로드 기능이 추가 되었습니다.', category: '공지사항', date: '2025.06.01 10:00:00'},
+    {title: '가맹점 관리 메뉴에 거래내역 엑셀 다운로드 기능이 추가 되었습니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '신규 가맹점을 대상으로 거래수수료 인하 혜택을 12월까지 제공합니다.', category: '공지사항', date: '2025.06.01 10:00:00'},
+    {title: '신규 가맹점을 대상으로 거래수수료 인하 혜택을 12월까지 제공합니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '앱의 안정성과 사용성을 개선한 버전 2.3.1이 출시되었습니다.', category: '공지사항', date: '2025.06.01 10:00:00'},
+    {title: '앱의 안정성과 사용성을 개선한 버전 2.3.1이 출시되었습니다.', name: '공지사항', category: 'notice', date: '2025.06.01 10:00:00'},
-    {title: '점검 시간 동안 일부 서비스 이용이 제한될 수 있으니 미리 확인해주세요.', category: '공지사항', 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++){
-      rs.push(
+      if(category === 'all' || (alarmItems[i]?.category === category)){
-        <AlarmItem
+        rs.push(
-          title={ alarmItems[i]?.title }
+          <AlarmItem
-          category={ alarmItems[i]?.category }
+            title={ alarmItems[i]?.title }
-          date={ alarmItems[i]?.date }
+            name={ alarmItems[i]?.name }
-        ></AlarmItem>
+            category={ alarmItems[i]?.category }
-      )
+            date={ alarmItems[i]?.date }
+          ></AlarmItem>
+        )
+      }
+      
     }
     return rs;
   };
   return (
     <>
       <div className="notice-box sub">
-        { getAlarmItems() }
+      { getAlarmItems() }
       </div>
       <div className="notice-alert">※ 알림은 90일간 보관 후 삭제됩니다.</div>
     </>

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>
+              btnList.map((value, index) => (
-            <button className="tab36">공지사항</button>
+                <button 
+                  className={ `tab36 ${(category === value.category)? 'on': ''}`}
+                  onClick={ () => onClickToCategory(value) }
+                >{ value.name }</button>    
+              ))
+            }
           </div>
-          <AlarmList></AlarmList>
+          <AlarmList
+            category={ category }
+          ></AlarmList>
         </div>
       </main>
     </>