From af49d7c91124bc659e522d4c66f0a9896986c852 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Fri, 1 Nov 2024 13:21:55 +0900
Subject: [PATCH] feat: Add floor-plan image load feature

---
 .../modal/placementShape/PlacementShapeSetting.jsx    |  9 +++++----
 src/hooks/common/useRefFiles.js                       | 11 +++++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 src/hooks/common/useRefFiles.js

diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 99b72eb4..539dbdf1 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/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>
diff --git a/src/hooks/common/useRefFiles.js b/src/hooks/common/useRefFiles.js
new file mode 100644
index 00000000..8cb046d5
--- /dev/null
+++ b/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,
+  }
+}