견적서 제품특이사항 팝업

src/components/estimate/popup/ProductFeaturesPop.jsx

@@ -1,12 +1,23 @@
 'use client'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 export default function ProductFeaturesPop({ specialNoteList, showProductFeatureData, setProductFeaturesPopupOpen }) {
-  console.log('위에서 넘어온거::', specialNoteList)
-  console.log('위에서 넘어온거::', showProductFeatureData)
-  //split('、')
-
+  const [showSpecialNoteList, setShowSpecialNoteList] = useState([])
   const { getMessage } = useMessage()
+
+  useEffect(() => {
+    let pushData = []
+    specialNoteList.map((row) => {
+      let option = showProductFeatureData.split('、')
+      option.map((row2) => {
+        if (row.code === row2) {
+          pushData.push(row)
+        }
+      })
+    })
+    setShowSpecialNoteList(pushData)
+  }, [specialNoteList])
+
   return (
     <div className="modal-popup">
       <div className="modal-dialog">
@@ -26,10 +37,15 @@ export default function ProductFeaturesPop({ specialNoteList, showProductFeature
           <div className="modal-body">
             <div className="modal-body-inner border">
               <div className="calculation-estimate usemodal">
-                <dl>
-                  <dt>제목</dt>
-                  <dd>내용</dd>
-                </dl>
+                {showSpecialNoteList.length > 0 &&
+                  showSpecialNoteList.map((row) => {
+                    return (
+                      <dl>
+                        <dt>{row.codeNm}</dt>
+                        <dd dangerouslySetInnerHTML={{ __html: row.remarks }}></dd>
+                      </dl>
+                    )
+                  })}
               </div>
             </div>
             <div className="footer-btn-wrap">