📌fix: 이미지 로더 사용 훅 별도 작성 및 함수 이동

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

@@ -11,12 +11,13 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useCanvas } from '@/hooks/useCanvas'
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
+import { useImgLoader } from '@/hooks/floorPlan/useImgLoader'
 // import { initImageLoaderPopup } from '@/lib/planAction'
 
 export default function ImgLoad() {
   const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
   const { getMessage } = useMessage()
-  const { canvas, handleCanvasToPng } = useCanvas()
+  const { canvas } = useCanvas()
   const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
   const {
     refImage,
@@ -32,6 +33,7 @@ export default function ImgLoad() {
     handleMapImageDown,
     handleAddressDelete,
   } = useRefFiles()
+  const { handleCanvasToPng } = useImgLoader()
 
   const handleModal = () => {
     setFloorPlanState({ ...floorPlanState, refFileModalOpen: false, toggleRotate: false })
@@ -151,6 +153,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(1)}></button>
           </div>
         </div>
       </div>

src/hooks/floorPlan/useImgLoader.js

@@ -0,0 +1,70 @@
+import { useRecoilValue } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+import { useCanvas } from '../useCanvas'
+import { useAxios } from '../useAxios'
+import { usePlan } from '../usePlan'
+import { POLYGON_TYPE } from '@/common/common'
+
+/**
+ * 이미지 로더 hook
+ * @returns {function} handleCanvasToPng
+ */
+export function useImgLoader() {
+  const canvas = useRecoilValue(canvasState)
+  const { removeMouseLines } = useCanvas()
+  const { currentCanvasPlan } = usePlan()
+  const { post } = useAxios()
+
+  /**
+   * 이미지 저장 시 왼쪽 위, 오른쪽 아래 좌표
+   * return [start, end]
+   */
+  const getImageCoordinates = () => {
+    const margin = 20
+
+    const objects = canvas.getObjects().filter((obj) => [POLYGON_TYPE.ROOF, 'lengthText', 'arrow'].includes(obj.name))
+
+    const minX = objects.reduce((acc, cur) => (cur.left < acc ? cur.left : acc), objects[0].left)
+    const minY = objects.reduce((acc, cur) => (cur.top < acc ? cur.top : acc), objects[0].top)
+
+    const maxX = objects.reduce((acc, cur) => (cur.left + cur.width > acc ? cur.left + cur.width : acc), 0)
+    const maxY = objects.reduce((acc, cur) => (cur.top + cur.height > acc ? cur.top + cur.height : acc), 0)
+    return [
+      { x: minX - margin, y: minY - margin },
+      { x: maxX + margin, y: maxY + margin },
+    ]
+  }
+
+  /**
+   * 캔버스를 이미지로 저장
+   * @param {integer} type 1: 모듈만 있는 상태, 2: 가대까지 올린 상태
+   */
+  const handleCanvasToPng = async (type) => {
+    removeMouseLines()
+
+    canvas.getObjects('image').forEach((obj) => {
+      if (obj.getSrc) {
+        const img = new Image()
+        img.crossOrigin = 'anonymous'
+        img.src = obj.getSrc()
+        obj.setElement(img)
+      }
+    })
+
+    canvas.renderAll()
+
+    const res = 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(),
+      },
+    })
+    console.log('🚀 ~ handleCanvasToPng ~ res:', res)
+  }
+
+  return { handleCanvasToPng }
+}

src/hooks/useCanvas.js

@@ -24,9 +24,7 @@ export function useCanvas(id) {
   const [canvasSize] = useRecoilState(canvasSizeState)
   const [fontSize] = useRecoilState(fontSizeState)
   const { setCanvasForEvent, attachDefaultEventOnCanvas } = useCanvasEvent()
-  const { post } = useAxios()
   const {} = useFont()
-  const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
 
   /**
    * 처음 셋팅
@@ -544,70 +542,6 @@ export function useCanvas(id) {
     canvas.clear()
   }
 
-  /**
-   * 이미지 저장 시 왼쪽 위, 오른쪽 아래 좌표
-   * return [start, end]
-   */
-  const getImageCoordinates = () => {
-    const margin = 20
-
-    const objects = canvas.getObjects().filter((obj) => [POLYGON_TYPE.ROOF, 'lengthText', 'arrow'].includes(obj.name))
-
-    const minX = objects.reduce((acc, cur) => (cur.left < acc ? cur.left : acc), objects[0].left)
-    const minY = objects.reduce((acc, cur) => (cur.top < acc ? cur.top : acc), objects[0].top)
-
-    const maxX = objects.reduce((acc, cur) => (cur.left + cur.width > acc ? cur.left + cur.width : acc), 0)
-    const maxY = objects.reduce((acc, cur) => (cur.top + cur.height > acc ? cur.top + cur.height : acc), 0)
-    return [
-      { x: minX - margin, y: minY - margin },
-      { x: maxX + margin, y: maxY + margin },
-    ]
-  }
-
-  /**
-   * 캔버스를 이미지로 저장
-   * @param {integer} type 1: 모듈만 있는 상태, 2: 가대까지 올린 상태
-   */
-  const handleCanvasToPng = async (type) => {
-    removeMouseLines()
-    // const currentCanvasStatus = canvas?.toDataURL('image/png').replace('data:image/png;base64,', '')
-    // const currentCanvasStatus = canvas
-    //   ?.toDataURL({
-    //     width: canvas.width,
-    //     height: canvas.height,
-    //     left: 0,
-    //     top: 0,
-    //     format: 'png',
-    //   })
-    //   .replace('data:image/png;base64,', '')
-    canvas.getObjects('image').forEach((obj) => {
-      if (obj.getSrc) {
-        const img = new Image()
-        img.crossOrigin = 'anonymous'
-        img.src = obj.getSrc()
-        obj.setElement(img)
-      }
-    })
-    canvas.renderAll()
-
-    // const dataURL = canvas.toDataURL({
-    //   format: 'png',
-    //   quality: 1,
-    // })
-
-    const res = 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(),
-      },
-    })
-    console.log('🚀 ~ handleCanvasToPng ~ res:', res)
-  }
-
   const getCurrentCanvas = () => {
     return canvas.toJSON([
       'selectable',
@@ -655,6 +589,5 @@ export function useCanvas(id) {
     handleCadImageInit,
     backImg,
     setBackImg,
-    handleCanvasToPng,
   }
 }