Merge branch 'feature/Q-CAST-III-T-22' into dev

src/app/api/html2canvas/route.js

@@ -13,7 +13,6 @@ export async function GET(req) {
   const decodeUrl = decodeURIComponent(targetUrl)
 
   const response = await fetch(decodeUrl)
-
   const data = await response.arrayBuffer()
   const buffer = Buffer.from(data)
 

src/components/estimate/EstimateFileUploader.jsx

@@ -27,6 +27,7 @@ export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
     //   if (res.data > 0) setUploadFiles([...files, { name: e.target.files[0].name, id: uuidv4() }])
     // })
     setUploadFiles([...uploadFiles, { data: e.target.files[0], id: uuidv4() }])
+    e.target.value = ''
   }
 
   const deleteFile = (id) => {

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

@@ -1,14 +1,20 @@
-import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
+import { useEffect, useState } from 'react'
-import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
-import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useRecoilState } from 'recoil'
-import { Fragment, useEffect, useState } from 'react'
+
 import { canvasSettingState } from '@/store/canvasAtom'
+import { basicSettingState } from '@/store/settingAtom'
+
 import { useMessage } from '@/hooks/useMessage'
 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'
+import { usePlan } from '@/hooks/usePlan'
+
+import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
+import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { SessionContext } from '@/app/SessionProvider'
 
 export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
   const [objectNo, setObjectNo] = useState('test123241008001') // 후에 삭제 필요
@@ -18,7 +24,20 @@ 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,
+    queryRef,
+    setRefImage,
+    handleRefFile,
+    refFileMethod,
+    setRefFileMethod,
+    handleRefFileMethod,
+    mapPositionAddress,
+    setMapPositionAddress,
+    handleFileDelete,
+    handleMapImageDown,
+  } = useRefFiles()
+  const { currentCanvasPlan } = usePlan()
 
   const { getMessage } = useMessage()
   const { get, post } = useAxios()
@@ -487,19 +506,85 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                 <tr>
                   <th>{getMessage('common.input.file')}</th>
                   <td>
-                    <div className="flex-box">
+                    <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) => setImage(e.target.files[0])} />
+                        <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={image ? image.name : ''} readOnly />
+                        <input type="text" className="input-origin al-l" defaultValue={''} value={refImage ? refImage.name : ''} readOnly />
-                        {image && <button className="img-check" onClick={() => setImage(null)}></button>}
+                        {refImage && <button className="img-check" onClick={() => setRefImage(null)}></button>}
                       </div>
-                    </div>
+                    </div> */}
                   </td>
                 </tr>
               </tbody>

src/hooks/common/useRefFiles.js

@@ -0,0 +1,112 @@
+import { useRef, useState } from 'react'
+import { useRecoilState } from 'recoil'
+import { v4 as uuidv4 } from 'uuid'
+
+import { useSwal } from '@/hooks/useSwal'
+import { convertDwgToPng } from '@/lib/cadAction'
+import { useAxios } from '../useAxios'
+import { currentCanvasPlanState } from '@/store/canvasAtom'
+
+export default function useRefFiles() {
+  const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
+  const [refImage, setRefImage] = useState(null)
+  const [refFileMethod, setRefFileMethod] = useState('1')
+  const [mapPositionAddress, setMapPositionAddress] = useState('')
+  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
+  const queryRef = useRef(null)
+
+  const { swalFire } = useSwal()
+  const { get, promisePut } = useAxios()
+  // const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
+
+  /**
+   * 파일 불러오기 버튼 컨트롤
+   * @param {*} file
+   */
+  const handleRefFile = (file) => {
+    setRefImage(file)
+    file.name.split('.').pop() === 'dwg' ? handleUploadRefFile(file) : () => {}
+    // handleUploadRefFile(file)
+  }
+
+  /**
+   * 파일 삭제
+   */
+  const handleFileDelete = () => {
+    setRefImage(null)
+    setCurrentCanvasPlan((prev) => ({ ...prev, bgFileName: null }))
+  }
+
+  /**
+   * 주소 삭제
+   */
+  const handleAddressDelete = () => {
+    setCurrentCanvasPlan((prev) => ({ ...prev, mapPositionAddress: null }))
+  }
+
+  /**
+   * 주소로 구글 맵 이미지 다운로드
+   */
+  const handleMapImageDown = async () => {
+    if (queryRef.current.value === '' || queryRef.current.value === null) {
+      return
+    }
+
+    const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryRef.current.value}&fileNm=${uuidv4()}&zoom=20` })
+    console.log('🚀 ~ handleMapImageDown ~ res:', res)
+    setCurrentCanvasPlan((prev) => ({ ...prev, bgFileName: res.fileNm, mapPositionAddress: queryRef.current.value }))
+  }
+
+  /**
+   * 현재 플랜이 변경되면 플랜 상태 저장
+   */
+  useEffect(() => {
+    const handleCurrentPlan = async () => {
+      await promisePut({ url: '/api/canvas-management/canvas-statuses', data: currentCanvasPlan }).then((res) => {
+        console.log('🚀 ~ awaitpromisePut ~ res:', res)
+      })
+    }
+    handleCurrentPlan()
+  }, [currentCanvasPlan])
+
+  /**
+   * RefFile이 캐드 도면 파일일 경우 변환하여 이미지로 저장
+   * @param {*} file
+   */
+  const handleUploadRefFile = async (file) => {
+    const formData = new FormData()
+    formData.append('file', file)
+
+    await promisePost({ url: converterUrl, data: formData })
+      .then((res) => {
+        convertDwgToPng(res.data.Files[0].FileName, res.data.Files[0].FileData)
+        swalFire({ text: '파일 변환 성공' })
+      })
+      .catch((err) => {
+        swalFire({ text: '파일 변환 실패', icon: 'error' })
+      })
+  }
+
+  /**
+   * 라디오 버튼 컨트롤
+   * @param {*} e
+   */
+  const handleRefFileMethod = (e) => {
+    setRefFileMethod(e.target.value)
+  }
+
+  return {
+    refImage,
+    queryRef,
+    setRefImage,
+    handleRefFile,
+    refFileMethod,
+    setRefFileMethod,
+    mapPositionAddress,
+    setMapPositionAddress,
+    handleRefFileMethod,
+    handleFileDelete,
+    handleAddressDelete,
+    handleMapImageDown,
+  }
+}

src/hooks/usePlan.js

@@ -187,6 +187,8 @@ export function usePlan() {
         userId: item.userId,
         canvasStatus: dbToCanvasFormat(item.canvasStatus),
         isCurrent: false,
+        bgImageName: item.bgImageName,
+        mapPositionAddress: item.mapPositionAddress,
       })),
     )
   }