diff --git a/src/app/api/image-upload/route.js b/src/app/api/image-upload/route.js
index b96926a0..219544fe 100644
--- a/src/app/api/image-upload/route.js
+++ b/src/app/api/image-upload/route.js
@@ -11,5 +11,5 @@ export async function POST(req) {
   const buffer = Buffer.from(arrayBuffer)
   await writeImage(fileName, buffer)
 
-  return NextResponse.json({ fileNm: `${fileName}` })
+  return NextResponse.json({ fileNm: `${fileName}.png` })
 }
diff --git a/src/components/floor-plan/modal/ImgLoad.jsx b/src/components/floor-plan/modal/ImgLoad.jsx
index 132780dd..2a5e77aa 100644
--- a/src/components/floor-plan/modal/ImgLoad.jsx
+++ b/src/components/floor-plan/modal/ImgLoad.jsx
@@ -33,20 +33,17 @@ export default function ImgLoad() {
   const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
 
   const handleModal = () => {
-    console.log('floorPlanState', floorPlanState)
-    console.log('currentCanvasPlan', currentCanvasPlan)
-    console.log('refImage', refImage)
     setFloorPlanState({ ...floorPlanState, refFileModalOpen: false, toggleRotate: false })
     setCurrentCanvasPlan({
       ...currentCanvasPlan,
-      bgImageName: currentCanvasPlan?.bgImageName ?? null,
+      bgImageName: refImage?.name ?? null,
       mapPositionAddress,
     })
   }
 
   useEffect(() => {
-    // console.log('🚀 ~ ImgLoad ~ floorPlanState.refFileModalOpen:', floorPlanState.refFileModalOpen)
-    // console.log('🚀 ~ ImgLoad ~ currentCanvasPlan:', currentCanvasPlan)
+    console.log('🚀 ~ ImgLoad ~ floorPlanState.refFileModalOpen:', floorPlanState.refFileModalOpen)
+    console.log('🚀 ~ ImgLoad ~ currentCanvasPlan:', currentCanvasPlan)
   }, [floorPlanState.refFileModalOpen])
 
   useEffect(() => {
@@ -65,11 +62,9 @@ export default function ImgLoad() {
 
   useEffect(() => {
     if (!currentCanvasPlan) return
-    console.log('currentCanvasPlan', currentCanvasPlan)
     const refFileMethod = currentCanvasPlan?.mapPositionAddress === null || currentCanvasPlan?.mapPositionAddress?.trim() === '' ? '1' : '2'
     setRefFileMethod(refFileMethod)
     setMapPositionAddress(currentCanvasPlan?.mapPositionAddress ?? '')
-    console.log(currentCanvasPlan)
   }, [currentCanvasPlan])
 
   return (
@@ -111,14 +106,13 @@ export default function ImgLoad() {
                   />
                 </div>
                 <div className="img-name-wrap">
-                  {/* <input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly />
-                  <button className="img-check"></button> */}
-                  {!currentCanvasPlan?.bgImageName ? (
-                    <input type="text" className="input-origin al-l" value={refImage ? 'ref' + refImage.name : ''} readOnly />
-                  ) : (
-                    <input type="text" className="input-origin al-l" value={'bg' + currentCanvasPlan?.bgImageName} readOnly />
-                  )}
-                  {(refImage || currentCanvasPlan?.bgImageName) && <button className="img-check" onClick={handleFileDelete}></button>}
+                  <input
+                    type="text"
+                    className="input-origin al-l"
+                    value={refImage ? (refImage?.name ?? '') : (currentCanvasPlan?.bgImageName ?? '')}
+                    readOnly
+                  />
+                  {refImage && <button className="img-check" onClick={handleFileDelete}></button>}
                 </div>
               </div>
             </div>
diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx
index 566e38b5..de019730 100644
--- a/src/components/floor-plan/modal/setting01/FirstOption.jsx
+++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx
@@ -37,11 +37,18 @@ export default function FirstOption() {
         setSurfaceShapePattern(polygon, item.column)
       })
       //디스플레이 설정 표시(단 건 선택)
+    } else if (item.column === 'imageDisplay') {
+      item.selected = !item.selected
+      canvas
+        .getObjects()
+        .filter((obj) => obj.name === 'backGroundImage')
+        .forEach((image) => (image.visible = item.selected))
+      canvas.renderAll()
     } else {
       item.selected = !item.selected
     }
 
-    setSettingModalFirstOptions({ ...settingModalFirstOptions, option1, option2, dimensionDisplay, fontFlag: true })
+    setSettingModalFirstOptions({ ...settingModalFirstOptions, option2, dimensionDisplay, fontFlag: true })
   }
 
   // useEffect(() => {
diff --git a/src/hooks/common/useRefFiles.js b/src/hooks/common/useRefFiles.js
index 5877a668..df0b5634 100644
--- a/src/hooks/common/useRefFiles.js
+++ b/src/hooks/common/useRefFiles.js
@@ -1,7 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { v4 as uuidv4 } from 'uuid'
-import fs from 'fs/promises'
 
 import { useSwal } from '@/hooks/useSwal'
 import { useAxios } from '../useAxios'
@@ -14,13 +12,13 @@ export function useRefFiles() {
   const [refImage, setRefImage] = useState(null)
   const [refFileMethod, setRefFileMethod] = useState('1')
   const [mapPositionAddress, setMapPositionAddress] = useState('')
-  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
-  const queryRef = useRef(null)
-  const canvas = useRecoilValue(canvasState)
   const [currentBgImage, setCurrentBgImage] = useState(null)
-
+  const queryRef = useRef(null)
+  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
+  const canvas = useRecoilValue(canvasState)
+  const { handleBackImageLoadToCanvas } = useCanvas()
   const { swalFire } = useSwal()
-  const { get, promisePut, promiseGet, promisePost } = useAxios()
+  const { get, post, promisePost } = useAxios()
 
   useEffect(() => {
     if (refFileMethod === '1') {
@@ -30,6 +28,20 @@ export function useRefFiles() {
       setRefImage(null)
     }
   }, [refFileMethod])
+
+  /**
+   * 현재 플랜이 변경되면 플랜 상태 저장
+   */
+  useEffect(() => {
+    // console.log('🚀 ~ useRefFiles ~ currentCanvasPlan:', currentCanvasPlan)
+    //   const handleCurrentPlan = async () => {
+    //     await promisePut({ url: '/api/canvas-management/canvas-statuses', data: currentCanvasPlan }).then((res) => {
+    //       console.log('🚀 ~ awaitpromisePut ~ res:', res)
+    //     })
+    //   }
+    //   handleCurrentPlan()
+  }, [currentCanvasPlan])
+
   /**
    * 파일 불러오기 버튼 컨트롤
    * @param {*} file
@@ -37,11 +49,26 @@ export function useRefFiles() {
   const handleRefFile = (file) => {
     console.log('handleRefFile', file)
     console.log('refImage', refImage)
+
+    if (refImage) {
+      swalFire({
+        text: '파일을 변경하시겠습니까?',
+        type: 'confirm',
+        confirmFn: () => {
+          refFileSetting(file)
+          // setRefImage(file)
+          // file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file)
+        },
+      })
+    } else {
+      refFileSetting(file)
+    }
+  }
+
+  const refFileSetting = (file) => {
     if (file && ['image/png', 'image/jpg', 'image/jpeg', 'image/bmp', 'image/gif'].includes(file.type)) {
       // setRefImage(file)
       file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file)
-
-      return
     } else {
       swalFire({
         text: '이미지가 아닙니다.',
@@ -49,30 +76,7 @@ export function useRefFiles() {
         icon: 'error',
       })
     }
-    if (refImage) {
-      swalFire({
-        text: '파일을 변경하시겠습니까?',
-        type: 'confirm',
-        confirmFn: () => {
-          setRefImage(file)
-          const backGroundImage = canvas.getObjects().filter((obj) => obj.name === 'backGroundImage')
-          if (backGroundImage.length > 0) {
-            canvas.remove(backGroundImage)
-          }
-          canvas.renderAll()
-          file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file)
-        },
-      })
-    }
-
-    /**
-     * 파일 확장자가 dwg일 경우 변환하여 이미지로 저장
-     * 파일 확장자가 이미지일 경우 이미지 저장
-     */
-
-    // handleUploadRefFile(file)
   }
-
   /**
    * 파일 삭제
    */
@@ -133,30 +137,25 @@ export function useRefFiles() {
     }
     console.log('🚀 ~ useEffect ~ currentBgImage:', currentBgImage)
     handleBackImageLoadToCanvas(`plan-images/${currentCanvasPlan.id}.png`)
-    setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: currentCanvasPlan.id, mapPositionAddress: queryRef.current.value }))
+    setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: refImage?.name ?? null, mapPositionAddress: queryRef.current.value }))
   }, [currentBgImage])
 
   /**
    * 이미지 파일 업로드
    * @param {*} file
    */
-  const { handleBackImageLoadToCanvas } = useCanvas()
   const handleUploadImageRefFile = async (file) => {
-    // console.log('🚀 ~ handleUploadImageRefFile ~ file:', file)
     const formData = new FormData()
     formData.append('file', file)
     formData.append('fileName', currentCanvasPlan.id)
 
-    const response = await fetch('http://localhost:3000/api/image-upload', {
-      method: 'POST',
-      body: formData,
-    })
+    const res = await post({ url: 'http://localhost:3000/api/image-upload', data: formData })
+    console.log('🚀 ~ handleUploadImageRefFile ~ res:', res)
+    const image = await readImage(res.fileNm)
+    console.log('🚀 ~ handleUploadImageRefFile ~ file:', image)
 
-    handleBackImageLoadToCanvas(`plan-images/${currentCanvasPlan.id}.png`)
-    const result = await response.json()
+    setCurrentBgImage(image)
     setRefImage(file)
-    // console.log('🚀 ~ handleUploadImageRefFile ~ res:', result)
-    // writeImageBuffer(file)
   }
 
   /**
@@ -186,19 +185,6 @@ export function useRefFiles() {
     setRefFileMethod(e.target.value)
   }
 
-  /**
-   * 현재 플랜이 변경되면 플랜 상태 저장
-   */
-  useEffect(() => {
-    // console.log('🚀 ~ useRefFiles ~ currentCanvasPlan:', currentCanvasPlan)
-    //   const handleCurrentPlan = async () => {
-    //     await promisePut({ url: '/api/canvas-management/canvas-statuses', data: currentCanvasPlan }).then((res) => {
-    //       console.log('🚀 ~ awaitpromisePut ~ res:', res)
-    //     })
-    //   }
-    //   handleCurrentPlan()
-  }, [currentCanvasPlan])
-
   return {
     refImage,
     queryRef,
diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js
index 33e4a8d3..d6443c2a 100644
--- a/src/hooks/useCanvas.js
+++ b/src/hooks/useCanvas.js
@@ -507,8 +507,6 @@ export function useCanvas(id) {
    * cad 파일 사용시 이미지 로딩 함수
    */
   const handleBackImageLoadToCanvas = (url) => {
-    console.log('image load url: ', url)
-
     canvas
       .getObjects()
       .filter((obj) => obj.name === 'backGroundImage')
@@ -516,7 +514,7 @@ export function useCanvas(id) {
         canvas.remove(img)
         canvas?.renderAll()
       })
-    fabric.Image.fromURL(url, function (img) {
+    fabric.Image.fromURL(`${url}?${new Date().getTime()}`, function (img) {
       console.log(img)
       img.set({
         left: 0,
@@ -536,7 +534,6 @@ export function useCanvas(id) {
       canvas?.add(img)
       canvas?.sendToBack(img)
       canvas?.renderAll()
-      console.log(canvas.getObjects().filter((obj) => obj.name === 'backGroundImage'))
       setBackImg(img)
     })
   }
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index 786e2660..532759a4 100644
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@@ -200,6 +200,7 @@ export function usePlan() {
       userId: userId,
       imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
       objectNo: objectNo,
+      bgImageName: currentCanvasPlan?.bgImageName ?? null,
       mapPositionAddress: currentCanvasPlan?.mapPositionAddress ?? null,
       canvasStatus: canvasToDbFormat(canvasStatus),
     }
@@ -220,8 +221,8 @@ export function usePlan() {
   const putCanvasStatus = async (canvasStatus) => {
     const planData = {
       id: currentCanvasPlan.id,
-      bgImageName: currentCanvasPlan?.id ?? null,
-      mapPositionAddress: currentCanvasPlan.mapPositionAddress,
+      bgImageName: currentCanvasPlan?.bgImageName ?? null,
+      mapPositionAddress: currentCanvasPlan?.mapPositionAddress ?? null,
       canvasStatus: canvasToDbFormat(canvasStatus),
     }
     await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
diff --git a/src/lib/fileAction.js b/src/lib/fileAction.js
index efc532aa..d2c4cff9 100644
--- a/src/lib/fileAction.js
+++ b/src/lib/fileAction.js
@@ -62,16 +62,13 @@ const writeImageBase64 = async (title, data) => {
 // }
 
 const writeImage = async (fileName, file) => {
-  return new Promise((resolve, reject) => {
-    try {
-      fs.readdir(FILE_PATH)
-    } catch {
-      fs.mkdir(FILE_PATH)
-    }
+  try {
+    await fs.readdir(FILE_PATH)
+  } catch {
+    await fs.mkdir(FILE_PATH)
+  }
 
-    fs.writeFile(`${FILE_PATH}/${fileName}.png`, file)
-    resolve(true)
-  })
+  return fs.writeFile(`${FILE_PATH}/${fileName}.png`, file)
 }
 
 const readImage = async (fileName) => {