feat: 구글 맵 이미지 다운로드 및 이미지 업로드

src/app/api/html2canvas/route.js

@@ -13,7 +13,6 @@ export async function GET(req) {
   const decodeUrl = decodeURIComponent(targetUrl)
 
   const response = await fetch(decodeUrl)
-
   const data = await response.arrayBuffer()
   const buffer = Buffer.from(data)
 

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
 
 import { canvasSettingState } from '@/store/canvasAtom'
@@ -26,6 +26,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
   const {
     refImage,
+    queryRef,
     setRefImage,
     handleRefFile,
     refFileMethod,
@@ -34,6 +35,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     mapPositionAddress,
     setMapPositionAddress,
     handleFileDelete,
+    handleMapImageDown,
   } = useRefFiles()
   const { currentCanvasPlan } = usePlan()
 
@@ -557,14 +559,17 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           type="text"
                           className="input-origin al-l mr10"
                           placeholder={'住所入力'}
+                          ref={queryRef}
                           value={mapPositionAddress}
                           onChange={(e) => setMapPositionAddress(e.target.value)}
                         />
                         <div className="img-edit-wrap mr5">
-                          <button className="img-edit-btn">完了</button>
+                          <button className="img-edit-btn" onClick={handleMapImageDown}>
+                            完了
+                          </button>
                         </div>
-                        <span className="check-address fail"></span>
-                        <span className="check-address success"></span>
+                        {mapPositionAddress && <span className="check-address fail"></span>}
+                        {/* <span className="check-address success"></span> */}
                       </div>
                     )}
                     {/* <div className="flex-box">

src/hooks/common/useRefFiles.js

@@ -1,16 +1,23 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
+import { useRecoilState } from 'recoil'
+import { v4 as uuidv4 } from 'uuid'
+
 import { useSwal } from '@/hooks/useSwal'
-import { usePlan } from '@/hooks/usePlan'
 import { convertDwgToPng } from '@/lib/cadAction'
+import { useAxios } from '../useAxios'
+import { currentCanvasPlanState } from '@/store/canvasAtom'
 
 export default function useRefFiles() {
   const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
   const [refImage, setRefImage] = useState(null)
   const [refFileMethod, setRefFileMethod] = useState('1')
   const [mapPositionAddress, setMapPositionAddress] = useState('')
+  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
+  const queryRef = useRef(null)
 
   const { swalFire } = useSwal()
-  const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
+  const { get, promisePut } = useAxios()
+  // const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
 
   /**
    * 파일 불러오기 버튼 컨트롤
@@ -37,6 +44,31 @@ export default function useRefFiles() {
     setCurrentCanvasPlan((prev) => ({ ...prev, mapPositionAddress: null }))
   }
 
+  /**
+   * 주소로 구글 맵 이미지 다운로드
+   */
+  const handleMapImageDown = async () => {
+    if (queryRef.current.value === '' || queryRef.current.value === null) {
+      return
+    }
+
+    const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryRef.current.value}&fileNm=${uuidv4()}&zoom=20` })
+    console.log('🚀 ~ handleMapImageDown ~ res:', res)
+    setCurrentCanvasPlan((prev) => ({ ...prev, bgFileName: res.fileNm, mapPositionAddress: queryRef.current.value }))
+  }
+
+  /**
+   * 현재 플랜이 변경되면 플랜 상태 저장
+   */
+  useEffect(() => {
+    const handleCurrentPlan = async () => {
+      await promisePut({ url: '/api/canvas-management/canvas-statuses', data: currentCanvasPlan }).then((res) => {
+        console.log('🚀 ~ awaitpromisePut ~ res:', res)
+      })
+    }
+    handleCurrentPlan()
+  }, [currentCanvasPlan])
+
   /**
    * RefFile이 캐드 도면 파일일 경우 변환하여 이미지로 저장
    * @param {*} file
@@ -65,6 +97,7 @@ export default function useRefFiles() {
 
   return {
     refImage,
+    queryRef,
     setRefImage,
     handleRefFile,
     refFileMethod,
@@ -74,5 +107,6 @@ export default function useRefFiles() {
     handleRefFileMethod,
     handleFileDelete,
     handleAddressDelete,
+    handleMapImageDown,
   }
 }