메인 공지사항 faq 없을 때 처리

src/components/main/MainContents.jsx

@@ -11,11 +11,13 @@ import { useRouter } from 'next/navigation'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { queryStringFormatter } from '@/util/common-utils'
 import MainSkeleton from '../ui/MainSkeleton'
-import { SessionContext } from '@/app/SessionProvider'
 import { useMainContentsController } from '@/hooks/main/useMainContentsController'
 import { QcastContext } from '@/app/QcastProvider'
+import { useSwal } from '@/hooks/useSwal'
 
 export default function MainContents() {
+  const { swalFire } = useSwal()
+
   const { getMessage } = useMessage()
   const router = useRouter()
   const globalLocaleState = useRecoilValue(globalLocaleStore)
@@ -125,27 +127,26 @@ export default function MainContents() {
           )}
         </ProductItem>
         <ProductItem num={2} name={getMessage('main.content.notice')}>
-          <div className="notice-box">
           {recentNoticeList.length > 0 ? (
-              <>
+            <div className="notice-box">
               <div className="notice-day pre">{dayjs(recentNoticeList[0]?.regDt).format('YYYY.MM.DD')}</div>
               <div className="notice-title">{recentNoticeList[0]?.title}</div>
               <div
                 className="notice-contents"
                 dangerouslySetInnerHTML={{ __html: recentNoticeList[0]?.contents ? recentNoticeList[0].contents.replaceAll('\n', '<br/>') : '' }}
               ></div>
-              </>
-            ) : (
-              <MainSkeleton count={5} />
-            )}
             </div>
+          ) : (
+            <div className="recently-no-data">
+              <h3>{getMessage('main.content.noBusiness')}</h3>
+            </div>
+          )}
         </ProductItem>
       </div>
       <div className="main-product-list">
         <ProductItem num={3} name={getMessage('main.faq')}>
-          <ul className="faq-list">
           {recentFaqList.length > 0 ? (
-              <>
+            <ul className="faq-list">
               {recentFaqList.map((row) => {
                 return (
                   <li key={row.rowNumber} className="faq-item">
@@ -157,30 +158,19 @@ export default function MainContents() {
                   </li>
                 )
               })}
-              </>
-            ) : (
-              <MainSkeleton count={2} />
-            )}
             </ul>
+          ) : (
+            <div className="recently-no-data">
+              <h3>{getMessage('main.content.noBusiness')}</h3>
+            </div>
+          )}
         </ProductItem>
         <ProductItem num={4} name={'Data Download'}>
           <div className="data-download-wrap">
-            <button
+            <button className="data-down" type="button" onClick={() => swalFire({ text: getMessage('main.content.alert.noFile'), type: 'alert' })}>
-              className="data-down"
-              type="button"
-              onClick={() => {
-                return alert(getMessage('main.content.alert.noFile'))
-              }}
-            >
               <span>{getMessage('main.content.download1')}</span>
             </button>
-            <button
+            <button className="data-down" type="button" onClick={() => swalFire({ text: getMessage('main.content.alert.noFile'), type: 'alert' })}>
-              className="data-down"
-              type="button"
-              onClick={() => {
-                return alert(getMessage('main.content.alert.noFile'))
-              }}
-            >
               <span>{getMessage('main.content.download2')}</span>
             </button>
           </div>