📌fix: 견적서 이미지 전송기능 추가

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

@@ -11,8 +11,13 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useCanvas } from '@/hooks/useCanvas'
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
+import { initImageLoaderPopup } from '@/lib/planAction'
 
 export default function ImgLoad() {
+  const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
+  const { getMessage } = useMessage()
+  const { canvas, handleCanvasToPng } = useCanvas()
+  const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
   const {
     refImage,
     queryRef,
@@ -27,10 +32,6 @@ export default function ImgLoad() {
     handleMapImageDown,
     handleAddressDelete,
   } = useRefFiles()
-  const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
-  const { getMessage } = useMessage()
-  const canvas = useRecoilValue(canvasState)
-  const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
 
   const handleModal = () => {
     setFloorPlanState({ ...floorPlanState, refFileModalOpen: false, toggleRotate: false })
@@ -44,6 +45,9 @@ export default function ImgLoad() {
   useEffect(() => {
     console.log('🚀 ~ ImgLoad ~ floorPlanState.refFileModalOpen:', floorPlanState.refFileModalOpen)
     console.log('🚀 ~ ImgLoad ~ currentCanvasPlan:', currentCanvasPlan)
+    if (floorPlanState.refFileModalOpen) {
+      // initImageLoaderPopup({ objectNo: currentCanvasPlan.objectNo, planNo: currentCanvasPlan.planNo })
+    }
   }, [floorPlanState.refFileModalOpen])
 
   useEffect(() => {
@@ -68,9 +72,9 @@ export default function ImgLoad() {
   }, [currentCanvasPlan])
 
   return (
-    <WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }} handle=".modal">
+    <WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }}>
       <div className={`modal-pop-wrap r`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('common.input.file')}</h1>
           {/* <button className="modal-close">닫기</button> */}
         </div>

src/hooks/common/useRefFiles.js

@@ -15,8 +15,8 @@ export function useRefFiles() {
   const [currentBgImage, setCurrentBgImage] = useState(null)
   const queryRef = useRef(null)
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
-  const canvas = useRecoilValue(canvasState)
+  // const canvas = useRecoilValue(canvasState)
-  const { handleBackImageLoadToCanvas } = useCanvas()
+  const { canvas, handleBackImageLoadToCanvas } = useCanvas()
   const { swalFire } = useSwal()
   const { get, post, promisePost } = useAxios()
 
@@ -145,7 +145,11 @@ export function useRefFiles() {
     console.log('🚀 ~ useEffect ~ currentBgImage:', currentBgImage)
     // handleBackImageLoadToCanvas(`plan-images/${currentCanvasPlan.id}.png`)
     handleBackImageLoadToCanvas(currentBgImage)
-    setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: refImage?.name ?? null, mapPositionAddress: queryRef.current.value }))
+    setCurrentCanvasPlan((prev) => ({
+      ...prev,
+      bgImageName: refImage?.name ?? null,
+      mapPositionAddress: queryRef.current.value,
+    }))
   }, [currentBgImage])
 
   /**
@@ -158,7 +162,10 @@ export function useRefFiles() {
     // formData.append('fileName', currentCanvasPlan.id)
 
     // const res = await post({ url: `${process.env.NEXT_PUBLIC_API_SERVER_PATH}/api/image-upload`, data: formData })
-    const res = await post({ url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/upload`, data: formData })
+    const res = await post({
+      url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/upload`,
+      data: formData,
+    })
     console.log('🚀 ~ handleUploadImageRefFile ~ res:', res)
     // const image = await readImage(res.filePath)
     // console.log('🚀 ~ handleUploadImageRefFile ~ file:', image)
@@ -176,7 +183,10 @@ export function useRefFiles() {
 
     const res = await post({ url: converterUrl, data: formData })
     console.log('🚀 ~ handleUploadConvertRefFile ~ res:', res)
-    const result = await post({ url: `${process.env.NEXT_PUBLIC_HOST_URL}/cad/convert`, data: res })
+    const result = await post({
+      url: `${process.env.NEXT_PUBLIC_HOST_URL}/cad/convert`,
+      data: res,
+    })
     console.log('🚀 ~ handleUploadConvertRefFile ~ result:', result)
     setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${result.filePath}`)
     setRefImage(res.Files[0].FileData)
@@ -199,23 +209,6 @@ export function useRefFiles() {
     setRefFileMethod(e.target.value)
   }
 
-  /**
-   * 이미지 저장 시 왼쪽 위, 오른쪽 아래 좌표
-   * return [start, end]
-   */
-  const getImageCoordinates = () => {
-    const margin = 20
-    const minX = canvas.getObjects().reduce((acc, cur) => (cur.left < acc ? cur.left : acc), 0)
-    const minY = canvas.getObjects().reduce((acc, cur) => (cur.top < acc ? cur.top : acc), 0)
-
-    const maxX = canvas.getObjects().reduce((acc, cur) => (cur.left + cur.width > acc ? cur.left + cur.width : acc), 0)
-    const maxY = canvas.getObjects().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 },
-    ]
-  }
-
   return {
     refImage,
     queryRef,

src/hooks/useCanvas.js

@@ -13,7 +13,8 @@ import { writeImage } from '@/lib/canvas'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { useAxios } from '@/hooks/useAxios'
 import { useFont } from '@/hooks/common/useFont'
-import { OBJECT_PROTOTYPE, RELOAD_TYPE_PROTOTYPE, SAVE_KEY } from '@/common/common'
+import { OBJECT_PROTOTYPE, POLYGON_TYPE, RELOAD_TYPE_PROTOTYPE, SAVE_KEY } from '@/common/common'
+import { usePlan } from './usePlan'
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useRecoilState(canvasState)
@@ -25,6 +26,7 @@ export function useCanvas(id) {
   const { setCanvasForEvent, attachDefaultEventOnCanvas } = useCanvasEvent()
   const { post } = useAxios()
   const {} = useFont()
+  const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
 
   /**
    * 처음 셋팅
@@ -383,18 +385,18 @@ export function useCanvas(id) {
         console.log('err', err)
       })
 
-    const canvasStatus = addCanvas()
+    // const canvasStatus = addCanvas()
 
-    const patternData = {
+    // const patternData = {
-      userId: userId,
+    //   userId: userId,
-      imageName: title,
+    //   imageName: title,
-      objectNo: 'test123240822001',
+    //   objectNo: 'test123240822001',
-      canvasStatus: JSON.stringify(canvasStatus).replace(/"/g, '##'),
+    //   canvasStatus: JSON.stringify(canvasStatus).replace(/"/g, '##'),
-    }
+    // }
 
-    await post({ url: '/api/canvas-management/canvas-statuses', data: patternData })
+    // await post({ url: '/api/canvas-management/canvas-statuses', data: patternData })
 
-    setThumbnails((prev) => [...prev, { imageName: `/canvasState/${title}.png`, userId, canvasStatus: JSON.stringify(canvasStatus) }])
+    // setThumbnails((prev) => [...prev, { imageName: `/canvasState/${title}.png`, userId, canvasStatus: JSON.stringify(canvasStatus) }])
   }
 
   const handleFlip = () => {
@@ -542,6 +544,70 @@ 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',
@@ -589,5 +655,6 @@ export function useCanvas(id) {
     handleCadImageInit,
     backImg,
     setBackImg,
+    handleCanvasToPng,
   }
 }