111 lines
3.5 KiB
JavaScript
111 lines
3.5 KiB
JavaScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import FirstOption from './FirstOption'
|
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import SecondOption from '@/components/floor-plan/modal/setting01/SecondOption'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
|
|
import { canGridOptionSeletor } from '@/store/canvasAtom'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
|
|
|
export default function SettingModal01(props) {
|
|
const { id } = props
|
|
const [buttonAct, setButtonAct] = useState(1)
|
|
const { getMessage } = useMessage()
|
|
const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor)
|
|
const { closePopup } = usePopup()
|
|
|
|
const {
|
|
canvas,
|
|
settingModalFirstOptions,
|
|
setSettingModalFirstOptions,
|
|
settingsData,
|
|
setSettingsData,
|
|
settingsDataSave,
|
|
setSettingsDataSave,
|
|
fetchSettings,
|
|
globalFont,
|
|
setGlobalFont,
|
|
planSizeSettingMode,
|
|
setPlanSizeSettingMode,
|
|
settingModalSecondOptions,
|
|
setSettingModalSecondOptions,
|
|
adsorptionPointMode,
|
|
setAdsorptionPointMode,
|
|
setAdsorptionRange,
|
|
gridColor,
|
|
setGridColor,
|
|
color,
|
|
} = useCanvasSetting()
|
|
const firstProps = {
|
|
canvas,
|
|
settingModalFirstOptions,
|
|
setSettingModalFirstOptions,
|
|
settingsData,
|
|
setSettingsData,
|
|
settingsDataSave,
|
|
setSettingsDataSave,
|
|
}
|
|
const secondProps = {
|
|
fetchSettings,
|
|
globalFont,
|
|
setGlobalFont,
|
|
planSizeSettingMode,
|
|
setPlanSizeSettingMode,
|
|
settingModalSecondOptions,
|
|
setSettingModalSecondOptions,
|
|
adsorptionPointMode,
|
|
setAdsorptionPointMode,
|
|
setAdsorptionRange,
|
|
settingsData,
|
|
setSettingsData,
|
|
settingsDataSave,
|
|
setSettingsDataSave,
|
|
}
|
|
const gridProps = { gridColor, setGridColor, color }
|
|
|
|
const handleBtnClick = (num) => {
|
|
setButtonAct(num)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<WithDraggable isShow={true} pos={{ x: 1275, y: 180 }}>
|
|
<div className={`modal-pop-wrap sm mount`}>
|
|
<div className="modal-head modal-handle">
|
|
<h1 className="title">{getMessage('modal.canvas.setting')}</h1>
|
|
<button className="modal-close" onClick={() => closePopup(id, true)}>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="left-bar modal-handle"></div>
|
|
<div className="right-bar modal-handle"></div>
|
|
<div className="modal-btn-wrap">
|
|
<button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>
|
|
{getMessage('modal.canvas.setting.display')}
|
|
</button>
|
|
|
|
<button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => handleBtnClick(2)}>
|
|
{getMessage('modal.canvas.setting.font.plan')}
|
|
</button>
|
|
{canGridOptionSeletorValue && (
|
|
<button className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} onClick={() => handleBtnClick(3)}>
|
|
{getMessage('modal.canvas.setting.grid')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
{buttonAct === 1 && <FirstOption {...firstProps} />}
|
|
{buttonAct === 2 && <SecondOption {...secondProps} />}
|
|
{buttonAct === 3 && <GridOption {...gridProps} />}
|
|
</div>
|
|
<div className="modal-foot modal-handle"></div>
|
|
</div>
|
|
</WithDraggable>
|
|
</>
|
|
)
|
|
}
|