refactor: 캔버스 배경 이미지 업로드 로직 수정

src/hooks/common/useRefFiles.js

@@ -1,11 +1,12 @@
 import { useEffect, useRef, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
+import fs from 'fs/promises'
 
 import { useSwal } from '@/hooks/useSwal'
 import { useAxios } from '../useAxios'
 import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom'
-import { convertDwgToPng, removeImage, writeImageBuffer } from '@/lib/fileAction'
+import { convertDwgToPng, removeImage, writeImageBuffer, readImage } from '@/lib/fileAction'
 import { useCanvas } from '@/hooks/useCanvas'
 
 export function useRefFiles() {
@@ -16,6 +17,7 @@ export function useRefFiles() {
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const queryRef = useRef(null)
   const canvas = useRecoilValue(canvasState)
+  const [currentBgImage, setCurrentBgImage] = useState(null)
 
   const { swalFire } = useSwal()
   const { get, promisePut, promiseGet, promisePost } = useAxios()
@@ -109,18 +111,30 @@ export function useRefFiles() {
    * 주소로 구글 맵 이미지 다운로드
    */
   const handleMapImageDown = async () => {
+    console.log('🚀 ~ handleMapImageDown ~ handleMapImageDown:')
     if (queryRef.current.value === '' || queryRef.current.value === null) {
       return
     }
 
-    const res = await promiseGet({
+    const res = await get({
       url: `http://localhost:3000/api/html2canvas?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
-    }).then((req, res) => {
+    })
-      console.log('handleMapImageDown', res)
+    console.log('🚀 ~ handleMapImageDown ~ res:', res)
+    const file = await readImage(res.fileNm)
+    console.log('🚀 ~ handleMapImageDown ~ file:', file)
+    setCurrentBgImage(file)
+    // handleBackImageLoadToCanvas(`plan-images/${currentCanvasPlan.id}.png`)
+    // setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: currentCanvasPlan.id, mapPositionAddress: queryRef.current.value }))
+  }
+
+  useEffect(() => {
+    if (!currentBgImage) {
+      return
+    }
+    console.log('🚀 ~ useEffect ~ currentBgImage:', currentBgImage)
     handleBackImageLoadToCanvas(`plan-images/${currentCanvasPlan.id}.png`)
     setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: currentCanvasPlan.id, mapPositionAddress: queryRef.current.value }))
-    })
+  }, [currentBgImage])
-  }
 
   /**
    * 이미지 파일 업로드

src/lib/fileAction.js

@@ -62,24 +62,29 @@ const writeImageBase64 = async (title, data) => {
 // }
 
 const writeImage = async (fileName, file) => {
+  return new Promise((resolve, reject) => {
     try {
-    await fs.readdir(FILE_PATH)
+      fs.readdir(FILE_PATH)
     } catch {
-    await fs.mkdir(FILE_PATH)
+      fs.mkdir(FILE_PATH)
     }
 
-  return fs.writeFile(`${FILE_PATH}/${fileName}.png`, file)
+    fs.writeFile(`${FILE_PATH}/${fileName}.png`, file)
+    resolve(true)
+  })
 }
 
 const readImage = async (fileName) => {
-  await fs
+  const file = await fs.readFile(`${FILE_PATH}/${fileName}`)
-    .readFile(`${FILE_PATH}/${fileName}.png`)
+  // .then((res) => {
-    .then((res) => {
+  //   console.log('readImage-then', res)
-      console.log('readImage-then', res)
+  // })
-    })
+  // .catch((e) => {
-    .catch((e) => {
+  //   console.log('readImage-catch', e)
-      console.log('readImage-catch', e)
+  // })
-    })
+  console.log('🚀 ~ readImage ~ file:', file)
+
+  return file
 }
 
 const removeImage = async (fileName) => {
@@ -90,4 +95,4 @@ const removeImage = async (fileName) => {
   }
 }
 
-export { convertDwgToPng, writeImageBase64, writeImage, removeImage }
+export { convertDwgToPng, writeImageBase64, writeImage, readImage, removeImage }