2025-05-13 16:21:10 +09:00
11 changed files with 462 additions and 30 deletions
--- a/.env.development
+++ b/.env.development
@ -1,6 +1,6 @@
 NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080"

-NEXT_PUBLIC_HOST_URL="http://1.248.227.176:4000"
+NEXT_PUBLIC_HOST_URL="//1.248.227.176:4000"

 SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="

@ -8,4 +8,18 @@ SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
 NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_yAS4QDalL9jgQ7vS"

 NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-stg.q-cells.jp:8120/eos/login/autoLogin"
-NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-stg.q-cells.jp:8120/qm/login/autoLogin"
+NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-stg.q-cells.jp:8120/qm/login/autoLogin"
+
+# 테스트용
+# AWS_REGION="ap-northeast-2"
+# AMPLIFY_BUCKET="interplug"
+# AWS_ACCESS_KEY_ID="AKIAVWMWJCUXFHEAZ4FR"
+# AWS_SECRET_ACCESS_KEY="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"
+# NEXT_PUBLIC_AWS_S3_BASE_URL="https://interplug.s3.ap-northeast-2.amazonaws.com"
+
+# 실제 일본 서버
+AWS_REGION="ap-northeast-1"
+AMPLIFY_BUCKET="files.hanasys.jp"
+AWS_ACCESS_KEY_ID="AKIA3K4QWLZHFZRJOM2E"
+AWS_SECRET_ACCESS_KEY="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"
+NEXT_PUBLIC_AWS_S3_BASE_URL="http://files.hanasys.jp.s3-website-ap-northeast-1.amazonaws.com"
--- a/.env.production
+++ b/.env.production
@ -1,6 +1,6 @@
 NEXT_PUBLIC_API_SERVER_PATH="https://api.hanasys.jp/"

-NEXT_PUBLIC_HOST_URL="http://1.248.227.176:4000"
+NEXT_PUBLIC_HOST_URL="//1.248.227.176:4000"

 SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="

@ -10,4 +10,10 @@ NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secr
 # NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="https://q-order.q-cells.jp/eos/login/autoLogin"
 # NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="https://q-musubi.q-cells.jp/qm/login/autoLogin"
 NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-stg.q-cells.jp:8120/eos/login/autoLogin"
-NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-stg.q-cells.jp:8120/qm/login/autoLogin"
+NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-stg.q-cells.jp:8120/qm/login/autoLogin"
+
+AWS_REGION="ap-northeast-2"
+AMPLIFY_BUCKET="interplug"
+AWS_ACCESS_KEY_ID="AKIAVWMWJCUXFHEAZ4FR"
+AWS_SECRET_ACCESS_KEY="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"
+NEXT_PUBLIC_AWS_S3_BASE_URL="https://interplug.s3.ap-northeast-2.amazonaws.com"
--- a/package.json
+++ b/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",
@ -24,7 +25,7 @@
    "js-cookie": "^3.0.5",
    "mathjs": "^13.0.2",
    "mssql": "^11.0.1",
-    "next": "14.2.26",
+    "next": "14.2.28",
    "next-international": "^1.2.4",
    "react": "^18",
    "react-chartjs-2": "^5.2.0",
@ -38,6 +39,7 @@
    "react-responsive-modal": "^6.4.2",
    "react-select": "^5.8.1",
    "recoil": "^0.7.7",
+    "sharp": "^0.33.5",
    "sqlite": "^5.1.1",
    "sqlite3": "^5.1.7",
    "sweetalert2": "^11.14.1",
--- a/qcast3.database.sqlite
+++ b/qcast3.database.sqlite
--- a/src/app/api/image/cad/route.js
+++ b/src/app/api/image/cad/route.js
@ -0,0 +1,69 @@
+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 = `cads/${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)
+
+    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 = `cads/${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 })
+  }
+}
--- a/src/app/api/image/canvas/route.js
+++ b/src/app/api/image/canvas/route.js
@ -0,0 +1,133 @@
+import { NextResponse } from 'next/server'
+import { S3Client, PutObjectCommand, DeleteObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3'
+import sharp from 'sharp'
+import { v4 as uuidv4 } from 'uuid'
+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 checkArea = (obj) => {
+  const { width, height, left, top } = obj
+
+  if (left < 0 || top < 0 || width > 1600 || height > 1000) {
+    return false
+  }
+
+  return true
+}
+
+const cropImage = async (Key, width, height, left, top) => {
+  try {
+    const checkResult = checkArea({ width, height, left, top })
+
+    // Get the image from S3
+    const { Body } = await s3.send(
+      new GetObjectCommand({
+        Bucket,
+        Key,
+      }),
+    )
+
+    // Convert stream to buffer
+    const chunks = []
+    for await (const chunk of Body) {
+      chunks.push(chunk)
+    }
+    const imageBuffer = Buffer.concat(chunks)
+
+    let processedImage
+    if (!checkResult) {
+      processedImage = await sharp(imageBuffer).toBuffer()
+    } else {
+      processedImage = await sharp(imageBuffer)
+        .extract({
+          width: parseInt(width),
+          height: parseInt(height),
+          left: parseInt(left),
+          top: parseInt(top),
+        })
+        .png()
+        .toBuffer()
+    }
+    return processedImage
+  } catch (error) {
+    console.error('Error processing image:', error)
+    throw error
+  }
+}
+
+export async function POST(req) {
+  try {
+    const formData = await req.formData()
+    const file = formData.get('file')
+    const objectNo = formData.get('objectNo')
+    const planNo = formData.get('planNo')
+    const type = formData.get('type')
+    const width = formData.get('width')
+    const height = formData.get('height')
+    const left = formData.get('left')
+    const top = formData.get('top')
+
+    const OriginalKey = `Drawing/${uuidv4()}`
+
+    /**
+     * 원본 이미지를 우선 저장한다.
+     * 이미지 이름이 겹지는 현상을 방지하기 위해 uuid 를 사용한다.
+     */
+    await s3.send(
+      new PutObjectCommand({
+        Bucket,
+        Key: OriginalKey,
+        Body: Buffer.from(await file.arrayBuffer()),
+        ContentType: 'image/png',
+      }),
+    )
+
+    /**
+     * 저장된 원본 이미지를 기준으로 크롭여부를 결정하여 크롭 이미지를 저장한다.
+     */
+    const bufferImage = await cropImage(OriginalKey, width, height, left, top)
+
+    /**
+     * 크롭 이미지 이름을 결정한다.
+     */
+    const Key = `Drawing/${objectNo}_${planNo}_${type}.png`
+
+    /**
+     * 크롭이 완료된 이미지를 업로드한다.
+     */
+    await s3.send(
+      new PutObjectCommand({
+        Bucket,
+        Key,
+        Body: bufferImage,
+        ContentType: 'image/png',
+      }),
+    )
+
+    /**
+     * 크롭이미지 저장이 완료되면 원본 이미지를 삭제한다.
+     */
+    await s3.send(
+      new DeleteObjectCommand({
+        Bucket,
+        Key: OriginalKey,
+      }),
+    )
+
+    const result = {
+      filePath: `https://${process.env.AMPLIFY_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${Key}`,
+      fileName: Key,
+    }
+
+    return NextResponse.json(result)
+  } catch (error) {
+    console.error('Error in POST:', error)
+    return NextResponse.json({ error: 'Failed to process and upload image' }, { status: 500 })
+  }
+}
--- a/src/app/api/image/map/route.js
+++ b/src/app/api/image/map/route.js
@ -0,0 +1,78 @@
+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 {
+    const searchParams = req.nextUrl.searchParams
+    const q = searchParams.get('q')
+    const fileNm = searchParams.get('fileNm')
+    const zoom = searchParams.get('zoom')
+
+    /** 구글 맵을 이미지로 변경하기 위한 API */
+    const API_KEY = 'AIzaSyDO7nVR1N_D2tKy60hgGFavpLaXkHpiHpc'
+    const targetUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${q}&zoom=${zoom}&maptype=satellite&size=640x640&scale=1&key=${API_KEY}`
+    const decodeUrl = decodeURIComponent(targetUrl)
+
+    /** 구글 맵을 이미지로 변경하기 위한 API 호출 */
+    const response = await fetch(decodeUrl)
+    const data = await response.arrayBuffer()
+    // const buffer = Buffer.from(data)
+
+    /** 변경된 이미지를 S3에 업로드 */
+    const Body = Buffer.from(data)
+    const Key = `maps/${fileNm}`
+    const ContentType = 'image/png'
+
+    await s3.send(
+      new PutObjectCommand({
+        Bucket,
+        Key,
+        Body,
+        ContentType,
+      }),
+    )
+
+    const result = {
+      filePath: `https://${process.env.AMPLIFY_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${Key}`,
+      fileName: Key,
+    }
+
+    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 = `maps/${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 })
+  }
+}
--- a/src/app/api/image/upload/route.js
+++ b/src/app/api/image/upload/route.js
@ -0,0 +1,72 @@
+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 fileName = searchParams.get('fileName')
+
+    if (!fileName) {
+      return NextResponse.json({ error: 'fileName parameter is required' }, { status: 400 })
+    }
+
+    const Key = `upload/${fileName}`
+    console.log('🚀 ~ DELETE ~ Key:', Key)
+
+    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 })
+  }
+}
--- a/src/components/floor-plan/modal/ImgLoad.jsx
+++ b/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>
--- a/src/hooks/common/useRefFiles.js
+++ b/src/hooks/common/useRefFiles.js
@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { useRecoilState } from 'recoil'
+import { useRecoilState, useSetRecoilState } from 'recoil'

 import { useSwal } from '@/hooks/useSwal'
 import { useAxios } from '../useAxios'
@ -7,6 +7,7 @@ import { currentCanvasPlanState } from '@/store/canvasAtom'
 import { useCanvas } from '@/hooks/useCanvas'
 import { deleteBackGroundImage, setBackGroundImage } from '@/lib/imageActions'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import { popSpinnerState } from '@/store/popupAtom'

 /**
 * 배경 이미지 관리
@ -28,7 +29,8 @@ export function useRefFiles() {
  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
  const { handleBackImageLoadToCanvas } = useCanvas()
  const { swalFire } = useSwal()
-  const { get, post } = useAxios()
+  const { get, post, del } = useAxios()
+  const setPopSpinnerStore = useSetRecoilState(popSpinnerState)

  useEffect(() => {
    if (refFileMethod === '1') {
@ -84,12 +86,18 @@ export function useRefFiles() {
      text: '삭제하시겠습니까?',
      type: 'confirm',
      confirmFn: async () => {
-        setRefImage(null)
-        setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: null }))
+        setPopSpinnerStore(true)
+        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)
+        setCurrentBgImage(null)
+        // setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: null }))
        await deleteBackGroundImage({
          objectId: currentCanvasPlan.id,
          planNo: currentCanvasPlan.planNo,
        })
+        setPopSpinnerStore(false)
      },
    })
  }
@ -102,9 +110,12 @@ export function useRefFiles() {
      text: '삭제하시겠습니까?',
      type: 'confirm',
      confirmFn: async () => {
+        console.log('🚀 ~ handleAddressDelete ~ handleAddressDelete:', refImage)
+        console.log('🚀 ~ handleAddressDelete ~ currentCanvasPlan.bgImageName:', currentCanvasPlan.bgImageName)
+        await del({ url: `http://localhost:3000/api/image/map?fileName=${currentCanvasPlan.bgImageName}` })
        setMapPositionAddress('')
        setCurrentBgImage(null)
-        setCurrentCanvasPlan((prev) => ({ ...prev, mapPositionAddress: null }))
+        // setCurrentCanvasPlan((prev) => ({ ...prev, mapPositionAddress: null }))
        await deleteBackGroundImage({
          objectId: currentCanvasPlan.id,
          planNo: currentCanvasPlan.planNo,
@ -132,16 +143,21 @@ export function useRefFiles() {
      option1: newOption1,
    }))

+    // const res = await get({
+    //   url: `${process.env.NEXT_PUBLIC_HOST_URL}/map/convert?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
+    // })
    const res = await get({
-      url: `${process.env.NEXT_PUBLIC_HOST_URL}/map/convert?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}`)
+    // setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`)
+    setCurrentBgImage(`${res.filePath}`)

    await setBackGroundImage({
      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}`,
    })
  }

@ -149,16 +165,26 @@ 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 {
+      setRefImage(null)
+      setCurrentCanvasPlan((prev) => ({
+        ...prev,
+        bgImageName: null,
+        mapPositionAddress: null,
+      }))
+    }
  }, [currentBgImage])

  /**
@ -166,6 +192,7 @@ export function useRefFiles() {
   * @param {*} file
   */
  const handleUploadImageRefFile = async (file) => {
+    setPopSpinnerStore(true)
    const newOption1 = settingModalFirstOptions.option1.map((option) => ({
      ...option,
      selected: option.column === 'imageDisplay' ? true : option.selected,
@ -179,21 +206,28 @@ 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)
+    setPopSpinnerStore(false)
  }

  /**
@ -204,15 +238,38 @@ export function useRefFiles() {
    const formData = new FormData()
    formData.append('file', file)

+    /** 캐드 도면 파일 변환 */
    const res = await post({ url: converterUrl, data: formData })
    console.log('🚀 ~ handleUploadConvertRefFile ~ res:', res)
+
+    /** 캐드 도면 파일 업로드 */
    const result = await post({
-      url: `${process.env.NEXT_PUBLIC_HOST_URL}/cad/convert`,
+      url: `http://localhost:3000/api/image/cad`,
      data: res,
    })
    console.log('🚀 ~ handleUploadConvertRefFile ~ result:', result)
-    setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${result.filePath}`)
-    setRefImage(res.Files[0].FileData)
+
+    setCurrentBgImage(`${result.filePath}`)
+    setRefImage(file)
+
+    const params = {
+      objectId: currentCanvasPlan.id,
+      planNo: currentCanvasPlan.planNo,
+      // imagePath: `${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`,
+      imagePath: `${result.filePath}`,
+    }
+    console.log('🚀 ~ handleUploadImageRefFile ~ params:', params)
+    await setBackGroundImage(params)
+
+    // const res = await post({ url: converterUrl, data: formData })
+    // console.log('🚀 ~ handleUploadConvertRefFile ~ res:', res)
+    // const result = await post({
+    //   url: `${process.env.NEXT_PUBLIC_HOST_URL}/cad/convert`,
+    //   data: res,
+    // })
+    // console.log('🚀 ~ handleUploadConvertRefFile ~ result:', result)
+    // setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${result.filePath}`)
+    // setRefImage(res.Files[0].FileData)
  }

  /**
--- a/src/hooks/floorPlan/useImgLoader.js
+++ b/src/hooks/floorPlan/useImgLoader.js
@ -79,7 +79,8 @@ export function useImgLoader() {

      /** 이미지 크롭 요청 */
      const result = await post({
-        url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/canvas`,
+        // url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/canvas`,
+        url: `http://localhost:3000/api/image/canvas`,
        data: formData,
      })
      console.log('🚀 ~ handleCanvasToPng ~ result:', result)