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-16 13:38:08 +09:00
parent 89d1e28a06
commit 7ef7065596
3 changed files with 168 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/management/productinfo/page.jsx
View File

@ -6,6 +6,7 @@ import '@/styles/contents.scss';
import '@/styles/grid.scss';
import ProductInfoTable from "@/components/sub/management/productinfo/ProductInfoTable";
import ProductInfoBox from "@/components/sub/management/productinfo/ProductInfoBox";
import WindSelectPop from "@/components/sub/management/productinfo/WindSelectPop";
export default function ProductInfo(){
return(
@ -49,6 +50,9 @@ export default function ProductInfo(){
</div>
</div>
<Footer/>
{/* 풍속선택 팝업 */}
<WindSelectPop/>
</div>
)
}

94
src/components/sub/management/productinfo/WindSelectPop.jsx Normal file
View File

@ -0,0 +1,94 @@
export default function WindSelectPop(){
return(
<div className="modal-popup">
<div className="modal-dialog middle">
<div className="modal-content">
<div className="modal-header">
<h1 className="title">風速選択</h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="modal-body-inner">
<div className="common-table">
<table>
<colgroup>
<col style={{width: '70px'}}/>
<col />
</colgroup>
<tbody>
<tr>
<th>県</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" defaultValue='東京都' readOnly/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div className="wind-table">
<table>
<thead>
<tr>
<th style={{width: '50px'}}>選択</th>
<th style={{width: '110px'}}>風速</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">
<div className="d-check-radio light no-text">
<input type="radio" name="radio05" id="ra17"/>
<label htmlFor="ra17"></label>
</div>
</td>
<td className="al-c">32m/s</td>
<td>八王子市 立川市 昭島市 日野市 東村山市 福生市 東大和市 武敲村山市 羽村市 苏 石野市 西多障部の 瑞糖</td>
</tr>
<tr>
<td className="al-c">
<div className="d-check-radio light no-text">
<input type="radio" name="radio05" id="ra18"/>
<label htmlFor="ra18"></label>
</div>
</td>
<td className="al-c">32m/s</td>
<td>23区 武藏野市 三鹰市府中市網布市 町田市 小金井市 小平市 国分寺市 国立市 西東京市 狗江市清灏市 東久留米市 多摩市稲城</td>
</tr>
<tr>
<td className="al-c">
<div className="d-check-radio light no-text">
<input type="radio" name="radio05" id="ra19"/>
<label htmlFor="ra19"></label>
</div>
</td>
<td className="al-c">32m/s</td>
<td>大島町 利島町 新島村 神津島村 三宅村 御被島</td>
</tr>
<tr>
<td className="al-c">
<div className="d-check-radio light no-text">
<input type="radio" name="radio05" id="ra20"/>
<label htmlFor="ra20"></label>
</div>
</td>
<td className="al-c">32m/s</td>
<td>八丈町 青 島村 小笠際</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="footer-btn-wrap">
<button className="btn-origin grey mr5 ">閉じる</button>
<button className="btn-origin navy ">選択</button>
</div>
</div>
</div>
</div>
</div>
)
}

70
src/styles/_table.scss
View File

@ -360,4 +360,74 @@ table{
}
}
}
}
// 풍속 선택 테이블
.wind-table{
margin-top: 20px;
table{
width: 100%;
table-layout: fixed;
border-collapse: separate;
thead{
display: table;
table-layout: fixed;
width: 100%;
tr{
th{
text-align: center;
font-size: 13px;
font-weight: 600;
color: #344356;
background-color: #F7F9FA;
padding: 10.5px 10px;
vertical-align: middle;
border-bottom: 1px solid #ECF0F4;
border-top: 1px solid #ECF0F4;
&:first-child{
border-left: 1px solid #ECF0F4;
border-radius: 4px 0 0 4px;
}
&:last-child{
border-right: 1px solid #ECF0F4;
border-radius: 0 4px 4px 0;
}
}
}
}
tbody{
display: block;
max-height: 200px;
overflow-y: auto;
tr{
display: table;
table-layout: fixed;
width: 100%;
td{
padding: 13.5px 10px;
font-size: 13px;
font-weight: 400;
color: #45576F;
vertical-align: middle;
border-bottom: 1px solid #ECF0F4;
&:nth-child(2){
width: 110px;
}
&:nth-child(1){
width: 50px;
}
}
}
&::-webkit-scrollbar {
width: 4px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #ECF0F4;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
}
}