feat: Add floor-plan image load feature

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -9,6 +9,7 @@ import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
 import { basicSettingState } from '@/store/settingAtom'
+import useRefFiles from '@/hooks/common/useRefFiles'
 
 export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
   const [objectNo, setObjectNo] = useState('test123241008001') // 후에 삭제 필요
@@ -18,7 +19,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
   const { closePopup } = usePopup()
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
-  const [image, setImage] = useState(null)
+  const { refImage, setRefImage } = useRefFiles()
 
   const { getMessage } = useMessage()
   const { get, post } = useAxios()
@@ -489,11 +490,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           <span className="img-edit"></span>
                           {getMessage('common.input.file.load')}
                         </label>
-                        <input type="file" id="img_file" style={{ display: 'none' }} onChange={(e) => setImage(e.target.files[0])} />
+                        <input type="file" id="img_file" style={{ display: 'none' }} onChange={(e) => setRefImage(e.target.files[0])} />
                       </div>
                       <div className="img-name-wrap">
-                        <input type="text" className="input-origin al-l" defaultValue={''} value={image ? image.name : ''} readOnly />
-                        {image && <button className="img-check" onClick={() => setImage(null)}></button>}
+                        <input type="text" className="input-origin al-l" defaultValue={''} value={refImage ? refImage.name : ''} readOnly />
+                        {refImage && <button className="img-check" onClick={() => setRefImage(null)}></button>}
                       </div>
                     </div>
                   </td>

src/hooks/common/useRefFiles.js

@@ -0,0 +1,11 @@
+import { useState } from 'react'
+
+export default function useRefFiles() {
+  const [refImage, setRefImage] = useState(null)
+  const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
+
+  return {
+    refImage,
+    setRefImage,
+  }
+}