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

src/pages/support/notice/list-page.tsx

@@ -1,5 +1,10 @@
+import { ChangeEvent, useEffect, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+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 { SupportNoticeItem } from '@/entities/support/ui/notice-item';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
 	useSetHeaderTitle,
@@ -11,12 +16,57 @@ import {
 export const NoticeListPage = () => {
   const { navigate } = useNavigate();
 
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [searchKeyword, setSearchKeyword] = useState<string>('');
+  const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
+
   useSetHeaderTitle('공지사항');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(true);
   useSetOnBack(() => {
     navigate(PATHS.home);
   });
+
+  const { mutateAsync: noticeList } = useNoticeListMutation();
+  const callList = () => {
+    let listParams = {
+      category: 'ALL',
+      searchKeyword: searchKeyword,
+      ...{page: pageParam}
+    };
+    
+    noticeList(listParams).then((rs) => {
+      console.log(rs)
+      setResultList(rs.content);
+    });
+  };
+
+  const onClickToAction = () => {
+    callList();
+  };
+
+  const getNoticeList = () => {
+    let rs = [];
+    for(let i=0;i<resultList.length;i++){
+      rs.push(
+        <SupportNoticeItem
+          key={ `key-support-notice-item-${i}` }
+          id={ resultList[i]?.id }
+          title={ resultList[i]?.title }
+          category={ resultList[i]?.category }
+          regDate={ resultList[i]?.regDate }
+          isNew={ resultList[i]?.isNew }
+        ></SupportNoticeItem>
+      )
+    }
+    return rs;
+  };
+
+  useEffect(() => {
+    callList();
+  }, []);
+
+
   return (
     <>
       <main>
@@ -25,8 +75,17 @@ export const NoticeListPage = () => {
             <div className="notice114">
               <div className="notice-controls">
                 <div className="notice-search">
-                  <span className="ic16 search" aria-hidden="true"></span>
-                  <input type="text" placeholder="검색어를 입력하세요" />
+                  <span 
+                    className="ic16 search" 
+                    aria-hidden="true"
+                    onClick={ () => onClickToAction() }
+                  ></span>
+                  <input 
+                    type="text"
+                    placeholder="검색어를 입력하세요"
+                    value={ searchKeyword }
+                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchKeyword(e.target.value) }
+                  />
                 </div>
                 <div className="notice-filter">
                   <select className="flex-1">
@@ -35,46 +94,7 @@ export const NoticeListPage = () => {
                 </div>
               </div>
               <div className="notice-list-114">
-                <div className="notice-row-114">
-                  <div className="notice-txt">
-                    <div className="notice-title-114">신한은행 시스템 작업 안내신한은행 시스템 작업 <span className="blue">안내신한은행 시스템 작업</span> 안내신한은행 시스템 작업 안내신한은행 시스템 작업 안내</div>
-                    <div className="notice-meta-114">
-                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
-                    </div>
-                  </div>
-                </div>
-                <div className="notice-row-114">
-                  <div className="notice-txt">
-                    <div className="notice-title-114">NICE페이먼츠 도메인 인증서 G2교체 작업 안내</div>
-                    <div className="notice-meta-114">
-                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
-                    </div>
-                  </div>
-                </div>
-                <div className="notice-row-114">
-                  <div className="notice-txt">
-                    <div className="notice-title-114">N자금이체 서비스 도메인 인증서 G2 교체 <span className="blue">작업 및 TLS 프로토콜</span> 개선 안내 ...</div>
-                    <div className="notice-meta-114">
-                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
-                    </div>
-                  </div>
-                </div>
-                <div className="notice-row-114">
-                  <div className="notice-txt">
-                    <div className="notice-title-114">N자금이체 서비스 <span className="blue">도메인 인증서 G2</span> 교체 작업 및 TLS 프로토콜 개선 안내 ...</div>
-                    <div className="notice-meta-114">
-                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
-                    </div>
-                  </div>
-                </div>
-                <div className="notice-row-114">
-                  <div className="notice-txt">
-                    <div className="notice-title-114">NICE페이먼츠 도메인 인증서 G2교체 작업 안내</div>
-                    <div className="notice-meta-114">
-                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
-                    </div>
-                  </div>
-                </div>
+                { getNoticeList() } 
               </div>
             </div>
           </div>