refactor: state를 usePlan을 통해 사용하도록 변경

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

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)

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)

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