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-10-02 15:00:47 +09:00
parent 4213fbcd7c
commit a2d21590ab
10 changed files with 296 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/static/images/canvas/allocation_delete.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="1" width="14" height="14" rx="7" stroke="white"/>
<path d="M9.741 11.059L7.509 8.827L5.277 11.059L4.512 10.294L6.744 8.062L4.512 5.83L5.277 5.065L7.509 7.297L9.741 5.065L10.506 5.83L8.274 8.062L10.506 10.294L9.741 11.059Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 358 B

4
public/static/images/canvas/allocation_edit.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="12" height="12" rx="6" fill="#EBEBEB"/>
<path d="M5.41297 9.531V6.723H2.78697V5.631H5.41297V2.81H6.56997V5.631H9.20897V6.723H6.56997V9.531H5.41297Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 280 B

6
public/static/images/canvas/allocation_icon01_black.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="7" height="7" stroke="#101010"/>
<rect x="7.5" y="0.5" width="7" height="7" stroke="#101010"/>
<rect x="0.5" y="7.5" width="7" height="7" stroke="#101010"/>
<rect x="7.5" y="7.5" width="7" height="7" stroke="#101010"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 351 B

6
public/static/images/canvas/allocation_icon01_white.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="7" height="7" stroke="white"/>
<rect x="7.5" y="0.5" width="7" height="7" stroke="white"/>
<rect x="0.5" y="7.5" width="7" height="7" stroke="white"/>
<rect x="7.5" y="7.5" width="7" height="7" stroke="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 343 B

6
public/static/images/canvas/allocation_icon02_black.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="7" height="7" stroke="#101010"/>
<rect x="7.5" y="0.5" width="7" height="7" stroke="#101010"/>
<rect x="3.5" y="7.5" width="7" height="7" stroke="#101010"/>
<rect x="10.5" y="7.5" width="7" height="7" stroke="#101010"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 352 B

6
public/static/images/canvas/allocation_icon02_white.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="7" height="7" stroke="white"/>
<rect x="7.5" y="0.5" width="7" height="7" stroke="white"/>
<rect x="3.5" y="7.5" width="7" height="7" stroke="white"/>
<rect x="10.5" y="7.5" width="7" height="7" stroke="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 344 B

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

@ -16,6 +16,7 @@ import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineW
import OuterWallOffset from '@/components/canvas/modal/outerwalloffset/OuterWallOffset'
import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
import PropertiesSetting from '@/components/canvas/modal/propertiessetting/PropertiesSetting'
import RoofAllocation from '@/components/canvas/modal/roofallocation/RoofAllocation'
import RoofShapeOption from '@/components/canvas/modal/roofshapeoption/RoofShapeOption'
import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
import Header from '@/components/layout/Header'
@ -72,9 +73,12 @@ export default function CanvasPage() {
{/* <OuterWallOffset/> */}
{/* 보조선 사이즈, 이동, 복사 */}
<AuxiliarySize/>
<AuxiliaryMove/>
<AuxiliaryCopy/>
{/* <AuxiliarySize/> */}
{/* <AuxiliaryMove/> */}
{/* <AuxiliaryCopy/> */}
{/* 지붕면 할당 */}
<RoofAllocation/>
</div>
</div>
</div>

129
src/components/canvas/modal/roofallocation/RoofAllocation.jsx Normal file
View File

@ -0,0 +1,129 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import Qselect from "@/components/common/select/Qselect";
const SelectOption01 = [
{name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'}
]
const SelectOption02 = [
{name: '265',}, {name: '265'}, {name: '265'}, {name: '265'}
]
const SelectOption03 = [
{name: '235',}, {name: '235'}, {name: '235'}, {name: '235'}
]
const SelectOption04 = [
{name: '455'}, {name: '455'}, {name: '455'}, {name: '455'}
]
export default function RoofAllocation() {
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ml`}>
<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="allocation-select-wrap">
<span>屋根材の選択</span>
<div className="grid-select" >
<Qselect title={'瓦53A'} option={SelectOption01}/>
</div>
<button className="allocation-edit"><i className="edit-ico"></i>追加</button>
</div>
<div className="grid-option-wrap">
<div className="grid-option-box">
<div className="d-check-radio pop no-text">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01"></label>
</div>
<div className="grid-option-block-form">
<div className="block-box">
<div className="flex-ment">
<div className="grid-select" style={{width: '248px'}}>
<Qselect title={'瓦53A'} option={SelectOption01}/>
</div>
<span className="dec">基本屋根材</span>
</div>
</div>
<div className="block-box">
<div className="flex-ment">
<span>W</span>
<div className="grid-select" style={{width: '100px'}}>
<Qselect title={'265'} option={SelectOption02}/>
</div>
</div>
<div className="flex-ment">
<span>L</span>
<div className="grid-select" style={{width: '100px'}}>
<Qselect title={'235'} option={SelectOption03}/>
</div>
</div>
<div className="flex-ment">
<span>垂木の間隔</span>
<div className="grid-select" style={{width: '100px'}}>
<Qselect title={'455'} option={SelectOption04}/>
</div>
</div>
</div>
<div className="block-box">
<div className="icon-btn-wrap">
<button className="act">並列式<i className="allocation01"></i></button>
<button>カスケード <i className="allocation02"></i></button>
</div>
</div>
</div>
</div>
<div className="grid-option-box">
<div className="d-check-radio pop no-text">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02"></label>
</div>
<div className="grid-option-block-form">
<div className="block-box">
<div className="flex-ment">
<div className="grid-select" style={{width: '248px'}}>
<Qselect title={'瓦53A'} option={SelectOption01}/>
</div>
<button className="delete"></button>
</div>
</div>
<div className="block-box">
<div className="flex-ment">
<span>W</span>
<div className="grid-select" style={{width: '100px'}}>
<Qselect title={'265'} option={SelectOption02}/>
</div>
</div>
<div className="flex-ment">
<span>L</span>
<div className="grid-select" style={{width: '100px'}}>
<Qselect title={'235'} option={SelectOption03}/>
</div>
</div>
<div className="flex-ment">
<span>垂木の間隔</span>
<div className="grid-select" style={{width: '100px'}}>
<Qselect title={'455'} option={SelectOption04}/>
</div>
</div>
</div>
<div className="block-box">
<div className="icon-btn-wrap">
<button className="act">並列式<i className="allocation01"></i></button>
<button>カスケード <i className="allocation02"></i></button>
</div>
</div>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">選択した屋根材として割り当て</button>
</div>
</div>
</div>
</WithDraggable>
)
}

113
src/styles/_modal.scss
View File

@ -44,6 +44,9 @@ $alert-color: #101010;
&.lr{
width: 440px;
}
&.ml{
width: 530px;
}
&.l{
width: 800px;
}
@ -664,4 +667,114 @@ $alert-color: #101010;
&.sm{
margin-bottom: 15px;
}
}
// 지붕면 할당
.allocation-select-wrap{
display: flex;
align-items: center;
padding-bottom: 14px;
border-bottom: 1px solid #424242;
margin-bottom: 14px;
span{
font-size: $pop-normal-size;
color: $pop-color;
font-weight: $pop-bold-weight;
margin-right: 10px;
}
.allocation-edit{
display: flex;
align-items: center;
height: 30px;
padding: 0 10px;
margin-left: 5px;
font-size: $pop-normal-size;
color: $pop-color;
font-weight: $pop-normal-weight;
border: 1px solid #484848;
background-color: #323234;
i{
display: block;
width: 12px;
height: 12px;
margin-right: 5px;
background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center;
background-size: cover;
}
}
}
.block-box{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
.flex-ment{
gap: 10px;
.dec{
text-decoration: underline;
}
.delete{
display: block;
width: 15px;
height: 15px;
background: url(../../public/static/images/canvas/allocation_delete.svg)no-repeat center;
background-size: cover;
}
}
&:last-child{
margin-bottom: 0;
}
}
.icon-btn-wrap{
flex: 1;
display: flex;
align-items: center;
gap: 5px;
button{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 30px;
font-size: $pop-normal-size;
font-weight: $pop-normal-weight;
color: $pop-color;
border: 1px solid #646464;
border-radius: 2px;
padding: 0 10px;
transition: all .15s ease-in-out;
i{
height: 15px;
display: block;
margin-left: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: all .15s ease-in-out;
&.allocation01{
background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
width: 15px;
}
&.allocation02{
background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
width: 18px;
}
}
&.act,
&:hover{
color: #101010;
border: 1px solid #101010;
background-color: #fff;
i{
&.allocation01{
background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
}
&.allocation02{
background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
}
}
}
}
}

15
src/styles/_reset.scss
View File

@ -283,11 +283,14 @@ button{
clip-path:inset(0 0 100% 0);
width: calc(100% + 2px);
padding: 8px 0;
max-height: 100px;
overflow-y: auto;
background-color: #373737;
border: 1px solid #3F3F3F;
border-radius: 2px;
transition: all 0.17s ease-in-out;
visibility: hidden;
z-index: 999;
.select-item{
display: flex;
align-items: center;
@ -303,6 +306,18 @@ button{
background-color: #2C2C2C;
}
}
&::-webkit-scrollbar {
width: 2px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #5a5a5a;
border-radius: 10px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
&::after{
content: '';