84 lines
3.5 KiB
JavaScript
84 lines
3.5 KiB
JavaScript
'use client'
|
|
|
|
import WithDraggable from '@/components/common/draggable/withDraggable'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
|
|
import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
|
|
import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall'
|
|
import RightAngle from '@/components/floor-plan/modal/outerlinesetting/RightAngle'
|
|
import Angle from '@/components/floor-plan/modal/outerlinesetting/Angle'
|
|
import DoublePitch from '@/components/floor-plan/modal/outerlinesetting/DoublePitch'
|
|
import Diagonal from '@/components/floor-plan/modal/outerlinesetting/Diagonal'
|
|
|
|
export default function WallLineSetting(props) {
|
|
const { setShowOutlineModal } = props
|
|
const { getMessage } = useMessage()
|
|
const { type, setType, handleFix, handleRollback } = useOuterLineWall()
|
|
|
|
return (
|
|
<WithDraggable isShow={true} pos={{ x: -1390, y: 30 }}>
|
|
<div className={`modal-pop-wrap r mount`}>
|
|
<div className="modal-head">
|
|
<h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
|
|
<button className="modal-close" onClick={() => setShowOutlineModal(false)}>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="modal-btn-wrap">
|
|
<button
|
|
className={`btn-frame modal ${type === OUTER_LINE_TYPE.OUTER_LINE ? 'act' : ''}`}
|
|
onClick={() => setType(OUTER_LINE_TYPE.OUTER_LINE)}
|
|
>
|
|
{getMessage('modal.cover.outline')}
|
|
</button>
|
|
|
|
<button
|
|
className={`btn-frame modal ${type === OUTER_LINE_TYPE.RIGHT_ANGLE ? 'act' : ''}`}
|
|
onClick={() => setType(OUTER_LINE_TYPE.RIGHT_ANGLE)}
|
|
>
|
|
{getMessage('modal.cover.outline.right.angle')}
|
|
</button>
|
|
<button
|
|
className={`btn-frame modal ${type === OUTER_LINE_TYPE.DOUBLE_PITCH ? 'act' : ''}`}
|
|
onClick={() => setType(OUTER_LINE_TYPE.DOUBLE_PITCH)}
|
|
>
|
|
{getMessage('modal.cover.outline2')}
|
|
</button>
|
|
<button className={`btn-frame modal ${type === OUTER_LINE_TYPE.ANGLE ? 'act' : ''}`} onClick={() => setType(OUTER_LINE_TYPE.ANGLE)}>
|
|
{getMessage('modal.cover.outline.angle')}
|
|
</button>
|
|
<button
|
|
className={`btn-frame modal ${type === OUTER_LINE_TYPE.DIAGONAL_LINE ? 'act' : ''}`}
|
|
onClick={() => setType(OUTER_LINE_TYPE.DIAGONAL_LINE)}
|
|
>
|
|
{getMessage('modal.cover.outline.diagonal')}
|
|
</button>
|
|
</div>
|
|
{type === OUTER_LINE_TYPE.OUTER_LINE ? (
|
|
<OuterLineWall />
|
|
) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
|
|
<RightAngle />
|
|
) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? (
|
|
<DoublePitch />
|
|
) : type === OUTER_LINE_TYPE.ANGLE ? (
|
|
<Angle />
|
|
) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? (
|
|
<Diagonal />
|
|
) : (
|
|
<></>
|
|
)}
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal mr5" onClick={handleRollback}>
|
|
{getMessage('modal.cover.outline.rollback')}
|
|
</button>
|
|
<button className="btn-frame modal act" onClick={handleFix}>
|
|
{getMessage('modal.cover.outline.fix')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</WithDraggable>
|
|
)
|
|
}
|