Merge branch 'qcast-pub' into dev

# Conflicts:
#	src/hooks/option/useCanvasSetting.js

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()
   }, [])
 

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

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)
@@ -165,8 +164,8 @@ export default function CanvasMenu(props) {
   }
 
   const onClickNav = async (menu) => {
-    switch (menu.index) {
+    switch (menu.type) {
-      case 0:
+      case 'drawing':
         swalFire({
           text: getMessage('stuff.detail.move.confirmMsg'),
           type: 'confirm',
@@ -176,17 +175,15 @@ export default function CanvasMenu(props) {
           },
         })
         break
-      case 1:
+      case 'placement':
-        setType('placementShape')
         onClickPlacementInitialMenu()
         await reloadCanvasStatus(objectNo, pid)
         break
-      case 2:
+      case 'outline':
-        setType('outline')
         await reloadCanvasStatus(objectNo, pid)
         break
-      case 3:
+      case 'surface':
-        if (menuNumber > menu.index) {
+        if (selectedMenu > menu.index) {
           const modules = canvas.getObjects().filter((module) => module.name === POLYGON_TYPE.MODULE)
 
           if (modules.length > 0) {
@@ -212,7 +209,6 @@ export default function CanvasMenu(props) {
                   canvas.renderAll()
                   onClickNav(menu)
                 }
-                setType('surface')
               },
               denyFn: () => {
                 return
@@ -220,24 +216,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
@@ -247,11 +242,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)
               }
@@ -268,7 +263,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') {
@@ -283,14 +278,14 @@ export default function CanvasMenu(props) {
         break
     }
 
-    if (menu.index !== 6 && menu.index !== 0 && menu.index !== 5) {
+    if (menu.type !== 'simulation' && menu.type !== 'estimate' && menu.type !== 'drawing') {
-      setMenuNumber(menu.index)
+      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}`)
       }
     }
@@ -313,10 +308,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) {
         initRoofs()
@@ -327,7 +322,7 @@ export default function CanvasMenu(props) {
         canvas.renderAll()
       }
     }
-  }, [menuNumber, type])
+  }, [selectedMenu])
 
   // 저장버튼(btn08) 클릭 시 호출되는 함수
   const handleSaveCanvas = async () => {
@@ -424,26 +419,13 @@ export default function CanvasMenu(props) {
     } else {
       setAppMessageState(JA)
     }
-  }, [type, globalLocale])
+  }, [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])*/
 
   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))
+    )
   }
 
   /**
@@ -552,17 +534,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}`}
+                key={`canvas-menu-${menu.type}`}
-                className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`}
+                className={`canvas-menu-item ${selectedMenu === menu.type ? 'active' : ''}`}
                 onClick={async () => {
-                  if (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) return
+                  if (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.type === 'surface') return
-                  if (menuNumber === 4 && [1, 2].includes(menu.index)) return
+                  if (selectedMenu === 'module' && ['drawing', 'placement'].includes(menu.type)) return
                   await onClickNav(menu)
                 }}
               >
@@ -575,7 +557,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' : ''}`}>
@@ -646,7 +628,7 @@ export default function CanvasMenu(props) {
             </>
           )}
 
-          {menuNumber === 5 && (
+          {selectedMenu === 'estimate' && (
             <>
               <div className="ico-btn-from">
                 <button
@@ -708,7 +690,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')}>
@@ -724,8 +706,8 @@ export default function CanvasMenu(props) {
           )}
         </div>
       </div>
-      <div className={`canvas-depth2-wrap ${[2, 3, 4].some((num) => num === menuNumber) ? 'active' : ''}`}>
+      <div className={`canvas-depth2-wrap ${['outline', 'surface', 'module'].some((num) => num === selectedMenu) ? 'active' : ''}`}>
-        {[2, 3, 4].some((num) => num === menuNumber) && <MenuDepth01 />}
+        {['outline', 'surface', 'module'].some((num) => num === selectedMenu) && <MenuDepth01 />}
       </div>
       {/* 견적서(menuNumber=== 5) 상세화면인경우 문서다운로드 팝업 */}
       {estimatePopupOpen && (

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,
+    selectedMenu,
-    setMenuNumber,
+    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>
     </>
   )

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>

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,
+            serQty: result[(index + 1).toString()].maxValue,
-            paralQty: result[index + 1].count,
+            paralQty: result[(index + 1).toString()].count,
             rmdYn: 'Y',
             usePossYn: 'Y',
             roofSurfaceList: roofSurfaceList,

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)
       }

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)

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,
+    selectedMenu,
-    setMenuNumber,
+    setSelectedMenu,
   }
 }

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'
@@ -86,7 +85,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,
@@ -114,7 +113,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) /* 다음으로 넘어가는 최종 데이터 */
@@ -341,10 +339,9 @@ export function useCanvasSetting() {
             }
           })
 
-          /** 데이터 존재 시 화면 닫기(메뉴/저장 클릭 시 제외) */
+          /* 데이터 존재 시 화면 닫기(메뉴/저장 클릭 시 제외) */
           if (openPoint !== 'canvasMenus' && openPoint !== 'basicSettingSave') {
-            //closePopup(popupId)
+            closePopup(popupId)
-            closeAll()
           }
         } else {
           roofsRow = [
@@ -447,12 +444,10 @@ export function useCanvasSetting() {
    */
   const setMenuByRoofSize = (roofSizeSet) => {
     if (['2', '3'].includes(String(roofSizeSet))) {
-      setMenuNumber(3)
+      setSelectedMenu('surface')
-      setType('surface')
       setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
     } else {
-      setMenuNumber(2)
+      setSelectedMenu('outline')
-      setType('outline')
       setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
     }
   }

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 { setSelectedMenu } = useCanvasMenu()
-  const setMenuType = useSetRecoilState(menuTypeState)
   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)
+    setSelectedMenu('surface')
-    setMenuType('surface')
 
     modifyModuleSelectionData()
   }

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() //좌표 변경 적용

src/store/menuAtom.js

@@ -6,32 +6,33 @@ export const menuNumberState = atom({
   default: null,
 })
 
-export const menuTypeState = atom({
+export const selectedMenuState = atom({
-  key: 'menuTypeState',
+  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 },
+    { type: 'outline', 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 },
+    { type: 'surface', 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 },
+    { type: 'module', 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 },
+    { type: 'estimate', 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: '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 },

src/styles/_modal.scss

@@ -995,6 +995,26 @@ $alert-color: #101010;
                 }
             }
         }
+        &:disabled{
+            color: $pop-color;
+            border: 1px solid #646464;
+            background-color: transparent;
+            opacity: 0.5;
+            &.act,
+            &:hover{
+                color: $pop-color;
+                border: 1px solid #646464;
+                background-color: transparent;
+                i{
+                    &.allocation01{
+                        background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
+                    }
+                    &.allocation02{
+                        background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
+                    }
+                }
+            }
+        }
     }
 }