Refactor file upload and image handling in Playground and Roof2 components

src/app/api/html2canvas/route.js

@@ -0,0 +1,28 @@
+'use server'
+
+import fs from 'fs/promises'
+
+import { NextResponse } from 'next/server'
+
+export async function GET(req) {
+  const path = 'public/mapImages'
+  const q = req.nextUrl.searchParams.get('q')
+  const fileNm = req.nextUrl.searchParams.get('fileNm')
+  const targetUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${q}&zoom=21&maptype=satellite&size=750x750&scale=2&key=AIzaSyDO7nVR1N_D2tKy60hgGFavpLaXkHpiHpc`
+  const decodeUrl = decodeURIComponent(targetUrl)
+
+  const response = await fetch(decodeUrl)
+
+  const data = await response.arrayBuffer()
+  const buffer = Buffer.from(data)
+
+  try {
+    await fs.readdir(path)
+  } catch {
+    await fs.mkdir(path)
+  } finally {
+    await fs.writeFile(`${path}/${fileNm}.png`, buffer)
+  }
+
+  return NextResponse.json({ fileNm: `${fileNm}.png` })
+}

src/components/Playground.jsx

@@ -1,25 +1,28 @@
 'use client'
 
 import { useRef, useState } from 'react'
-import { Button } from '@nextui-org/react'
-import ColorPicker from './common/color-picker/ColorPicker'
+import { useRecoilState } from 'recoil'
+import { v4 as uuidv4 } from 'uuid'
 
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
 import { convertDwgToPng } from '@/lib/cadAction'
-// import { get } from '@/lib/Axios'
+import { cadFileNameState, googleMapFileNameState, useCadFileState, useGoogleMapFileState } from '@/store/canvasAtom'
 
 import QSelect from '@/components/ui/QSelect'
+import { Button } from '@nextui-org/react'
+import ColorPicker from './common/color-picker/ColorPicker'
+import { toastUp } from '@/hooks/useToast'
 
 import styles from './playground.module.css'
-import { useRecoilState } from 'recoil'
-import { cadFileNameState, useCadFileState } from '@/store/canvasAtom'
-import { toastUp } from '@/hooks/useToast'
 
 export default function Playground() {
   const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
   const [cadFileName, setCadFileName] = useRecoilState(cadFileNameState)
+  const [useGoogleMapFile, setUseGoogleMapFile] = useRecoilState(useGoogleMapFileState)
+  const [googleMapFileName, setGoogleMapFileName] = useRecoilState(googleMapFileNameState)
   const fileRef = useRef(null)
+  const queryRef = useRef(null)
   const { get, promisePost } = useAxios()
   const testVar = process.env.NEXT_PUBLIC_TEST
   const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
@@ -56,6 +59,15 @@ export default function Playground() {
       })
   }
 
+  const handleDownImage = async () => {
+    setUseGoogleMapFile(true)
+    const queryString = queryRef.current.value === '' ? '서울시 서대문구 연세로5다길 22-3 발리빌라 3층' : queryRef.current.value
+    const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryString}&fileNm=${uuidv4()}` })
+    console.log('res', res)
+    setGoogleMapFileName(res.fileNm)
+    toastUp({ message: '이미지 저장 완료', type: 'success' })
+  }
+
   const data = [
     {
       id: 1,
@@ -99,11 +111,19 @@ export default function Playground() {
           <div className="p-4">{color}</div>
         </div>
         <div>
+          <h1 className="text-2xl">캐드 파일 이미지 사용</h1>
           <input type="file" name="file" ref={fileRef} />
           <div>
             <Button onClick={handleConvert}>Convert</Button>
           </div>
         </div>
+        <div>
+          <h1 className="text-2xl">구글 맵 이미지 사용</h1>
+          <input type="text" ref={queryRef} className="w-80 border-medium my-2" />
+          <div>
+            <Button onClick={handleDownImage}>Google map Download to Image</Button>
+          </div>
+        </div>
       </div>
     </>
   )

src/components/Roof2.jsx

@@ -16,11 +16,13 @@ import {
   currentObjectState,
   fontSizeState,
   globalCompassState,
+  googleMapFileNameState,
   roofMaterialState,
   roofState,
   sortedPolygonArray,
   templateTypeState,
   useCadFileState,
+  useGoogleMapFileState,
   wallState,
 } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
@@ -49,7 +51,7 @@ export default function Roof2(props) {
     setCanvasBackgroundWithDots,
     saveImage,
     addCanvas,
-    handleCadImageLoad,
+    handleBackImageLoadToCanvas,
     handleCadImageInit,
     backImg,
     setBackImg,
@@ -99,13 +101,18 @@ export default function Roof2(props) {
     canvas,
   }
 
+  let imgPath
   // cad 파일 업로드
   const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
   const [cadFileName, setCadFileName] = useRecoilState(cadFileNameState)
   const [cadFileComplete, setCadFileComplete] = useRecoilState(cadFileCompleteState)
-  let imgPath
   useCadFile && (imgPath = `/cadImages/${cadFileName}`)
 
+  // 구글맵 이미지 업로드
+  const [useGoogleMapFile, setUseGoogleMapFile] = useRecoilState(useGoogleMapFileState)
+  const [googleMapFileName, setGoogleMapFileName] = useRecoilState(googleMapFileNameState)
+  useGoogleMapFile && (imgPath = `/mapImages/${googleMapFileName}`)
+
   const [globalCampass, setGlobalCampass] = useRecoilState(globalCompassState)
 
   const {
@@ -157,7 +164,11 @@ export default function Roof2(props) {
 
     if (!cadFileComplete && useCadFile) {
       // cad 파일 로드
-      useCadFile && handleCadImageLoad(imgPath, canvas)
+      useCadFile && handleBackImageLoadToCanvas(imgPath, canvas)
+    }
+
+    if (useGoogleMapFile) {
+      handleBackImageLoadToCanvas(imgPath, canvas)
     }
   }, [canvas, mode])
 
@@ -812,6 +823,7 @@ export default function Roof2(props) {
                   backImg
                     .set({
                       selectable: false,
+                      opacity: 0.7,
                     })
                     .sendToBack()
                   canvas.clear()
@@ -821,7 +833,7 @@ export default function Roof2(props) {
                 }
               }}
             >
-              cad 파일 조정 완료
+              배경 이미지 조정 완료
             </Button>
             <Button className="m-1 p-2" color={`${showControl ? 'primary' : 'default'}`} onClick={handleShowController}>
               canvas 컨트롤러 {`${showControl ? '숨기기' : '보이기'}`}

src/hooks/useCanvas.js

@@ -449,7 +449,7 @@ export function useCanvas(id) {
   /**
    * cad 파일 사용시 이미지 로딩 함수
    */
-  const handleCadImageLoad = (url) => {
+  const handleBackImageLoadToCanvas = (url) => {
     console.log('image load url: ', url)
 
     fabric.Image.fromURL(url, function (img) {
@@ -485,7 +485,7 @@ export function useCanvas(id) {
     setCanvasBackgroundWithDots,
     addCanvas,
     removeMouseLines,
-    handleCadImageLoad,
+    handleBackImageLoadToCanvas,
     handleCadImageInit,
     backImg,
     setBackImg,

src/store/canvasAtom.js

@@ -145,6 +145,17 @@ export const cadFileCompleteState = atom({
   default: false,
 })
 
+export const useGoogleMapFileState = atom({
+  key: 'useGoogleMapFile',
+  default: false,
+})
+
+// 구글맵 저장 이미지 파일 이름
+export const googleMapFileNameState = atom({
+  key: 'googleMapFileName',
+  default: '',
+})
+
 export const globalCompassState = atom({
   key: 'globalCompass',
   default: 0,