fix: 이미지 업로드 마크업 분리 및 코드 정리

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

@@ -1,12 +1,32 @@
+import { useMessage } from '@/hooks/useMessage'
+import { useRefFiles } from '@/hooks/common/useRefFiles'
+import { usePlan } from '@/hooks/usePlan'
+
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 
 export default function ImgLoad() {
+  const {
+    refImage,
+    queryRef,
+    setRefImage,
+    handleRefFile,
+    refFileMethod,
+    setRefFileMethod,
+    handleRefFileMethod,
+    mapPositionAddress,
+    setMapPositionAddress,
+    handleFileDelete,
+    handleMapImageDown,
+  } = useRefFiles()
+  const { currentCanvasPlan } = usePlan()
+  const { getMessage } = useMessage()
+
   return (
     <WithDraggable isShow={true}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
-          <h1 className="title">画像を読み込む </h1>
+          <h1 className="title">{getMessage('common.input.file')}</h1>
-          <button className="modal-close">닫기</button>
+          {/* <button className="modal-close">닫기</button> */}
         </div>
         <div className="modal-body">
           <div className="img-flex-box">
@@ -19,7 +39,7 @@ export default function ImgLoad() {
           <div className="img-load-from">
             <div className="img-load-item">
               <div className="d-check-radio pop">
-                <input type="radio" name="radio03" id="ra06" />
+                <input type="radio" name="radio03" id="ra06" value={'1'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '1'} />
                 <label htmlFor="ra06">ファイルを読み込む</label>
               </div>
               <div className="img-flex-box">
@@ -28,26 +48,34 @@ export default function ImgLoad() {
                     <span className="img-edit"></span>
                     ファイルの追加
                   </label>
-                  <input type="file" id="img_file" style={{ display: 'none' }} />
+                  <input type="file" id="img_file" style={{ display: 'none' }} onChange={(e) => handleRefFile(e.target.files[0])} />
                 </div>
                 <div className="img-name-wrap">
-                  <input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly />
+                  {/* <input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly />
-                  <button className="img-check"></button>
+                  <button className="img-check"></button> */}
+                  {currentCanvasPlan?.bgImageName === null ? (
+                    <input type="text" className="input-origin al-l" defaultValue={''} value={refImage ? refImage.name : ''} readOnly />
+                  ) : (
+                    <input type="text" className="input-origin al-l" value={currentCanvasPlan?.bgImageName} readOnly />
+                  )}
+                  {(refImage || currentCanvasPlan?.bgImageName) && <button className="img-check" onClick={handleFileDelete}></button>}
                 </div>
               </div>
             </div>
             <div className="img-load-item">
               <div className="d-check-radio pop">
-                <input type="radio" name="radio03" id="ra06" />
+                <input type="radio" name="radio03" id="ra06" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} />
                 <label htmlFor="ra06">アドレスを読み込む</label>
               </div>
               <div className="img-flex-box for-address">
                 <input type="text" className="input-origin al-l mr10" placeholder={'住所入力'} />
                 <div className="img-edit-wrap">
-                  <button className="img-edit-btn">完了</button>
+                  <button className="img-edit-btn" onClick={handleMapImageDown}>
+                    完了
+                  </button>
                 </div>
-                <span className="check-address fail"></span>
+                {mapPositionAddress && <span className="check-address fail"></span>}
-                <span className="check-address success"></span>
+                {/* <span className="check-address success"></span> */}
               </div>
             </div>
           </div>

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

@@ -8,8 +8,6 @@ import { useMessage } from '@/hooks/useMessage'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
-import useRefFiles from '@/hooks/common/useRefFiles'
-import { usePlan } from '@/hooks/usePlan'
 
 import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
 import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
@@ -24,20 +22,6 @@ 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 {
-    refImage,
-    queryRef,
-    setRefImage,
-    handleRefFile,
-    refFileMethod,
-    setRefFileMethod,
-    handleRefFileMethod,
-    mapPositionAddress,
-    setMapPositionAddress,
-    handleFileDelete,
-    handleMapImageDown,
-  } = useRefFiles()
-  const { currentCanvasPlan } = usePlan()
 
   const { getMessage } = useMessage()
   const { get, post } = useAxios()
@@ -503,90 +487,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                     </div>
                   </td>
                 </tr>
-                <tr>
-                  <th>{getMessage('common.input.file')}</th>
-                  <td>
-                    <div className="pop-form-radio mb10">
-                      <div className="d-check-radio pop">
-                        <input
-                          type="radio"
-                          name="radio03"
-                          id="ra06"
-                          value={'1'}
-                          onChange={(e) => handleRefFileMethod(e)}
-                          checked={refFileMethod === '1'}
-                        />
-                        <label htmlFor="ra06">ファイルを読み込む</label>
-                      </div>
-                      <div className="d-check-radio pop">
-                        <input
-                          type="radio"
-                          name="radio03"
-                          id="ra07"
-                          value={'2'}
-                          onChange={(e) => handleRefFileMethod(e)}
-                          checked={refFileMethod === '2'}
-                        />
-                        <label htmlFor="ra07">アドレスを読み込む</label>
-                      </div>
-                    </div>
-
-                    {/* 파일 불러오기 */}
-                    {refFileMethod === '1' && (
-                      <div className="flex-box">
-                        <div className="img-edit-wrap">
-                          <label className="img-edit-btn" htmlFor="img_file">
-                            <span className="img-edit"></span>
-                            {getMessage('common.input.file.load')}
-                          </label>
-                          <input type="file" id="img_file" style={{ display: 'none' }} onChange={(e) => handleRefFile(e.target.files[0])} />
-                        </div>
-                        <div className="img-name-wrap">
-                          {currentCanvasPlan?.bgImageName === null ? (
-                            <input type="text" className="input-origin al-l" defaultValue={''} value={refImage ? refImage.name : ''} readOnly />
-                          ) : (
-                            <input type="text" className="input-origin al-l" value={currentCanvasPlan?.bgImageName} readOnly />
-                          )}
-                          {(refImage || currentCanvasPlan?.bgImageName) && <button className="img-check" onClick={handleFileDelete}></button>}
-                        </div>
-                      </div>
-                    )}
-
-                    {/* 주소 불러오기 */}
-                    {refFileMethod === '2' && (
-                      <div className="flex-box for-address">
-                        <input
-                          type="text"
-                          className="input-origin al-l mr10"
-                          placeholder={'住所入力'}
-                          ref={queryRef}
-                          value={mapPositionAddress}
-                          onChange={(e) => setMapPositionAddress(e.target.value)}
-                        />
-                        <div className="img-edit-wrap mr5">
-                          <button className="img-edit-btn" onClick={handleMapImageDown}>
-                            完了
-                          </button>
-                        </div>
-                        {mapPositionAddress && <span className="check-address fail"></span>}
-                        {/* <span className="check-address success"></span> */}
-                      </div>
-                    )}
-                    {/* <div className="flex-box">
-                      <div className="img-edit-wrap">
-                        <label className="img-edit-btn" htmlFor="img_file">
-                          <span className="img-edit"></span>
-                          {getMessage('common.input.file.load')}
-                        </label>
-                        <input type="file" id="img_file" style={{ display: 'none' }} onChange={(e) => handleRefFile(e.target.files[0])} />
-                      </div>
-                      <div className="img-name-wrap">
-                        <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>
-                </tr>
               </tbody>
             </table>
           </div>

src/hooks/common/useRefFiles.js

@@ -7,7 +7,7 @@ import { convertDwgToPng } from '@/lib/cadAction'
 import { useAxios } from '../useAxios'
 import { currentCanvasPlanState } from '@/store/canvasAtom'
 
-export default function useRefFiles() {
+export function useRefFiles() {
   const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
   const [refImage, setRefImage] = useState(null)
   const [refFileMethod, setRefFileMethod] = useState('1')