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

면형상 배치 디자인 수정

Browse Source
This commit is contained in:
minsik 2024-10-30 18:07:14 +09:00
parent d760d1d654
commit de9b53fff3
2 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
View File

@ -49,7 +49,8 @@ const PlacementSurface = forwardRef((props, refs) => {
{lines?.map((line, index) => ( {lines?.map((line, index) => (
<div className="eaves-keraba-item" id={index} key={index}> <div className="eaves-keraba-item" id={index} key={index}>
<div className="eaves-keraba-th"> <div className="eaves-keraba-th">
{line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]} {/*{line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}*/}
{num[index]}
</div> </div>
<div className="eaves-keraba-td"> <div className="eaves-keraba-td">
<div className="outline-form"> <div className="outline-form">

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

@ -241,7 +241,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
return ( return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}> <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap l-2`}> <div className={`modal-pop-wrap lr-2`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1> <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
@ -249,35 +249,45 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
</button> </button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="plane-shape-menu"> <div className="plane-frame-wrap">
{types.map((type) => ( <div className="plane-shape-wrap">
<button key={type.id} className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} onClick={() => setSelectedType(type)}> <div className="plane-shape-menu">
<div className="shape-box"> {types.map((type) => (
<Image <button
src={`/static/images/canvas/plane_shape0${type?.id}.svg`} key={type.id}
alt="react" className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`}
width={0} onClick={() => setSelectedType(type)}
height={0} >
style={{ <div className="shape-box">
width: 'auto', <Image
height: 'auto', src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
transform: getInversionState(), alt="react"
}} width={0}
/> height={0}
</div> style={{
</button> width: 'auto',
))} height: 'auto',
</div> transform: getInversionState(),
<div className="shape-library"> }}
<button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button> />
<button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button> </div>
<button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button> </button>
</div> ))}
<PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} /> </div>
<div className="grid-btn-wrap"> <div className="shape-library">
<button className="btn-frame modal act" onClick={applySurfaces}> <button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
{getMessage('write')} <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
</button> <button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
</div>
</div>
<div className="plane-detail-wrap">
<PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
<div className="plane-shape-btn">
<button className="btn-frame modal act" onClick={applySurfaces}>
{getMessage('write')}
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>