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

src/entities/home/model/types.ts

@@ -2,12 +2,6 @@ export interface FavoriteItemProps {
 	img?: string,
 	text?: string
 };
-export interface NoticeItemProps {
-	title?: string,
-	meta1?: string,
-	meta2?: string,
-	img?: string,
-};
 export interface HomeBottomBannerProps {
 	setBottomBannerOn: (bottomBannerOn: boolean) => void;
 	bottomBannerOn: boolean;

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

@@ -1,31 +1,41 @@
+import { NoticeItemProps } from '@/entities/support/model/types';
+import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { NoticeItemProps } from '../model/types';
+import moment from 'moment';
 
 export const HomeNoticeItem = ({
+  id,
   title,
-  meta1,
-  meta2,
-  img
+  category,
+  regDate,
+  isNew
 }: NoticeItemProps) => {
   const { navigate } = useNavigate();
 
-  const onClickToNavigate = (path: string) => {
-    navigate(path + '14');
+  const onClickToDetail = () => {
+    navigate(PATHS.support.notice.detail, {
+      state: {
+        id: id
+      }
+    })
   };
 
   return (
     <>
-      <div className="notice-item">
+      <div 
+        className="notice-item"
+        onClick={ () => onClickToDetail() }
+      >
         <div className="notice-content">
           <div className="notice-title">{ title }</div>
-          <div className="notice-meta">{ meta1}<span>{ meta2 }</span></div>
+          <div className="notice-meta">{ category}<span>{ moment(regDate).format('YY년 MM월 DD일') }</span></div>
         </div>
-        <div 
-          className="notice-arrow"
-          onClick={ () => onClickToNavigate(PATHS.support.notice.detail) }
-        >
-          <img src={ img } alt="공지사항 바로가기" />
+        <div className="notice-arrow">
+          <img 
+            src={ IMAGE_ROOT + '/Forward.svg' } 
+            alt="공지사항 바로가기" 
+          />
         </div>
       </div>
     </>

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">