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-04 14:25:53 +09:00
parent d70debe88a
commit f8ac3bcd80
3 changed files with 106 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@ import DisplayChange from '@/components/canvas/modal/displaychange/DisplayChange
import DistanceMeasurement01 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement01' import DistanceMeasurement01 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement01'
import DistanceMeasurement02 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement02' import DistanceMeasurement02 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement02'
import DistanceMeasurement03 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement03' import DistanceMeasurement03 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement03'
import EachPropertyChange from '@/components/canvas/modal/eachpropertychange/EachPropertyChange'
import EvaseKerabaOption from '@/components/canvas/modal/eaves_keraba/EavesKerabaOption' import EvaseKerabaOption from '@/components/canvas/modal/eaves_keraba/EavesKerabaOption'
import GridCopy from '@/components/canvas/modal/gridoption/GridCopy' import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
import GridMove from '@/components/canvas/modal/gridoption/GridMove' import GridMove from '@/components/canvas/modal/gridoption/GridMove'
@ -109,6 +110,7 @@ export default function CanvasPage() {
{/* <DistanceMeasurement03/> */} {/* <DistanceMeasurement03/> */}
{/* 각 변 속성 변경 */} {/* 각 변 속성 변경 */}
<EachPropertyChange/>
</div> </div>
</div> </div>
</div> </div>

94
src/components/canvas/modal/eachpropertychange/EachPropertyChange.jsx Normal file
View File

@ -0,0 +1,94 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function EachPropertyChange() {
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">各辺属性の変更 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="guide">
<span className="mb10">属性を変更する辺を選択してください。</span>
<span>選択した値 [龍丸]</span>
</div>
<div className="properties-setting-wrap outer">
<div className="setting-tit">設定</div>
<div className="outline-wrap">
<div className="radio-grid-wrap">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">軒先</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">ケラバ</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra03" />
<label htmlFor="ra03">龍丸</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra04" />
<label htmlFor="ra04">ケラバ左</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra05" />
<label htmlFor="ra05">ヨセムネ</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra06" />
<label htmlFor="ra06">ケラバ右</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra07" />
<label htmlFor="ra07">片側の流れ</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra08" />
<label htmlFor="ra08">谷</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra09" />
<label htmlFor="ra09">壁取り</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra10" />
<label htmlFor="ra10">Lの捨て渓谷</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra11" />
<label htmlFor="ra11">壁取り(型)</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra12" />
<label htmlFor="ra12">マンサード</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra13" />
<label htmlFor="ra13">壁取合(流れ)</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra14" />
<label htmlFor="ra14">設定なし</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra15" />
<label htmlFor="ra15">壁取合(流れ左)</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra16" />
<label htmlFor="ra16">壁取り(流れ右)</label>
</div>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

10
src/styles/_modal.scss
View File

@ -675,6 +675,9 @@ $alert-color: #101010;
&.sm{ &.sm{
margin-bottom: 15px; margin-bottom: 15px;
} }
span{
display: block;
}
} }
// 지붕면 할당 // 지붕면 할당
@ -1011,4 +1014,11 @@ $alert-color: #101010;
font-size: $pop-normal-size; font-size: $pop-normal-size;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
color: #FFAFAF; color: #FFAFAF;
}
// 각 변 속성 변경
.radio-grid-wrap{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px 15px;
} }