📌fix: 배경화면 이미지 불러오기 기능 부분 수정

This commit is contained in:
yoosangwook 2025-02-04 18:18:25 +09:00
parent 1d724e275d
commit 8299cef5a3
4 changed files with 18 additions and 12 deletions

View File

@ -34,11 +34,11 @@ export default function ImgLoad() {
const handleModal = () => { const handleModal = () => {
setFloorPlanState({ ...floorPlanState, refFileModalOpen: false, toggleRotate: false }) setFloorPlanState({ ...floorPlanState, refFileModalOpen: false, toggleRotate: false })
setCurrentCanvasPlan({ // setCurrentCanvasPlan({
...currentCanvasPlan, // ...currentCanvasPlan,
bgImageName: refImage?.name ?? null, // bgImageName: refImage?.name ?? null,
mapPositionAddress, // mapPositionAddress,
}) // })
} }
useEffect(() => { useEffect(() => {

View File

@ -131,12 +131,16 @@ export function useRefFiles() {
// setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: currentCanvasPlan.id, mapPositionAddress: queryRef.current.value })) // setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: currentCanvasPlan.id, mapPositionAddress: queryRef.current.value }))
} }
/**
* 배경 이미지 로드를 위한 세팅
*/
useEffect(() => { useEffect(() => {
if (!currentBgImage) { if (!currentBgImage) {
return return
} }
console.log('🚀 ~ useEffect ~ currentBgImage:', currentBgImage) console.log('🚀 ~ useEffect ~ currentBgImage:', currentBgImage)
handleBackImageLoadToCanvas(`plan-images/${currentCanvasPlan.id}.png`) // handleBackImageLoadToCanvas(`plan-images/${currentCanvasPlan.id}.png`)
handleBackImageLoadToCanvas(currentBgImage)
setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: refImage?.name ?? null, mapPositionAddress: queryRef.current.value })) setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: refImage?.name ?? null, mapPositionAddress: queryRef.current.value }))
}, [currentBgImage]) }, [currentBgImage])
@ -147,15 +151,15 @@ export function useRefFiles() {
const handleUploadImageRefFile = async (file) => { const handleUploadImageRefFile = async (file) => {
const formData = new FormData() const formData = new FormData()
formData.append('file', file) formData.append('file', file)
formData.append('fileName', currentCanvasPlan.id) // formData.append('fileName', currentCanvasPlan.id)
// const res = await post({ url: `${process.env.NEXT_PUBLIC_API_SERVER_PATH}/api/image-upload`, data: formData }) // const res = await post({ url: `${process.env.NEXT_PUBLIC_API_SERVER_PATH}/api/image-upload`, data: formData })
const res = await post({ url: `http://localhost:3000/api/image-upload`, data: formData }) const res = await post({ url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/upload`, data: formData })
console.log('🚀 ~ handleUploadImageRefFile ~ res:', res) console.log('🚀 ~ handleUploadImageRefFile ~ res:', res)
const image = await readImage(res.fileNm) // const image = await readImage(res.filePath)
console.log('🚀 ~ handleUploadImageRefFile ~ file:', image) // console.log('🚀 ~ handleUploadImageRefFile ~ file:', image)
setCurrentBgImage(image) setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`)
setRefImage(file) setRefImage(file)
} }

View File

@ -394,6 +394,7 @@ export function usePlan(params = {}) {
canvas, canvas,
plans, plans,
currentCanvasPlan, currentCanvasPlan,
setCurrentCanvasPlan,
selectedPlan, selectedPlan,
saveCanvas, saveCanvas,
handleCurrentPlan, handleCurrentPlan,

View File

@ -72,7 +72,8 @@ const writeImage = async (fileName, file) => {
} }
const readImage = async (fileName) => { const readImage = async (fileName) => {
const file = await fs.readFile(`${FILE_PATH}/${fileName}`) // const file = await fs.readFile(`${FILE_PATH}/${fileName}`)
const file = await fs.readFile(`${process.env.NEXT_PUBLIC_HOST_URL}${fileName}`)
// .then((res) => { // .then((res) => {
// console.log('readImage-then', res) // console.log('readImage-then', res)
// }) // })