첫 커밋

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

@@ -0,0 +1,37 @@
+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';
+
+export const AlarmItem = ({
+  title,
+  category,
+  date
+}: AlarmItemProps) => {
+  const { navigate } = useNavigate();
+  const onClickToNavigate = (alarmId: number) => {
+    let path = PATHS.support.notice.detail + alarmId;
+    navigate(path);
+  };
+
+  return (
+    <div className="notice-item">
+      <div className="notice-content">
+        <div className="notice-title">{ title }</div>
+        <div className="notice-meta">
+          <strong>{ category }</strong>
+          <span>{ date }</span>
+        </div>
+      </div>
+      <div 
+        className="notice-arrow"
+        onClick={ () => onClickToNavigate(4) }
+      >
+        <img 
+          src={ IMAGE_ROOT + '/Forward.svg' }
+          alt={ category + '바로가기' }
+        />
+      </div>
+    </div>
+  );
+};

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

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