Merge branch 'qcast-pub' into dev

2024-10-29 14:28:10 +09:00 · 2024-10-29 14:28:10 +09:00 · b12c82135a
commit b12c82135a
parent 5daf989180 4a4d532bbe
5 changed files with 221 additions and 168 deletions
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@ -12,53 +12,51 @@ import { useMessage } from '@/hooks/useMessage'
 import { usePlan } from '@/hooks/usePlan'
 import { useSwal } from '@/hooks/useSwal'
 import { useEvent } from '@/hooks/useEvent'
-import { canvasState, canvasZoomState, currentCanvasPlanState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
+import {
+  canvasSettingState,
+  canvasState,
+  canvasZoomState,
+  currentCanvasPlanState,
+  currentMenuState,
+  verticalHorizontalModeState,
+} from '@/store/canvasAtom'
 import { sessionStore } from '@/store/commonAtom'
 import { outerLinePointsState } from '@/store/outerLineAtom'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
-import { settingModalFirstOptionsState, wordDisplaySelector } from '@/store/settingAtom'
-import { MENU } from '@/common/common'
+import { settingModalFirstOptionsState } from '@/store/settingAtom'

 import KO from '@/locales/ko.json'
 import JA from '@/locales/ja.json'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
-import { popupState } from '@/store/popupAtom'
 import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
 import { usePopup } from '@/hooks/usePopup'
 import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
 import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import { useCommonUtils } from '@/hooks/common/useCommonUtils'
-
-const canvasMenus = [
-  { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
-  { index: 1, 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 },
-]
+import { menusState, menuTypeState } from '@/store/menuAtom'
+import useMenu from '@/hooks/common/useMenu'
+import { MENU } from '@/common/common'

 export default function CanvasMenu(props) {
  const { menuNumber, setMenuNumber } = props
  const pathname = usePathname()
  const router = useRouter()
-
-  const { addPopup, closePopup } = usePopup()
-  const [type, setType] = useState('')
-
+  const { addPopup } = usePopup()
+  const canvasMenus = useRecoilValue(menusState)
+  const [type, setType] = useRecoilState(menuTypeState)
  const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
  const setCurrentMenu = useSetRecoilState(currentMenuState)
  const setOuterLinePoints = useSetRecoilState(outerLinePointsState)
  const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState)
+  const canvasSetting = useRecoilValue(canvasSettingState)
  const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
  const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
-  const { handleZoomClear } = useCanvasEvent()
-
+  const sessionState = useRecoilValue(sessionStore)
  const globalLocale = useRecoilValue(globalLocaleStore)
  const canvas = useRecoilValue(canvasState)
-  const sessionState = useRecoilValue(sessionStore)
+  const { handleZoomClear } = useCanvasEvent()
+  const { handleMenu } = useMenu()

  const { getMessage } = useMessage()
  const { saveCanvas } = usePlan()
@ -70,14 +68,11 @@ export default function CanvasMenu(props) {
    dimension: false,
    distance: false,
  })
-
  const { commonFunctions } = useCommonUtils({
    commonFunctionState,
    setCommonFunctionState,
  })

-  const [popup, setPopup] = useRecoilState(popupState)
-
  const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]

  const onClickNav = (menu) => {
@ -102,9 +97,6 @@ export default function CanvasMenu(props) {

    if (pathname !== '/floor-plan') router.push('/floor-plan')
  }
-  const menuProps = {
-    type,
-  }

  const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)

@ -135,7 +127,6 @@ export default function CanvasMenu(props) {
  }
  const onClickPlacementInitialMenu = () => {
    addPopup(placementInitialId, 1, <PlacementShapeSetting {...placementInitialProps} />)
-    // setShowPlaceShapeModal(true)
  }

  const handleClear = () => {
@ -162,7 +153,19 @@ export default function CanvasMenu(props) {
    } else {
      setAppMessageState(JA)
    }
-  }, [menuNumber, type, globalLocale])
+  }, [type, globalLocale])
+
+  useEffect(() => {
+    if (['2', '3'].includes(canvasSetting?.roofSizeSet?.toString())) {
+      setMenuNumber(3)
+      setType('surface')
+      setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
+    } else {
+      setMenuNumber(2)
+      setType('outline')
+      setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
+    }
+  }, [canvasSetting])

  return (
    <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
@ -173,9 +176,12 @@ export default function CanvasMenu(props) {
              <li
                key={`canvas-menu-${menu.index}`}
                className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`}
-                onClick={() => onClickNav(menu)}
+                onClick={() => {
+                  if (['2', '3'].includes(canvasSetting?.roofSizeSet?.toString()) && menu.index === 2) return
+                  onClickNav(menu)
+                }}
              >
-                <button>
+                <button className={['2', '3'].includes(canvasSetting?.roofSizeSet?.toString()) && menu.index === 2 ? 'no-click' : ''}>
                  <span className={`menu-icon ${menu.icon}`}></span>
                  {getMessage(menu.name)}
                </button>
@ -263,7 +269,7 @@ export default function CanvasMenu(props) {
        </div>
      </div>
      <div className={`canvas-depth2-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
-        {(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) && <MenuDepth01 {...menuProps} />}
+        {(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) && <MenuDepth01 />}
      </div>
    </div>
  )
--- a/src/components/floor-plan/MenuDepth01.jsx
+++ b/src/components/floor-plan/MenuDepth01.jsx
@ -1,150 +1,32 @@
 'use client'

 import { useMessage } from '@/hooks/useMessage'
-import { useEffect, useState } from 'react'
-import { MENU } from '@/common/common'
 import { currentMenuState } from '@/store/canvasAtom'
-import { useSetRecoilState } from 'recoil'
-import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
-import { usePopup } from '@/hooks/usePopup'
-import { v4 as uuidv4 } from 'uuid'
-import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting'
-import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
-import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
-import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing'
-import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
-import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
-import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
-import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
-import Slope from '@/components/floor-plan/modal/Slope'
-import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
-import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/PlacementShapeDrawing'
-import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
-import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting'
-import CircuitTrestleSetting from '@/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { menuTypeState, subMenusState } from '@/store/menuAtom'
+import useMenu from '@/hooks/common/useMenu'
+import { useEffect } from 'react'

-export default function MenuDepth01(props) {
-  const { type } = props
+export default function MenuDepth01() {
+  const type = useRecoilValue(menuTypeState)
  const { getMessage } = useMessage()
-  const [activeMenu, setActiveMenu] = useState()
-  const setCurrentMenu = useSetRecoilState(currentMenuState)
-  const { deleteAllSurfacesAndObjects } = useSurfaceShapeBatch()
-  const { addPopup } = usePopup()
-  const [outlineId, setOutlineId] = useState(uuidv4())
-  const onClickMenu = ({ id, menu, name }) => {
-    setActiveMenu(menu)
+  const { handleMenu } = useMenu()
+  const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
+  const subMenus = useRecoilValue(subMenusState)
+
+  const onClickMenu = ({ id, menu }) => {
    setCurrentMenu(menu)
-    if (type === 'outline') {
-      switch (id) {
-        case 0:
-          addPopup(outlineId, 1, <WallLineSetting id={outlineId} />)
-          break
-        case 1:
-          addPopup(outlineId, 1, <RoofShapeSetting id={outlineId} />)
-          break
-        case 2:
-          addPopup(outlineId, 1, <RoofShapePassivitySetting id={outlineId} />)
-          break
-        case 3:
-          addPopup(outlineId, 1, <AuxiliaryDrawing id={outlineId} />)
-          break
-        case 4:
-          addPopup(outlineId, 1, <EavesGableEdit id={outlineId} />)
-          break
-        case 5:
-          addPopup(outlineId, 1, <MovementSetting id={outlineId} />)
-          break
-        case 6:
-          addPopup(outlineId, 1, <WallLineOffsetSetting id={outlineId} />)
-          break
-        case 7:
-          addPopup(outlineId, 1, <RoofAllocationSetting id={outlineId} />)
-          break
-      }
-    }
-
-    if (type === 'surface') {
-      switch (id) {
-        case 0:
-          addPopup(outlineId, 1, <Slope id={outlineId} />)
-          break
-        case 1:
-          addPopup(outlineId, 1, <PlacementShapeDrawing id={outlineId} />)
-          break
-        case 2:
-          addPopup(outlineId, 1, <PlacementSurfaceSetting id={outlineId} />)
-          break
-        case 3:
-          addPopup(outlineId, 1, <ObjectSetting id={outlineId} />)
-          break
-        case 4:
-          deleteAllSurfacesAndObjects()
-          break
-      }
-    }
-
-    if (type === 'module') {
-      switch (id) {
-        case 0:
-          addPopup(outlineId, 1, <BasicSetting id={outlineId} />)
-          break
-        case 1:
-          addPopup(outlineId, 1, <CircuitTrestleSetting id={outlineId} />)
-          break
-      }
-    }
  }

  useEffect(() => {
-    setActiveMenu(null)
-  }, [type])
-
-  const menuInfo = {
-    outline: [
-      // 지붕덮개
-      { id: 0, name: 'plan.menu.roof.cover.outline.drawing', menu: MENU.ROOF_COVERING.EXTERIOR_WALL_LINE },
-      { id: 1, name: 'plan.menu.roof.cover.roof.shape.setting', menu: MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS },
-      {
-        id: 2,
-        name: 'plan.menu.roof.cover.roof.shape.passivity.setting',
-        menu: MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS,
-      },
-      { id: 3, name: 'plan.menu.roof.cover.auxiliary.line.drawing', menu: MENU.ROOF_COVERING.HELP_LINE_DRAWING },
-      { id: 4, name: 'plan.menu.roof.cover.eaves.kerava.edit', menu: MENU.ROOF_COVERING.EAVES_KERAVA_EDIT },
-      { id: 5, name: 'plan.menu.roof.cover.movement.shape.updown', menu: MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN },
-      { id: 6, name: 'plan.menu.roof.cover.outline.edit.offset', menu: MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET },
-      { id: 7, name: 'plan.menu.roof.cover.roof.surface.alloc', menu: MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC },
-    ],
-    surface: [
-      // 배치면
-      { id: 0, name: 'plan.menu.placement.surface.slope.setting', menu: MENU.BATCH_CANVAS.SLOPE_SETTING },
-      { id: 1, name: 'plan.menu.placement.surface.drawing', menu: MENU.BATCH_CANVAS.BATCH_DRAWING },
-      { id: 2, name: 'plan.menu.placement.surface.arrangement', menu: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH },
-      { id: 3, name: 'plan.menu.placement.surface.object', menu: MENU.BATCH_CANVAS.OBJECT_BATCH },
-      { id: 4, name: 'plan.menu.placement.surface.all.remove', menu: MENU.BATCH_CANVAS.ALL_REMOVE },
-    ],
-    module: [
-      // 모듈, 회로 구성
-
-      { id: 0, name: 'plan.menu.module.circuit.setting.default', menu: MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING },
-      {
-        id: 1,
-        name: 'plan.menu.module.circuit.setting.circuit.trestle.setting',
-        menu: MENU.MODULE_CIRCUIT_SETTING.CIRCUIT_TRESTLE_SETTING,
-      },
-      {
-        id: 2,
-        name: 'plan.menu.module.circuit.setting.plan.orientation',
-        menu: MENU.MODULE_CIRCUIT_SETTING.PLAN_ORIENTATION,
-      },
-    ],
-  }
+    handleMenu(type)
+  }, [currentMenu])
  return (
    <div className="canvas-depth2-inner">
      <ul className="canvas-depth2-list">
-        {menuInfo[type].map((menu) => {
+        {subMenus[type]?.map((menu) => {
          return (
-            <li key={menu.id} className={`canvas-depth2-item ${menu.menu === activeMenu ? 'active' : ''}`}>
+            <li key={menu.id} className={`canvas-depth2-item ${menu.menu === currentMenu ? 'active' : ''}`}>
              <button onClick={() => onClickMenu(menu)}>{getMessage(menu.name)}</button>
            </li>
          )
--- a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
@ -1,15 +1,17 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import QSelectBox from '@/components/common/select/QSelectBox'
+import { pitchTextSelector } from '@/store/canvasAtom'

 export default function DimensionLineSetting(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const { id, setIsShow, pos = contextPopupPosition } = props
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
+  const pitchText = useRecoilState(pitchTextSelector)
  const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
  return (
    <WithDraggable isShow={true} pos={pos}>
@ -52,14 +54,14 @@ export default function DimensionLineSetting(props) {
                <div className="grid-select mr10">
                  <QSelectBox title={'0'} option={SelectOption01} />
                </div>
-                <span className="thin">寸法</span>
+                <span className="thin">{pitchText}</span>
              </div>
              <div className="outline-form">
                <span className="mr10">傾斜</span>
                <div className="grid-select mr10">
                  <QSelectBox title={'0'} option={SelectOption01} />
                </div>
-                <span className="thin">寸法</span>
+                <span className="thin">{pitchText}</span>
              </div>
            </div>
            <div className="warning">傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。</div>
--- a/src/hooks/common/useMenu.js
+++ b/src/hooks/common/useMenu.js
@ -0,0 +1,95 @@
+import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting'
+import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
+import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
+import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing'
+import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
+import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
+import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
+import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
+import Slope from '@/components/floor-plan/modal/Slope'
+import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/PlacementShapeDrawing'
+import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
+import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
+import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting'
+import CircuitTrestleSetting from '@/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting'
+import { usePopup } from '@/hooks/usePopup'
+import { useState } from 'react'
+import { v4 as uuidv4 } from 'uuid'
+import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
+import { useRecoilValue } from 'recoil'
+import { currentMenuState } from '@/store/canvasAtom'
+import { MENU } from '@/common/common'
+
+export default function useMenu() {
+  const menus = []
+  const currentMenu = useRecoilValue(currentMenuState)
+  const [popupId, setPopupId] = useState(uuidv4())
+  const { addPopup } = usePopup()
+  const { deleteAllSurfacesAndObjects } = useSurfaceShapeBatch()
+  const handleMenu = (type) => {
+    if (type === 'outline') {
+      switch (currentMenu) {
+        case MENU.ROOF_COVERING.EXTERIOR_WALL_LINE:
+          addPopup(popupId, 1, <WallLineSetting id={popupId} />)
+          break
+        case MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS:
+          addPopup(popupId, 1, <RoofShapeSetting id={popupId} />)
+          break
+        case MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS:
+          addPopup(popupId, 1, <RoofShapePassivitySetting id={popupId} />)
+          break
+        case MENU.ROOF_COVERING.HELP_LINE_DRAWING:
+          addPopup(popupId, 1, <AuxiliaryDrawing id={popupId} />)
+          break
+        case MENU.ROOF_COVERING.EAVES_KERAVA_EDIT:
+          addPopup(popupId, 1, <EavesGableEdit id={popupId} />)
+          break
+        case MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN:
+          addPopup(popupId, 1, <MovementSetting id={popupId} />)
+          break
+        case MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET:
+          addPopup(popupId, 1, <WallLineOffsetSetting id={popupId} />)
+          break
+        case MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC:
+          addPopup(popupId, 1, <RoofAllocationSetting id={popupId} />)
+          break
+      }
+    }
+
+    if (type === 'surface') {
+      switch (currentMenu) {
+        case MENU.BATCH_CANVAS.SLOPE_SETTING:
+          addPopup(popupId, 1, <Slope id={popupId} />)
+          break
+        case MENU.BATCH_CANVAS.BATCH_DRAWING:
+          addPopup(popupId, 1, <PlacementShapeDrawing id={popupId} />)
+          break
+        case MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH:
+          addPopup(popupId, 1, <PlacementSurfaceSetting id={popupId} />)
+          break
+        case MENU.BATCH_CANVAS.OBJECT_BATCH:
+          addPopup(popupId, 1, <ObjectSetting id={popupId} />)
+          break
+        case MENU.BATCH_CANVAS.ALL_REMOVE:
+          deleteAllSurfacesAndObjects()
+          break
+      }
+    }
+
+    if (type === 'module') {
+      switch (currentMenu) {
+        case MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING:
+          addPopup(popupId, 1, <BasicSetting id={popupId} />)
+          break
+        case MENU.MODULE_CIRCUIT_SETTING.CIRCUIT_TRESTLE_SETTING:
+          addPopup(popupId, 1, <CircuitTrestleSetting id={popupId} />)
+          break
+      }
+    }
+  }
+
+  return {
+    menus,
+    handleMenu,
+  }
+}
--- a/src/store/menuAtom.js
+++ b/src/store/menuAtom.js
@ -1,6 +1,74 @@
 import { atom } from 'recoil'
+import { MENU } from '@/common/common'

 export const menuNumberState = atom({
  key: 'menuNumberState',
  default: null,
 })
+
+export const menuTypeState = atom({
+  key: 'menuTypeState',
+  default: null,
+})
+
+export const menusState = atom({
+  key: 'menusState',
+  default: [
+    { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
+    {
+      index: 1,
+      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 },
+  ],
+})
+
+export const subMenusState = atom({
+  key: 'subMenusState',
+  default: {
+    outline: [
+      // 지붕덮개
+      { id: 0, name: 'plan.menu.roof.cover.outline.drawing', menu: MENU.ROOF_COVERING.EXTERIOR_WALL_LINE },
+      { id: 1, name: 'plan.menu.roof.cover.roof.shape.setting', menu: MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS },
+      {
+        id: 2,
+        name: 'plan.menu.roof.cover.roof.shape.passivity.setting',
+        menu: MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS,
+      },
+      { id: 3, name: 'plan.menu.roof.cover.auxiliary.line.drawing', menu: MENU.ROOF_COVERING.HELP_LINE_DRAWING },
+      { id: 4, name: 'plan.menu.roof.cover.eaves.kerava.edit', menu: MENU.ROOF_COVERING.EAVES_KERAVA_EDIT },
+      { id: 5, name: 'plan.menu.roof.cover.movement.shape.updown', menu: MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN },
+      { id: 6, name: 'plan.menu.roof.cover.outline.edit.offset', menu: MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET },
+      { id: 7, name: 'plan.menu.roof.cover.roof.surface.alloc', menu: MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC },
+    ],
+    surface: [
+      // 배치면
+      { id: 0, name: 'plan.menu.placement.surface.slope.setting', menu: MENU.BATCH_CANVAS.SLOPE_SETTING },
+      { id: 1, name: 'plan.menu.placement.surface.drawing', menu: MENU.BATCH_CANVAS.BATCH_DRAWING },
+      { id: 2, name: 'plan.menu.placement.surface.arrangement', menu: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH },
+      { id: 3, name: 'plan.menu.placement.surface.object', menu: MENU.BATCH_CANVAS.OBJECT_BATCH },
+      { id: 4, name: 'plan.menu.placement.surface.all.remove', menu: MENU.BATCH_CANVAS.ALL_REMOVE },
+    ],
+    module: [
+      // 모듈, 회로 구성
+
+      { id: 0, name: 'plan.menu.module.circuit.setting.default', menu: MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING },
+      {
+        id: 1,
+        name: 'plan.menu.module.circuit.setting.circuit.trestle.setting',
+        menu: MENU.MODULE_CIRCUIT_SETTING.CIRCUIT_TRESTLE_SETTING,
+      },
+      {
+        id: 2,
+        name: 'plan.menu.module.circuit.setting.plan.orientation',
+        menu: MENU.MODULE_CIRCUIT_SETTING.PLAN_ORIENTATION,
+      },
+    ],
+  },
+})