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-26 13:49:14 +09:00
parent 39dd2c1f67
commit cb1081210d
8 changed files with 251 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/static/images/canvas/pop_tip.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">
<circle cx="7" cy="7.5" r="6.5" stroke="white"/>
<path d="M6.507 9.228L6.276 5.169L6.221 3.629H7.849L7.794 5.169L7.563 9.228H6.507ZM7.035 12.154C6.74167 12.154 6.49967 12.0513 6.309 11.846C6.12567 11.6407 6.034 11.3913 6.034 11.098C6.034 10.79 6.12567 10.537 6.309 10.339C6.49967 10.141 6.74167 10.042 7.035 10.042C7.32833 10.042 7.56667 10.141 7.75 10.339C7.94067 10.537 8.036 10.79 8.036 11.098C8.036 11.3913 7.94067 11.6407 7.75 11.846C7.56667 12.0513 7.32833 12.154 7.035 12.154Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 603 B

3
public/static/images/common/select_dark_arr.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 4" d="M1.5 1.25L5 4.75L8.5 1.25" stroke="white" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 187 B

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

@ -6,6 +6,8 @@ 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 OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
import PlacementGuide from '@/components/canvas/modal/placementsetting/PlacementGuide'
import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
import Footer from '@/components/layout/Footer'
import Header from '@/components/layout/Header'
@ -26,11 +28,19 @@ export default function CanvasPage() {
<div className="canvas-content">
<CanvasLayout menuValue={menuValue}/>
</div>
{/* 배치면 초기 설정 */}
<PlacementSettingPop/>
<PlacementGuide/>
{/* 캔버스 기본 셋팅 */}
{/* {modalOption.option && <SettingModal01/>} */}
{/* {modalOption.outerwall && <OuterLineWall/>} 확인용 숨김처리 */}
{/* 점·선 그리드 설정 */}
{/* {modalOption.gridoption && <GridOption/>} */}
{/* {modalOption.gridcopy && <GridCopy/>} */}
{/* {modalOption.gridmove && <GridMove/>} */}
{/* 외벽선 그리기 */}
{/* {modalOption.outerwall && <OuterLineWall/>} */}
</div>
</div>
</div>

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

@ -125,6 +125,16 @@ export default function InputWrapPage (){
<option>販売代理店リスト</option>
</select>
</div>
<div className="mb5">
<span>dark</span>
<select className="select-light dark" name="" id="" >
<option>販売代理店リスト</option>
<option>販売代理店リスト</option>
<option>販売代理店リスト</option>
<option>販売代理店リスト</option>
<option>販売代理店リスト</option>
</select>
</div>
</div>
</div>
<div className="input-wrap">

39
src/components/canvas/modal/placementsetting/PlacementGuide.jsx Normal file
View File

@ -0,0 +1,39 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function PlacementGuide(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap sm`}>
<div className="modal-head">
<h1 className="title">寸法入力方法案内</h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="placement-table">
<table>
<colgroup>
<col style={{width: '100px'}}/>
<col />
</colgroup>
<tbody>
<tr>
<th>複視図入力</th>
<td>平面の外壁線と立面の屋根勾配に基づいて作画する場合に選択</td>
</tr>
<tr>
<th>実測値入力</th>
<td>現地屋根の外周寸法を入力して作画する場合選択</td>
</tr>
<tr>
<th>陸上屋根</th>
<td>傾斜のない平面形状の屋根にパネルを配置する場合に選択</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</WithDraggable>
)
}

108
src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx Normal file
View File

@ -0,0 +1,108 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function PlacementSettingPop(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap l`}>
<div className="modal-head">
<h1 className="title">配置面初期設定</h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="placement-table">
<table>
<colgroup>
<col style={{width: '151px'}}/>
<col />
</colgroup>
<tbody>
<tr>
<th>図面の作成方法</th>
<td>寸法入力による物品作成</td>
</tr>
<tr>
<th>寸法入力方法 <button className="tooltip"></button></th>
<td>
<div className="pop-form-radio">
<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>
</td>
</tr>
<tr>
<th>屋根角度設定</th>
<td>
<div className="pop-form-radio">
<div className="d-check-radio pop">
<input type="radio" name="radio02" id="ra04" />
<label htmlFor="ra04">傾斜</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio02" id="ra05" />
<label htmlFor="ra05">角度</label>
</div>
</div>
</td>
</tr>
<tr>
<th>
屋根材の選択(単位:mm)
<button className="tooltip"></button>
</th>
<td>
<div className="placement-option">
<div className="select-wrap" style={{width: '171px'}}>
<select className="select-light dark" name="" id="" >
<option>瓦53A</option>
</select>
</div>
<div className="flex-ment">
<span>W</span>
<div className="select-wrap" style={{width: '84px'}}>
<select className="select-light dark" name="" id="" >
<option>265</option>
</select>
</div>
</div>
<div className="flex-ment">
<span>L</span>
<div className="select-wrap" style={{width: '84px'}}>
<select className="select-light dark" name="" id="" >
<option>235</option>
</select>
</div>
</div>
<div className="flex-ment">
<span>垂木の間隔</span>
<div className="select-wrap" style={{width: '84px'}}>
<select className="select-light dark" name="" id="" >
<option>455</option>
</select>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

69
src/styles/_modal.scss
View File

@ -30,6 +30,9 @@
&.xm{
max-width: 300px;
}
&.l{
max-width: 800px;
}
&.mount{
animation: mountpop .17s ease-in-out forwards;
}
@ -257,4 +260,70 @@
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
// 배치면 초기 설정
.placement-table{
padding: 9px;
table{
table-layout: fixed;
tr{
th{
display: flex;
align-items: center;
font-size: 12px;
color: #fff;
font-weight: 500;
padding: 18px 0;
border-bottom: 1px solid #424242;
}
td{
font-size: 12px;
color: #fff;
border-bottom: 1px solid #424242;
padding-left: 20px;
}
&:first-child{
td,
th{
padding-top: 0;
}
}
}
}
.tooltip{
position: relative;
display: block;
width: 15px;
height: 15px;
margin-left: 5px;
background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
background-size: cover;
}
}
.pop-form-radio{
display: flex;
align-items: center;
gap: 10px;
}
.placement-option{
display: flex;
align-items: center;
gap: 20px;
}
.select-wrap{
div{
width: 100%;
}
}
.flex-ment{
display: flex;
align-items: center;
gap: 5px;
span{
font-size: 12px;
color: #fff;
font-weight: 400;
}
}

7
src/styles/_reset.scss
View File

@ -325,6 +325,13 @@ button{
&.black{
color: #101010;
}
&.dark{
background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
color: #898989;
font-size: 12px;
border-radius: 2px;
border: none;
}
}