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

외벽선 속성 설정 팝업 추가

Browse Source
This commit is contained in:
김창수 2024-09-27 16:24:25 +09:00
parent 6bbe4c6657
commit 740bc2de3f
3 changed files with 73 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/canvas/page.jsx
View File

@ -31,7 +31,7 @@ export default function CanvasPage() {
{/* <PlacementSettingPop/> */}
{/* 캔버스 기본 셋팅 */}
{modalOption.option && <SettingModal01/>}
{/* {modalOption.option && <SettingModal01/>} */}
{/* 점·선 그리드 설정 */}
{/* {modalOption.gridoption && <GridOption/>} */}
@ -42,7 +42,7 @@ export default function CanvasPage() {
{/* {modalOption.outerwall && <OuterLineWall/>} */}
{/* 외벽선 속성 설정 */}
{/* <PropertiesSetting/> */}
<PropertiesSetting/>
</div>
</div>
</div>

35
src/components/canvas/modal/propertiessetting/PropertiesSetting.jsx
View File

@ -1,17 +1,30 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function PropertiesSetting() {
return(
<div className={`modal-pop-wrap ssm`}>
<div className="modal-head">
<h1 className="title">外壁のプロパティの設定</h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
s
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5">一変戦に戻る</button>
<button className="btn-frame modal act">設定完了</button>
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ssm`}>
<div className="modal-head">
<h1 className="title">外壁のプロパティの設定</h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="properties-guide">
※属性を変更する外壁線を選択し、軒で設定またはケラバで設定 ボタンをクリックして設定値を適用します。
</div>
<div className="properties-setting-wrap">
<div className="setting-tit">設定</div>
<div className="setting-btn-wrap">
<button className="setting-btn green mr5">軒で設定</button>
<button className="setting-btn blue">ケラバに設定</button>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5">一変戦に戻る</button>
<button className="btn-frame modal act">設定完了</button>
</div>
</div>
</div>
</div>
</WithDraggable>
)
}

47
src/styles/_modal.scss
View File

@ -466,4 +466,51 @@ $alert-color: #101010;
background-color: #3D3D3D;
border-radius: 2px ;
}
}
.properties-guide{
font-size: $pop-normal-size;
color: #AAA;
font-weight: $pop-normal-weight;
margin-bottom: 14px;
}
.properties-setting-wrap{
.setting-tit{
font-size: 13px;
color: $pop-color;
font-weight: $pop-bold-weight;
margin-bottom: 10px;
}
.setting-btn-wrap{
display: flex;
align-items: center;
padding: 14px 0;
border-top: 1px solid #424242;
border-bottom: 1px solid #424242;
.setting-btn{
display: block;
width: 100%;
height: 40px;
font-size: 13px;
color: #fff;
font-weight: 700;
border-radius: 2px;
transition: all .15s ease-in-out;
&.green{
background-color: #305941;
border: 1px solid #45CD7D;
&:hover{
background-color: #3a6b4e;
}
}
&.blue{
background-color: #2E5360;
border: 1px solid #3FBAE6;
&:hover{
background-color: #365f6e;
}
}
}
}
}