물건현황 -> 견적서 물건번호 리코일

src/app/floor-plan/estimate/[mid]/[pid]/page.jsx

@@ -1,9 +1,12 @@
 import Estimate from '@/components/estimate/Estimate'
 
-export default function EstimatePage() {
+export default function EstimatePage({ params }) {
+  //floor-plan/estimate/mid/pid
+  //mid :5 견적탭
+  //pid : 넘어온 플랜번호
   return (
     <>
-      <Estimate />
+      <Estimate params={params} />
     </>
   )
 }

src/components/estimate/Estimate.jsx

@@ -1,14 +1,59 @@
 'use client'
-import { useEffect, useState } from 'react'
+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'
 
-export default function Estimate() {
+export default function Estimate({ params }) {
+  const sessionState = useRecoilValue(sessionStore)
   const { getMessage } = useMessage()
   const objectRecoil = useRecoilValue(floorPlanObjectState)
-  console.log('견적서화면이군요', objectRecoil.floorPlanObjectNo)
+  const [objectNo, setObjectNo] = useState('')
+  const fileInputRef = useRef(null)
+  const [files, setFiles] = useState([]) //첨부파일
+  const fileId = useRef(0)
+
+  useEffect(() => {
+    setObjectNo(objectRecoil.floorPlanObjectNo)
+  }, [objectRecoil])
+
+  useEffect(() => {
+    if (objectNo) {
+      //Q101X278191023001
+      console.log('세션정보::::', sessionState)
+      //상세API호출
+    }
+  }, [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])
+  }
+
   return (
     <div className="sub-content estimate">
       <div className="sub-content-inner">
@@ -18,7 +63,9 @@ export default function Estimate() {
             <div className="estimate-list-wrap one">
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('estimate.detail.objectNo')}</div>
-                <div className="estimate-name">RX524231020006 (Plan No: 1)</div>
+                <div className="estimate-name">
+                  {objectNo} (Plan No: {params.pid})
+                </div>
               </div>
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('estimate.detail.estimateNo')}</div>
@@ -165,7 +212,17 @@ export default function Estimate() {
                     <td>
                       <div className="drag-file-box">
                         <div className="btn-area">
-                          <button className="btn-origin grey">{getMessage('estimate.detail.fileList.btn')}</button>
+                          <Button type="button" className="btn-origin grey" onClick={handleButtonClick}>
+                            {getMessage('estimate.detail.fileList.btn')}
+                          </Button>
+                          <input
+                            type="file"
+                            id="fileUpload"
+                            name="fileUpload"
+                            ref={fileInputRef}
+                            onChange={onChangeFiles}
+                            style={{ display: 'none' }}
+                          />
                         </div>
                         <div className="drag-file-area">
                           <p>Drag file here</p>

src/components/management/StuffDetail.jsx

@@ -262,7 +262,7 @@ export default function StuffDetail() {
                   onClick={() => {
                     //mid:5(견적서), /pid:플랜번호
                     setFloorPlanObjectNo({ floorPlanObjectNo: params.data.objectNo })
-                    router.push(`/floor-plan/5/${params.data.planNo}`)
+                    router.push(`/floor-plan/estimate/5/${params.data.planNo}`)
                   }}
                 >
                   <span className="file"></span>

src/store/floorPlanObjectAtom.js

@@ -3,7 +3,7 @@ import { v1 } from 'uuid'
 export const floorPlanObjectState = atom({
   key: `floorPlanObjectState/${v1()}`,
   default: {
-    objectNo: '', //물건번호
+    floorPlanObjectNo: '', //물건번호
   },
   dangerouslyAllowMutability: true,
 })