From 7023543fd783ddfe63486be03bcbc510b73f2beb Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Thu, 7 Nov 2024 09:31:54 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B5=AC=EA=B8=80=20=EB=A7=B5=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=8B=A4=EC=9A=B4=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C=20=EB=B0=8F=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/api/html2canvas/route.js              |  1 -
 .../placementShape/PlacementShapeSetting.jsx  | 13 ++++--
 src/hooks/common/useRefFiles.js               | 40 +++++++++++++++++--
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/app/api/html2canvas/route.js b/src/app/api/html2canvas/route.js
index 54af611d..02731f07 100644
--- a/src/app/api/html2canvas/route.js
+++ b/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)
 
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 0ae1619f..c8dbdbca 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/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">
diff --git a/src/hooks/common/useRefFiles.js b/src/hooks/common/useRefFiles.js
index a1971f7b..1b36a109 100644
--- a/src/hooks/common/useRefFiles.js
+++ b/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,
   }
 }