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 10:07:33 +09:00
parent 40e4bc68ee
commit a4c026b25b
5 changed files with 181 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/inquirylist/page.tsx Normal file
View File

@ -0,0 +1,20 @@
import InquiryForm from "@/components/inquiry/inquirylist/InquiryForm";
import InquiryTable from "@/components/inquiry/inquirylist/InquiryTable";
import Footer from "@/components/layouts/Footer";
import Header from "@/components/layouts/Header";
export default function InquiryListPage (){
return(
<div className="wrap">
<Header name={"1:1お問い合わせ"} backBtn={true}/>
<div className="container">
<div className="sale-contents">
<InquiryForm/>
<InquiryTable/>
</div>
</div>
<Footer/>
<button className="top-btn"></button>
</div>
)
}

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

@ -131,6 +131,18 @@ export default function PublishList (){
</td>
<td className='c red'>2025/04/29</td>
</tr>
<tr>
<td rowSpan={3}>1:1 문의</td>
<td>1:1 문의 목록</td>
<td>
<Link href={'inquirylist'}>InquiryListPage.tsx</Link>
</td>
<td className='c'>
</td>
<td className='c'>
</td>
<td className='c red'>2025/04/30</td>
</tr>
</tbody>
</table>
</div>

15
src/components/inquiry/inquirylist/InquiryForm.tsx Normal file
View File

@ -0,0 +1,15 @@
export default function InquiryForm(){
return(
<div className="sale-frame">
<div className="sale-form-bx">
<button className="btn-frame n-blue icon">お問い合わせ<i className="btn-arr"></i></button>
</div>
<div className="sale-form-bx">
<div className="search-input">
<input type="text" className="search-frame" placeholder="タイトルを入力してください. (2文字以上)"/>
<button className="search-icon"></button>
</div>
</div>
</div>
)
}

63
src/components/inquiry/inquirylist/InquiryTable.tsx Normal file
View File

@ -0,0 +1,63 @@
export default function InquiryTable(){
return(
<div className="sale-frame">
<div className="inquiry-table-filter">
<div className="filter-check">
<div className="check-form-box">
<input type="checkbox" id="ch01"/>
<label htmlFor="ch01">私が書いたお問い合わせ</label>
</div>
</div>
<div className="filter-select">
<select className="select-form" name="" id="">
<option value="">全体</option>
<option value="">全体</option>
<option value="">全体</option>
<option value="">全体</option>
<option value="">全体</option>
</select>
</div>
</div>
<div className="inquiry-list-wrap">
<div className="inquiry-list-tit">合計 <span>98</span>個</div>
<ul className="inquiry-list">
<li className="inquiry-item">
<div className="inquiry-item-bx">
<div className="inquiry-item-category">屋根</div>
<div className="inquiry-item-tit">屋根材適合性確認依頼</div>
<div className="inquiry-item-date">2025.04.02</div>
<div className="inquiry-badge badge blue">回答待ち</div>
</div>
</li>
<li className="inquiry-item">
<div className="inquiry-item-bx">
<div className="inquiry-item-category">設計</div>
<div className="inquiry-item-tit">設置可能ですか？</div>
<div className="inquiry-item-date">2025.04.02</div>
<div className="inquiry-badge badge orange">回答完了</div>
</div>
</li>
<li className="inquiry-item">
<div className="inquiry-item-bx">
<div className="inquiry-item-category">屋根</div>
<div className="inquiry-item-tit">屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼</div>
<div className="inquiry-item-date">2025.04.02</div>
<div className="inquiry-badge badge blue">回答待ち</div>
</div>
</li>
<li className="inquiry-item">
<div className="inquiry-item-bx">
<div className="inquiry-item-category">設計</div>
<div className="inquiry-item-tit">設置可能ですか？</div>
<div className="inquiry-item-date">2025.04.02</div>
<div className="inquiry-badge badge orange">回答完了</div>
</div>
</li>
</ul>
<div className="sale-edit-btn">
<button className="btn-frame n-blue icon">もっと見る<i className="btn-edit"></i></button>
</div>
</div>
</div>
)
}

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

@ -144,6 +144,7 @@
}
.sale-item-tit{
@include defaultFont($font-s-15, $font-w-500, $font-c);
@include ellipsis(1);
margin-bottom: 9px;
}
.sale-item-customer{
@ -258,4 +259,74 @@
@include defaultFont($font-s-13, $font-w-400, $font-c);
}
}
}
// 1:1 문의 목록
.inquiry-table-filter{
margin-bottom: 24px;
.filter-check{
margin-bottom: 12px;
}
}
.inquiry-list-tit{
padding-bottom: 10px;
border-bottom: 1px solid #2E3A59;
@include defaultFont($font-s-13, $font-w-400, $font-c);
span{
font-weight: $font-w-500;
}
}
.badge{
min-width: 60px;
height: 30px;
line-height: 30px;
padding: 0 8px;
border-radius: 60px;
text-align: center;
font-size: $font-s-12;
font-weight: $font-w-500;
&.blue{
color: #5497E9;
background-color: #ECF5FF;
}
&.orange{
color: #F86A56;
background-color: #FFEFED;
}
&.block{
width: 100%;
}
}
.inquiry-list{
.inquiry-item{
padding: 10px 0;
cursor: pointer;
border-bottom: 1px solid #ECECEC;
&:last-child{
border-bottom: none;
padding-bottom: 0;
}
.inquiry-item-bx{
position: relative;
padding-right: 70px;
.inquiry-item-category{
@include defaultFont($font-s-13, $font-w-400, $font-c);
margin-bottom: 5px;
}
.inquiry-item-tit{
@include defaultFont($font-s-15, $font-w-500, $font-c);
@include ellipsis(1);
margin-bottom: 5px;
}
.inquiry-item-date{
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
}
.inquiry-badge{
position: absolute;
top: 0;
right: 0;
}
}
}
}