Refactor package.json to add react-icons dependency

package.json

@@ -25,6 +25,7 @@
     "react-colorful": "^5.6.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18",
+    "react-icons": "^5.3.0",
     "react-responsive-modal": "^6.4.2",
     "react-toastify": "^10.0.5",
     "recoil": "^0.7.7",

src/app/api/html2canvas/route.js

@@ -8,7 +8,8 @@ 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 zoom = req.nextUrl.searchParams.get('zoom')
+  const targetUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${q}&zoom=${zoom}&maptype=satellite&size=640x640&scale=1&key=AIzaSyDO7nVR1N_D2tKy60hgGFavpLaXkHpiHpc`
   const decodeUrl = decodeURIComponent(targetUrl)
 
   const response = await fetch(decodeUrl)

src/components/Playground.jsx

@@ -3,6 +3,8 @@
 import { useRef, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
+import { FaAnglesUp } from 'react-icons/fa6'
+import { FaAnglesDown } from 'react-icons/fa6'
 
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
@@ -15,6 +17,7 @@ import ColorPicker from './common/color-picker/ColorPicker'
 import { toastUp } from '@/hooks/useToast'
 
 import styles from './playground.module.css'
+import Image from 'next/image'
 
 export default function Playground() {
   const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
@@ -23,6 +26,7 @@ export default function Playground() {
   const [googleMapFileName, setGoogleMapFileName] = useRecoilState(googleMapFileNameState)
   const fileRef = useRef(null)
   const queryRef = useRef(null)
+  const [zoom, setZoom] = useState(20)
   const { get, promisePost } = useAxios()
   const testVar = process.env.NEXT_PUBLIC_TEST
   const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
@@ -59,13 +63,24 @@ export default function Playground() {
       })
   }
 
-  const handleDownImage = async () => {
-    setUseGoogleMapFile(true)
+  const handleDownImage = async (fileName = '') => {
+    const fileNm = fileName === '' ? uuidv4() : fileName
     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()}` })
+    const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryString}&fileNm=${fileNm}&zoom=${zoom}` })
     console.log('res', res)
     setGoogleMapFileName(res.fileNm)
     toastUp({ message: '이미지 저장 완료', type: 'success' })
+    setUseGoogleMapFile(true)
+  }
+
+  const handleZoom = async (type) => {
+    if (type === 'up') {
+      setZoom((prevState) => prevState + 1)
+    } else {
+      setZoom((prevState) => prevState - 1)
+    }
+
+    await handleDownImage()
   }
 
   const data = [
@@ -123,6 +138,18 @@ export default function Playground() {
           <div>
             <Button onClick={handleDownImage}>Google map Download to Image</Button>
           </div>
+          {useGoogleMapFile && (
+            <>
+              <div className="my-2">
+                <p className="text-lg">Zoom Controller : {zoom}</p>
+                <Button startContent={<FaAnglesUp />} className="mx-2" onClick={() => handleZoom('up')}></Button>
+                <Button startContent={<FaAnglesDown />} className="mx-2" onClick={() => handleZoom('down')}></Button>
+              </div>
+              <div className="my-2">
+                <Image src={`/mapImages/${googleMapFileName}`} width={640} height={640} />
+              </div>
+            </>
+          )}
         </div>
       </div>
     </>

yarn.lock

@@ -5515,6 +5515,11 @@ react-dom@^18:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-icons@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.3.0.tgz#ccad07a30aebd40a89f8cfa7d82e466019203f1c"
+  integrity sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"