📌fix: 견적서 이미지 업로드 및 이미지 크롭 추가

src/components/floor-plan/modal/ImgLoad.jsx

@@ -9,6 +9,7 @@ import { usePlan } from '@/hooks/usePlan'
 
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useCanvas } from '@/hooks/useCanvas'
+import { useImgLoader } from '@/hooks/floorPlan/useImgLoader'
 // import { initImageLoaderPopup } from '@/lib/planAction'
 
 export default function ImgLoad() {
@@ -30,6 +31,7 @@ export default function ImgLoad() {
     handleMapImageDown,
     handleAddressDelete,
   } = useRefFiles()
+  const { handleCanvasToPng } = useImgLoader()
 
   const handleModal = () => {
     setFloorPlanState({ ...floorPlanState, refFileModalOpen: false, toggleRotate: false })
@@ -149,6 +151,7 @@ export default function ImgLoad() {
             <button className="btn-frame modal act" onClick={handleModal}>
               {getMessage('common.finish')}
             </button>
+            {/* <button className="btn-frame modal act" onClick={() => handleCanvasToPng(2)}></button> */}
           </div>
         </div>
       </div>

src/hooks/floorPlan/useImgLoader.js

@@ -52,17 +52,35 @@ export function useImgLoader() {
 
     canvas.renderAll()
 
-    const res = await post({
+    const formData = new FormData()
+    const dataUrl = canvas.toDataURL('image/png')
+    const blobBin = atob(dataUrl.split(',')[1])
+    const array = []
+    for (let i = 0; i < blobBin.length; i++) {
+      array.push(blobBin.charCodeAt(i))
+    }
+    const file = new Blob([new Uint8Array(array)], { type: 'image/png' })
+    formData.append('file', file, 'canvas.png')
+    formData.append('objectNo', currentCanvasPlan.objectNo)
+    formData.append('planNo', currentCanvasPlan.planNo)
+    formData.append('type', type)
+    // formData.append('coordinates', getImageCoordinates())
+    const positionObj = getImageCoordinates()
+    console.log('🚀 ~ handleCanvasToPng ~ positionObj:', positionObj)
+    formData.append('width', Math.round(positionObj[1].x - positionObj[0].x - 350))
+    formData.append('height', Math.round(positionObj[1].y - positionObj[0].y - 100))
+    formData.append('left', Math.round(positionObj[0].x))
+    formData.append('top', Math.round(positionObj[0].y))
+    console.log('🚀 ~ handleCanvasToPng ~ formData:', formData)
+
+    // 이미지 크롭 요청
+    const result = await post({
       url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/canvas`,
-      data: {
+      data: formData,
-        objectNo: currentCanvasPlan.objectNo,
-        planNo: currentCanvasPlan.planNo,
-        type,
-        canvasToPng: canvas.toDataURL('image/png').replace('data:image/png;base64,', ''),
-        coordinates: getImageCoordinates(),
-      },
     })
-    console.log('🚀 ~ handleCanvasToPng ~ res:', res)
+    console.log('🚀 ~ handleCanvasToPng ~ result:', result)
+
+    return result
   }
 
   /**