diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index b2ff69f6..ebcac837 100644 --- 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, ) - // 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 (
@@ -173,9 +176,12 @@ export default function CanvasMenu(props) {
  • onClickNav(menu)} + onClick={() => { + if (['2', '3'].includes(canvasSetting?.roofSizeSet?.toString()) && menu.index === 2) return + onClickNav(menu) + }} > - @@ -263,7 +269,7 @@ export default function CanvasMenu(props) {
    • - {(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) && } + {(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) && }
    ) diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx index 113a1f0e..63e5e67a 100644 --- 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, ) - break - case 1: - addPopup(outlineId, 1, ) - break - case 2: - addPopup(outlineId, 1, ) - break - case 3: - addPopup(outlineId, 1, ) - break - case 4: - addPopup(outlineId, 1, ) - break - case 5: - addPopup(outlineId, 1, ) - break - case 6: - addPopup(outlineId, 1, ) - break - case 7: - addPopup(outlineId, 1, ) - break - } - } - - if (type === 'surface') { - switch (id) { - case 0: - addPopup(outlineId, 1, ) - break - case 1: - addPopup(outlineId, 1, ) - break - case 2: - addPopup(outlineId, 1, ) - break - case 3: - addPopup(outlineId, 1, ) - break - case 4: - deleteAllSurfacesAndObjects() - break - } - } - - if (type === 'module') { - switch (id) { - case 0: - addPopup(outlineId, 1, ) - break - case 1: - addPopup(outlineId, 1, ) - 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 (
      - {menuInfo[type].map((menu) => { + {subMenus[type]?.map((menu) => { return ( -
    • +
      • ) diff --git a/src/hooks/common/useMenu.js b/src/hooks/common/useMenu.js new file mode 100644 index 00000000..75905a73 --- /dev/null +++ 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, ) + break + case MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS: + addPopup(popupId, 1, ) + break + case MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS: + addPopup(popupId, 1, ) + break + case MENU.ROOF_COVERING.HELP_LINE_DRAWING: + addPopup(popupId, 1, ) + break + case MENU.ROOF_COVERING.EAVES_KERAVA_EDIT: + addPopup(popupId, 1, ) + break + case MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN: + addPopup(popupId, 1, ) + break + case MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET: + addPopup(popupId, 1, ) + break + case MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC: + addPopup(popupId, 1, ) + break + } + } + + if (type === 'surface') { + switch (currentMenu) { + case MENU.BATCH_CANVAS.SLOPE_SETTING: + addPopup(popupId, 1, ) + break + case MENU.BATCH_CANVAS.BATCH_DRAWING: + addPopup(popupId, 1, ) + break + case MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH: + addPopup(popupId, 1, ) + break + case MENU.BATCH_CANVAS.OBJECT_BATCH: + addPopup(popupId, 1, ) + break + case MENU.BATCH_CANVAS.ALL_REMOVE: + deleteAllSurfacesAndObjects() + break + } + } + + if (type === 'module') { + switch (currentMenu) { + case MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING: + addPopup(popupId, 1, ) + break + case MENU.MODULE_CIRCUIT_SETTING.CIRCUIT_TRESTLE_SETTING: + addPopup(popupId, 1, ) + break + } + } + } + + return { + menus, + handleMenu, + } +} diff --git a/src/store/menuAtom.js b/src/store/menuAtom.js index b86ecbd0..834498f0 100644 --- 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, + }, + ], + }, +})