From 60ed70445b97d7320e69b2e5676774a42f23df49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?=
 <43837214+Minsiki@users.noreply.github.com>
Date: Mon, 24 Feb 2025 18:54:03 +0900
Subject: [PATCH] =?UTF-8?q?-=20menuNumber=20->=20selectedMenu=20=EB=AA=85?=
 =?UTF-8?q?=EC=B9=AD=20=EB=B3=80=EA=B2=BD=20-=20menuType=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/estimate/Estimate.jsx          |  4 +-
 src/components/floor-plan/CanvasLayout.jsx    |  4 +-
 src/components/floor-plan/CanvasMenu.jsx      | 90 ++++++++-----------
 src/components/floor-plan/FloorPlan.jsx       | 10 ++-
 src/components/floor-plan/MenuDepth01.jsx     | 15 ++--
 .../step/type/PassivityCircuitAllocation.jsx  |  4 +-
 src/components/management/StuffDetail.jsx     |  6 +-
 src/components/management/StuffSubHeader.jsx  |  4 +-
 src/hooks/common/useCanvasMenu.js             | 24 +----
 src/hooks/option/useCanvasSetting.js          | 16 ++--
 .../roofcover/useRoofAllocationSetting.js     |  7 +-
 src/hooks/surface/useSurfaceShapeBatch.js     |  2 +-
 src/store/menuAtom.js                         | 19 ++--
 13 files changed, 85 insertions(+), 120 deletions(-)

diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx
index deb95caf..72e7bb30 100644
--- a/src/components/estimate/Estimate.jsx
+++ b/src/components/estimate/Estimate.jsx
@@ -87,7 +87,7 @@ export default function Estimate({}) {
   const { getMessage } = useMessage()
 
   const { closeAll } = usePopup()
-  const { setMenuNumber } = useCanvasMenu()
+  const { setSelectedMenu } = useCanvasMenu()
   //새로 추가한 첨부파일 props
   const fileUploadProps = {
     uploadFiles: files,
@@ -142,7 +142,7 @@ export default function Estimate({}) {
   }, [selectedPlan])
 
   useEffect(() => {
-    setMenuNumber(5)
+    setSelectedMenu('estimate')
     initEstimate()
   }, [])
 
diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx
index 6a7d5ef0..22215fd2 100644
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/src/components/floor-plan/CanvasLayout.jsx
@@ -14,7 +14,7 @@ import { globalLocaleStore } from '@/store/localeAtom'
 export default function CanvasLayout({ children }) {
   // const { menuNumber } = props
   const pathname = usePathname()
-  const { menuNumber } = useCanvasMenu()
+  const { selectedMenu } = useCanvasMenu()
   const { session } = useContext(SessionContext)
   const { floorPlanState } = useContext(FloorPlanContext)
   const { objectNo, pid } = floorPlanState
@@ -30,7 +30,7 @@ export default function CanvasLayout({ children }) {
 
   return (
     <div className="canvas-layout">
-      <div className={`canvas-page-list ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
+      <div className={`canvas-page-list ${['outline', 'surface', 'module'].includes(selectedMenu) ? 'active' : ''}`}>
         <div className="canvas-plane-wrap">
           {plans.map((plan, index) => (
             <button
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 99499e88..a9679b74 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -38,7 +38,7 @@ import {
 } from '@/store/settingAtom'
 import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
 import { commonUtilsState } from '@/store/commonUtilsAtom'
-import { menusState, menuTypeState } from '@/store/menuAtom'
+import { menusState } from '@/store/menuAtom'
 import { estimateState, floorPlanObjectState } from '@/store/floorPlanObjectAtom'
 import { pwrGnrSimTypeState } from '@/store/simulatorAtom'
 import { isObjectNotEmpty } from '@/util/common-utils'
@@ -51,12 +51,11 @@ import { QcastContext } from '@/app/QcastProvider'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { usePolygon } from '@/hooks/usePolygon'
 export default function CanvasMenu(props) {
-  const { menuNumber, setMenuNumber } = props
+  const { selectedMenu, setSelectedMenu } = props
   const pathname = usePathname()
   const router = useRouter()
   const { addPopup } = usePopup()
   const canvasMenus = useRecoilValue(menusState)
-  const [type, setType] = useRecoilState(menuTypeState)
   const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
   const setAppMessageState = useSetRecoilState(appMessageStore)
   const setCurrentMenu = useSetRecoilState(currentMenuState)
@@ -154,8 +153,8 @@ export default function CanvasMenu(props) {
   }
 
   const onClickNav = async (menu) => {
-    switch (menu.index) {
-      case 0:
+    switch (menu.type) {
+      case 'drawing':
         swalFire({
           text: getMessage('stuff.detail.move.confirmMsg'),
           type: 'confirm',
@@ -165,17 +164,15 @@ export default function CanvasMenu(props) {
           },
         })
         break
-      case 1:
-        setType('placementShape')
+      case 'placement':
         onClickPlacementInitialMenu()
         await reloadCanvasStatus(objectNo, pid)
         break
-      case 2:
-        setType('outline')
+      case 'outline':
         await reloadCanvasStatus(objectNo, pid)
         break
-      case 3:
-        if (menuNumber > menu.index) {
+      case 'surface':
+        if (selectedMenu > menu.index) {
           const modules = canvas.getObjects().filter((module) => module.name === POLYGON_TYPE.MODULE)
           const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
 
@@ -210,7 +207,6 @@ export default function CanvasMenu(props) {
                   canvas.renderAll()
                   onClickNav(menu)
                 }
-                setType('surface')
               },
               denyFn: () => {
                 return
@@ -218,24 +214,23 @@ export default function CanvasMenu(props) {
             })
             return
           } else {
-            setType('surface')
           }
         } else {
-          setType('surface')
+          setSelectedMenu(menu.type)
         }
         await reloadCanvasStatus(objectNo, pid)
         break
       case 4:
-        if (menuNumber < menu.index) {
+        if (selectedMenu < menu.index) {
           if (!checkMenuAndCanvasState()) {
             swalFire({ text: getMessage('menu.validation.canvas.roof') })
             return
           } else {
-            setType('module')
+            setSelectedMenu('module')
           }
         } else {
           router.push(`/floor-plan?pid=${pid}&objectNo=${objectNo}`)
-          setType('module')
+          setSelectedMenu('module')
         }
         await reloadCanvasStatus(objectNo, pid)
         break
@@ -245,11 +240,11 @@ export default function CanvasMenu(props) {
           if (res.status === 200) {
             const estimateDetail = res.data
             if (estimateDetail.estimateDate !== null) {
-              setMenuNumber(menu.index)
+              setSelectedMenu(menu.type)
               setCurrentMenu(menu.title)
               setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
               setIsGlobalLoading(false)
-              router.push(`/floor-plan/estimate/${menu.index}?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
+              router.push(`/floor-plan/estimate/${menu.type}?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
               if (pathname === '/floor-plan/estimate/5') {
                 setIsGlobalLoading(false)
               }
@@ -266,7 +261,7 @@ export default function CanvasMenu(props) {
           if (res.status === 200) {
             const estimateDetail = res.data
             if (estimateDetail.estimateDate !== null && estimateDetail.docNo) {
-              setMenuNumber(menu.index)
+              setSelectedMenu(menu.type)
               setCurrentMenu(menu.title)
               router.push(`/floor-plan/simulator/${menu.index}?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
               if (pathname === '/floor-plan/simulator/6') {
@@ -281,14 +276,14 @@ export default function CanvasMenu(props) {
         break
     }
 
-    if (menu.index !== 6 && menu.index !== 0 && menu.index !== 5) {
-      setMenuNumber(menu.index)
+    if (menu.type !== 'simulation' && menu.type !== 'estimate' && menu.type !== 'drawing') {
+      setSelectedMenu(menu.type)
       setCurrentMenu(menu.title)
     }
     if (pathname !== '/floor-plan') {
       // if (menu.index !== 0 ) {
       //견적서 or 발전시뮬레이션 탭에서 같은 탭 클릭시 화면 이동했다 돌아오지않도록..
-      if (menu.index !== 0 && menu.index !== 5 && menu.index !== 6) {
+      if (menu.type !== 'drawing' && menu.type !== 'estimate' && menu.type !== 'simulation') {
         router.push(`/floor-plan?pid=${pid}&objectNo=${objectNo}`)
       }
     }
@@ -311,10 +306,10 @@ export default function CanvasMenu(props) {
   const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
 
   useEffect(() => {
-    if (menuNumber === 1) {
+    if (selectedMenu === 'placement') {
       onClickPlacementInitialMenu()
     }
-    if (menuNumber === 3) {
+    if (selectedMenu === 'surface') {
       const moduleSurfacesArray = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
       if (moduleSurfacesArray.length > 0) {
         moduleSurfacesArray.forEach((moduleSurface) => {
@@ -324,7 +319,7 @@ export default function CanvasMenu(props) {
         canvas.renderAll()
       }
     }
-  }, [menuNumber, type])
+  }, [selectedMenu])
 
   // 저장버튼(btn08) 클릭 시 호출되는 함수
   const handleSaveCanvas = async () => {
@@ -421,26 +416,13 @@ export default function CanvasMenu(props) {
     } else {
       setAppMessageState(JA)
     }
-  }, [type, globalLocale])
-
-  /*useEffect(() => {
-    if (menuNumber === 1) {
-      return
-    }
-    setMenuNumber(1)
-    // if ([2, 3].some((num) => num === canvasSetting?.roofSizeSet)) {
-    //   setMenuNumber(3)
-    //   setType('surface')
-    //   setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
-    // } else {
-    //   setMenuNumber(2)
-    //   setType('outline')
-    //   setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
-    // }
-  }, [basicSetting])*/
+  }, [globalLocale])
 
   const checkMenuState = (menu) => {
-    return (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) || (menuNumber === 4 && [1, 2].includes(menu.index))
+    return (
+      (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.type === 'surface') ||
+      (selectedMenu === 'module' && ['drawing', 'placement'].includes(menu.type))
+    )
   }
 
   /**
@@ -549,17 +531,17 @@ export default function CanvasMenu(props) {
   }
 
   return (
-    <div className={`canvas-menu-wrap ${[2, 3, 4].some((num) => num === menuNumber) ? 'active' : ''}`}>
+    <div className={`canvas-menu-wrap ${['outline', 'surface', 'module'].some((num) => num === selectedMenu) ? 'active' : ''}`}>
       <div className="canvas-menu-inner">
         <ul className="canvas-menu-list">
           {canvasMenus.map((menu) => {
             return (
               <li
-                key={`canvas-menu-${menu.index}`}
-                className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`}
+                key={`canvas-menu-${menu.type}`}
+                className={`canvas-menu-item ${selectedMenu === menu.type ? 'active' : ''}`}
                 onClick={async () => {
-                  if (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) return
-                  if (menuNumber === 4 && [1, 2].includes(menu.index)) return
+                  if (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.type === 'surface') return
+                  if (selectedMenu === 'module' && ['drawing', 'placement'].includes(menu.type)) return
                   await onClickNav(menu)
                 }}
               >
@@ -572,7 +554,7 @@ export default function CanvasMenu(props) {
           })}
         </ul>
         <div className="canvas-side-btn-wrap">
-          {![5, 6].some((num) => num === menuNumber) && (
+          {!['estimate', 'simulation'].some((num) => num === selectedMenu) && (
             <>
               {
                 <div className={`vertical-horizontal ${verticalHorizontalMode ? 'on' : ''}`}>
@@ -643,7 +625,7 @@ export default function CanvasMenu(props) {
             </>
           )}
 
-          {menuNumber === 5 && (
+          {selectedMenu === 'estimate' && (
             <>
               <div className="ico-btn-from">
                 <button
@@ -705,7 +687,7 @@ export default function CanvasMenu(props) {
               </div>
             </>
           )}
-          {menuNumber === 6 && (
+          {selectedMenu === 'simulation' && (
             <>
               <div className="ico-btn-from">
                 <button type="button" className="btn-frame gray ico-flx" onClick={() => handleExcelPdfFileDown('EXCEL', '2')}>
@@ -721,8 +703,8 @@ export default function CanvasMenu(props) {
           )}
         </div>
       </div>
-      <div className={`canvas-depth2-wrap ${[2, 3, 4].some((num) => num === menuNumber) ? 'active' : ''}`}>
-        {[2, 3, 4].some((num) => num === menuNumber) && <MenuDepth01 />}
+      <div className={`canvas-depth2-wrap ${['outline', 'surface', 'module'].some((num) => num === selectedMenu) ? 'active' : ''}`}>
+        {['outline', 'surface', 'module'].some((num) => num === selectedMenu) && <MenuDepth01 />}
       </div>
       {/* 견적서(menuNumber=== 5) 상세화면인경우 문서다운로드 팝업 */}
       {estimatePopupOpen && (
diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx
index 054f1e00..25efa782 100644
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/src/components/floor-plan/FloorPlan.jsx
@@ -18,7 +18,7 @@ export default function FloorPlan({ children }) {
   const pid = searchParams.get('pid')
 
   const { closeAll } = usePopup()
-  const { menuNumber, setMenuNumber } = useCanvasMenu()
+  const { selectedMenu, setSelectedMenu } = useCanvasMenu()
   const { fetchSettings } = useCanvasSetting()
   const resetCurrentMenu = useResetRecoilState(currentMenuState)
   useEffect(() => {
@@ -54,15 +54,17 @@ export default function FloorPlan({ children }) {
   }, [correntObjectNo])
 
   const modalProps = {
-    menuNumber,
-    setMenuNumber,
+    selectedMenu,
+    setSelectedMenu,
   }
 
   return (
     <>
       <div className="canvas-wrap">
         <CanvasMenu {...modalProps} />
-        <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>{children}</div>
+        <div className={`canvas-content ${selectedMenu === 'outline' || selectedMenu === 'surface' || selectedMenu === 'module' ? 'active' : ''}`}>
+          {children}
+        </div>
       </div>
     </>
   )
diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx
index c1f40140..693ccc9d 100644
--- a/src/components/floor-plan/MenuDepth01.jsx
+++ b/src/components/floor-plan/MenuDepth01.jsx
@@ -6,32 +6,37 @@ import { useMessage } from '@/hooks/useMessage'
 import useMenu from '@/hooks/common/useMenu'
 import { canvasState, currentMenuState } from '@/store/canvasAtom'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { menuTypeState, subMenusState } from '@/store/menuAtom'
+import { subMenusState } from '@/store/menuAtom'
+import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 
 export default function MenuDepth01() {
-  const type = useRecoilValue(menuTypeState)
   const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
   const { handleMenu } = useMenu()
+  const { selectedMenu, setSelectedMenu } = useCanvasMenu()
   const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
   const subMenus = useRecoilValue(subMenusState)
 
   const onClickMenu = ({ id, menu }) => {
     if (menu === currentMenu) {
-      handleMenu(type)
+      handleMenu(selectedMenu)
     } else {
       setCurrentMenu(menu)
     }
   }
 
   useEffect(() => {
-    handleMenu(type)
+    console.log(subMenus[selectedMenu])
+  }, [selectedMenu])
+
+  useEffect(() => {
+    handleMenu(selectedMenu)
     canvas?.discardActiveObject()
   }, [currentMenu])
   return (
     <div className="canvas-depth2-inner">
       <ul className="canvas-depth2-list">
-        {subMenus[type]?.map((menu) => {
+        {subMenus[selectedMenu]?.map((menu) => {
           return (
             <li key={menu.id} className={`canvas-depth2-item ${menu.menu === currentMenu ? 'active' : ''}`}>
               <button onClick={() => onClickMenu(menu)}>{getMessage(menu.name)}</button>
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
index 69f5383e..eaf41524 100644
--- a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
@@ -220,8 +220,8 @@ export default function PassivityCircuitAllocation(props) {
         goodsNo: model.goodsNo,
         serQtyList: [
           {
-            serQty: result[index + 1].maxValue,
-            paralQty: result[index + 1].count,
+            serQty: result[(index + 1).toString()].maxValue,
+            paralQty: result[(index + 1).toString()].count,
             rmdYn: 'Y',
             usePossYn: 'Y',
             roofSurfaceList: roofSurfaceList,
diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index a95f34d2..aacaeea4 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@@ -38,7 +38,7 @@ export default function StuffDetail() {
 
   const [showButton, setShowButton] = useState('') //임시저장, 저장, 삭제 버튼 컨트롤
 
-  const { setMenuNumber } = useCanvasMenu()
+  const { setSelectedMenu } = useCanvasMenu()
 
   //공통코드
   const { commonCode, findCommonCode } = useCommonCode()
@@ -308,7 +308,7 @@ export default function StuffDetail() {
                   onClick={() => {
                     setFloorPlanObjectNo({ floorPlanObjectNo: params.data.objectNo })
                     setIsGlobalLoading(true)
-                    setMenuNumber(5)
+                    setSelectedMenu('estimate')
                     router.push(`/floor-plan/estimate/5?pid=${params.data.planNo}&objectNo=${params.data.objectNo}`)
                   }}
                 >
@@ -1653,7 +1653,7 @@ export default function StuffDetail() {
           pid: planNo,
           objectNo: objectNo,
         }
-        setMenuNumber(null)
+        setSelectedMenu(null)
         const url = `/floor-plan?${queryStringFormatter(param)}`
         router.push(url)
       }
diff --git a/src/components/management/StuffSubHeader.jsx b/src/components/management/StuffSubHeader.jsx
index 368926a2..18eaa761 100644
--- a/src/components/management/StuffSubHeader.jsx
+++ b/src/components/management/StuffSubHeader.jsx
@@ -27,7 +27,7 @@ export default function StuffSubHeader({ type }) {
 
   const [buttonStyle, setButtonStyle] = useState('')
 
-  const { setMenuNumber } = useCanvasMenu()
+  const { setSelectedMenu } = useCanvasMenu()
 
   useEffect(() => {
     window.scrollTo(0, 0)
@@ -55,7 +55,7 @@ export default function StuffSubHeader({ type }) {
       objectNo: objectNo,
     }
 
-    setMenuNumber(null)
+    setSelectedMenu(null)
     const url = `/floor-plan?${queryStringFormatter(param)}`
 
     router.push(url)
diff --git a/src/hooks/common/useCanvasMenu.js b/src/hooks/common/useCanvasMenu.js
index 0fb1e87d..f90881d3 100644
--- a/src/hooks/common/useCanvasMenu.js
+++ b/src/hooks/common/useCanvasMenu.js
@@ -1,4 +1,4 @@
-import { menuNumberState } from '@/store/menuAtom'
+import { selectedMenuState } from '@/store/menuAtom'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { useEffect } from 'react'
 import { canvasState } from '@/store/canvasAtom'
@@ -6,28 +6,12 @@ import { usePolygon } from '@/hooks/usePolygon'
 import { POLYGON_TYPE } from '@/common/common'
 
 export const useCanvasMenu = () => {
-  const [menuNumber, setMenuNumber] = useRecoilState(menuNumberState)
+  const [selectedMenu, setSelectedMenu] = useRecoilState(selectedMenuState)
   const canvas = useRecoilValue(canvasState)
   const { drawDirectionArrow } = usePolygon()
 
-  /*useEffect(() => {
-    /!*
-     * 모듈,회로 구성을 벗어나면 방향 표시 초기화 필요
-     * *!/
-    if (!canvas) return
-    if (![4, 5].includes(menuNumber)) {
-      canvas
-        .getObjects()
-        .filter((obj) => obj.name === POLYGON_TYPE.ROOF)
-        .forEach((obj) => {
-          obj.set('moduleCompass', null)
-          // drawDirectionArrow(obj)
-        })
-    }
-  }, [menuNumber])*/
-
   return {
-    menuNumber,
-    setMenuNumber,
+    selectedMenu,
+    setSelectedMenu,
   }
 }
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index 255cc9ee..b1502934 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -33,7 +33,6 @@ import { useColor } from 'react-color-palette'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import PlacementShapeSetting, { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import { useCanvasMenu } from '../common/useCanvasMenu'
-import { menuTypeState } from '@/store/menuAtom'
 import { usePopup } from '../usePopup'
 import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
@@ -88,7 +87,7 @@ export function useCanvasSetting() {
   )
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
   const [color, setColor] = useColor(gridColor ?? '#FF0000')
-  const { menuNumber, setMenuNumber } = useCanvasMenu()
+  const { selectedMenu, setSelectedMenu } = useCanvasMenu()
 
   const [settingsData, setSettingsData] = useState({
     ...settingModalFirstOptions,
@@ -116,7 +115,6 @@ export function useCanvasSetting() {
   const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
   const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
   const [fetchRoofMaterials, setFetchRoofMaterials] = useRecoilState(fetchRoofMaterialsState)
-  const [type, setType] = useRecoilState(menuTypeState)
   const setCurrentMenu = useSetRecoilState(currentMenuState)
 
   const resetModuleSelectionData = useResetRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
@@ -482,12 +480,10 @@ export function useCanvasSetting() {
 
       /* 메뉴 설정 */
       if (['2', '3'].includes(params.roofSizeSet)) {
-        setMenuNumber(3)
-        setType('surface')
+        setSelectedMenu('surface')
         setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
       } else {
-        setMenuNumber(2)
-        setType('outline')
+        setSelectedMenu('outline')
         setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
       }
 
@@ -543,12 +539,10 @@ export function useCanvasSetting() {
 
       /* 메뉴 설정 */
       if (['2', '3'].includes(params?.roofSizeSet)) {
-        setMenuNumber(3)
-        setType('surface')
+        setSelectedMenu('surface')
         setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
       } else {
-        setMenuNumber(2)
-        setType('outline')
+        setSelectedMenu('outline')
         setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
       }
 
diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js
index bf2756ec..4dc7d839 100644
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/src/hooks/roofcover/useRoofAllocationSetting.js
@@ -19,7 +19,6 @@ import ActualSizeSetting from '@/components/floor-plan/modal/roofAllocation/Actu
 import { useMessage } from '@/hooks/useMessage'
 import useMenu from '@/hooks/common/useMenu'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
-import { menuTypeState } from '@/store/menuAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import { globalLocaleStore } from '@/store/localeAtom'
@@ -37,8 +36,7 @@ export function useRoofAllocationSetting(id) {
   const [popupId, setPopupId] = useState(uuidv4())
   const { addPopup, closePopup, closeAll } = usePopup()
   const currentObject = useRecoilValue(currentObjectState)
-  const { setMenuNumber } = useCanvasMenu()
-  const setMenuType = useSetRecoilState(menuTypeState)
+  const { setSelectedMenu } = useCanvasMenu()
   const roofMaterials = useRecoilValue(roofMaterialsSelector)
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
   const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
@@ -387,8 +385,7 @@ export function useRoofAllocationSetting(id) {
     })
     setEditingLines([])
     closeAll()
-    setMenuNumber(3)
-    setMenuType('surface')
+    setSelectedMenu('surface')
 
     modifyModuleSelectionData()
   }
diff --git a/src/hooks/surface/useSurfaceShapeBatch.js b/src/hooks/surface/useSurfaceShapeBatch.js
index 9b8831ed..a90a1b97 100644
--- a/src/hooks/surface/useSurfaceShapeBatch.js
+++ b/src/hooks/surface/useSurfaceShapeBatch.js
@@ -140,7 +140,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
             }
           }
         } else {
-          imageRotate = (rotate + 4) % 4
+          imageRotate = (rotate + 360) % 360
         }
         obj.set({ angle: imageRotate })
         obj.setCoords() //좌표 변경 적용
diff --git a/src/store/menuAtom.js b/src/store/menuAtom.js
index 759df0fd..0254cbb9 100644
--- a/src/store/menuAtom.js
+++ b/src/store/menuAtom.js
@@ -6,32 +6,33 @@ export const menuNumberState = atom({
   default: null,
 })
 
-export const menuTypeState = atom({
-  key: 'menuTypeState',
+export const selectedMenuState = atom({
+  key: 'selectedMenuState',
   default: null,
 })
 
 export const menusState = atom({
   key: 'menusState',
   default: [
-    { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
+    { type: 'drawing', name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING }, //. 도면 작성
     {
-      index: 1,
+      type: 'placement', // 배치면 초기설정
       name: 'plan.menu.placement.surface.initial.setting',
       icon: 'con01',
       title: MENU.INITIAL_CANVAS_SETTING,
     },
-    { index: 2, name: 'plan.menu.roof.cover', icon: 'con02', title: MENU.ROOF_COVERING.DEFAULT },
-    { index: 3, name: 'plan.menu.placement.surface', icon: 'con03', title: MENU.BATCH_CANVAS.DEFAULT },
-    { index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04', title: MENU.MODULE_CIRCUIT_SETTING.DEFAULT },
-    { index: 5, name: 'plan.menu.estimate', icon: 'con06', title: MENU.ESTIMATE.DEFAULT },
-    { index: 6, name: 'plan.menu.simulation', icon: 'con05', title: MENU.POWER_GENERATION_SIMULATION.DEFAULT },
+    { type: 'outline', name: 'plan.menu.roof.cover', icon: 'con02', title: MENU.ROOF_COVERING.DEFAULT },
+    { type: 'surface', name: 'plan.menu.placement.surface', icon: 'con03', title: MENU.BATCH_CANVAS.DEFAULT },
+    { type: 'module', name: 'plan.menu.module.circuit.setting', icon: 'con04', title: MENU.MODULE_CIRCUIT_SETTING.DEFAULT },
+    { type: 'estimate', name: 'plan.menu.estimate', icon: 'con06', title: MENU.ESTIMATE.DEFAULT },
+    { type: 'simulation', name: 'plan.menu.simulation', icon: 'con05', title: MENU.POWER_GENERATION_SIMULATION.DEFAULT },
   ],
 })
 
 export const subMenusState = atom({
   key: 'subMenusState',
   default: {
+    placement: [], // 배치면 초기 설정
     outline: [
       // 지붕덮개
       { id: 0, name: 'plan.menu.roof.cover.outline.drawing', menu: MENU.ROOF_COVERING.EXTERIOR_WALL_LINE },