src/app/api/image/map/route.js

@@ -1,4 +1,14 @@
 import { NextResponse } from 'next/server'
+import { S3Client, PutObjectCommand, DeleteObjectCommand } from '@aws-sdk/client-s3'
+
+const Bucket = process.env.AMPLIFY_BUCKET
+const s3 = new S3Client({
+  region: process.env.AWS_REGION,
+  credentials: {
+    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+  },
+})
 
 export async function GET(req) {
   try {
@@ -19,7 +29,7 @@ export async function GET(req) {
 
     /** 변경된 이미지를 S3에 업로드 */
     const Body = Buffer.from(data)
-    const Key = `map/${file.name}`
+    const Key = `maps/${fileNm}`
     const ContentType = 'image/png'
 
     await s3.send(
@@ -46,7 +56,7 @@ export async function GET(req) {
 export async function DELETE(req) {
   try {
     const searchParams = req.nextUrl.searchParams
-    const Key = `map/${searchParams.get('fileName')}`
+    const Key = `maps/${searchParams.get('fileName')}`
     console.log('🚀 ~ DELETE ~ Key:', Key)
 
     if (!Key) {

src/hooks/common/useRefFiles.js

@@ -142,7 +142,7 @@ export function useRefFiles() {
     //   url: `${process.env.NEXT_PUBLIC_HOST_URL}/map/convert?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
     // })
     const res = await get({
-      url: `http://localhost:3000/api/map/upload?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
+      url: `http://localhost:3000/api/image/map?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
     })
     console.log('🚀 ~ handleMapImageDown ~ res:', res)
     // setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`)
@@ -160,16 +160,25 @@ export function useRefFiles() {
    * 배경 이미지 로드를 위한 세팅
    */
   useEffect(() => {
-    if (!currentBgImage) {
-      return
-    }
+    // if (!currentBgImage) {
+    //   return
+    // }
     console.log('🚀 ~ useEffect ~ currentBgImage:', currentBgImage)
-    handleBackImageLoadToCanvas(currentBgImage)
-    setCurrentCanvasPlan((prev) => ({
-      ...prev,
-      bgImageName: refImage?.name ?? null,
-      mapPositionAddress: queryRef.current.value,
-    }))
+    if (currentBgImage) {
+      handleBackImageLoadToCanvas(currentBgImage)
+      setCurrentCanvasPlan((prev) => ({
+        ...prev,
+        // bgImageName: refImage?.name ?? null,
+        bgImageName: currentBgImage.split('/').pop(),
+        mapPositionAddress: queryRef.current.value,
+      }))
+    } else {
+      setCurrentCanvasPlan((prev) => ({
+        ...prev,
+        bgImageName: null,
+        mapPositionAddress: null,
+      }))
+    }
   }, [currentBgImage])
 
   /**