refactor: canvas layout

- 예외 메뉴를 위한 레이아웃 분리

src/app/floor-plan/[mid]/[pid]/page.jsx

@@ -0,0 +1,3 @@
+export default function EstimatePage() {
+  return <div>이자리....</div>
+}

src/app/floor-plan/layout.js

@@ -1,11 +1,17 @@
 'use client'
+import FloorPlan from '@/components/floor-plan/FloorPlan'
 import { FloorPlanProvider } from './FloorPlanProvider'
+import CanvasLayout from '@/components/floor-plan/CanvasLayout'
 
 export default function FloorPlanLayout({ children }) {
   console.log('FloorPlanLayout')
   return (
     <>
-      <FloorPlanProvider>{children}</FloorPlanProvider>
+      <FloorPlanProvider>
+        <FloorPlan>
+          <CanvasLayout>{children}</CanvasLayout>
+        </FloorPlan>
+      </FloorPlanProvider>
     </>
   )
 }

src/app/floor-plan/page.jsx

@@ -1,9 +1,10 @@
+import CanvasFrame from '@/components/floor-plan/CanvasFrame'
 import FloorPlan from '@/components/floor-plan/FloorPlan'
 
 export default function FloorPlanPage() {
   return (
     <>
-      <FloorPlan />
+      <CanvasFrame />
     </>
   )
 }

src/components/floor-plan/CanvasFrame.jsx

@@ -15,7 +15,7 @@ import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitial
 import { MENU } from '@/common/common'
 import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
 
-export default function CanvasFrame({ plan }) {
+export default function CanvasFrame() {
   const canvasRef = useRef(null)
   const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState)
   const { canvas } = useCanvas('canvas')
@@ -24,14 +24,14 @@ export default function CanvasFrame({ plan }) {
   const currentObject = useRecoilValue(currentObjectState)
   const currentMenu = useRecoilValue(currentMenuState)
   const { contextMenu, handleClick, handleKeyup } = useContextMenu()
-  const { checkCanvasObjectEvent, checkUnsavedCanvasPlan, resetModifiedPlans } = usePlan()
+  const { selectedPlan, checkCanvasObjectEvent, checkUnsavedCanvasPlan, resetModifiedPlans } = usePlan()
   useEvent()
 
   const loadCanvas = () => {
     if (canvas) {
       canvas?.clear() // 캔버스를 초기화합니다.
-      if (plan?.canvasStatus) {
-        canvas?.loadFromJSON(JSON.parse(plan.canvasStatus), function () {
+      if (selectedPlan?.canvasStatus) {
+        canvas?.loadFromJSON(JSON.parse(selectedPlan.canvasStatus), function () {
           canvasLoadInit() //config된 상태로 캔버스 객체를 그린다
           canvas?.renderAll() // 캔버스를 다시 그립니다.
         })
@@ -41,15 +41,15 @@ export default function CanvasFrame({ plan }) {
   }
 
   useEffect(() => {
-    if (modifiedPlanFlag && plan?.id) {
-      checkCanvasObjectEvent(plan.id)
+    if (modifiedPlanFlag && selectedPlan?.id) {
+      checkCanvasObjectEvent(selectedPlan.id)
     }
   }, [modifiedPlanFlag])
 
   useEffect(() => {
     loadCanvas()
     resetModifiedPlans()
-  }, [plan, canvas])
+  }, [selectedPlan, canvas])
 
   return (
     <div className="canvas-frame">

src/components/floor-plan/CanvasLayout.jsx

@@ -9,9 +9,11 @@ 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'
 
-export default function CanvasLayout(props) {
-  const { menuNumber } = props
+export default function CanvasLayout({ children }) {
+  // const { menuNumber } = props
+  const { menuNumber } = useCanvasMenu()
   const { session } = useContext(SessionContext)
   const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
   const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan
@@ -60,7 +62,7 @@ export default function CanvasLayout(props) {
           </button>
         )}
       </div>
-      <CanvasFrame plan={plans.find((plan) => plan.isCurrent === true)} />
+      {children}
     </div>
   )
 }

src/components/floor-plan/FloorPlan.jsx

@@ -7,16 +7,18 @@ import { globalLocaleStore } from '@/store/localeAtom'
 import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
+import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import '@/styles/contents.scss'
 
-export default function FloorPlan() {
+export default function FloorPlan({ children }) {
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
 
-  const [menuNumber, setMenuNumber] = useState(null)
+  // const [menuNumber, setMenuNumber] = useState(null)
+  const { menuNumber, setMenuNumber } = useCanvasMenu()
 
   const modalProps = {
     menuNumber,
@@ -57,9 +59,7 @@ export default function FloorPlan() {
     <>
       <div className="canvas-wrap">
         <CanvasMenu {...modalProps} />
-        <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
-          <CanvasLayout menuNumber={menuNumber} />
-        </div>
+        <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>{children}</div>
       </div>
     </>
   )

src/hooks/common/useCanvasMenu.js

@@ -0,0 +1,10 @@
+import { useState } from 'react'
+
+export const useCanvasMenu = () => {
+  const [menuNumber, setMenuNumber] = useState(null)
+
+  return {
+    menuNumber,
+    setMenuNumber,
+  }
+}

src/hooks/usePlan.js

@@ -8,6 +8,7 @@ import { useSwal } from '@/hooks/useSwal'
 
 export function usePlan() {
   const [planNum, setPlanNum] = useState(0)
+  const [selectedPlan, setSelectedPlan] = useState(null)
 
   const [canvas, setCanvas] = useRecoilState(canvasState)
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
@@ -279,6 +280,7 @@ export function usePlan() {
   }
   useEffect(() => {
     setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
+    setSelectedPlan(plans.find((plan) => plan.isCurrent))
   }, [plans])
 
   /**
@@ -366,6 +368,7 @@ export function usePlan() {
   return {
     canvas,
     plans,
+    selectedPlan,
     modifiedPlans,
     checkCanvasObjectEvent,
     resetModifiedPlans,