From cf4ef73248bbc7f2ce87faf014c8f625a0c5c12e Mon Sep 17 00:00:00 2001 From: Daseul Kim Date: Fri, 13 Dec 2024 11:01:09 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20canvas=20plan=EC=9D=98=20modified?= =?UTF-8?q?=20=ED=99=95=EC=9D=B8=20=EB=A1=9C=EC=A7=81=20=EC=A0=9C=EA=B1=B0?= =?UTF-8?q?=20=EB=B0=8F=20=EA=B4=80=EB=A0=A8=EB=90=9C=20=EB=A1=9C=EC=A7=81?= =?UTF-8?q?=20=EC=9D=BC=EB=B6=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/QcastProvider.js | 12 --- src/components/floor-plan/CanvasFrame.jsx | 15 +--- src/components/floor-plan/CanvasLayout.jsx | 14 ++-- src/hooks/useCanvasEvent.js | 13 ---- src/hooks/usePlan.js | 88 +++------------------- src/locales/ja.json | 1 - src/locales/ko.json | 1 - src/store/canvasAtom.js | 11 --- 8 files changed, 18 insertions(+), 137 deletions(-) diff --git a/src/app/QcastProvider.js b/src/app/QcastProvider.js index 16a62d63..861ee8f9 100644 --- a/src/app/QcastProvider.js +++ b/src/app/QcastProvider.js @@ -3,7 +3,6 @@ import { createContext, useEffect, useState } from 'react' import { ErrorBoundary } from 'next/dist/client/components/error-boundary' import { useCommonCode } from '@/hooks/common/useCommonCode' -import { usePlan } from '@/hooks/usePlan' import ServerError from './error' import '@/styles/common.scss' @@ -19,7 +18,6 @@ export const QcastContext = createContext({ export const QcastProvider = ({ children }) => { const [planSave, setPlanSave] = useState(false) const [isGlobalLoading, setIsGlobalLoading] = useState(false) - const { currentCanvasPlan, modifiedPlans, checkUnsavedCanvasPlan } = usePlan() const { commonCode, findCommonCode } = useCommonCode() const [qcastState, setQcastState] = useState({ @@ -30,16 +28,6 @@ export const QcastProvider = ({ children }) => { businessChargerMail: null, }) - useEffect(() => { - const targetElement = document.getElementById('canvas') - if (!targetElement && currentCanvasPlan?.id && planSave) { - setPlanSave((prev) => !prev) - checkUnsavedCanvasPlan() - } else if (targetElement && currentCanvasPlan?.id) { - setPlanSave(true) - } - }, [modifiedPlans]) - // useEffect(() => { // console.log('commonCode', commonCode) // console.log(findCommonCode(113600)) diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index cd39cda0..d21c55e7 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -22,7 +22,7 @@ export default function CanvasFrame() { const { canvasLoadInit, gridInit } = useCanvasConfigInitialize() const currentMenu = useRecoilValue(currentMenuState) const { contextMenu, handleClick } = useContextMenu() - const { selectedPlan, modifiedPlanFlag, checkCanvasObjectEvent, resetModifiedPlans, currentCanvasPlan } = usePlan() + const { selectedPlan, currentCanvasPlan } = usePlan() const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부 // useEvent() // const { initEvent } = useContext(EventContext) @@ -41,21 +41,8 @@ export default function CanvasFrame() { } } - useEffect(() => { - if (modifiedPlanFlag && selectedPlan?.id) { - checkCanvasObjectEvent(selectedPlan.id) - } - }, [modifiedPlanFlag]) - - useEffect(() => { - return () => { - resetModifiedPlans() - } - }, []) - useEffect(() => { loadCanvas() - resetModifiedPlans() }, [selectedPlan, canvas]) return ( diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx index 9e48873e..27e38020 100644 --- a/src/components/floor-plan/CanvasLayout.jsx +++ b/src/components/floor-plan/CanvasLayout.jsx @@ -20,7 +20,7 @@ export default function CanvasLayout({ children }) { const { getMessage } = useMessage() const { swalFire } = useSwal() - const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan() + const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan() useEffect(() => { loadCanvasPlanData(session.userId, objectNo, pid) @@ -36,10 +36,7 @@ export default function CanvasLayout({ children }) { className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`} onClick={() => handleCurrentPlan(plan.id)} > - - {`Plan ${plan.ordering}`} - {modifiedPlans.some((modifiedPlan) => modifiedPlan === plan.id) && ' [ M ]'} - + {`Plan ${plan.ordering}`} @@ -56,7 +53,12 @@ export default function CanvasLayout({ children }) { ))} {plans.length < 10 && ( - )} diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js index 0e8cd64b..7ea3e03c 100644 --- a/src/hooks/useCanvasEvent.js +++ b/src/hooks/useCanvasEvent.js @@ -3,7 +3,6 @@ import { useRecoilState, useRecoilValue } from 'recoil' import { v4 as uuidv4 } from 'uuid' import { canvasSizeState, canvasState, canvasZoomState, currentObjectState } from '@/store/canvasAtom' import { QPolygon } from '@/components/fabric/QPolygon' -import { usePlan } from '@/hooks/usePlan' import { fontSelector } from '@/store/fontAtom' // 캔버스에 필요한 이벤트 @@ -14,7 +13,6 @@ export function useCanvasEvent() { const canvasSize = useRecoilValue(canvasSizeState) const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState) const lengthTextOption = useRecoilValue(fontSelector('lengthText')) - const { modifiedPlanFlag, setModifiedPlanFlag } = usePlan() useEffect(() => { canvas?.setZoom(canvasZoom / 100) @@ -40,10 +38,6 @@ export function useCanvasEvent() { onChange: (e) => { const target = e.target - if (target.name !== 'mouseLine' && !modifiedPlanFlag) { - setModifiedPlanFlag((prev) => !prev) - } - if (target) { // settleDown(target) } @@ -58,10 +52,6 @@ export function useCanvasEvent() { target.uuid = uuidv4() } - if (target.name !== 'mouseLine' && !modifiedPlanFlag) { - setModifiedPlanFlag((prev) => !prev) - } - if (target.type === 'QPolygon' || target.type === 'QLine') { const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText') textObjs.forEach((obj) => { @@ -164,9 +154,6 @@ export function useCanvasEvent() { target.on('moving', (e) => { target.uuid = uuidv4() - if (!modifiedPlanFlag) { - setModifiedPlanFlag((prev) => !prev) - } if (target.parentDirection === 'left' || target.parentDirection === 'right') { const minX = target.minX diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index 532759a4..b49d1eca 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react' import { useRecoilState } from 'recoil' import { v4 as uuidv4 } from 'uuid' -import { canvasState, currentCanvasPlanState, plansState, modifiedPlansState, modifiedPlanFlagState } from '@/store/canvasAtom' +import { canvasState, currentCanvasPlanState, plansState } from '@/store/canvasAtom' import { useAxios } from '@/hooks/useAxios' import { useMessage } from '@/hooks/useMessage' import { useSwal } from '@/hooks/useSwal' @@ -12,14 +12,11 @@ import { useCanvas } from '@/hooks/useCanvas' export function usePlan() { const [planNum, setPlanNum] = useState(0) const [selectedPlan, setSelectedPlan] = useState(null) - const [currentCanvasStatus, setCurrentCanvasStatus] = useState(null) const [canvas, setCanvas] = useRecoilState(canvasState) const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) const [plans, setPlans] = useRecoilState(plansState) // 전체 plan - const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan - const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState) // 캔버스 실시간 오브젝트 이벤트 감지 flag const { swalFire } = useSwal() const { getMessage } = useMessage() @@ -95,64 +92,6 @@ export function usePlan() { return addCanvas() } - /** - * 캔버스에서 발생하는 실시간 오브젝트 이벤트를 감지하여 수정 여부를 확인 후 관리 - */ - const checkCanvasObjectEvent = (planId) => { - setCurrentCanvasStatus(currentCanvasData()) - if (!modifiedPlans.some((modifiedPlan) => modifiedPlan === planId) && checkModifiedCanvasPlan(planId)) { - setModifiedPlans((prev) => [...prev, planId]) - setModifiedPlanFlag(false) - } - } - useEffect(() => { - if (currentCanvasStatus) { - setCurrentCanvasPlan((prev) => ({ ...prev, canvasStatus: currentCanvasStatus })) - } - }, [currentCanvasStatus]) - - /** - * 현재 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단 - */ - const checkModifiedCanvasPlan = (planId) => { - const planData = plans.find((plan) => plan.id === planId) - if (planData.canvasStatus === '') { - // 빈 상태로 저장된 캔버스 - return true - } - - // 각각 object들의 uuid 목록을 추출하여 비교 - const canvasStatus = currentCanvasData() - const canvasObjsUuids = getObjectUuids(JSON.parse(canvasStatus).objects) - const dbObjsUuids = getObjectUuids(JSON.parse(planData.canvasStatus).objects) - return canvasObjsUuids.length !== dbObjsUuids.length || !canvasObjsUuids.every((uuid, index) => uuid === dbObjsUuids[index]) - } - const getObjectUuids = (objects) => { - return objects - .filter((obj) => obj.hasOwnProperty('uuid')) - .map((obj) => obj.uuid) - .sort() - } - - const resetModifiedPlans = () => { - setModifiedPlans([]) - setModifiedPlanFlag(false) - } - - /** - * 캔버스에 저장되지 않은 변경사항이 있을때 저장 여부를 확인 후 저장 - */ - const checkUnsavedCanvasPlan = async () => { - swalFire({ - text: `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.save.modified'), - type: 'confirm', - confirmFn: async () => { - await putCanvasStatus(currentCanvasPlan.canvasStatus) - }, - }) - resetModifiedPlans() - } - /** * DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화 */ @@ -206,8 +145,8 @@ export function usePlan() { } await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData }) .then((res) => { - setPlans([...plans, { id: res.data, objectNo: objectNo, userId: userId, canvasStatus: canvasStatus, ordering: planNum + 1 }]) - handleCurrentPlan(res.data) + setPlans((plans) => [...plans, { id: res.data, objectNo: objectNo, userId: userId, canvasStatus: canvasStatus, ordering: planNum + 1 }]) + updateCurrentPlan(res.data) setPlanNum(planNum + 1) }) .catch((error) => { @@ -228,7 +167,6 @@ export function usePlan() { await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData }) .then((res) => { setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan))) - setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id)) }) .catch((error) => { swalFire({ text: error.message, icon: 'error' }) @@ -251,13 +189,11 @@ export function usePlan() { /** * plan 이동 - * 현재 plan의 작업상태를 확인, 저장 후 이동 + * 현재 plan의 작업상태를 저장 후 이동 */ const handleCurrentPlan = async (newCurrentId) => { if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) { - if (currentCanvasPlan?.id && modifiedPlans.some((modifiedPlan) => modifiedPlan === currentCanvasPlan.id)) { - await saveCanvas() - } + await saveCanvas() updateCurrentPlan(newCurrentId) } } @@ -281,9 +217,12 @@ export function usePlan() { /** * 새로운 plan 생성 - * 현재 plan의 데이터가 있을 경우 복제 여부를 확인 + * 현재 plan의 데이터가 있을 경우 현재 plan 저장 및 복제 여부를 확인 */ const handleAddPlan = async (userId, objectNo) => { + if (currentCanvasPlan?.id) { + await saveCanvas() + } JSON.parse(currentCanvasData()).objects.length > 0 ? swalFire({ text: `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.copy'), @@ -324,7 +263,6 @@ export function usePlan() { await delCanvasById(id) .then((res) => { setPlans((plans) => plans.filter((plan) => plan.id !== id)) - setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id)) removeImage(currentCanvasPlan.id) swalFire({ text: getMessage('plan.message.delete') }) }) @@ -362,14 +300,6 @@ export function usePlan() { canvas, plans, selectedPlan, - currentCanvasPlan, - setCurrentCanvasPlan, - modifiedPlans, - modifiedPlanFlag, - setModifiedPlanFlag, - checkCanvasObjectEvent, - checkUnsavedCanvasPlan, - resetModifiedPlans, saveCanvas, handleCurrentPlan, handleAddPlan, diff --git a/src/locales/ja.json b/src/locales/ja.json index e0559649..ff40d26b 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -295,7 +295,6 @@ "modal.actual.size.setting.plane.size.length": "廊下の寸法の長さ", "modal.actual.size.setting.actual.size.length": "実寸長", "plan.message.confirm.save": "PLAN을 저장하시겠습니까?", - "plan.message.confirm.save.modified": "PLAN의 변경사항을 저장하시겠습니까?", "plan.message.confirm.copy": "PLAN을 복사하시겠습니까?", "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?", "plan.message.save": "저장되었습니다.", diff --git a/src/locales/ko.json b/src/locales/ko.json index b4b745bc..8260419f 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -300,7 +300,6 @@ "modal.actual.size.setting.plane.size.length": "복도치수 길이", "modal.actual.size.setting.actual.size.length": "실제치수 길이", "plan.message.confirm.save": "PLAN을 저장하시겠습니까?", - "plan.message.confirm.save.modified": "PLAN의 변경사항을 저장하시겠습니까?", "plan.message.confirm.copy": "PLAN을 복사하시겠습니까?", "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?", "plan.message.save": "저장되었습니다.", diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index b0e21d41..89f7e14d 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -272,17 +272,6 @@ export const plansState = atom({ default: [], }) -// 변경된 canvas plan 목록 -export const modifiedPlansState = atom({ - key: 'modifiedPlansState', - default: [], -}) -// 변경감지 flag -export const modifiedPlanFlagState = atom({ - key: 'modifiedPlanFlagState', - default: false, -}) - export const tempGridModeState = atom({ key: 'tempGridModeState', default: false,