메인 faq 목록 타이틀 클릭 시, 상세 모달창 추가

src/components/main/MainContents.jsx

@@ -15,6 +15,8 @@ import { useMainContentsController } from '@/hooks/main/useMainContentsControlle
 import { QcastContext } from '@/app/QcastProvider'
 import { useSwal } from '@/hooks/useSwal'
 
+import BoardDetailModal from '../community/modal/BoardDetailModal'
+
 export default function MainContents() {
   const { swalFire } = useSwal()
 
@@ -87,6 +89,10 @@ export default function MainContents() {
     }
   }
 
+  // FAQ 팝업 관련
+  const [open, setOpen] = useState(false)
+  const [modalNoticeNo, setModalNoticeNo] = useState('')
+
   return (
     <div className="main-product-list-wrap">
       <div className="main-product-list">
@@ -143,6 +149,8 @@ export default function MainContents() {
           )}
         </ProductItem>
       </div>
+
+      {open && <BoardDetailModal noticeNo={modalNoticeNo} setOpen={setOpen} />}
       <div className="main-product-list">
         <ProductItem num={3} name={getMessage('main.faq')}>
           {recentFaqList.length > 0 ? (
@@ -152,7 +160,16 @@ export default function MainContents() {
                   <li key={row.rowNumber} className="faq-item">
                     <div className="faq-item-inner">
                       <div className="faq-num pre">FAQ {row.totCnt - row.rowNumber + 1}</div>
-                      <div className="faq-title pre">{row.title}</div>
+                      <div
+                        className="faq-title pre"
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => {
+                          setOpen(true)
+                          setModalNoticeNo(row.noticeNo)
+                        }}
+                      >
+                        {row.title}
+                      </div>
                       <div className="faq-day pre">{dayjs(row.regDt).format('YYYY.MM.DD')}</div>
                     </div>
                   </li>