refactor: enhance useRefFiles hook with additional comments and improve file handling logic for background images

src/hooks/common/useRefFiles.js

@@ -16,6 +16,9 @@ import { popSpinnerState } from '@/store/popupAtom'
  * 이미지 -> 캔버스 배경에 이미지 로드
  * 주소 -> 구글 맵에서 주소 검색 후 이미지로 다운로드 받아서 캔버스 배경에 이미지 로드
  * .dwg -> api를 통해서 .png로 변환 후 캔버스 배경에 이미지 로드
+ *
+ * setCurrentBgImage 에 이미지를 세팅하면 도면에 배경으로 로딩된다.
+ * 다만 S3 Response에 aws 고유 주소가 나오는데 여기서는 cloudfront 사용을 위해서 NEXT_PUBLIC_AWS_S3_BASE_URL 도메인을 사용한다.
  * @returns {object}
  */
 export function useRefFiles() {
@@ -41,6 +44,7 @@ export function useRefFiles() {
   }, [refFileMethod])
 
   /**
+   * 최초 input type="file" 에 대한 이벤트
    * 파일 불러오기 버튼 컨트롤
    * @param {*} file
    */
@@ -61,6 +65,10 @@ export function useRefFiles() {
     }
   }
 
+  /**
+   * 허용하는 파일인지 체크한다
+   * @param {File} file
+   */
   const refFileSetting = (file) => {
     console.log('🚀 ~ refFileSetting ~ file:', file)
     if (file.name.split('.').pop() === 'dwg') {
@@ -79,7 +87,7 @@ export function useRefFiles() {
   }
 
   /**
-   * 파일 삭제
+   * 이미지 파일 삭제
    */
   const handleFileDelete = async () => {
     swalFire({
@@ -90,9 +98,7 @@ export function useRefFiles() {
         console.log('🚀 ~ handleFileDelete ~ handleFileDelete:', refImage)
         console.log('🚀 ~ handleFileDelete ~ currentCanvasPlan.bgImageName:', currentCanvasPlan.bgImageName)
         await del({ url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/upload?fileName=${currentCanvasPlan.bgImageName}` })
-        // setRefImage(null)
         setCurrentBgImage(null)
-        // setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: null }))
         await deleteBackGroundImage({
           objectId: currentCanvasPlan.id,
           planNo: currentCanvasPlan.planNo,
@@ -103,7 +109,7 @@ export function useRefFiles() {
   }
 
   /**
-   * 주소 삭제
+   * 주소 맵 이미지 삭제
    */
   const handleAddressDelete = async () => {
     swalFire({
@@ -115,7 +121,6 @@ export function useRefFiles() {
         await del({ url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/map?fileName=${currentCanvasPlan.bgImageName}` })
         setMapPositionAddress('')
         setCurrentBgImage(null)
-        // setCurrentCanvasPlan((prev) => ({ ...prev, mapPositionAddress: null }))
         await deleteBackGroundImage({
           objectId: currentCanvasPlan.id,
           planNo: currentCanvasPlan.planNo,
@@ -125,7 +130,7 @@ export function useRefFiles() {
   }
 
   /**
-   * 주소로 구글 맵 이미지 다운로드
+   * 주소로 구글 맵 이미지 다운로드하여 캔버스 배경으로 로드
    */
   const handleMapImageDown = async () => {
     console.log('🚀 ~ handleMapImageDown ~ handleMapImageDown:')
@@ -143,15 +148,10 @@ export function useRefFiles() {
       option1: newOption1,
     }))
 
-    // const res = await get({
-    //   url: `${process.env.NEXT_PUBLIC_HOST_URL}/map/convert?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
-    // })
     const res = await get({
       url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/map?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
     })
     console.log('🚀 ~ handleMapImageDown ~ res:', res)
-    // setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`)
-    // setCurrentBgImage(`${res.filePath}`)
     setCurrentBgImage(`${process.env.NEXT_PUBLIC_AWS_S3_BASE_URL}/${res.fileName}`)
 
     await setBackGroundImage({
@@ -207,17 +207,11 @@ export function useRefFiles() {
     const formData = new FormData()
     formData.append('file', file)
 
-    // const res = await post({
-    //   url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/upload`,
-    //   data: formData,
-    // })
     const res = await post({
       url: `${process.env.NEXT_PUBLIC_API_HOST_URL}/api/image/upload`,
       data: formData,
     })
     console.log('🚀 ~ handleUploadImageRefFile ~ res:', res)
-    // setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`)
-    // setCurrentBgImage(`${res.filePath}`)
     setCurrentBgImage(`${process.env.NEXT_PUBLIC_AWS_S3_BASE_URL}/${res.fileName}`)
     setRefImage(file)
 
@@ -251,7 +245,6 @@ export function useRefFiles() {
     })
     console.log('🚀 ~ handleUploadConvertRefFile ~ result:', result)
 
-    // setCurrentBgImage(`${result.filePath}`)
     setCurrentBgImage(`${process.env.NEXT_PUBLIC_AWS_S3_BASE_URL}/${res.fileName}`)
     setRefImage(file)
 
@@ -263,16 +256,6 @@ export function useRefFiles() {
     }
     console.log('🚀 ~ handleUploadImageRefFile ~ params:', params)
     await setBackGroundImage(params)
-
-    // const res = await post({ url: converterUrl, data: formData })
-    // console.log('🚀 ~ handleUploadConvertRefFile ~ res:', res)
-    // const result = await post({
-    //   url: `${process.env.NEXT_PUBLIC_HOST_URL}/cad/convert`,
-    //   data: res,
-    // })
-    // console.log('🚀 ~ handleUploadConvertRefFile ~ result:', result)
-    // setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${result.filePath}`)
-    // setRefImage(res.Files[0].FileData)
   }
 
   /**