견적서 첨부파일 멀티

src/components/estimate/Estimate.jsx

@@ -25,7 +25,6 @@ export default function Estimate({ params }) {
   const [uniqueData, setUniqueData] = useState([])
   const [handlePricingFlag, setHandlePricingFlag] = useState(false)
   const [specialNoteFirstFlg, setSpecialNoteFirstFlg] = useState(false)
-  const fixedKey = 'itemKey'
   const [itemChangeYn, setItemChangeYn] = useState(false)
   const { session } = useContext(SessionContext)
   const [objectNo, setObjectNo] = useState('') //물건번호
@@ -1193,7 +1192,6 @@ export default function Estimate({ params }) {
                             {originFiles.map((originFile) => {
                               return (
                                 <li className="file-item" key={originFile.no}>
-                                  {/* <li className="file-item" key={uuidv4()}> */}
                                   <div className="file-item-wrap">
                                     <span
                                       style={{ display: originFile.delFlg === '0' ? '' : 'none' }}
@@ -1256,7 +1254,6 @@ export default function Estimate({ params }) {
                   {specialNoteList.length > 0 &&
                     specialNoteList.map((row) => {
                       return (
-                        // <div key={uuidv4()} className="special-note-check-item">
                         <div key={row.code} className="special-note-check-item">
                           <div className="special-note-check-box">
                             <div className="d-check-box light">

src/components/estimate/EstimateFileUploader.jsx

@@ -1,14 +1,12 @@
 'use client'
 
-import { useContext, useRef } from 'react'
+import { useRef } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 import { useMessage } from '@/hooks/useMessage'
-import { SessionContext } from '@/app/SessionProvider'
 
 export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
   const fileInputRef = useRef(null)
   const { getMessage } = useMessage()
-  const { session } = useContext(SessionContext)
 
   const handleButtonClick = (e) => {
     e.preventDefault()
@@ -20,13 +18,32 @@ export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
       return
     }
 
-    const { files } = e.target
+    const fileList = []
-    const file = files[0]
+    let passFlag = true
-    const fileType = file.type
+    Array.from(e.target.files).forEach((file) => {
-    if (!fileType.includes('image')) {
+      let fileType = file.type
-      return alert(getMessage('estimate.detail.fileList.extCheck'))
+      if (!fileType.includes('image')) {
+        passFlag = false
+      } else {
+        fileList.push({ data: file, id: uuidv4() })
+      }
+    })
+
+    if (!passFlag) {
+      alert(getMessage('estimate.detail.fileList.extCheck'))
     }
 
+    // const { files } = e.target
+    // const file = files[0]
+    // const fileType = file.type
+    // if (!fileType.includes('image')) {
+    //   return alert(getMessage('estimate.detail.fileList.extCheck'))
+    // }
+
+    // setUploadFiles([...uploadFiles, { data: e.target.files[0], id: uuidv4() }])
+    //다중으로 변경
+    setUploadFiles([...uploadFiles, ...fileList])
+    e.target.value = ''
     // const formData = new FormData()
     // formData.append('file', e.target.files[0])
     // formData.append('objectNo', objectNo) // 받아와야 하는 값
@@ -37,8 +54,6 @@ export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
     // await promisePost({ url: '/api/file/fileUpload', data: formData }).then((res) => {
     //   if (res.data > 0) setUploadFiles([...files, { name: e.target.files[0].name, id: uuidv4() }])
     // })
-    setUploadFiles([...uploadFiles, { data: e.target.files[0], id: uuidv4() }])
-    e.target.value = ''
   }
 
   const deleteFile = (id) => {
@@ -49,9 +64,21 @@ export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
     e.preventDefault()
     e.stopPropagation()
     const fileList = []
+    let passFlag = true
+
     Array.from(e.dataTransfer.files).forEach((file) => {
-      fileList.push({ data: file, id: uuidv4() })
+      let fileType = file.type
+      if (!fileType.includes('image')) {
+        passFlag = false
+      } else {
+        fileList.push({ data: file, id: uuidv4() })
+      }
     })
+
+    if (!passFlag) {
+      alert(getMessage('estimate.detail.fileList.extCheck'))
+    }
+
     setUploadFiles([...uploadFiles, ...fileList])
   }
 
@@ -76,7 +103,16 @@ export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
         <label className="file-upload" htmlFor="img" onClick={handleButtonClick}>
           {getMessage('estimate.detail.fileList.btn')}
         </label>
-        <input type="file" name="file" id="img" accept="image/*" ref={fileInputRef} style={{ display: 'none' }} onChange={(e) => onChangeFiles(e)} />
+        <input
+          type="file"
+          multiple
+          name="file"
+          id="img"
+          accept="image/*"
+          ref={fileInputRef}
+          style={{ display: 'none' }}
+          onChange={(e) => onChangeFiles(e)}
+        />
       </div>
       <div
         className="drag-file-area"

src/hooks/floorPlan/estimate/useEstimateController.js

@@ -1,13 +1,14 @@
 import { useAxios } from '@/hooks/useAxios'
-import { useContext, useEffect, useReducer, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { estimateState, floorPlanObjectState } from '@/store/floorPlanObjectAtom'
-import { isObjectNotEmpty, isEmptyArray, isNotEmptyArray } from '@/util/common-utils'
+import { isObjectNotEmpty, isEmptyArray } from '@/util/common-utils'
 import { SessionContext } from '@/app/SessionProvider'
 import { useMessage } from '@/hooks/useMessage'
 import { useRouter } from 'next/navigation'
 import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
+import { QcastContext } from '@/app/QcastProvider'
 
 // Constants
 const ESTIMATE_API_ENDPOINT = '/api/estimate' // API 엔드포인트 정의
@@ -19,7 +20,7 @@ const updateItemInList = (itemList, dispOrder, updates) => {
 
 export const useEstimateController = (planNo) => {
   const [fileList, setFileList] = useState([])
-  const [deleteFileList, setDeleteFileList] = useState([])
+  const { setIsGlobalLoading } = useContext(QcastContext)
 
   const router = useRouter()
   const { session } = useContext(SessionContext)
@@ -52,6 +53,7 @@ export const useEstimateController = (planNo) => {
   const fetchSetting = async (objectNo, planNo) => {
     try {
       await promiseGet({ url: `/api/estimate/${objectNo}/${planNo}/detail` }).then((res) => {
+        setIsGlobalLoading(true)
         if (res.status === 200) {
           if (isObjectNotEmpty(res.data)) {
             if (res.data.itemList.length > 0) {
@@ -72,9 +74,11 @@ export const useEstimateController = (planNo) => {
         }
       })
       setIsLoading(true)
+      setIsGlobalLoading(false)
     } catch (error) {
       console.error('견적서 상세조회 Error: ', error)
       setIsLoading(true)
+      setIsGlobalLoading(false)
     }
   }
 
@@ -354,15 +358,16 @@ export const useEstimateController = (planNo) => {
     // return
     try {
       await promisePost({ url: `${ESTIMATE_API_ENDPOINT}/save-estimate`, data: estimateData }).then((res) => {
+        setIsGlobalLoading(true)
         if (res.status === 201) {
           estimateData.newFileList = []
-          // estimateData.originFiles = []
           alert(getMessage('estimate.detail.save.alertMsg'))
           //어디로 보낼지
           fetchSetting(objectRecoil.floorPlanObjectNo, estimateData.planNo)
         }
       })
     } catch (e) {
+      setIsGlobalLoading(false)
       console.log('error::::::::::::', e.response.data.message)
     }
   }

src/locales/ja.json

@@ -840,7 +840,7 @@
   "estimate.detail.fileFlg": "後日資料提出",
   "estimate.detail.header.fileList1": "ファイル添付",
   "estimate.detail.fileList.btn": "ファイル選択",
-  "estimate.detail.fileList.extCheck": "そのファイルはイメージファイルではありません",
+  "estimate.detail.fileList.extCheck": "画像ファイルのみ添付可能.",
   "estimate.detail.header.fileList2": "添付ファイル一覧",
   "estimate.detail.fileList2.btn.return": "復元",
   "estimate.detail.header.specialEstimate": "見積もりの具体的な",

src/locales/ko.json

@@ -850,7 +850,7 @@
   "estimate.detail.fileFlg": "후일자료제출",
   "estimate.detail.header.fileList1": "파일첨부",
   "estimate.detail.fileList.btn": "파일선택",
-  "estimate.detail.fileList.extCheck": "해당 파일은 이미지 파일이 아닙니다",
+  "estimate.detail.fileList.extCheck": "이미지 파일만 첨부 가능합니다.",
   "estimate.detail.header.fileList2": "첨부파일 목록",
   "estimate.detail.fileList2.btn.return": "복원",
   "estimate.detail.header.specialEstimate": "견적특이사항",