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

1:1문의 상세, 답변 페이지 추가

Browse Source
This commit is contained in:
김창수 2025-04-30 14:13:15 +09:00
parent 90a34f11fa
commit b29ad3e55f
6 changed files with 287 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/inquiryanswer/page.tsx Normal file
View File

@ -0,0 +1,16 @@
import InquiryAnswerData from "@/components/inquiry/inquiryanswer/InquiryAnswerData";
import Footer from "@/components/layouts/Footer";
import Header from "@/components/layouts/Header";
export default function InquiryAnswerPage(){
return(
<div className="wrap">
<Header name={"1:1お問い合わせ詳細"} backBtn={true}/>
<div className="container">
<InquiryAnswerData/>
</div>
<Footer/>
<button className="top-btn"></button>
</div>
)
}

16
src/app/inquirydetail/page.tsx Normal file
View File

@ -0,0 +1,16 @@
import InquiryDetailData from "@/components/inquiry/inquirydetail/InquiryDetailData";
import Footer from "@/components/layouts/Footer";
import Header from "@/components/layouts/Header";
export default function InquiryDetailPage(){
return(
<div className="wrap">
<Header name={"1:1お問い合わせ詳細"} backBtn={true}/>
<div className="container">
<InquiryDetailData/>
</div>
<Footer/>
<button className="top-btn"></button>
</div>
)
}

24
src/components/PublishList/PublishList.tsx
View File

@ -132,7 +132,7 @@ export default function PublishList (){
<td className='c red'>2025/04/29</td>
</tr>
<tr>
<td rowSpan={3}>1:1 문의</td>
<td rowSpan={4}>1:1 문의</td>
<td>1:1 문의 목록</td>
<td>
<Link href={'inquirylist'}>InquiryListPage.tsx</Link>
@ -154,6 +154,28 @@ export default function PublishList (){
</td>
<td className='c red'>2025/04/30</td>
</tr>
<tr>
<td>1:1 문의 상세</td>
<td>
<Link href={'inquirydetail'}>InquiryDetailPage.tsx</Link>
</td>
<td className='c'>
</td>
<td className='c'>
</td>
<td className='c red'>2025/04/30</td>
</tr>
<tr>
<td>1:1 문의 상세 (답변)</td>
<td>
<Link href={'inquiryanswer'}>InquiryAnswerPage.tsx</Link>
</td>
<td className='c'>
</td>
<td className='c'>
</td>
<td className='c red'>2025/04/30</td>
</tr>
</tbody>
</table>
</div>

96
src/components/inquiry/inquiryanswer/InquiryAnswerData.tsx Normal file
View File

@ -0,0 +1,96 @@
export default function InquiryAnswerData() {
return(
<div className="inquiry-frame">
<div className="inquiry-detail-wrap">
<div className="inquiry-detail-badge">
<div className="badge orange block">回答完了</div>
</div>
<div className="inquiry-detail-data-table">
<table className="sale-data-table">
<colgroup>
<col style={{width: '80px'}}/>
<col />
</colgroup>
<tbody>
<tr>
<th>登録日</th>
<td>2025.04.10</td>
</tr>
<tr>
<th>作者</th>
<td>Hong gi</td>
</tr>
<tr>
<th>販売店</th>
<td>interplug</td>
</tr>
<tr>
<th>施工店</th>
<td>interplugs</td>
</tr>
<tr>
<th>E-mail</th>
<td>Hong@interplug.co.kr</td>
</tr>
</tbody>
</table>
</div>
<div className="inquiry-detail-data">
<div className="inquiry-detail-category">屋根適合</div>
<div className="inquiry-detail-tit">屋根材適合性確認依頼</div>
<div className="inquiry-detail-txt">
入力した内容が表示されます.<br/>
インストール可能であることを確認してください.<br/>
屋根の写真を添付しました.
</div>
</div>
<div className="file-list-wrap">
<div className="file-list-tit">ファイル添付</div>
<ul className="file-list">
<li className="file-item">
<button className="file-item-bx">
<div className="file-item-name">添付ファイル名.jpg </div>
</button>
</li>
<li className="file-item">
<button className="file-item-bx">
<div className="file-item-name">添付ファイル名.jpg </div>
</button>
</li>
</ul>
</div>
</div>
<div className="inquiry-answer-wrap">
<div className="inquiry-answer-header">
<div className="inquiry-answer-tit">Hanwha Japan 回答</div>
<div className="inquiry-answer-date"><span>佐藤一貴</span>/ <span>2025.04.02 16:54:00</span></div>
</div>
<div className="inquiry-detail-data">
<div className="inquiry-detail-category">回答</div>
<div className="inquiry-detail-txt">
一次側接続は, 自動切替開閉器と住宅分電盤昼間遮断器との間に蓄電システム遮断器を配線する方法です.
二次側接続は, 住宅分電盤週間ブレーカの二次側に蓄電システムブレーカを接続する
</div>
</div>
<div className="file-list-wrap">
<div className="file-list-tit">ファイル添付</div>
<ul className="file-list">
<li className="file-item">
<button className="file-item-bx">
<div className="file-item-name">添付ファイル名.jpg </div>
</button>
</li>
<li className="file-item">
<button className="file-item-bx">
<div className="file-item-name">添付ファイル名.jpg </div>
</button>
</li>
</ul>
</div>
</div>
<div className="sale-edit-btn">
<button className="btn-frame n-blue icon">リスト<i className="btn-arr"></i></button>
</div>
</div>
)
}

68
src/components/inquiry/inquirydetail/InquiryDetailData.tsx Normal file
View File

@ -0,0 +1,68 @@
export default function InquiryDetailData() {
return(
<div className="inquiry-frame">
<div className="inquiry-detail-wrap">
<div className="inquiry-detail-badge">
<div className="badge blue block">回答完了</div>
</div>
<div className="inquiry-detail-data-table">
<table className="sale-data-table">
<colgroup>
<col style={{width: '80px'}}/>
<col />
</colgroup>
<tbody>
<tr>
<th>登録日</th>
<td>2025.04.10</td>
</tr>
<tr>
<th>作者</th>
<td>Hong gi</td>
</tr>
<tr>
<th>販売店</th>
<td>interplug</td>
</tr>
<tr>
<th>施工店</th>
<td>interplugs</td>
</tr>
<tr>
<th>E-mail</th>
<td>Hong@interplug.co.kr</td>
</tr>
</tbody>
</table>
</div>
<div className="inquiry-detail-data">
<div className="inquiry-detail-category">屋根適合</div>
<div className="inquiry-detail-tit">屋根材適合性確認依頼</div>
<div className="inquiry-detail-txt">
入力した内容が表示されます.<br/>
インストール可能であることを確認してください.<br/>
屋根の写真を添付しました.
</div>
</div>
<div className="file-list-wrap">
<div className="file-list-tit">ファイル添付</div>
<ul className="file-list">
<li className="file-item">
<button className="file-item-bx">
<div className="file-item-name">添付ファイル名.jpg </div>
</button>
</li>
<li className="file-item">
<button className="file-item-bx">
<div className="file-item-name">添付ファイル名.jpg </div>
</button>
</li>
</ul>
</div>
</div>
<div className="sale-edit-btn">
<button className="btn-frame n-blue icon">リスト<i className="btn-arr"></i></button>
</div>
</div>
)
}

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

@ -344,36 +344,76 @@
margin-top: 20px;
.file-list-wrap{
margin-top: 14px;
.file-list-tit{
@include defaultFont($font-s-13, $font-w-500, $font-c);
}
.file-list{
margin-top: 14px;
}
.file-item{
border-top: 1px solid #EDEDED;
cursor: default;
.file-item-bx{
padding: 14px 0;
@include flex(0px);
align-items: center;
.file-item-name{
@include defaultFont($font-s-13, $font-w-400, $font-c);
}
.file-del{
display: block;
margin-left: auto;
width: 16px;
height: 16px;
background: url(/assets/images/common/id_delete_icon.svg)no-repeat center;
background-size: cover;
}
}
}
.file-list-tit{
@include defaultFont($font-s-13, $font-w-500, $font-c);
}
.file-list{
margin-top: 14px;
.file-item{
border-top: 1px solid #EDEDED;
cursor: default;
.file-item-bx{
width: 100%;
padding: 14px 0;
@include flex(0px);
align-items: center;
.file-item-name{
@include defaultFont($font-s-13, $font-w-400, $font-c);
}
&:last-child{
.file-item-bx{
padding-bottom: 0;
}
.file-del{
display: block;
margin-left: auto;
width: 16px;
height: 16px;
background: url(/assets/images/common/id_delete_icon.svg)no-repeat center;
background-size: cover;
}
}
&:last-child{
.file-item-bx{
padding-bottom: 0;
}
}
}
}
// 1:1 문의 상세
.inquiry-detail-data-table{
padding: 20px 0;
border-bottom: 1px solid #ECECEC;
}
.inquiry-detail-data{
padding: 20px 0;
border-bottom: 1px solid #2E3A59;
margin-bottom: 24px;
.inquiry-detail-category{
@include defaultFont($font-s-13, $font-w-400, $font-c);
margin-bottom: 3px;
}
.inquiry-detail-tit{
@include defaultFont($font-s-15, $font-w-500, $font-c);
margin-bottom: 10px;
}
.inquiry-detail-txt{
@include defaultFont($font-s-13, $font-w-400, $font-c);
}
}
// 1:1 문의 답변
.inquiry-answer-wrap{
margin-top: 24px;
}
.inquiry-answer-header{
padding: 20px 0;
border-top: 1px solid #F86A56;
border-bottom: 1px solid #ECECEC;
.inquiry-answer-tit{
@include defaultFont($font-s-14, $font-w-500, #F86A56);
margin-bottom: 5px;
}
.inquiry-answer-date{
@include defaultFont($font-s-13, $font-w-400, #F86A56);
}
}