feat: s3 업로드 기본 기능 추가

package.json

@@ -12,6 +12,7 @@
     "serve": "node server.js"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.772.0",
     "ag-grid-react": "^32.0.2",
     "axios": "^1.7.8",
     "big.js": "^6.2.2",

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

@@ -0,0 +1,70 @@
+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,
+  },
+})
+
+const uploadImage = async (file) => {
+  const Body = Buffer.from(await file.arrayBuffer())
+  const Key = `upload/${file.name}`
+  const ContentType = file.ContentType
+
+  await s3.send(
+    new PutObjectCommand({
+      Bucket,
+      Key,
+      Body,
+      ContentType,
+    }),
+  )
+
+  return {
+    filePath: `https://${process.env.AMPLIFY_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${Key}`,
+    fileName: Key,
+  }
+}
+
+export async function POST(req) {
+  try {
+    const formData = await req.formData()
+    const file = formData.get('file')
+
+    const result = await uploadImage(file)
+    result.message = '이미지 업로드 성공'
+
+    return NextResponse.json(result)
+  } catch (error) {
+    console.error(error)
+    return NextResponse.json({ error: 'Failed to upload image' }, { status: 500 })
+  }
+}
+
+export async function DELETE(req) {
+  try {
+    const searchParams = req.nextUrl.searchParams
+    const Key = `upload/${searchParams.get('fileName')}`
+    console.log('🚀 ~ DELETE ~ Key:', Key)
+
+    if (!Key) {
+      return NextResponse.json({ error: 'fileName parameter is required' }, { status: 400 })
+    }
+
+    await s3.send(
+      new DeleteObjectCommand({
+        Bucket,
+        Key,
+      }),
+    )
+
+    return NextResponse.json({ message: '이미지 삭제 성공' }, { status: 200 })
+  } catch (error) {
+    console.error('S3 Delete Error:', error)
+    return NextResponse.json({ error: 'Failed to delete image' }, { status: 500 })
+  }
+}

src/components/floor-plan/modal/ImgLoad.jsx

@@ -120,7 +120,7 @@ export default function ImgLoad() {
                   value={refImage ? (refImage?.name ?? '') : (currentCanvasPlan?.bgImageName ?? '')}
                   readOnly
                 />
-                {refImage && <button className="img-check" onClick={handleFileDelete}></button>}
+                {currentCanvasPlan?.bgImageName && <button className="img-check" onClick={handleFileDelete}></button>}
               </div>
             </div>
           </div>

src/hooks/common/useRefFiles.js

@@ -28,7 +28,7 @@ export function useRefFiles() {
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const { handleBackImageLoadToCanvas } = useCanvas()
   const { swalFire } = useSwal()
-  const { get, post } = useAxios()
+  const { get, post, del } = useAxios()
 
   useEffect(() => {
     if (refFileMethod === '1') {
@@ -84,6 +84,9 @@ export function useRefFiles() {
       text: '삭제하시겠습니까?',
       type: 'confirm',
       confirmFn: async () => {
+        console.log('🚀 ~ handleFileDelete ~ handleFileDelete:', refImage)
+        console.log('🚀 ~ handleFileDelete ~ currentCanvasPlan.bgImageName:', currentCanvasPlan.bgImageName)
+        await del({ url: `http://localhost:3000/api/image/upload?fileName=${currentCanvasPlan.bgImageName}` })
         setRefImage(null)
         setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: null }))
         await deleteBackGroundImage({
@@ -179,18 +182,24 @@ export function useRefFiles() {
     const formData = new FormData()
     formData.append('file', file)
 
+    // const res = await post({
+    //   url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/upload`,
+    //   data: formData,
+    // })
     const res = await post({
-      url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/upload`,
+      url: `http://localhost:3000/api/image/upload`,
       data: formData,
     })
     console.log('🚀 ~ handleUploadImageRefFile ~ res:', res)
-    setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`)
+    // setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`)
+    setCurrentBgImage(`${res.filePath}`)
     setRefImage(file)
 
     const params = {
       objectId: currentCanvasPlan.id,
       planNo: currentCanvasPlan.planNo,
-      imagePath: `${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`,
+      // imagePath: `${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`,
+      imagePath: `${res.filePath}`,
     }
     console.log('🚀 ~ handleUploadImageRefFile ~ params:', params)
     await setBackGroundImage(params)