66 lines
3.5 KiB
JavaScript
66 lines
3.5 KiB
JavaScript
import { useMessage } from '@/hooks/useMessage'
|
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import { useState } from 'react'
|
|
import Orientation from '@/components/floor-plan/modal/basic/step/Orientation'
|
|
import Module from '@/components/floor-plan/modal/basic/step/Module'
|
|
import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule'
|
|
import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
|
|
import Placement from '@/components/floor-plan/modal/basic/step/Placement'
|
|
import { useRecoilState } from 'recoil'
|
|
import { canvasSettingState } from '@/store/canvasAtom'
|
|
|
|
export default function BasicSetting({ setShowBasicSettingModal }) {
|
|
const { getMessage } = useMessage()
|
|
const [tabNum, setTabNum] = useState(1)
|
|
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
|
|
return (
|
|
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
|
|
<div className={`modal-pop-wrap lx-2`}>
|
|
<div className="modal-head">
|
|
<h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
|
|
<button className="modal-close" onClick={() => setShowBasicSettingModal(false)}>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="roof-module-tab">
|
|
<div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
|
|
<span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
|
|
<div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
|
|
<span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
|
|
<div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
|
|
</div>
|
|
{tabNum === 1 && <Orientation setTabNum={setTabNum} />}
|
|
{/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
|
|
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 2 && <Module setTabNum={setTabNum} />}
|
|
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 3 && <Placement setTabNum={setTabNum} />}
|
|
|
|
{/*배치면 초기설정 - 입력방법: 육지붕*/}
|
|
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
|
|
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 3 && <PitchPlacement setTabNum={setTabNum} />}
|
|
|
|
<div className="grid-btn-wrap">
|
|
{tabNum !== 1 && (
|
|
<button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
|
|
{getMessage('modal.module.basic.setting.prev')}
|
|
</button>
|
|
)}
|
|
{tabNum !== 3 && <button className="btn-frame modal act mr5">{getMessage('modal.common.save')}</button>}
|
|
{tabNum !== 3 && (
|
|
<button className="btn-frame modal" onClick={() => setTabNum(tabNum + 1)}>
|
|
Next
|
|
</button>
|
|
)}
|
|
{tabNum === 3 && (
|
|
<>
|
|
<button className="btn-frame modal mr5">{getMessage('modal.module.basic.setting.passivity.placement')}</button>
|
|
<button className="btn-frame modal act">{getMessage('modal.module.basic.setting.auto.placement')}</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</WithDraggable>
|
|
)
|
|
}
|