From f355f36ba97514b9038feba3a4410a1fe9e1c550 Mon Sep 17 00:00:00 2001 From: minsik Date: Fri, 6 Dec 2024 13:31:18 +0900 Subject: [PATCH] =?UTF-8?q?Image=20Load=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/api/image-upload/route.js | 2 +- src/components/floor-plan/modal/ImgLoad.jsx | 26 ++--- .../modal/setting01/FirstOption.jsx | 9 +- src/hooks/common/useRefFiles.js | 98 ++++++++----------- src/hooks/useCanvas.js | 5 +- src/hooks/usePlan.js | 5 +- src/lib/fileAction.js | 15 ++- 7 files changed, 71 insertions(+), 89 deletions(-) diff --git a/src/app/api/image-upload/route.js b/src/app/api/image-upload/route.js index b96926a0..219544fe 100644 --- a/src/app/api/image-upload/route.js +++ b/src/app/api/image-upload/route.js @@ -11,5 +11,5 @@ export async function POST(req) { const buffer = Buffer.from(arrayBuffer) await writeImage(fileName, buffer) - return NextResponse.json({ fileNm: `${fileName}` }) + return NextResponse.json({ fileNm: `${fileName}.png` }) } diff --git a/src/components/floor-plan/modal/ImgLoad.jsx b/src/components/floor-plan/modal/ImgLoad.jsx index 132780dd..2a5e77aa 100644 --- a/src/components/floor-plan/modal/ImgLoad.jsx +++ b/src/components/floor-plan/modal/ImgLoad.jsx @@ -33,20 +33,17 @@ export default function ImgLoad() { const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext) const handleModal = () => { - console.log('floorPlanState', floorPlanState) - console.log('currentCanvasPlan', currentCanvasPlan) - console.log('refImage', refImage) setFloorPlanState({ ...floorPlanState, refFileModalOpen: false, toggleRotate: false }) setCurrentCanvasPlan({ ...currentCanvasPlan, - bgImageName: currentCanvasPlan?.bgImageName ?? null, + bgImageName: refImage?.name ?? null, mapPositionAddress, }) } useEffect(() => { - // console.log('πŸš€ ~ ImgLoad ~ floorPlanState.refFileModalOpen:', floorPlanState.refFileModalOpen) - // console.log('πŸš€ ~ ImgLoad ~ currentCanvasPlan:', currentCanvasPlan) + console.log('πŸš€ ~ ImgLoad ~ floorPlanState.refFileModalOpen:', floorPlanState.refFileModalOpen) + console.log('πŸš€ ~ ImgLoad ~ currentCanvasPlan:', currentCanvasPlan) }, [floorPlanState.refFileModalOpen]) useEffect(() => { @@ -65,11 +62,9 @@ export default function ImgLoad() { useEffect(() => { if (!currentCanvasPlan) return - console.log('currentCanvasPlan', currentCanvasPlan) const refFileMethod = currentCanvasPlan?.mapPositionAddress === null || currentCanvasPlan?.mapPositionAddress?.trim() === '' ? '1' : '2' setRefFileMethod(refFileMethod) setMapPositionAddress(currentCanvasPlan?.mapPositionAddress ?? '') - console.log(currentCanvasPlan) }, [currentCanvasPlan]) return ( @@ -111,14 +106,13 @@ export default function ImgLoad() { />
- {/* - */} - {!currentCanvasPlan?.bgImageName ? ( - - ) : ( - - )} - {(refImage || currentCanvasPlan?.bgImageName) && } + + {refImage && }
diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index 566e38b5..de019730 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -37,11 +37,18 @@ export default function FirstOption() { setSurfaceShapePattern(polygon, item.column) }) //λ””μŠ€ν”Œλ ˆμ΄ μ„€μ • ν‘œμ‹œ(단 건 선택) + } else if (item.column === 'imageDisplay') { + item.selected = !item.selected + canvas + .getObjects() + .filter((obj) => obj.name === 'backGroundImage') + .forEach((image) => (image.visible = item.selected)) + canvas.renderAll() } else { item.selected = !item.selected } - setSettingModalFirstOptions({ ...settingModalFirstOptions, option1, option2, dimensionDisplay, fontFlag: true }) + setSettingModalFirstOptions({ ...settingModalFirstOptions, option2, dimensionDisplay, fontFlag: true }) } // useEffect(() => { diff --git a/src/hooks/common/useRefFiles.js b/src/hooks/common/useRefFiles.js index 5877a668..df0b5634 100644 --- a/src/hooks/common/useRefFiles.js +++ b/src/hooks/common/useRefFiles.js @@ -1,7 +1,5 @@ import { useEffect, useRef, useState } from 'react' import { useRecoilState, useRecoilValue } from 'recoil' -import { v4 as uuidv4 } from 'uuid' -import fs from 'fs/promises' import { useSwal } from '@/hooks/useSwal' import { useAxios } from '../useAxios' @@ -14,13 +12,13 @@ export function useRefFiles() { const [refImage, setRefImage] = useState(null) const [refFileMethod, setRefFileMethod] = useState('1') const [mapPositionAddress, setMapPositionAddress] = useState('') - const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) - const queryRef = useRef(null) - const canvas = useRecoilValue(canvasState) const [currentBgImage, setCurrentBgImage] = useState(null) - + const queryRef = useRef(null) + const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) + const canvas = useRecoilValue(canvasState) + const { handleBackImageLoadToCanvas } = useCanvas() const { swalFire } = useSwal() - const { get, promisePut, promiseGet, promisePost } = useAxios() + const { get, post, promisePost } = useAxios() useEffect(() => { if (refFileMethod === '1') { @@ -30,6 +28,20 @@ export function useRefFiles() { setRefImage(null) } }, [refFileMethod]) + + /** + * ν˜„μž¬ ν”Œλžœμ΄ λ³€κ²½λ˜λ©΄ ν”Œλžœ μƒνƒœ μ €μž₯ + */ + 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]) + /** * 파일 뢈러였기 λ²„νŠΌ 컨트둀 * @param {*} file @@ -37,11 +49,26 @@ export function useRefFiles() { const handleRefFile = (file) => { console.log('handleRefFile', file) console.log('refImage', refImage) + + if (refImage) { + swalFire({ + text: 'νŒŒμΌμ„ λ³€κ²½ν•˜μ‹œκ² μŠ΅λ‹ˆκΉŒ?', + type: 'confirm', + confirmFn: () => { + refFileSetting(file) + // setRefImage(file) + // file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file) + }, + }) + } else { + refFileSetting(file) + } + } + + const refFileSetting = (file) => { if (file && ['image/png', 'image/jpg', 'image/jpeg', 'image/bmp', 'image/gif'].includes(file.type)) { // setRefImage(file) file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file) - - return } else { swalFire({ text: '이미지가 μ•„λ‹™λ‹ˆλ‹€.', @@ -49,30 +76,7 @@ export function useRefFiles() { icon: 'error', }) } - if (refImage) { - swalFire({ - text: 'νŒŒμΌμ„ λ³€κ²½ν•˜μ‹œκ² μŠ΅λ‹ˆκΉŒ?', - type: 'confirm', - confirmFn: () => { - setRefImage(file) - const backGroundImage = canvas.getObjects().filter((obj) => obj.name === 'backGroundImage') - if (backGroundImage.length > 0) { - canvas.remove(backGroundImage) - } - canvas.renderAll() - file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file) - }, - }) - } - - /** - * 파일 ν™•μž₯μžκ°€ dwg일 경우 λ³€ν™˜ν•˜μ—¬ μ΄λ―Έμ§€λ‘œ μ €μž₯ - * 파일 ν™•μž₯μžκ°€ 이미지일 경우 이미지 μ €μž₯ - */ - - // handleUploadRefFile(file) } - /** * 파일 μ‚­μ œ */ @@ -133,30 +137,25 @@ export function useRefFiles() { } console.log('πŸš€ ~ useEffect ~ currentBgImage:', currentBgImage) handleBackImageLoadToCanvas(`plan-images/${currentCanvasPlan.id}.png`) - setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: currentCanvasPlan.id, mapPositionAddress: queryRef.current.value })) + setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: refImage?.name ?? null, mapPositionAddress: queryRef.current.value })) }, [currentBgImage]) /** * 이미지 파일 μ—…λ‘œλ“œ * @param {*} file */ - const { handleBackImageLoadToCanvas } = useCanvas() const handleUploadImageRefFile = async (file) => { - // console.log('πŸš€ ~ handleUploadImageRefFile ~ file:', file) const formData = new FormData() formData.append('file', file) formData.append('fileName', currentCanvasPlan.id) - const response = await fetch('http://localhost:3000/api/image-upload', { - method: 'POST', - body: formData, - }) + const res = await post({ url: 'http://localhost:3000/api/image-upload', data: formData }) + console.log('πŸš€ ~ handleUploadImageRefFile ~ res:', res) + const image = await readImage(res.fileNm) + console.log('πŸš€ ~ handleUploadImageRefFile ~ file:', image) - handleBackImageLoadToCanvas(`plan-images/${currentCanvasPlan.id}.png`) - const result = await response.json() + setCurrentBgImage(image) setRefImage(file) - // console.log('πŸš€ ~ handleUploadImageRefFile ~ res:', result) - // writeImageBuffer(file) } /** @@ -186,19 +185,6 @@ export function useRefFiles() { 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, diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js index 33e4a8d3..d6443c2a 100644 --- a/src/hooks/useCanvas.js +++ b/src/hooks/useCanvas.js @@ -507,8 +507,6 @@ export function useCanvas(id) { * cad 파일 μ‚¬μš©μ‹œ 이미지 λ‘œλ”© ν•¨μˆ˜ */ const handleBackImageLoadToCanvas = (url) => { - console.log('image load url: ', url) - canvas .getObjects() .filter((obj) => obj.name === 'backGroundImage') @@ -516,7 +514,7 @@ export function useCanvas(id) { canvas.remove(img) canvas?.renderAll() }) - fabric.Image.fromURL(url, function (img) { + fabric.Image.fromURL(`${url}?${new Date().getTime()}`, function (img) { console.log(img) img.set({ left: 0, @@ -536,7 +534,6 @@ export function useCanvas(id) { canvas?.add(img) canvas?.sendToBack(img) canvas?.renderAll() - console.log(canvas.getObjects().filter((obj) => obj.name === 'backGroundImage')) setBackImg(img) }) } diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index 786e2660..532759a4 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -200,6 +200,7 @@ export function usePlan() { userId: userId, imageName: 'image_name', // api ν•„μˆ˜ν•­λͺ©μ΄μ—¬μ„œ μž„μ‹œλ‘œ λ„£μŒ, 이후 μ‚­μ œ ν•„μš” objectNo: objectNo, + bgImageName: currentCanvasPlan?.bgImageName ?? null, mapPositionAddress: currentCanvasPlan?.mapPositionAddress ?? null, canvasStatus: canvasToDbFormat(canvasStatus), } @@ -220,8 +221,8 @@ export function usePlan() { const putCanvasStatus = async (canvasStatus) => { const planData = { id: currentCanvasPlan.id, - bgImageName: currentCanvasPlan?.id ?? null, - mapPositionAddress: currentCanvasPlan.mapPositionAddress, + bgImageName: currentCanvasPlan?.bgImageName ?? null, + mapPositionAddress: currentCanvasPlan?.mapPositionAddress ?? null, canvasStatus: canvasToDbFormat(canvasStatus), } await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData }) diff --git a/src/lib/fileAction.js b/src/lib/fileAction.js index efc532aa..d2c4cff9 100644 --- a/src/lib/fileAction.js +++ b/src/lib/fileAction.js @@ -62,16 +62,13 @@ const writeImageBase64 = async (title, data) => { // } const writeImage = async (fileName, file) => { - return new Promise((resolve, reject) => { - try { - fs.readdir(FILE_PATH) - } catch { - fs.mkdir(FILE_PATH) - } + try { + await fs.readdir(FILE_PATH) + } catch { + await fs.mkdir(FILE_PATH) + } - fs.writeFile(`${FILE_PATH}/${fileName}.png`, file) - resolve(true) - }) + return fs.writeFile(`${FILE_PATH}/${fileName}.png`, file) } const readImage = async (fileName) => {