77 lines
3.1 KiB
JavaScript
77 lines
3.1 KiB
JavaScript
'use client'
|
|
|
|
import { ToggleonMouse } from '@/components/header/Header'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useEffect, useState } from 'react'
|
|
import { MENU } from '@/common/common'
|
|
import { currentMenuState } from '@/store/canvasAtom'
|
|
import { useSetRecoilState } from 'recoil'
|
|
|
|
export default function MenuDepth01(props) {
|
|
const { setShowOutlineModal, type } = props
|
|
const { getMessage } = useMessage()
|
|
const [activeMenu, setActiveMenu] = useState()
|
|
const setCurrentMenu = useSetRecoilState(currentMenuState)
|
|
const onClickMenu = ({ id, menu, name }) => {
|
|
setActiveMenu(menu)
|
|
setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
|
|
setCurrentMenu(menu)
|
|
if (type === 'outline') {
|
|
setShowOutlineModal(id === 0)
|
|
}
|
|
}
|
|
|
|
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.edit', menu: MENU.ROOF_COVERING.ROOF_SHAPE_EDITING },
|
|
{ id: 3, name: 'plan.menu.roof.cover.auxiliary.line.drawing', menu: MENU.ROOF_COVERING.HELP_LINE_DRAWING },
|
|
],
|
|
surface: [
|
|
// 배치면
|
|
{ id: 0, name: 'plan.menu.placement.surface.drawing', menu: MENU.BATCH_CANVAS.BATCH_DRAWING },
|
|
{ id: 1, name: 'plan.menu.placement.surface.surface', menu: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH },
|
|
{ id: 2, name: 'plan.menu.placement.surface.object', menu: MENU.BATCH_CANVAS.OBJECT_BATCH },
|
|
],
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
return (
|
|
<div className="canvas-depth2-inner">
|
|
<ul className="canvas-depth2-list">
|
|
{menuInfo[type].map((menu) => {
|
|
return (
|
|
<li key={menu.id} className={`canvas-depth2-item ${menu.menu === activeMenu ? 'active' : ''}`}>
|
|
<button onClick={() => onClickMenu(menu)}>{getMessage(menu.name)}</button>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
<ul className="canvas-depth2-btn-list">
|
|
<li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
|
|
<button>{getMessage('plan.menu.estimate.roof.alloc')}</button>
|
|
</li>
|
|
<li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
|
|
<button>屋根材の設定と変更</button>
|
|
</li>
|
|
<li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
|
|
<button>屋根面全体削除</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|