qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/qcast-pub' into dev

Browse Source 
# Conflicts:
#	src/components/floor-plan/modal/setting01/FirstOption.jsx
This commit is contained in:
minsik 2024-12-06 13:42:16 +09:00
commit 022cbf1e2d
8 changed files with 73 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/api/image-upload/route.js
View File

@ -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` })
}

26
src/components/floor-plan/modal/ImgLoad.jsx
View File

@ -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() {
/>
</div>
<div className="img-name-wrap">
{/* <input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly />
<button className="img-check"></button> */}
{!currentCanvasPlan?.bgImageName ? (
<input type="text" className="input-origin al-l" value={refImage ? 'ref' + refImage.name : ''} readOnly />
) : (
<input type="text" className="input-origin al-l" value={'bg' + currentCanvasPlan?.bgImageName} readOnly />
)}
{(refImage || currentCanvasPlan?.bgImageName) && <button className="img-check" onClick={handleFileDelete}></button>}
<input
type="text"
className="input-origin al-l"
value={refImage ? (refImage?.name ?? '') : (currentCanvasPlan?.bgImageName ?? '')}
readOnly
/>
{refImage && <button className="img-check" onClick={handleFileDelete}></button>}
</div>
</div>
</div>

4
src/components/floor-plan/modal/basic/step/Orientation.jsx
View File

@ -34,7 +34,7 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
onClick={() => setCompasDeg(15 * (12 + index))}
>
{index === 0 && <i>180°</i>}
{index === 6 && <i>270°</i>}
{index === 6 && <i>-90°</i>}
</div>
))}
{Array.from({ length: 180 / 15 }).map((dot, index) => (
@ -56,7 +56,7 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
<div className="center-wrap">
<div className="d-check-box pop">
<input type="checkbox" id="ch99" checked={!hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
<label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}（0〜360）</label>
<label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}（-180 〜 180）</label>
</div>
<div className="outline-form">
<div className="input-grid mr10" style={{ width: '160px' }}>

9
src/components/floor-plan/modal/setting01/FirstOption.jsx
View File

@ -41,7 +41,14 @@ export default function FirstOption() {
setSurfaceShapePattern(polygon, item.column)
})
//디스플레이 설정 표시(단 건 선택)
} else {
} 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 {
const options = settingModalFirstOptions?.option1.map((opt) => {
if (opt.id === item.id) {
opt.selected = !opt.selected

98
src/hooks/common/useRefFiles.js
View File

@ -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,

5
src/hooks/useCanvas.js
View File

@ -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)
})
}

5
src/hooks/usePlan.js
View File

@ -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 })

15
src/lib/fileAction.js
View File

@ -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) => {