공지사항 /홈 / 리스트 / 상세

src/entities/home/ui/home-notice-list.tsx

@@ -1,58 +1,51 @@
-/* eslint-disable @cspell/spellchecker */
-import { IMAGE_ROOT } from '@/shared/constants/common';
+import { useEffect, useState } from 'react';
+import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
+import { NoticeItem } from '@/entities/support/model/types';
 import { HomeNoticeItem } from './home-notice-item';
 
 export const HomeNoticeList = () => {
-  const items = [
-    {
-      title: '시스템 안정화를 위한 정기 점검이 예정되어 있습니다.',
-      meta1: '공지사항',
-      meta2: '25년 5월 23일',
-      img: IMAGE_ROOT + '/Forward.svg'
-    },
-    {
-      title: '가맹점 관리 메뉴에 거래내역 엑셀 다운로드 기능이 추가 되었습니다.',
-      meta1: '공지사항',
-      meta2: '25년 5월 23일',
-      img: IMAGE_ROOT + '/Forward.svg'
-    },
-    {
-      title: '신규 가맹점을 대상으로 거래수수료 인하 혜택을 12월까지 제공합니다.',
-      meta1: '공지사항',
-      meta2: '25년 5월 23일',
-      img: IMAGE_ROOT + '/Forward.svg'
-    },
-    {
-      title: '앱의 안정성과 사용성을 개선한 버전 2.3.1이 출시되었습니다.',
-      meta1: '공지사항',
-      meta2: '25년 5월 23일',
-      img: IMAGE_ROOT + '/Forward.svg'
-    },
-    {
-      title: '점검 시간 동안 일부 서비스 이용이 제한될 수 있으니 미리 확인해주세요.',
-      meta1: '공지사항',
-      meta2: '25년 5월 23일',
-      img: IMAGE_ROOT + '/Forward.svg'
-    },
-  ];
+  
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
+
+  const { mutateAsync: noticeList } = useNoticeListMutation();
 
   const getItems = () => {
     let rs = [];
-    for(let i=0;i<items.length;i++){
-      let key = 'notice-key-'+i;
+    let maxCnt = (resultList.length < 5)? resultList.length: 5;
+    for(let i=0;i<maxCnt;i++){
       rs.push(
         <HomeNoticeItem 
-          key={ key }
-          title={ items[i]?.title }
-          meta1={ items[i]?.meta1 }
-          meta2={ items[i]?.meta2 }
-          img={ items[i]?.img }
+          key={ `key-home-notice-item-${i}` }
+          id={ resultList[i]?.id }
+          title={ resultList[i]?.title }
+          category={ resultList[i]?.category }
+          regDate={ resultList[i]?.regDate }
+          isNew={ resultList[i]?.isNew }
         ></HomeNoticeItem>
       );
     }
     return rs;
   };
 
+  const callList = () => {
+    let listParams = {
+      category: 'ALL',
+      searchKeyword: '',
+      ...{page: pageParam}
+    };
+  
+    noticeList(listParams).then((rs) => {
+      console.log(rs)
+      setResultList(rs.content);
+    });
+  };
+
+  useEffect(() => {
+    callList();
+  }, []);
+
   return (
     <>
       <div className="notice-list">