- html 수정

This commit is contained in:
minsik 2024-09-25 17:11:26 +09:00
parent e8fff6c190
commit 4283ff9dcf
2 changed files with 33 additions and 94 deletions

View File

@ -1,4 +1,5 @@
export const MENU = { export const MENU = {
PLAN_DRAWING: 'planDrawing',
INITIAL_CANVAS_SETTING: 'initialCanvasSetting', // 배치면 초기설정 INITIAL_CANVAS_SETTING: 'initialCanvasSetting', // 배치면 초기설정
ROOF_COVERING: { ROOF_COVERING: {
EXTERIOR_WALL_LINE: 'exteriorWallLine', // 외벽선 그리기 EXTERIOR_WALL_LINE: 'exteriorWallLine', // 외벽선 그리기

View File

@ -18,13 +18,13 @@ import JA from '@/locales/ja.json'
import { settingModalFirstOptionsState } from '@/store/settingAtom' import { settingModalFirstOptionsState } from '@/store/settingAtom'
const canvasMenus = [ const canvasMenus = [
{ index: 0, name: 'plan.menu.plan.drawing', icon: 'con00' }, { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
{ index: 1, name: 'plan.menu.placement.surface.initial.setting', icon: 'con01' }, { 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' }, { index: 2, name: 'plan.menu.roof.cover', icon: 'con02', title: MENU.ROOF_COVERING.DEFAULT },
{ index: 3, name: 'plan.menu.placement.surface', icon: 'con03' }, { index: 3, name: 'plan.menu.placement.surface', icon: 'con03', title: MENU.BATCH_CANVAS.DEFAULT },
{ index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04' }, { index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04', title: MENU.MODULE_CIRCUIT_SETTING.DEFAULT },
{ index: 5, name: 'plan.menu.estimate', icon: 'con06' }, { index: 5, name: 'plan.menu.estimate', icon: 'con06', title: MENU.ESTIMATE.DEFAULT },
{ index: 6, name: 'plan.menu.simulation', icon: 'con05' }, { index: 6, name: 'plan.menu.simulation', icon: 'con05', title: MENU.POWER_GENERATION_SIMULATION.DEFAULT },
] ]
export default function CanvasMenu(props) { export default function CanvasMenu(props) {
@ -45,11 +45,21 @@ export default function CanvasMenu(props) {
const { getMessage } = useMessage() const { getMessage } = useMessage()
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }] const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
const onClickNav = (number) => { const onClickNav = (menu) => {
setMenuNumber(number) setMenuNumber(menu.index)
if (number === 2) setType('outline') setCurrentMenu(menu.title)
if (number === 3) setType('surface')
if (number === 4) setType('module') switch (menu.index) {
case 2:
setType('outline')
break
case 3:
setType('surface')
break
case 4:
setType('module')
break
}
} }
const menuProps = { const menuProps = {
setShowOutlineModal, setShowOutlineModal,
@ -89,88 +99,16 @@ export default function CanvasMenu(props) {
<div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}> <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
<div className="canvas-menu-inner"> <div className="canvas-menu-inner">
<ul className="canvas-menu-list"> <ul className="canvas-menu-list">
<li className={`canvas-menu-item ${menuNumber === 0 ? 'active' : ''}`} onClick={() => onClickNav(0)}> {canvasMenus.map((menu) => {
<button> return (
<span className="menu-icon con00"></span> <li key={menu.index} className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`} onClick={() => onClickNav(menu)}>
{getMessage('plan.menu.plan.drawing')} <button>
</button> <span className={`menu-icon ${menu.icon}`}></span>
</li> {getMessage(menu.name)}
<li className={`canvas-menu-item ${menuNumber === 1 ? 'active' : ''}`} onClick={() => onClickNav(1)}> </button>
<button> </li>
<span className="menu-icon con01"></span> )
{getMessage('plan.menu.placement.surface.initial.setting')} })}
</button>
</li>
<li
className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`}
onClick={() => {
onClickNav(2)
setCurrentMenu(MENU.ROOF_COVERING.DEFAULT)
}}
>
<button>
<span className="menu-icon con02"></span>
{getMessage('plan.menu.roof.cover')}
</button>
</li>
<li
className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`}
onClick={() => {
onClickNav(3)
setCurrentMenu(MENU.BATCH_CANVAS.DEFAULT)
}}
>
<button>
<span className="menu-icon con03"></span>
{getMessage('plan.menu.placement.surface')}
</button>
</li>
<li
className={`canvas-menu-item ${menuNumber === 4 ? 'active' : ''}`}
onClick={() => {
onClickNav(4)
setCurrentMenu(MENU.MODULE_CIRCUIT_SETTING.DEFAULT)
}}
>
<button>
<span className="menu-icon con04"></span>
{getMessage('plan.menu.module.circuit.setting')}
</button>
</li>
<li
className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`}
onClick={() => {
onClickNav(5)
setCurrentMenu(MENU.ESTIMATE.DEFAULT)
}}
>
<button>
<span className="menu-icon con06"></span>
{getMessage('plan.menu.estimate')}
</button>
</li>
<li
className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`}
onClick={() => {
onClickNav(6)
setCurrentMenu(MENU.POWER_GENERATION_SIMULATION.DEFAULT)
}}
>
<button>
<span className="menu-icon con05"></span>
{getMessage('plan.menu.simulation')}
</button>
</li>
{/*{canvasMenus.map((menu) => {*/}
{/* return (*/}
{/* <li key={menu.index} className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`} onClick={() => onClickNav(menu.index)}>*/}
{/* <button>*/}
{/* <span className={`menu-icon ${menu.icon}`}></span>*/}
{/* {getMessage(menu.name)}*/}
{/* </button>*/}
{/* </li>*/}
{/* )*/}
{/*})}*/}
</ul> </ul>
<div className="canvas-side-btn-wrap"> <div className="canvas-side-btn-wrap">
{menuNumber !== 6 && menuNumber !== 5 && ( {menuNumber !== 6 && menuNumber !== 5 && (