diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx index 7138907c..3faf35d5 100644 --- a/src/components/floor-plan/CanvasLayout.jsx +++ b/src/components/floor-plan/CanvasLayout.jsx @@ -1,124 +1,28 @@ 'use client' import { useEffect, useState } from 'react' -import { useRecoilState, useRecoilValue } from 'recoil' +import { useRecoilValue } from 'recoil' import CanvasFrame from './CanvasFrame' import { useMessage } from '@/hooks/useMessage' import { useSwal } from '@/hooks/useSwal' import { usePlan } from '@/hooks/usePlan' import { globalLocaleStore } from '@/store/localeAtom' -import { currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom' import { sessionStore } from '@/store/commonAtom' export default function CanvasLayout() { const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요 - const [planNum, setPlanNum] = useState(0) - const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) - const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) - const [plans, setPlans] = useRecoilState(plansState) - const globalLocaleState = useRecoilValue(globalLocaleStore) const sessionState = useRecoilValue(sessionStore) + const globalLocaleState = useRecoilValue(globalLocaleStore) const { getMessage } = useMessage() const { swalFire } = useSwal() - const { getCanvasByObjectNo, delCanvasById, checkModifiedCanvasPlan, saveCanvas, currentCanvasData } = usePlan() - - const handleCurrentPlan = (newCurrentId) => { - // console.log('currentPlan newCurrentId: ', newCurrentId) - if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) { - if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) { - swalFire({ - html: getMessage('common.message.confirm.save') + `
${currentCanvasPlan.name}`, - type: 'confirm', - confirmFn: async () => { - await saveCanvas(sessionState.userId) - updateCurrentPlan(newCurrentId) - }, - denyFn: () => { - updateCurrentPlan(newCurrentId) - }, - }) - } else { - updateCurrentPlan(newCurrentId) - } - } - } - const updateCurrentPlan = (newCurrentId) => { - setPlans((plans) => - plans.map((plan) => { - return { ...plan, isCurrent: plan.id === newCurrentId } - }), - ) - } - useEffect(() => { - setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null) - }, [plans]) - - const handleDeletePlan = (e, id) => { - e.stopPropagation() // 이벤트 버블링 방지 - - if (initCanvasPlans.some((plan) => plan.id === id)) { - delCanvasById(id) - .then((res) => { - swalFire({ text: getMessage('common.message.delete') }) - // console.log('[DELETE] canvas-statuses res :::::::: %o', res) - setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id)) - setPlans((plans) => plans.filter((plan) => plan.id !== id)) - }) - .catch((error) => { - swalFire({ text: error.message, icon: 'error' }) - // console.error('[DELETE] canvas-statuses res error :::::::: %o', error) - }) - } else { - setPlans((plans) => plans.filter((plan) => plan.id !== id)) - swalFire({ text: getMessage('common.message.delete') }) - } - - // 삭제 후 last 데이터에 포커싱 - const lastPlan = plans.filter((plan) => plan.id !== id).at(-1) - if (!lastPlan) { - setPlanNum(0) - setCurrentCanvasPlan(null) - } else if (id !== lastPlan.id) { - handleCurrentPlan(lastPlan.id) - } - } - - const addEmptyPlan = () => { - setPlans([...plans, { id: planNum, name: `Plan ${planNum + 1}`, objectNo: `${objectNo}` }]) - handleCurrentPlan(planNum) - setPlanNum(planNum + 1) - } - - const addCopyPlan = () => { - const copyPlan = { - id: planNum, - name: `Plan ${planNum + 1}`, - objectNo: `${objectNo}`, - userId: sessionState.userId, - canvasStatus: currentCanvasData(), - } - setPlans((plans) => [...plans, copyPlan]) - handleCurrentPlan(planNum) - setPlanNum(planNum + 1) - } + const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan() useEffect(() => { - if (!currentCanvasPlan) { - getCanvasByObjectNo(sessionState.userId, objectNo).then((res) => { - // console.log('canvas 목록 ', res) - if (res.length > 0) { - setInitCanvasPlans(res) - setPlans(res) - handleCurrentPlan(res.at(-1).id) // last 데이터에 포커싱 - setPlanNum(res.length) - } else { - addEmptyPlan() - } - }) - } + console.log('loadCanvasPlanData 실행, sessionState.userId >>> ', sessionState.userId) + loadCanvasPlanData(sessionState.userId, objectNo) }, []) - + return (
@@ -127,7 +31,7 @@ export default function CanvasLayout() { )} diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 96115d98..8669fcfe 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -127,8 +127,8 @@ export default function CanvasMenu(props) { swalFire({ html: getMessage('common.message.confirm.save') + `
${currentCanvasPlan.name}`, type: 'confirm', - confirmFn: () => { - saveCanvas(sessionState.userId) + confirmFn: async () => { + await saveCanvas(sessionState.userId) }, }) } diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index 6d74cd93..6c67eaa4 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react' import { useRecoilState } from 'recoil' import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom' import { useAxios } from '@/hooks/useAxios' @@ -5,10 +6,13 @@ import { useMessage } from '@/hooks/useMessage' import { useSwal } from '@/hooks/useSwal' export function usePlan() { + const [planNum, setPlanNum] = useState(0) + const [canvas, setCanvas] = useRecoilState(canvasState) const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) - const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) - const [plans, setPlans] = useRecoilState(plansState) + const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) // DB에 저장된 plan + const [plans, setPlans] = useRecoilState(plansState) // 전체 plan (DB에 저장된 plan + 저장 안된 새로운 plan) + const { swalFire } = useSwal() const { getMessage } = useMessage() const { get, promisePost, promisePut, promiseDel } = useAxios() @@ -72,6 +76,9 @@ export function usePlan() { // }, 1000) } + /** + * 현재 캔버스에 그려진 데이터를 추출 + */ const currentCanvasData = () => { removeMouseLines() return addCanvas() @@ -81,8 +88,7 @@ export function usePlan() { * 실시간 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단 */ const checkModifiedCanvasPlan = () => { - removeMouseLines() - const canvasStatus = addCanvas() + const canvasStatus = currentCanvasData() const initPlanData = initCanvasPlans.find((plan) => plan.id === currentCanvasPlan.id) if (!initPlanData) { @@ -90,15 +96,10 @@ export function usePlan() { return JSON.parse(canvasStatus).objects.length > 0 } else { // 저장된 캔버스 - if (canvasStatus === initPlanData.canvasStatus) { - return false - } else { - // 각각 object들의 id 목록을 추출하여 비교 - const canvasObjsIds = getObjectIds(JSON.parse(canvasStatus).objects) - const dbObjsIds = getObjectIds(JSON.parse(initPlanData.canvasStatus).objects) - - return canvasObjsIds.length !== dbObjsIds.length || !canvasObjsIds.every((id, index) => id === dbObjsIds[index]) - } + // 각각 object들의 id 목록을 추출하여 비교 + const canvasObjsIds = getObjectIds(JSON.parse(canvasStatus).objects) + const dbObjsIds = getObjectIds(JSON.parse(initPlanData.canvasStatus).objects) + return canvasObjsIds.length !== dbObjsIds.length || !canvasObjsIds.every((id, index) => id === dbObjsIds[index]) } } const getObjectIds = (objects) => { @@ -112,9 +113,6 @@ export function usePlan() { * DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화 */ const dbToCanvasFormat = (cs) => { - // return JSON.stringify(cs.replace(/##/g, '"')) //.replace(/\\/g, ''))//.slice(1, -1)) - // JSON.stringify()를 사용하면 "가 \"로 바뀐다. 따라서, JSON.stringify를 제거 - // canvasToDbFormat()에서 \\의 상황을 없앴으므로 replace(/\\/g, '')를 제거 return cs.replace(/##/g, '"') } @@ -122,8 +120,6 @@ export function usePlan() { * canvas의 데이터를 DB에 저장할 수 있도록 포맷화 */ const canvasToDbFormat = (cs) => { - // return JSON.stringify(cs).replace(/"/g, '##') - // addCanvas()에서 JSON.stringify()를 거쳐서 나오는데, 또 감싸버려서 \가 \\로 된다. 따라서, JSON.stringify를 제거 return cs.replace(/"/g, '##') } @@ -136,78 +132,17 @@ export function usePlan() { * param(body) : id, canvasStatus */ const saveCanvas = async (userId) => { - removeMouseLines() - const canvasStatus = addCanvas() - - if (initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)) { - // canvas 수정 - const planData = { - id: currentCanvasPlan.id, - canvasStatus: canvasToDbFormat(canvasStatus), - } - - return await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData }) - .then((res) => { - swalFire({ text: getMessage('common.message.save') }) - // console.log('[PUT] canvas-statuses res :::::::: %o', res) - setInitCanvasPlans((initCanvasPlans) => - initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)), - ) - setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan))) - }) - .catch((error) => { - swalFire({ text: error.message, icon: 'error' }) - // console.error('[PUT] canvas-statuses error :::::::: %o', error) - }) - } else { - // canvas 신규 등록 - const planData = { - userId: userId, - imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요 - objectNo: currentCanvasPlan.objectNo, - canvasStatus: canvasToDbFormat(canvasStatus), - } - - return await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData }) - .then((res) => { - swalFire({ text: getMessage('common.message.save') }) - // console.log('[POST] canvas-statuses response :::::::: %o', res) - setInitCanvasPlans((initCanvasPlans) => [ - ...initCanvasPlans, - { - id: res.data, - name: currentCanvasPlan.objectNo + '-' + res.data, - userId: userId, - canvasStatus: canvasStatus, - isNew: currentCanvasPlan.id, - }, - ]) - setPlans((plans) => - plans.map((plan) => - plan.id === currentCanvasPlan.id - ? { - ...plan, - id: res.data, - name: currentCanvasPlan.objectNo + '-' + res.data, - userId: userId, - canvasStatus: canvasStatus, - isNew: currentCanvasPlan.id, - } - : plan, - ), - ) - }) - .catch((error) => { - swalFire({ text: error.message, icon: 'error' }) - // console.error('[POST] canvas-statuses res error :::::::: %o', error) - }) - } + const canvasStatus = currentCanvasData() + initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id) + ? await putCanvasStatus(canvasStatus) + : await postCanvasStatus(userId, canvasStatus) } /** - * objectNo에 해당하는 canvas 목록을 조회하는 함수 + * objectNo에 해당하는 canvas 목록을 조회 */ const getCanvasByObjectNo = async (userId, objectNo) => { + // console.log(`[GET] objectNo: ${objectNo} / userId: ${userId}`) return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) => res.map((item) => ({ id: item.id, @@ -220,27 +155,192 @@ export function usePlan() { } /** - * id에 해당하는 canvas 데이터를 삭제하는 함수 + * canvas 데이터를 추가 + */ + const postCanvasStatus = async (userId, canvasStatus) => { + const planData = { + userId: userId, + imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요 + objectNo: currentCanvasPlan.objectNo, + canvasStatus: canvasToDbFormat(canvasStatus), + } + await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData }) + .then((res) => { + swalFire({ text: getMessage('common.message.save') }) + setInitCanvasPlans((initCanvasPlans) => [...initCanvasPlans, { id: res.data, canvasStatus: canvasStatus }]) + setPlans((plans) => + plans.map((plan) => + plan.id === currentCanvasPlan.id + ? { + ...plan, + id: res.data, + name: currentCanvasPlan.objectNo + '-' + res.data, + canvasStatus: canvasStatus, + } + : plan, + ), + ) + }) + .catch((error) => { + swalFire({ text: error.message, icon: 'error' }) + }) + } + + /** + * id에 해당하는 canvas 데이터를 수정 + */ + const putCanvasStatus = async (canvasStatus) => { + const planData = { + id: currentCanvasPlan.id, + canvasStatus: canvasToDbFormat(canvasStatus), + } + await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData }) + .then((res) => { + swalFire({ text: getMessage('common.message.save') }) + setInitCanvasPlans((initCanvasPlans) => + initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)), + ) + setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan))) + }) + .catch((error) => { + swalFire({ text: error.message, icon: 'error' }) + }) + } + + /** + * id에 해당하는 canvas 데이터를 삭제 */ const delCanvasById = (id) => { return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` }) } /** - * objectNo에 해당하는 canvas 데이터들을 삭제하는 함수 + * objectNo에 해당하는 canvas 데이터들을 삭제 */ const delCanvasByObjectNo = (objectNo) => { return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` }) } + /** + * plan 이동 + * 현재 plan의 작업상태를 확인, 저장 후 이동 + */ + const handleCurrentPlan = (userId, newCurrentId) => { + if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) { + if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) { + swalFire({ + html: getMessage('common.message.confirm.save') + `
${currentCanvasPlan.name}`, + type: 'confirm', + confirmFn: async () => { + await saveCanvas(userId) + updateCurrentPlan(newCurrentId) + }, + denyFn: () => { + updateCurrentPlan(newCurrentId) + }, + }) + } else { + updateCurrentPlan(newCurrentId) + } + } + } + const updateCurrentPlan = (newCurrentId) => { + setPlans((plans) => + plans.map((plan) => { + return { ...plan, isCurrent: plan.id === newCurrentId } + }), + ) + } + useEffect(() => { + setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null) + }, [plans]) + + /** + * 새로운 plan 생성 + * 현재 plan의 데이터가 있을 경우 복제 여부를 확인 + */ + const handleAddPlan = (userId, objectNo) => { + JSON.parse(currentCanvasData()).objects.length > 0 + ? swalFire({ + html: `${currentCanvasPlan.name} PLAN을 복사하시겠습니까?`, + type: 'confirm', + confirmFn: () => { + addPlan(userId, objectNo, currentCanvasData()) + }, + denyFn: () => { + addPlan(userId, objectNo) + }, + }) + : addPlan(userId, objectNo) + } + const addPlan = (userId, objectNo, canvasStatus = '') => { + const newPlan = { + id: planNum, + name: `Plan ${planNum + 1}`, + objectNo: objectNo, + userId: userId, + canvasStatus: canvasStatus, + } + setPlans([...plans, newPlan]) + handleCurrentPlan(userId, planNum) + setPlanNum(planNum + 1) + } + + /** + * plan 삭제 + */ + const handleDeletePlan = (e, id) => { + e.stopPropagation() // 이벤트 버블링 방지 + + if (initCanvasPlans.some((plan) => plan.id === id)) { + delCanvasById(id) + .then((res) => { + swalFire({ text: getMessage('common.message.delete') }) + setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id)) + setPlans((plans) => plans.filter((plan) => plan.id !== id)) + }) + .catch((error) => { + swalFire({ text: error.message, icon: 'error' }) + }) + } else { + setPlans((plans) => plans.filter((plan) => plan.id !== id)) + swalFire({ text: getMessage('common.message.delete') }) + } + + // 삭제 후 last 데이터에 포커싱 + const lastPlan = plans.filter((plan) => plan.id !== id).at(-1) + if (!lastPlan) { + setPlanNum(0) + setCurrentCanvasPlan(null) + } else if (id !== lastPlan.id) { + updateCurrentPlan(lastPlan.id) + } + } + + /** + * plan 조회 + */ + const loadCanvasPlanData = (userId, objectNo) => { + getCanvasByObjectNo(userId, objectNo).then((res) => { + // console.log('canvas 목록 ', res) + if (res.length > 0) { + setInitCanvasPlans(res) + setPlans(res) + updateCurrentPlan(res.at(-1).id) // last 데이터에 포커싱 + setPlanNum(res.length) + } else { + addPlan(userId, objectNo) + } + }) + } + return { canvas, - removeMouseLines, - currentCanvasData, + plans, saveCanvas, - addCanvas, - checkModifiedCanvasPlan, - getCanvasByObjectNo, - delCanvasById, + handleCurrentPlan, + handleAddPlan, + handleDeletePlan, + loadCanvasPlanData, } }