From cfefd511476e0d2cff9275795d2ce555a6aa05f6 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Sun, 9 Feb 2025 19:05:51 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=8Cfix:=20=EA=B2=AC=EC=A0=81=EC=84=9C?=
 =?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85=EB=A1=9C=EB=93=9C=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=81=AC=EB=A1=AD=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/modal/ImgLoad.jsx |  3 ++
 src/hooks/floorPlan/useImgLoader.js         | 36 +++++++++++++++------
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/floor-plan/modal/ImgLoad.jsx b/src/components/floor-plan/modal/ImgLoad.jsx
index 1c38fa40..c6af5bb8 100644
--- a/src/components/floor-plan/modal/ImgLoad.jsx
+++ b/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>
diff --git a/src/hooks/floorPlan/useImgLoader.js b/src/hooks/floorPlan/useImgLoader.js
index ceced3be..9b23d36d 100644
--- a/src/hooks/floorPlan/useImgLoader.js
+++ b/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: {
-        objectNo: currentCanvasPlan.objectNo,
-        planNo: currentCanvasPlan.planNo,
-        type,
-        canvasToPng: canvas.toDataURL('image/png').replace('data:image/png;base64,', ''),
-        coordinates: getImageCoordinates(),
-      },
+      data: formData,
     })
-    console.log('🚀 ~ handleCanvasToPng ~ res:', res)
+    console.log('🚀 ~ handleCanvasToPng ~ result:', result)
+
+    return result
   }
 
   /**