상세 수정

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

@@ -6,21 +6,19 @@ import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 
 export const HomeNoticeItem = ({
-  seq,
-  title,
-  informCl,
-  regDt,
+  noticeItem,
+  setDetailData,
 }: NoticeItemProps) => {
   const { navigate } = useNavigate();
   const { t } = useTranslation();
 
   const onClickToDetail = () => {
-    navigate(PATHS.support.notice.detail, {
-      state: {
-        seq: seq,
-        from: PATHS.home
-      }
-    })
+    if(setDetailData){
+      setDetailData({
+        seq: noticeItem.seq,
+        detailOn: true
+      });
+    }
   };
 
   return (
@@ -30,8 +28,8 @@ export const HomeNoticeItem = ({
         onClick={ () => onClickToDetail() }
       >
         <div className="notice-content">
-          <div className="notice-title">{ title }</div>
-          <div className="notice-meta">{ t(`support.notice.categories.${informCl}`) }<span>{ moment(regDt).format('YY년 MM월 DD일') }</span></div>
+          <div className="notice-title">{ noticeItem.title }</div>
+          <div className="notice-meta">{ t(`support.notice.categories.${noticeItem.informCl}`) }<span>{ noticeItem.regDt? moment(noticeItem.regDt).format('YY년 MM월 DD일'): '' }</span></div>
         </div>
         <div className="notice-arrow">
           <img

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

@@ -1,31 +1,43 @@
 import { useEffect, useState } from 'react';
 import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
-import { NoticeItem } from '@/entities/support/model/types';
+import { DetailData, NoticeItem } from '@/entities/support/model/types';
 import { HomeNoticeItem } from './home-notice-item';
 import { useTranslation } from 'react-i18next';
+import { NoticeDetail } from '@/entities/support/ui/detail/notice-detail';
 
 export const HomeNoticeList = () => {
   const { t } = useTranslation();
   
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailSeq, setDetailSeq] = useState<number>(0);
 
   const { mutateAsync: noticeList } = useNoticeListMutation();
 
+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    if(detailData?.seq){
+      setDetailSeq(detailData?.seq);
+    }
+  };
+
   const getItems = () => {
     let rs = [];
     let maxCnt = (!!resultList && resultList.length < 4)? resultList.length: 4;
     for(let i=0;i<maxCnt;i++){
-      rs.push(
-        <HomeNoticeItem 
-          key={ `key-home-notice-item-${i}` }
-          seq={ resultList[i]?.seq }
-          title={ resultList[i]?.title }
-          informCl={ resultList[i]?.informCl }
-          regDt={ resultList[i]?.regDt }
-        ></HomeNoticeItem>
-      );
+      let noticeItem = resultList[i];
+      if(noticeItem){
+        rs.push(
+          <HomeNoticeItem 
+            key={ `key-home-notice-item-${i}` }
+            noticeItem={ noticeItem }
+            setDetailData={ setDetailData }
+          ></HomeNoticeItem>
+        );
+      }
+      
     }
     return rs;
   };
@@ -56,6 +68,11 @@ export const HomeNoticeList = () => {
           }
         </div>
       </div>
+      <NoticeDetail
+        detailOn={ detailOn }
+        setDetailOn={ setDetailOn }
+        seq={ detailSeq }
+      ></NoticeDetail>
     </>
   );
 };