qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WithDraggable 공통화 작업

Browse Source
This commit is contained in:
김민식 2025-03-13 16:12:44 +09:00
parent c3a6c121ca
commit bba5a8d54c
45 changed files with 2305 additions and 2730 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/common/color-picker/ColorPickerModal.jsx
View File

@ -33,26 +33,17 @@ export default function ColorPickerModal(props) {
}, [isShow])
return (
<WithDraggable isShow={true} pos={pos ?? ''} handle=".modal-handle">
<div className={`modal-pop-wrap lr mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.color.picker.title')}</h1>
<button
className="modal-close"
onClick={() => {
<WithDraggable isShow={true} pos={pos ?? ''} handle=".modal-handle" className="lr">
<WithDraggable.Header
title={getMessage('modal.color.picker.title')}
onClose={() => {
if (setIsShow) {
setIsShow(false)
}
console.log(id)
closePopup(id, isConfig)
}}
>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
/>
<WithDraggable.Body>
<div className="color-setting-wrap">
<div className="color-picker">
<ColorPicker color={originColor} setColor={setOriginColor} />
@ -78,9 +69,7 @@ export default function ColorPickerModal(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

54
src/components/common/draggable/WithDraggable.jsx
View File

@ -3,7 +3,16 @@
import { useState } from 'react'
import Draggable from 'react-draggable'
export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handle = '' }) {
export default function WithDraggable({
isShow,
children,
pos = { x: 0, y: 0 },
handle = '',
className = '',
isModal = true,
hasFooter = true,
isHidden = false,
}) {
const [position, setPosition] = useState(pos)
const handleOnDrag = (e, data) => {
@ -22,9 +31,52 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
onDrag={(e, data) => handleOnDrag(e, data)}
handle={handle === '' ? '.modal-handle' : handle}
>
{isModal ? (
<div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
{children}
{hasFooter && <WithDraggableFooter />}
</div>
) : (
<>{children}</>
)}
</Draggable>
)}
</>
)
}
function WithDraggableHeader({ title, onClose, children }) {
return (
<div className="modal-head modal-handle">
<h1 className="title">{title}</h1>
{onClose && (
<button className="modal-close" onClick={() => onClose()}>
닫기
</button>
)}
</div>
)
}
function WithDraggableBody({ children }) {
return (
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<>{children}</>
</div>
)
}
function WithDraggablePanel({ children }) {
return <>{children}</>
}
function WithDraggableFooter() {
return <div className="modal-foot modal-handle"></div>
}
WithDraggable.Header = WithDraggableHeader
WithDraggable.Body = WithDraggableBody
WithDraggable.Panel = WithDraggablePanel
WithDraggable.Footer = WithDraggableFooter

24
src/components/common/font/FontSetting.jsx
View File

@ -67,23 +67,15 @@ export default function FontSetting(props) {
}
return (
<WithDraggable isShow={true} pos={pos} handle=".modal-handle">
<div className={`modal-pop-wrap lrr mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.font')}</h1>
<button
className="modal-close"
onClick={() => {
<WithDraggable isShow={true} pos={pos} handle=".modal-handle" className="lrr">
<WithDraggable.Header
title={getMessage('modal.font')}
onClose={() => {
if (setIsShow) setIsShow(false)
closePopup(id, isConfig)
}}
>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
/>
<WithDraggable.Body>
<div className="slope-wrap">
<div className="font-option-warp">
<div className="font-option-item">
@ -169,9 +161,7 @@ export default function FontSetting(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

27
src/components/floor-plan/modal/ImgLoad.jsx
View File

@ -76,22 +76,13 @@ export default function ImgLoad() {
}, [currentCanvasPlan])
return (
<WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('common.input.file')}</h1>
<button
className="modal-close"
onClick={() => {
setFloorPlanState({ ...floorPlanState, refFileModalOpen: false })
}}
>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }} className="r">
<WithDraggable.Header
title={getMessage('common.input.file')}
onClose={() => setFloorPlanState({ ...floorPlanState, refFileModalOpen: false })}
/>
<WithDraggable.Body>
<div className="img-flex-box">
<span className="normal-font mr10">{getMessage('modal.image.load.size.rotate')}</span>
<label className="toggle-btn">
@ -166,9 +157,7 @@ export default function ImgLoad() {
</button>
{/* <button className="btn-frame modal act" onClick={() => handleCanvasToPng(2)}></button> */}
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/Slope.jsx
View File

@ -13,17 +13,9 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
const inputRef = useRef()
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="xxxm">
<WithDraggable.Header title={getMessage('plan.menu.placement.surface.slope.setting')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="slope-wrap">
<div className="outline-form">
<span className="mr10" style={{ width: 'auto' }}>
@ -46,9 +38,7 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
View File

@ -124,17 +124,9 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
setType(button.type)
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="r">
<WithDraggable.Header title={getMessage('modal.auxiliary.drawing')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="modal-btn-wrap">
{types.map((type, idx) => (
<button key={idx} className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`} onClick={() => onClickButton(type)}>
@ -161,9 +153,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
{getMessage('apply')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
View File

@ -55,17 +55,9 @@ export default function AuxiliaryEdit(props) {
closePopup(id)
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="xm">
<WithDraggable.Header title={getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="grid-option-tit">{getMessage(type === 'copy' ? 'modal.auxiliary.copy.info' : 'modal.auxiliary.move.info')}</div>
<div className="grid-option-wrap">
<div className="grid-option-box">
@ -123,9 +115,7 @@ export default function AuxiliaryEdit(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
View File

@ -111,17 +111,9 @@ export default function AuxiliarySize(props) {
closePopup(id)
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="xm">
<WithDraggable.Header title={getMessage('modal.auxiliary.size.edit')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="discrimination-box mb10">
<div className="d-check-radio pop mb10">
<input type="radio" name="radio01" id="ra01" onClick={(e) => setCheckedRadio(1)} />
@ -165,9 +157,7 @@ export default function AuxiliarySize(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/basic/BasicSetting.jsx
View File

@ -135,17 +135,9 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
}, [isManualModuleSetup, isClosePopup])
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lx-2`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
<button className="modal-close" onClick={() => handleClosePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="lx-2">
<WithDraggable.Header title={getMessage('plan.menu.module.circuit.setting.default')} onClose={() => handleClosePopup(id)} />
<WithDraggable.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>
@ -202,9 +194,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
</>
)}
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

19
src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
View File

@ -612,18 +612,9 @@ export default function CircuitTrestleSetting({ id }) {
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap l-2`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
{/* <button className="modal-close" onClick={() => closePopup(id)}> */}
<button className="modal-close" onClick={handleClose}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }} className="l-2">
<WithDraggable.Header title={getMessage('modal.circuit.trestle.setting')} onClose={() => handleClose()} />
<WithDraggable.Body>
<div className="roof-module-tab">
<div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
<span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
@ -667,9 +658,7 @@ export default function CircuitTrestleSetting({ id }) {
</button>
</div>
)}
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
View File

@ -122,17 +122,9 @@ export default function DimensionLineSetting(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('contextmenu.display.edit')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="xm">
<WithDraggable.Header title={getMessage('contextmenu.display.edit')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="guide">{getMessage('modal.display.edit.info')}</div>
<div className="mb-box">
<div className="slope-wrap">
@ -208,9 +200,7 @@ export default function DimensionLineSetting(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/distance/Distance.jsx
View File

@ -16,17 +16,9 @@ export default function Distance(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.distance')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="xxxm">
<WithDraggable.Header title={getMessage('modal.distance')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="slope-wrap">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
@ -69,9 +61,7 @@ export default function Distance(props) {
{getMessage('common.ok')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
View File

@ -38,17 +38,9 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="r">
<WithDraggable.Header title={getMessage('modal.eaves.gable.edit')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="modal-btn-wrap">
{buttonMenu.map((item) => (
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
@ -63,9 +55,7 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
{type === TYPES.WALL_MERGE && <WallMerge {...wallMergeProps} />}
{type === TYPES.SHED && <Shed {...shedProps} />}
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
View File

@ -63,17 +63,9 @@ export default function FlowDirectionSetting(props) {
)
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ml mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="ml">
<WithDraggable.Header title={getMessage('modal.shape.flow.direction.setting')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="drawing-flow-wrap">
<div className="discrimination-box">
<div className="discrimination-tit mb15">{getMessage('modal.flow.direction.setting')}</div>
@ -177,9 +169,7 @@ export default function FlowDirectionSetting(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

24
src/components/floor-plan/modal/grid/DotLineGrid.jsx
View File

@ -177,23 +177,15 @@ export default function DotLineGrid(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ssm mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
<button
className="modal-close"
onClick={() => {
<WithDraggable isShow={true} pos={pos} className="ssm">
<WithDraggable.Header
title={getMessage('modal.canvas.setting.grid.dot.line.setting')}
onClose={() => {
setIsShow(false)
closePopup(id, isConfig)
}}
>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
/>
<WithDraggable.Body>
<div className="grid-check-form">
<div className="d-check-box pop">
<input type="checkbox" id="ch01" value={TYPE.DOT} onChange={handleCheckBoxChange} checked={copyCurrentSetting.DOT} />
@ -293,9 +285,7 @@ export default function DotLineGrid(props) {
{getMessage('modal.canvas.setting.grid.dot.line.setting.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/grid/GridCopy.jsx
View File

@ -20,17 +20,9 @@ export default function GridCopy(props) {
copy(currentObject, ['↑', '←'].includes(arrow) ? +length * -1 : +length)
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.grid.copy')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="xm">
<WithDraggable.Header title={getMessage('modal.grid.copy')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="grid-option-tit">{getMessage('modal.grid.copy.info')}</div>
<div className="grid-option-wrap">
<div className="grid-option-box">
@ -78,9 +70,7 @@ export default function GridCopy(props) {
{getMessage('modal.grid.copy.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/grid/GridMove.jsx
View File

@ -73,17 +73,9 @@ export default function GridMove(props) {
closePopup(id)
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.grid.move')} </h1>
<button className="modal-close" onClick={handleClose}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="xm">
<WithDraggable.Header title={getMessage('modal.grid.move')} onClose={() => handleClose()} />
<WithDraggable.Body>
<div className="grid-option-tit">{getMessage('modal.grid.move.info')}</div>
<div className="grid-option-wrap">
<div className="d-check-box pop mb10">
@ -157,9 +149,7 @@ export default function GridMove(props) {
{getMessage('modal.grid.move.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
View File

@ -50,17 +50,9 @@ export default function LinePropertySetting(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('contextmenu.line.property.edit')} </h1>
<button className="modal-close" onClick={() => handleClosePopup()}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="r">
<WithDraggable.Header title={getMessage('contextmenu.line.property.edit')} onClose={() => handleClosePopup()} />
<WithDraggable.Body>
<div className="guide">
<span className="mb10">{getMessage('modal.line.property.edit.info')}</span>
<span>
@ -92,9 +84,7 @@ export default function LinePropertySetting(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
View File

@ -14,17 +14,9 @@ export default function CircuitNumberEdit(props) {
closePopup(id)
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head modal-handle">
<h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="xm">
<WithDraggable.Header title={getMessage('modal.module.circuit.number.edit')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="grid-option-tit"> {getMessage('modal.module.circuit.number.edit.info')}</div>
<div className="grid-option-wrap">
<div className="grid-option-box">
@ -43,9 +35,7 @@ export default function CircuitNumberEdit(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

29
src/components/floor-plan/modal/module/PanelEdit.jsx
View File

@ -91,23 +91,14 @@ export default function PanelEdit(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head modal-handle">
<h1 className="title">
{getMessage(
[PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type)
? 'modal.move.setting'
: 'modal.copy.setting',
)}{' '}
</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="xm">
<WithDraggable.Header
title={getMessage(
[PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) ? 'modal.move.setting' : 'modal.copy.setting',
)}
onClose={() => closePopup(id)}
/>
<WithDraggable.Body>
<div className="grid-option-tit">
{getMessage(
[PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type)
@ -157,9 +148,7 @@ export default function PanelEdit(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

34
src/components/floor-plan/modal/module/column/ColumnInsert.jsx
View File

@ -24,17 +24,9 @@ export default function ColumnInsert(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="r">
<WithDraggable.Header title={getMessage('modal.panel.column.insert')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="properties-setting-wrap">
<div className="setting-tit">{getMessage('modal.panel.column.insert.info')}</div>
<div className="additional-wrap">
@ -64,22 +56,10 @@ export default function ColumnInsert(props) {
</div>
<div className="additional-img-wrap">
{selectedType === MODULE_INSERT_TYPE.LEFT && (
<Image
src="/static/images/canvas/additional-edit01.svg"
alt="react"
width={0}
height={0}
style={{ width: 'auto', height: 'auto' }}
/>
<Image src="/static/images/canvas/additional-edit01.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
)}
{selectedType === MODULE_INSERT_TYPE.RIGHT && (
<Image
src="/static/images/canvas/additional-edit02.svg"
alt="react"
width={0}
height={0}
style={{ width: 'auto', height: 'auto' }}
/>
<Image src="/static/images/canvas/additional-edit02.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
)}
</div>
</div>
@ -106,9 +86,7 @@ export default function ColumnInsert(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

50
src/components/floor-plan/modal/module/column/ColumnRemove.jsx
View File

@ -26,17 +26,9 @@ export default function ColumnRemove(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="r">
<WithDraggable.Header title={getMessage('modal.panel.column.remove')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="properties-setting-wrap">
<div className="setting-tit">{getMessage('modal.panel.column.remove.info')}</div>
<div className="additional-wrap">
@ -59,40 +51,16 @@ export default function ColumnRemove(props) {
</div>
<div className="additional-img-wrap">
{selectedType === MODULE_REMOVE_TYPE.LEFT && (
<Image
src="/static/images/canvas/additional_del01.svg"
alt="react"
width={0}
height={0}
style={{ width: 'auto', height: 'auto' }}
/>
<Image src="/static/images/canvas/additional_del01.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
)}
{selectedType === MODULE_REMOVE_TYPE.RIGHT && (
<Image
src="/static/images/canvas/additional_del02.svg"
alt="react"
width={0}
height={0}
style={{ width: 'auto', height: 'auto' }}
/>
<Image src="/static/images/canvas/additional_del02.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
)}
{selectedType === MODULE_REMOVE_TYPE.HORIZONTAL_SIDE && (
<Image
src="/static/images/canvas/additional_del03.svg"
alt="react"
width={0}
height={0}
style={{ width: 'auto', height: 'auto' }}
/>
<Image src="/static/images/canvas/additional_del03.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
)}
{selectedType === MODULE_REMOVE_TYPE.NONE && (
<Image
src="/static/images/canvas/additional_del04.svg"
alt="react"
width={0}
height={0}
style={{ width: 'auto', height: 'auto' }}
/>
<Image src="/static/images/canvas/additional_del04.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
)}
</div>
</div>
@ -115,9 +83,7 @@ export default function ColumnRemove(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

17
src/components/floor-plan/modal/module/row/RowInsert.jsx
View File

@ -24,17 +24,9 @@ export default function RowInsert(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.row.insert')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="r">
<WithDraggable.Header title={getMessage('modal.row.insert')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="properties-setting-wrap">
<div className="setting-tit">{getMessage('modal.row.insert.info')}</div>
<div className="additional-wrap">
@ -106,9 +98,8 @@ export default function RowInsert(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/module/row/RowRemove.jsx
View File

@ -27,17 +27,9 @@ export default function RowRemove(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.row.remove')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="r">
<WithDraggable.Header title={getMessage('modal.row.remove')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="properties-setting-wrap">
<div className="setting-tit">{getMessage('modal.row.remove.info')}</div>
<div className="additional-wrap">
@ -116,9 +108,7 @@ export default function RowRemove(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/movement/MovementSetting.jsx
View File

@ -16,17 +16,9 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="r">
<WithDraggable.Header title={getMessage('plan.menu.roof.cover.movement.shape.updown')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="modal-btn-wrap">
{buttonType.map((item) => (
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
@ -43,9 +35,7 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/object/DormerOffset.jsx
View File

@ -40,17 +40,9 @@ export default function DormerOffset(props) {
// closePopup(id)
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{title}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="xm">
<WithDraggable.Header title={title} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="grid-option-tit">{getMessage('modal.dormer.offset.info')}</div>
<div className="grid-option-wrap">
<div className="grid-option-box">
@ -104,9 +96,7 @@ export default function DormerOffset(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/object/ObjectSetting.jsx
View File

@ -100,17 +100,9 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
]
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="lrr" style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
<WithDraggable.Header title={getMessage('plan.menu.placement.surface.object')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="modal-btn-wrap">
{buttonMenu.map((item) => (
<button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
@ -134,9 +126,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
{getMessage('write')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/object/RoofMaterialSetting.jsx
View File

@ -21,17 +21,9 @@ export default function RoofMaterialSetting(props) {
]
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.roof.material.edit')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="xxxm">
<WithDraggable.Header title={getMessage('modal.roof.material.edit')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="slope-wrap">
<div className="grid-select">
<QSelectBox title={'지붕재 선택'} options={roofMaterials} />
@ -40,9 +32,7 @@ export default function RoofMaterialSetting(props) {
<div className="grid-btn-wrap">
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/object/SizeSetting.jsx
View File

@ -40,17 +40,9 @@ export default function SizeSetting(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ssm mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.size.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="ssm">
<WithDraggable.Header title={getMessage('modal.size.setting')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="slope-wrap">
<div className="size-option-top">
<div className="size-option-wrap">
@ -91,9 +83,7 @@ export default function SizeSetting(props) {
{getMessage('write')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
View File

@ -8,17 +8,9 @@ export default function PropertiesSetting(props) {
const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(id)
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ssm`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
<button className="modal-close" onClick={() => closeModal(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="ssm">
<WithDraggable.Header title={getMessage('modal.canvas.setting.wallline.properties.setting')} onClose={() => closeModal(id)} />
<WithDraggable.Body>
<div className="properties-guide">{getMessage('modal.canvas.setting.wallline.properties.setting.info')}</div>
<div className="properties-setting-wrap">
<div className="setting-tit">{getMessage('setting')}</div>
@ -39,9 +31,7 @@ export default function PropertiesSetting(props) {
{getMessage('modal.cover.outline.finish')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

16
src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
View File

@ -114,15 +114,9 @@ export default function WallLineSetting(props) {
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap r mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}></button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }} className="r">
<WithDraggable.Header title={getMessage('modal.cover.outline.drawing')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="modal-btn-wrap">
{/*<button
className={`btn-frame modal ${type === OUTER_LINE_TYPE.OUTER_LINE ? 'act' : ''}`}
@ -184,9 +178,7 @@ export default function WallLineSetting(props) {
{getMessage('modal.cover.outline.fix')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

4
src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
View File

@ -29,7 +29,8 @@ export default function PanelBatchStatistics() {
}, [])
return (
<WithDraggable isShow={true} handle=".penal-wrap" pos={pos}>
<WithDraggable isShow={true} handle=".penal-wrap" pos={pos} isModal={false}>
<WithDraggable.Panel>
<div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
<h2>{getMessage('modal.panel.batch.statistic')}</h2>
<button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
@ -63,6 +64,7 @@ export default function PanelBatchStatistics() {
</table>
</div>
</div>
</WithDraggable.Panel>
</WithDraggable>
)
}

24
src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
View File

@ -121,24 +121,12 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
setType(button.type)
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="r">
<WithDraggable.Header title={getMessage('plan.menu.placement.surface.drawing')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="modal-btn-wrap">
{types.map((type, idx) => (
<button
key={`placement-${idx}`}
className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`}
onClick={() => onClickButton(type)}
>
<button key={`placement-${idx}`} className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`} onClick={() => onClickButton(type)}>
{type.name}
</button>
))}
@ -159,9 +147,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
{getMessage('modal.placement.surface.drawing.fix')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

13
src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
View File

@ -257,12 +257,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ll mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
</div>
<div className="modal-body">
<WithDraggable isShow={true} pos={pos} className="ll">
<WithDraggable.Header title={getMessage('plan.menu.placement.surface.initial.setting')} />
<WithDraggable.Body>
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<div className="placement-table">
@ -477,11 +474,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
{getMessage('modal.common.save')}
</button>
</div>
</div>
</WithDraggable.Body>
{showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}
{showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />}
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx
View File

@ -41,17 +41,9 @@ export default function PlacementSurfaceLineProperty(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap mount lr`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.canvas.setting.roofline.properties.setting')}</h1>
<button className="modal-close" onClick={() => handleClose()}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="lr">
<WithDraggable.Header title={getMessage('modal.canvas.setting.roofline.properties.setting')} onClose={() => handleClose()} />
<WithDraggable.Body>
<div className="properties-guide">{getMessage('modal.canvas.setting.roofline.properties.setting.info')}</div>
<div className="properties-setting-wrap">
<div className="setting-tit">{getMessage('setting')}</div>
@ -75,9 +67,7 @@ export default function PlacementSurfaceLineProperty(props) {
{getMessage('modal.cover.outline.finish')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

24
src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
View File

@ -256,26 +256,14 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
}, [])
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lr-2`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="lr-2" isHidden={isHidden}>
<WithDraggable.Header title={getMessage('plan.menu.placement.surface.arrangement')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="plane-frame-wrap">
<div className="plane-shape-wrap">
<div className="plane-shape-menu">
{types.map((type) => (
<button
key={type.id}
className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`}
onClick={() => setSelectedType(type)}
>
<button key={type.id} className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} onClick={() => setSelectedType(type)}>
<div className="shape-box">
<Image
src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
@ -310,9 +298,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
</div>
</div>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

25
src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx
View File

@ -61,17 +61,9 @@ export default function ActualSizeSetting(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ssm mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.actual.size.setting')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="ssm">
<WithDraggable.Header title={getMessage('modal.actual.size.setting')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="guide">
<span>{getMessage('modal.actual.size.setting.info')}</span>
</div>
@ -95,12 +87,7 @@ export default function ActualSizeSetting(props) {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5">
<input
type="text"
className="input-origin block"
value={actualSize}
onChange={(e) => setActualSize(Number(e.target.value))}
/>
<input type="text" className="input-origin block" value={actualSize} onChange={(e) => setActualSize(Number(e.target.value))} />
</div>
<span className="thin">mm</span>
</div>
@ -117,9 +104,7 @@ export default function ActualSizeSetting(props) {
{getMessage('apply')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

20
src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
View File

@ -47,19 +47,10 @@ export default function ContextRoofAllocationSetting(props) {
}, [])
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lr mount`}>
<WithDraggable isShow={true} pos={pos} className="lr">
<WithDraggable.Header title={getMessage('plan.menu.estimate.roof.alloc')} onClose={() => closePopup(id)} />
{currentRoofList && (
<>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable.Body>
<div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
<div className="allocation-select-wrap">
{/* <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
@ -232,11 +223,8 @@ export default function ContextRoofAllocationSetting(props) {
{getMessage('modal.roof.alloc.apply')}
</button>
</div>
</div>
</>
</WithDraggable.Body>
)}
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
View File

@ -47,19 +47,11 @@ export default function RoofAllocationSetting(props) {
}, [])
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lr mount`}>
<WithDraggable isShow={true} pos={pos} className="lr">
<WithDraggable.Header title={getMessage('plan.menu.estimate.roof.alloc')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
{currentRoofList && (
<>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
<div className="allocation-select-wrap">
{/* <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
@ -249,11 +241,9 @@ export default function RoofAllocationSetting(props) {
{getMessage('modal.roof.alloc.apply')}
</button>
</div>
</div>
</>
)}
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
View File

@ -29,17 +29,9 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 }
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxm`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="xxm">
<WithDraggable.Header title={getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="modal-btn-wrap">
{buttons.map((button) => (
<button key={button.id} className={`btn-frame modal ${type === button.type ? 'act' : ''}`} onClick={() => setType(button.type)}>
@ -68,9 +60,7 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 }
{getMessage('common.setting.finish')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
View File

@ -88,17 +88,9 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lr mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.roof.shape.setting')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="lr">
<WithDraggable.Header title={getMessage('modal.roof.shape.setting')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="roof-shape-menu">
{shapeMenu.map((item) => (
<button key={item.id} className={`shape-menu-box ${shapeNum === item.id ? 'act' : ''}`} onClick={() => setShapeNum(item.id)}>
@ -120,9 +112,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
{getMessage('common.setting.finish')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

20
src/components/floor-plan/modal/setting01/SettingModal01.jsx
View File

@ -72,18 +72,9 @@ export default function SettingModal01(props) {
}
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>
<WithDraggable isShow={true} pos={{ x: 1275, y: 180 }} className="sm">
<WithDraggable.Header title={getMessage('modal.canvas.setting')} onClose={() => closePopup(id, true)} />
<WithDraggable.Body>
<div className="modal-btn-wrap">
<button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>
{getMessage('modal.canvas.setting.display')}
@ -101,10 +92,7 @@ export default function SettingModal01(props) {
{buttonAct === 1 && <FirstOption {...firstProps} />}
{buttonAct === 2 && <SecondOption {...secondProps} />}
{buttonAct === 3 && <GridOption {...gridProps} />}
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
</>
)
}

24
src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
View File

@ -190,23 +190,15 @@ export default function DimensionLineSetting(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
<button
className="modal-close"
onClick={() => {
<WithDraggable isShow={true} pos={pos} className="xxxm">
<WithDraggable.Header
title={getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}
onClose={() => {
setIsShow(false)
closePopups([fontModalId, colorModalId, id])
}}
>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
/>
<WithDraggable.Body>
<div className="font-btn-wrap">
<button className="btn-frame modal" onClick={() => popupHandle('font')}>
{getMessage('modal.font.setting')}
@ -259,9 +251,7 @@ export default function DimensionLineSetting(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

24
src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
View File

@ -55,23 +55,15 @@ export default function PlanSizeSetting(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xsm mount`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</h1>
<button
className="modal-close"
onClick={() => {
<WithDraggable isShow={true} pos={pos} className="xsm">
<WithDraggable.Header
title={getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}
onClose={() => {
setIsShow(false)
closePopup(id, true)
}}
>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
/>
<WithDraggable.Body>
<div className="slope-wrap">
<div className="outline-form mb10">
<span style={{ width: 'auto' }}>{getMessage('common.horizon')}</span>
@ -105,9 +97,7 @@ export default function PlanSizeSetting(props) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}

18
src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
View File

@ -39,17 +39,9 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="left-bar modal-handle"></div>
<div className="right-bar modal-handle"></div>
<WithDraggable isShow={true} pos={pos} className="r">
<WithDraggable.Header title={getMessage('modal.wallline.offset.setting')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="modal-btn-wrap">
{buttonMenu.map((item) => (
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
@ -67,9 +59,7 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
{getMessage('modal.common.save')}
</button>
</div>
</div>
<div className="modal-foot modal-handle"></div>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}