feat: Add EstimateFileUploader

src/app/floor-plan/page.jsx

@@ -1,5 +1,4 @@
 import CanvasFrame from '@/components/floor-plan/CanvasFrame'
-import FloorPlan from '@/components/floor-plan/FloorPlan'
 
 export default function FloorPlanPage() {
   return (

src/components/estimate/Estimate.jsx

@@ -1,20 +1,31 @@
 'use client'
+
 import { useEffect, useState, useRef } from 'react'
-import { useMessage } from '@/hooks/useMessage'
-import SingleDatePicker from '../common/datepicker/SingleDatePicker'
 import { useRecoilValue } from 'recoil'
 import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
-import { Button } from '@nextui-org/react'
 import { sessionStore } from '@/store/commonAtom'
+import { useMessage } from '@/hooks/useMessage'
+import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
+import SingleDatePicker from '../common/datepicker/SingleDatePicker'
+import EstimateFileUploader from './EstimateFileUploader'
 
 export default function Estimate({ params }) {
-  const sessionState = useRecoilValue(sessionStore)
-  const { getMessage } = useMessage()
-  const objectRecoil = useRecoilValue(floorPlanObjectState)
   const [objectNo, setObjectNo] = useState('')
-  const fileInputRef = useRef(null)
   const [files, setFiles] = useState([]) //첨부파일
-  const fileId = useRef(0)
+
+  const sessionState = useRecoilValue(sessionStore)
+  const objectRecoil = useRecoilValue(floorPlanObjectState)
+  const { getMessage } = useMessage()
+
+  const { setMenuNumber } = useCanvasMenu()
+
+  const fileUploadProps = {
+    // objectNo: '',
+    // planNo: params.pid,
+    // category: '10',
+    uploadFiles: files,
+    setUploadFiles: setFiles,
+  }
 
   useEffect(() => {
     setObjectNo(objectRecoil.floorPlanObjectNo)
@@ -28,31 +39,9 @@ export default function Estimate({ params }) {
     }
   }, [objectNo])
 
-  const handleButtonClick = () => {
-    fileInputRef.current.click()
-  }
-
-  const onChangeFiles = (e) => {
-    // e.preventDefault()
-    // e.persist()
-    // console.log('파일::', e.target.files[0])
-    // console.log('파일::', e.target.files)
-    // let selectFiles = []
-    // let tempFiles = files
-    // selectFiles = e.target.files
-    // for (const file of selectFiles) {
-    //   tempFiles = [
-    //     ...tempFiles,
-    //     {
-    //       id: fileId.current++,
-    //       object: file,
-    //     },
-    //   ]
-    // }
-    // setFiles(tempFiles)
-    // const formData = new FormData()
-    // formData.append('file', e.target.files[0])
-  }
+  useEffect(() => {
+    setMenuNumber(5)
+  }, [])
 
   return (
     <div className="sub-content estimate">
@@ -210,7 +199,8 @@ export default function Estimate({ params }) {
                   <tr>
                     <th>{getMessage('estimate.detail.header.fileList1')}</th>
                     <td>
-                      <div className="drag-file-box">
+                      <EstimateFileUploader {...fileUploadProps} />
+                      {/* <div className="drag-file-box">
                         <div className="btn-area">
                           <Button type="button" className="btn-origin grey" onClick={handleButtonClick}>
                             {getMessage('estimate.detail.fileList.btn')}
@@ -228,7 +218,7 @@ export default function Estimate({ params }) {
                           <p>Drag file here</p>
                           <ul className="file-list"></ul>
                         </div>
-                      </div>
+                      </div> */}
                     </td>
                   </tr>
                 </tbody>

src/components/estimate/EstimateFileUploader.jsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { useContext, 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()
+    fileInputRef.current.click()
+  }
+
+  const onChangeFiles = async (e) => {
+    // const formData = new FormData()
+    // formData.append('file', e.target.files[0])
+    // formData.append('objectNo', objectNo) // 받아와야 하는 값
+    // formData.append('planNo', planNo) // 받아와야 하는 값
+    // formData.append('category', category) // 받아와야 하는 값
+    // formData.append('userId', session.userId)
+
+    // 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() }])
+  }
+
+  const deleteFile = (id) => {
+    setUploadFiles(uploadFiles.filter((file) => file.id !== id))
+  }
+
+  return (
+    <div className="drag-file-box">
+      <div className="btn-area">
+        <label className="file-upload" htmlFor="img" onClick={handleButtonClick}>
+          {getMessage('estimate.detail.fileList.btn')}
+        </label>
+        <input type="file" name="file" id="img" ref={fileInputRef} style={{ display: 'none' }} onChange={(e) => onChangeFiles(e)} />
+      </div>
+      <div className="drag-file-area">
+        <p>Drag file here</p>
+        <ul className="file-list">
+          {uploadFiles.length > 0 &&
+            uploadFiles.map((file) => (
+              <li className="file-item" key={file.id}>
+                <span>
+                  {file.data.name} <button className="delete" onClick={() => deleteFile(file.id)}></button>
+                </span>
+              </li>
+            ))}
+        </ul>
+      </div>
+    </div>
+  )
+}

src/components/floor-plan/FloorPlan.jsx

@@ -26,10 +26,6 @@ export default function FloorPlan({ children }) {
     fetchSettings()
   }, [objectNo])
 
-  useEffect(() => {
-    setMenuNumber(1)
-  }, [])
-
   return (
     <>
       <div className="canvas-wrap">