From 9846cee0b797fa3bd5b48e6cbaedc62338876904 Mon Sep 17 00:00:00 2001 From: Daseul Kim Date: Wed, 30 Oct 2024 18:03:38 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20state=EB=A5=BC=20usePlan=EC=9D=84?= =?UTF-8?q?=20=ED=86=B5=ED=95=B4=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasFrame.jsx | 9 +++---- src/components/floor-plan/CanvasLayout.jsx | 6 ++--- src/components/floor-plan/CanvasMenu.jsx | 12 ++------- src/hooks/useCanvasEvent.js | 29 ++++++++-------------- 4 files changed, 17 insertions(+), 39 deletions(-) diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index 7c9ece42..a75040b7 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -2,13 +2,13 @@ import { useEffect, useRef } from 'react' -import { useRecoilState, useRecoilValue } from 'recoil' +import { useRecoilValue } from 'recoil' import { useCanvas } from '@/hooks/useCanvas' import { useEvent } from '@/hooks/useEvent' import { usePlan } from '@/hooks/usePlan' import { useContextMenu } from '@/hooks/useContextMenu' -import { currentMenuState, currentObjectState, modifiedPlanFlagState } from '@/store/canvasAtom' +import { currentMenuState, currentObjectState } from '@/store/canvasAtom' import { useCanvasEvent } from '@/hooks/useCanvasEvent' import QContextMenu from '@/components/common/context-menu/QContextMenu' import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize' @@ -19,14 +19,11 @@ import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/Panel export default function CanvasFrame() { const canvasRef = useRef(null) - const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState) const { canvas } = useCanvas('canvas') const { canvasLoadInit, gridInit } = useCanvasConfigInitialize() const currentMenu = useRecoilValue(currentMenuState) const { contextMenu, handleClick, handleKeyup } = useContextMenu() - - const { selectedPlan, checkCanvasObjectEvent, checkUnsavedCanvasPlan, resetModifiedPlans } = usePlan() - + const { selectedPlan, modifiedPlanFlag, checkCanvasObjectEvent, resetModifiedPlans } = usePlan() useEvent() const loadCanvas = () => { diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx index ea3292c0..1604a28f 100644 --- a/src/components/floor-plan/CanvasLayout.jsx +++ b/src/components/floor-plan/CanvasLayout.jsx @@ -1,12 +1,11 @@ 'use client' import { useContext, 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 { modifiedPlansState } from '@/store/canvasAtom' import { globalLocaleStore } from '@/store/localeAtom' import { SessionContext } from '@/app/SessionProvider' import { useCanvasMenu } from '@/hooks/common/useCanvasMenu' @@ -16,12 +15,11 @@ export default function CanvasLayout({ children }) { const { menuNumber } = useCanvasMenu() const { session } = useContext(SessionContext) const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요 - const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan const globalLocaleState = useRecoilValue(globalLocaleStore) const { getMessage } = useMessage() const { swalFire } = useSwal() - const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan() + const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan() useEffect(() => { loadCanvasPlanData(session.userId, objectNo) diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index e8f71f28..63f1840d 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -12,14 +12,7 @@ import { useMessage } from '@/hooks/useMessage' import { usePlan } from '@/hooks/usePlan' import { useSwal } from '@/hooks/useSwal' import { useEvent } from '@/hooks/useEvent' -import { - canvasSettingState, - canvasState, - canvasZoomState, - currentCanvasPlanState, - currentMenuState, - verticalHorizontalModeState, -} from '@/store/canvasAtom' +import { canvasSettingState, canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom' import { sessionStore } from '@/store/commonAtom' import { outerLinePointsState } from '@/store/outerLineAtom' import { appMessageStore, globalLocaleStore } from '@/store/localeAtom' @@ -53,7 +46,6 @@ export default function CanvasMenu(props) { const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState) const canvasSetting = useRecoilValue(canvasSettingState) const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState) - const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) const sessionState = useRecoilValue(sessionStore) const globalLocale = useRecoilValue(globalLocaleStore) const canvas = useRecoilValue(canvasState) @@ -61,7 +53,7 @@ export default function CanvasMenu(props) { const { handleMenu } = useMenu() const { getMessage } = useMessage() - const { saveCanvas } = usePlan() + const { currentCanvasPlan, saveCanvas } = usePlan() const { swalFire } = useSwal() const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent() const commonUtils = useRecoilValue(commonUtilsState) diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js index 9573936a..ad3e8e75 100644 --- a/src/hooks/useCanvasEvent.js +++ b/src/hooks/useCanvasEvent.js @@ -1,16 +1,9 @@ import { useState } from 'react' import { useRecoilState, useRecoilValue } from 'recoil' import { v4 as uuidv4 } from 'uuid' -import { - canvasSizeState, - canvasState, - canvasZoomState, - currentObjectState, - fontFamilyState, - fontSizeState, - modifiedPlanFlagState, -} from '@/store/canvasAtom' +import { canvasSizeState, canvasState, canvasZoomState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom' import { QPolygon } from '@/components/fabric/QPolygon' +import { usePlan } from '@/hooks/usePlan' import { fontSelector } from '@/store/fontAtom' // 캔버스에 필요한 이벤트 @@ -22,8 +15,8 @@ export function useCanvasEvent() { const fontSize = useRecoilValue(fontSizeState) const fontFamily = useRecoilValue(fontFamilyState) const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState) - const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState) const lengthTextOption = useRecoilValue(fontSelector('lengthText')) + const { modifiedPlanFlag, setModifiedPlanFlag } = usePlan() // 기본적인 이벤트 필요시 추가 const attachDefaultEventOnCanvas = () => { @@ -45,10 +38,8 @@ export function useCanvasEvent() { onChange: (e) => { const target = e.target - if (target.name !== 'mouseLine') { - if (!modifiedPlanFlag) { - setModifiedPlanFlag((prev) => !prev) - } + if (target.name !== 'mouseLine' && !modifiedPlanFlag) { + setModifiedPlanFlag((prev) => !prev) } if (target) { @@ -65,10 +56,8 @@ export function useCanvasEvent() { target.uuid = uuidv4() } - if (target.name !== 'mouseLine') { - if (!modifiedPlanFlag) { - setModifiedPlanFlag((prev) => !prev) - } + if (target.name !== 'mouseLine' && !modifiedPlanFlag) { + setModifiedPlanFlag((prev) => !prev) } if (target.type === 'QPolygon' || target.type === 'QLine') { @@ -173,7 +162,9 @@ export function useCanvasEvent() { target.on('moving', (e) => { target.uuid = uuidv4() - setModifiedPlanFlag((prev) => !prev) + if (!modifiedPlanFlag) { + setModifiedPlanFlag((prev) => !prev) + } if (target.parentDirection === 'left' || target.parentDirection === 'right') { const minX = target.minX