qcast3/onsitesurvey-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

매물상세 페이지 생성

Browse Source
This commit is contained in:
김창수 2025-04-29 14:31:44 +09:00
parent f8c441b521
commit 4f39ede24e
10 changed files with 227 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/assets/images/sub/down_icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 9.75C0.585786 9.75 0.25 10.0858 0.25 10.5C0.25 10.9142 0.585786 11.25 1 11.25V9.75ZM7 11.25C7.41421 11.25 7.75 10.9142 7.75 10.5C7.75 10.0858 7.41421 9.75 7 9.75V11.25ZM6.55675 6.13091C6.83428 5.82343 6.81001 5.34918 6.50252 5.07164C6.19504 4.7941 5.72079 4.81838 5.44325 5.12586L6.55675 6.13091ZM5.06066 6.66908L5.6174 7.17161L5.61741 7.1716L5.06066 6.66908ZM2.93934 6.66908L2.38259 7.1716L2.93934 6.66908ZM2.55675 5.12586C2.27921 4.81838 1.80496 4.7941 1.49747 5.07164C1.18999 5.34918 1.16571 5.82343 1.44325 6.13091L2.55675 5.12586ZM4.75 1.5C4.75 1.08579 4.41421 0.75 4 0.75C3.58579 0.75 3.25 1.08579 3.25 1.5H4.75ZM1 10.5V11.25H7V10.5V9.75H1V10.5ZM6 5.62839L5.44325 5.12586L4.50391 6.16655L5.06066 6.66908L5.61741 7.1716L6.55675 6.13091L6 5.62839ZM2.93934 6.66908L3.49609 6.16655L2.55675 5.12586L2 5.62839L1.44325 6.13091L2.38259 7.1716L2.93934 6.66908ZM5.06066 6.66908L4.50391 6.16655C4.23928 6.45974 4.09104 6.62153 3.97516 6.71949C3.8727 6.80609 3.90069 6.75 4 6.75V7.5V8.25C4.40997 8.25 4.71829 8.05542 4.9435 7.86505C5.15528 7.68603 5.38204 7.43236 5.6174 7.17161L5.06066 6.66908ZM2.93934 6.66908L2.38259 7.1716C2.61796 7.43236 2.84472 7.68603 3.0565 7.86505C3.28171 8.05542 3.59003 8.25 4 8.25V7.5V6.75C4.09931 6.75 4.1273 6.80609 4.02484 6.71949C3.90896 6.62153 3.76072 6.45974 3.49609 6.16655L2.93934 6.66908ZM4 7.5H4.75V1.5H4H3.25V7.5H4Z" fill="#1259CB"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

4
public/assets/images/sub/top_btn_icon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 10L9 2L17 10" stroke="white" stroke-width="2"/>
<rect x="8" y="2" width="2" height="16" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 218 B

12
src/app/saledetail/page.tsx
View File

@ -1,5 +1,7 @@
import Footer from "@/components/layouts/Footer";
import Header from "@/components/layouts/Header";
import SaleDetailData from "@/components/sale/saledetail/SaleDetailData";
import SaleDetailForm from "@/components/sale/saledetail/SaleDetailForm";
export default function SaleDetailPage(){
return(
@ -7,10 +9,18 @@ export default function SaleDetailPage(){
<Header name={"調査物件一覧"} backBtn={true}/>
<div className="container">
<div className="sale-contents">
<div className="sale-detail-tab-wrap">
<div className="sale-detail-tab-inner">
<button className="sale-detail-tab act">基本情報</button>
<button className="sale-detail-tab">電気 / 屋根情報</button>
</div>
</div>
<SaleDetailData/>
<SaleDetailForm/>
</div>
</div>
<Footer/>
<button className="top-btn"></button>
</div>
)
}

1
src/app/salelist/page.tsx
View File

@ -14,6 +14,7 @@ export default function SaleListPage() {
</div>
</div>
<Footer/>
<button className="top-btn"></button>
</div>
)
}

24
src/components/main/MemberInformationPop.tsx
View File

@ -16,28 +16,28 @@ export default function MemberInformationPop(){
</div>
<div className="modal-body">
<div className="member-infor-form-wrap">
<div className="member-infor-bx">
<div className="member-infor-tit">名前</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">名前</div>
<input type="text" className="input-frame" defaultValue={'Hong gi'} disabled/>
</div>
<div className="member-infor-bx">
<div className="member-infor-tit">ユーザーID </div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">ユーザーID </div>
<input type="text" className="input-frame" defaultValue={'KG123'} disabled/>
</div>
<div className="member-infor-bx">
<div className="member-infor-tit">メールアドレス</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">メールアドレス</div>
<input type="text" className="input-frame" defaultValue={'Kim@interplug.co.kr'} disabled/>
</div>
<div className="member-infor-bx">
<div className="member-infor-tit">電話番号</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">電話番号</div>
<input type="text" className="input-frame" defaultValue={'02123456'} disabled/>
</div>
<div className="member-infor-bx">
<div className="member-infor-tit">販売店名</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">販売店名</div>
<input type="text" className="input-frame" defaultValue={'Interplug'} disabled/>
</div>
<div className="member-infor-bx">
<div className="member-infor-tit">建設ID</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">建設ID</div>
<input type="text" className="input-frame" defaultValue={'Interplug2'} disabled/>
</div>
</div>

36
src/components/sale/saledetail/SaleDetailData.tsx Normal file
View File

@ -0,0 +1,36 @@
export default function SaleDetailData(){
return(
<div className="sale-frame">
<table className="sale-data-table">
<colgroup>
<col style={{width: '80px'}}/>
<col />
</colgroup>
<tbody>
<tr>
<th>登録番号</th>
<td>0000000020</td>
</tr>
<tr>
<th>登録日</th>
<td>2025.04.11</td>
</tr>
<tr>
<th>更新日時</th>
<td>2025.04.11 15:06:29</td>
</tr>
<tr>
<th>提出可否</th>
<td>2025.04.12 10:00:00 (INTERPLUG –販売店)</td>
</tr>
<tr>
<th>ダウンロード</th>
<td>
<button className="data-down">HWJ現地調査票確認<i className="down-icon"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
)
}

52
src/components/sale/saledetail/SaleDetailForm.tsx Normal file
View File

@ -0,0 +1,52 @@
export default function SaleDetailForm(){
return(
<>
<div className="sale-frame">
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">担当者名</div>
<input type="text" className="input-frame" disabled defaultValue={'HG'}/>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">販売店</div>
<input type="text" className="input-frame" disabled defaultValue={'HWJ(T01)'}/>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">施工店</div>
<input type="text" className="input-frame" disabled defaultValue={'施工点名表示'}/>
</div>
</div>
</div>
<div className="sale-frame">
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">現地調査日</div>
<input type="text" className="input-frame" disabled defaultValue={'2025/04/05'}/>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">建物名</div>
<input type="text" className="input-frame" disabled defaultValue={'ハンファジャパンビル'}/>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">顧客名</div>
<input type="text" className="input-frame" disabled defaultValue={'Hong gi'}/>
</div>
</div>
<div className="btn-flex-wrap">
<div className="btn-bx">
<button className="btn-frame n-blue icon">リスト<i className="btn-arr"></i></button>
</div>
<div className="btn-bx">
<button className="btn-frame red icon">提出<i className="btn-arr"></i></button>
</div>
<div className="btn-bx">
<button className="btn-frame n-blue icon">修正<i className="btn-arr"></i></button>
</div>
<div className="btn-bx">
<button className="btn-frame n-blue icon">削除<i className="btn-arr"></i></button>
</div>
</div>
</div>
</>
)
}

2
src/styles/base/_button.scss
View File

@ -8,7 +8,7 @@
line-height:40px;
border-radius:4px;
text-align:center;
font-weight:$font-w-600;
font-weight:$font-w-500;
font-size:$font-s-13;
color: $btn-font-c;
border: 1px solid #A8B6C7;

10
src/styles/components/_pop-contents.scss
View File

@ -3,14 +3,4 @@
// 회원정보 팝업
.member-infor-form-wrap{
margin-bottom: 20px;
.member-infor-bx{
margin-bottom: 18px;
&:last-child{
margin-bottom: 0;
}
.member-infor-tit{
@include defaultFont($font-s-13, $font-w-500, $font-c);
margin-bottom: 12px;
}
}
}

107
src/styles/components/_sub.scss
View File

@ -1,5 +1,41 @@
@use "../abstracts" as *;
// input form 공통
.data-input-form-bx{
margin-bottom: 18px;
&:last-child{
margin-bottom: 0;
}
.data-input-form-tit{
@include defaultFont($font-s-13, $font-w-500, $font-c);
margin-bottom: 10px;
}
}
.btn-flex-wrap{
@include flex(5px);
margin-top: 24px;
.btn-bx{
flex: 1;
}
}
// 매물 common
.top-btn{
position: fixed;
bottom: 96px;
right: 15px;
width: 38px;
height: 38px;
background-color: rgba(0, 0, 0, 0.50);
background-image: url(/assets/images/sub/top_btn_icon.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 18px 18px;
border-radius: 50%;
z-index: 90000;
}
.sale-contents{
width: 100%;
background-color: #F5F5F5;
@ -22,14 +58,41 @@
}
}
}
.sale-detail-tab-wrap{
height: 40px;
margin-bottom: 10px;
z-index: 100000;
.sale-detail-tab-inner{
position: fixed;
top: 66px;
left: 0;
width: 100%;
@include flex(0px);
align-items: center;
height: 40px;
.sale-detail-tab{
flex: 1;
height: 100%;
background-color: #fff;
border-top: 1px solid #DDDFE2;
border-bottom: 1px solid #DDDFE2;
@include defaultFont($font-s-13, $font-w-500, $font-c);
&.act{
color: $white-fff;
background-color: #5F738E;
border-color: #5F738E;
}
}
}
}
// 매물 목록
.sale-form-bx{
margin-bottom: 14px;
&:last-child{
margin-bottom: 0;
}
}
.sale-list-wrap{
.sale-list-item{
padding-top: 14px;
@ -105,3 +168,45 @@
.sale-edit-btn{
margin-top: 24px;
}
// 매물 상세
.sale-data-table{
width: 100%;
table-layout: fixed;
tbody{
tr{
th{
@include defaultFont($font-s-13, $font-w-500, $font-c);
vertical-align: top;
padding: 5px 0;
}
td{
@include defaultFont($font-s-13, $font-w-400, $font-c);
padding: 5px 0 8px 14px;
.data-down{
@include flex(8px);
align-items: center;
color: #1259CB;
i{
display: block;
width: 8px;
height: 12px;
background: url(/assets/images/sub/down_icon.svg)no-repeat center;
background-size: cover;
}
}
}
&:first-child{
th,td{
padding-top: 0;
}
}
&:last-child{
th,td{
padding-bottom: 0;
}
}
}
}
}