qcast-front/src/hooks/common/useRefFiles.js
yoosangwook 05ef45bd38 fix: 도면 배경 설정 개발중
- api 스펙 추가 및 수정
2024-11-21 14:03:31 +09:00

137 lines
4.0 KiB
JavaScript

import { useEffect, useRef, useState } from 'react'
import { useRecoilState } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import { useSwal } from '@/hooks/useSwal'
import { useAxios } from '../useAxios'
import { currentCanvasPlanState } from '@/store/canvasAtom'
import { convertDwgToPng, writeImageBuffer } from '@/lib/fileAction'
export 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, promisePost } = useAxios()
// const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
/**
* 파일 불러오기 버튼 컨트롤
* @param {*} file
*/
const handleRefFile = (file) => {
setRefImage(file)
/**
* 파일 확장자가 dwg일 경우 변환하여 이미지로 저장
* 파일 확장자가 이미지일 경우 이미지 저장
*/
file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(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, bgImageName: res.fileNm, mapPositionAddress: queryRef.current.value }))
}
/**
* 이미지 파일 업로드
* @param {*} file
*/
const handleUploadImageRefFile = async (file) => {
console.log('🚀 ~ handleUploadImageRefFile ~ file:', file)
const formData = new FormData()
formData.append('file', file)
const response = await fetch('http://localhost:3000/api/image-upload', {
method: 'POST',
body: formData,
})
const result = await response.json()
console.log('🚀 ~ handleUploadImageRefFile ~ res:', result)
// writeImageBuffer(file)
}
/**
* RefFile이 캐드 도면 파일일 경우 변환하여 이미지로 저장
* @param {*} file
*/
const handleUploadConvertRefFile = 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)
}
/**
* 현재 플랜이 변경되면 플랜 상태 저장
*/
useEffect(() => {
console.log('🚀 ~ useRefFiles ~ currentCanvasPlan:', currentCanvasPlan)
// const handleCurrentPlan = async () => {
// await promisePut({ url: '/api/canvas-management/canvas-statuses', data: currentCanvasPlan }).then((res) => {
// console.log('🚀 ~ awaitpromisePut ~ res:', res)
// })
// }
// handleCurrentPlan()
}, [currentCanvasPlan])
return {
refImage,
queryRef,
setRefImage,
handleRefFile,
refFileMethod,
setRefFileMethod,
mapPositionAddress,
setMapPositionAddress,
handleRefFileMethod,
handleFileDelete,
handleAddressDelete,
handleMapImageDown,
}
}