diff --git a/src/app/api/html2canvas/route.js b/src/app/api/html2canvas/route.js index 54af611d..02731f07 100644 --- a/src/app/api/html2canvas/route.js +++ b/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) diff --git a/src/components/estimate/EstimateFileUploader.jsx b/src/components/estimate/EstimateFileUploader.jsx index c2bccb22..dfc82d49 100644 --- a/src/components/estimate/EstimateFileUploader.jsx +++ b/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) => { diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index decb7fa3..c8dbdbca 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -1,14 +1,20 @@ -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 { useEffect, useState } from 'react' 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 {getMessage('common.input.file')} -
+
+
+ handleRefFileMethod(e)} + checked={refFileMethod === '1'} + /> + +
+
+ handleRefFileMethod(e)} + checked={refFileMethod === '2'} + /> + +
+
+ + {/* 파일 불러오기 */} + {refFileMethod === '1' && ( +
+
+ + handleRefFile(e.target.files[0])} /> +
+
+ {currentCanvasPlan?.bgImageName === null ? ( + + ) : ( + + )} + {(refImage || currentCanvasPlan?.bgImageName) && } +
+
+ )} + + {/* 주소 불러오기 */} + {refFileMethod === '2' && ( +
+ setMapPositionAddress(e.target.value)} + /> +
+ +
+ {mapPositionAddress && } + {/* */} +
+ )} + {/*
- setImage(e.target.files[0])} /> + handleRefFile(e.target.files[0])} />
- - {image && } + + {refImage && }
-
+
*/} diff --git a/src/hooks/common/useRefFiles.js b/src/hooks/common/useRefFiles.js new file mode 100644 index 00000000..1b36a109 --- /dev/null +++ b/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, + } +} diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index d1887f6f..ab67452e 100644 --- a/src/hooks/usePlan.js +++ b/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, })), ) }