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-30 13:59:48 +09:00
parent 99cb716880
commit 81594daef8
4 changed files with 112 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import CanvasMenu from '@/components/canvas/CanvasMenu'
import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
import GridMove from '@/components/canvas/modal/gridoption/GridMove'
import GridOption from '@/components/canvas/modal/gridoption/GridOption'
import ManualRoofShape from '@/components/canvas/modal/manualroofshape/ManualRoofShape'
import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
import PropertiesSetting from '@/components/canvas/modal/propertiessetting/PropertiesSetting'
@ -47,6 +48,9 @@ export default function CanvasPage() {
{/* 지붕형상 설정 */}
{/* <RoofShapeOption/> */}
{/* 지붕형상 수동 설정 */}
{/* <ManualRoofShape/> */}
</div>
</div>
</div>

50
src/components/canvas/modal/manualroofshape/ManualRoofShape.jsx Normal file
View File

@ -0,0 +1,50 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from "react";
import ManualTab01 from "./ManualTab01";
const buttonMenu = [
{id: 1, name: '軒'},
{id: 2, name: 'ケラバ'},
{id: 3, name: '漂流'},
]
export default function ManualRoofShape(){
const [buttonAct, setButtonAct] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap xxm`}>
<div className="modal-head">
<h1 className="title">屋根形状の設定</h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="modal-btn-wrap">
{buttonMenu.map((item) => (
<button
className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`}
onClick={() => setButtonAct(item.id)}
>
{item.name}
</button>
))}
</div>
<div className="modal-bottom-border-bx">
<div className="setting-tit">設定</div>
<div className="discrimination-box">
{buttonAct === 1 && <ManualTab01/>}
{buttonAct === 2 && <ManualTab01/>}
{buttonAct === 3 && <ManualTab01/>}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame sub-tab mr5">一変戦に戻る</button>
<button className="btn-frame sub-tab act">適用</button>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">設定完了</button>
</div>
</div>
</div>
</WithDraggable>
)
}

34
src/components/canvas/modal/manualroofshape/ManualTab01.jsx Normal file
View File

@ -0,0 +1,34 @@
export default function ManualTab01() {
return(
<>
<div className="outline-form mb10">
<span className="mr10" style={{width: '63px'}}>傾斜</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">寸法</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{width: '63px'}}>軒の</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{width: '63px'}}>ケラバ 出幅</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{width: '63px'}}>片流幅</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</>
)
}

30
src/styles/_modal.scss
View File

@ -42,6 +42,9 @@ $alert-color: #101010;
&.xm{
width: 300px;
}
&.xxm{
width: 270px;
}
&.l{
width: 800px;
}
@ -115,6 +118,7 @@ $alert-color: #101010;
flex: 1 1 auto;
padding: 0;
}
margin-bottom: 14px;
}
}
.modal-check-btn-wrap{
@ -253,6 +257,9 @@ $alert-color: #101010;
button{
padding: 0 20px;
}
&.bord{
border-top: 1px solid #fff;
}
}
// grid copy
@ -422,14 +429,15 @@ $alert-color: #101010;
margin-bottom: 0;
}
.outline-form{
width: 50%;
// width: 50%;
margin-right: 15px;
}
}
}
.outline-form{
display: flex;
align-items: center;
margin-right: 15px;
span{
width: 60px;
flex: none;
@ -438,7 +446,8 @@ $alert-color: #101010;
color: $pop-color;
margin-right: 10px;
&.thin{
font-weight: &$pop-normal-weight;
width: auto;
font-weight: $pop-normal-weight;
}
}
.reset-btn{
@ -491,16 +500,16 @@ $alert-color: #101010;
margin-bottom: 14px;
}
.properties-setting-wrap{
&.outer{
margin-top: 24px;
}
.setting-tit{
font-size: 13px;
color: $pop-color;
font-weight: $pop-bold-weight;
margin-bottom: 10px;
}
.properties-setting-wrap{
&.outer{
margin-top: 24px;
}
.setting-btn-wrap{
display: flex;
align-items: center;
@ -580,5 +589,10 @@ $alert-color: #101010;
padding: 16px 12px;
border: 1px solid #3D3D3D;
border-radius: 2px;
margin-top: 14px;
}
.modal-bottom-border-bx{
margin-top: 24px;
padding-bottom: 14px;
border-bottom: 1px solid #424242;
}