견적서 상세화면

src/components/estimate/Estimate.jsx

@@ -10,7 +10,7 @@ import SingleDatePicker from '../common/datepicker/SingleDatePicker'
 import EstimateFileUploader from './EstimateFileUploader'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
-import { isObjectNotEmpty } from '@/util/common-utils'
+import { isNotEmptyArray, isObjectNotEmpty } from '@/util/common-utils'
 import dayjs from 'dayjs'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import Select from 'react-select'
@@ -21,6 +21,12 @@ export default function Estimate({ params }) {
   const [planNo, setPlanNo] = useState('') //플랜번호
   const [files, setFiles] = useState([]) // 보내는 첨부파일
 
+  //체크박스
+  const [checkItems, setCheckItems] = useState(new Set())
+  const [checkedList, setCheckedList] = useState([])
+
+  const [showContentCode, setShowContentCode] = useState('ATTR001')
+
   //견적특이사항 접고 펼치기
   const [hidden, setHidden] = useState(false)
 
@@ -40,6 +46,11 @@ export default function Estimate({ params }) {
   //견적서 상세데이터
   const { state, setState } = useEstimateController(params.pid)
 
+  //견적특이사항 상세 데이터 LIST
+
+  //견적특이사항 List
+  const [specialNoteList, setSpecialNoteList] = useState([])
+
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get, post } = useAxios(globalLocaleState)
 
@@ -65,17 +76,57 @@ export default function Estimate({ params }) {
     if (code1 != null) {
       setHonorificCodeList(code1)
     }
-
-    //견적특이사항 API호출
-    //http://localhost:8080/api/estimate/special-note-list
   }, [])
 
+  useEffect(() => {
+    //견적특이사항 API호출
+    //여러개 선택하면 구분자로 (、)
+    let url = `/api/estimate/special-note-list`
+    get({ url: url }).then((res) => {
+      if (isNotEmptyArray(res)) {
+        if (state?.estimateOption) {
+          res.map((row) => {
+            let estimateOption = state?.estimateOption?.split('、')
+            row.text = false
+            estimateOption.map((row2) => {
+              if (row2 === row.code) {
+                row.text = true
+              }
+            })
+          })
+          setSpecialNoteList(res)
+        }
+      }
+    })
+  }, [state?.estimateOption])
+
   //견적일 set
   useEffect(() => {
-    let estimateDatej = dayjs(startDate).format('YYYY-MM-DD')
+    let estimateDate = dayjs(startDate).format('YYYY-MM-DD')
-    setState({ estimateDate: estimateDatej })
+    setState({ estimateDate: estimateDate })
   }, [startDate])
 
+  useEffect(() => {
+    //선택된 견적특이사항 setState
+    if (isNotEmptyArray(specialNoteList)) {
+      const liveCheckedData = specialNoteList.filter((row) => row.text === true)
+
+      const data = []
+      for (let ele of liveCheckedData) {
+        data.push(ele.code)
+      }
+
+      const newData = data.join('、')
+      setState({ estimateOption: newData })
+    }
+  }, [specialNoteList])
+
+  // 견적특이사항 remark 보여주기
+  const settingShowContent = (code, event) => {
+    setShowContentCode(code)
+    event.stopPropagation()
+  }
+
   return (
     <div className="sub-content estimate">
       <div className="sub-content-inner">
@@ -359,17 +410,47 @@ export default function Estimate({ params }) {
             {/* 견적 특이사항 코드영역시작 */}
             <div className={`estimate-check-wrap ${hidden ? 'hide' : ''}`}>
               <div className="estimate-check-inner">
-                <div className="special-note-check-wrap"></div>
+                <div className="special-note-check-wrap">
+                  {/* SpecialNoteList반복문 */}
+                  {specialNoteList.map((row) => {
+                    return (
+                      <div
+                        className="special-note-check-item"
+                        onClick={(event) => {
+                          settingShowContent(row.code, event)
+                        }}
+                      >
+                        <div className="d-check-box light">
+                          <input
+                            type="checkbox"
+                            id={row.code}
+                            checked={!!row.text}
+                            disabled={row.code === 'ATTR001' ? true : false}
+                            onChange={(event) => {
+                              setSpecialNoteList((specialNote) =>
+                                specialNote.map((temp) => (temp.code === row.code ? { ...temp, text: !temp.text } : temp)),
+                              )
+                              settingShowContent(row.code, event)
+                            }}
+                          />
+                          <label htmlFor={row.code}>{row.codeNm}</label>
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
                 {/* 견적특이사항 선택한 내용?영역시작 */}
                 <div className="calculation-estimate">
-                  <dl>
+                  {specialNoteList.map((row) => {
-                    <dt>제목11??</dt>
+                    if (row.code === showContentCode) {
-                    <dd>제목1 비고</dd>
+                      return (
-                  </dl>
+                        <dl>
-                  <dl>
+                          <dt>{row.codeNm}</dt>
-                    <dt>제목22??</dt>
+                          <dd>{row.remarks}</dd>
-                    <dd>제목2 비고</dd>
+                        </dl>
-                  </dl>
+                      )
+                    }
+                  })}
                 </div>
                 {/* 견적특이사항 선택한 내용?영역끝 */}
               </div>