견적서 상세 첨부파일

src/components/estimate/Estimate.jsx

@@ -3,7 +3,6 @@
 import { useEffect, useState, useContext } from 'react'
 import { useRecoilValue } from 'recoil'
 import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
-import { SessionContext } from '@/app/SessionProvider'
 import { useMessage } from '@/hooks/useMessage'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import SingleDatePicker from '../common/datepicker/SingleDatePicker'
@@ -15,11 +14,15 @@ import dayjs from 'dayjs'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import Select from 'react-select'
 import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
+import { SessionContext } from '@/app/SessionProvider'
 
 export default function Estimate({ params }) {
+  const { session } = useContext(SessionContext)
   const [objectNo, setObjectNo] = useState('') //물건번호
   const [planNo, setPlanNo] = useState('') //플랜번호
+
   const [files, setFiles] = useState([]) // 보내는 첨부파일
+  const [originFiles, setOriginFiles] = useState([]) //기존 첨부파일
 
   const [showContentCode, setShowContentCode] = useState('ATTR001')
 
@@ -36,7 +39,6 @@ export default function Estimate({ params }) {
     setStartDate,
   }
 
-  const { session } = useContext(SessionContext)
   const objectRecoil = useRecoilValue(floorPlanObjectState)
 
   //견적서 상세데이터
@@ -48,16 +50,14 @@ export default function Estimate({ params }) {
   const [specialNoteList, setSpecialNoteList] = useState([])
 
   const globalLocaleState = useRecoilValue(globalLocaleStore)
-  const { get, post } = useAxios(globalLocaleState)
+  const { get, promisePost } = useAxios(globalLocaleState)
 
   const { getMessage } = useMessage()
 
   const { setMenuNumber } = useCanvasMenu()
 
+  //새로 추가한 첨부파일 props
   const fileUploadProps = {
-    // objectNo: '',
-    // planNo: params.pid,
-    // category: '10',
     uploadFiles: files,
     setUploadFiles: setFiles,
   }
@@ -123,24 +123,42 @@ export default function Estimate({ params }) {
     event.stopPropagation()
   }
 
-  // 첨부파일 state에 넣기
+  // 추가한 첨부파일 state에 넣기
   useEffect(() => {
-    // console.log(files)
-    if (files.length > 0) {
+    if (isNotEmptyArray(files)) {
       files.map((row) => {
         setState({ fileList: row.data })
       })
     } else {
-      console.log('첨부파일 없음')
       setState({ fileList: [] })
     }
   }, [files])
 
+  //상세에서 내려온 첨부파일 set 만들기
+  useEffect(() => {
+    if (isNotEmptyArray(state.fileList)) {
+      setOriginFiles(state.fileList)
+    }
+  }, [state?.fileList])
+
+  // 기존첨부파일 삭제
+  const deleteOriginFile = async (objectNo, no) => {
+    const delParams = {
+      userId: session.userId,
+      objectNo: objectNo,
+      no: no,
+    }
+    await promisePost({ url: 'api/file/fileDelete', data: delParams }).then((res) => {
+      if (res.status === 204) {
+        setOriginFiles(originFiles.filter((file) => file.objectNo === objectNo && file.no !== no))
+      }
+    })
+  }
+
   return (
     <div className="sub-content estimate">
       <div className="sub-content-inner">
         {/* 물건번호, 견적서번호, 등록일, 변경일시 시작 */}
-        {/* <form onSubmit={handleSubmit(onValid)}> */}
         <div className="sub-content-box">
           <div className="sub-table-box">
             <div className="estimate-list-wrap one">
@@ -395,6 +413,23 @@ export default function Estimate({ params }) {
                 <tbody>
                   <tr>
                     <th>{getMessage('estimate.detail.header.fileList2')}</th>
+                    <td>
+                      <div className="drag-file-box">
+                        <ul className="file-list">
+                          {isNotEmptyArray(originFiles) &&
+                            originFiles.map((originFile) => {
+                              return (
+                                <li className="file-item">
+                                  <span>
+                                    {originFile.faileName}
+                                    <button className="delete" onClick={() => deleteOriginFile(originFile.objectNo, originFile.no)}></button>
+                                  </span>
+                                </li>
+                              )
+                            })}
+                        </ul>
+                      </div>
+                    </td>
                   </tr>
                 </tbody>
               </table>
@@ -444,7 +479,7 @@ export default function Estimate({ params }) {
                     )
                   })}
                 </div>
-                {/* 견적특이사항 선택한 내용?영역시작 */}
+                {/* 견적특이사항 선택한 내용 영역시작 */}
                 <div className="calculation-estimate">
                   {specialNoteList.map((row) => {
                     if (row.code === showContentCode) {
@@ -575,7 +610,6 @@ export default function Estimate({ params }) {
           </div>
         </div>
         {/* 기본정보끝 */}
-        {/* </form> */}
       </div>
     </div>
   )