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 10:51:40 +09:00
parent 8ca61c05fd
commit f8c441b521
11 changed files with 262 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/images/common/btn_edit.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="2" height="10" rx="1" transform="matrix(0 -1 -1 0 10 6)" fill="white"/>
<rect x="4" width="2" height="10" rx="1" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 244 B

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

@ -50,6 +50,7 @@ export default function InputCommonPage() {
<button className="btn-frame red">Block Button</button>
<button className="btn-frame d-blue icon">Block Icon Button<i className="btn-arr"></i></button>
<button className="btn-frame n-blue icon">Block Icon Button<i className="btn-arr"></i></button>
<button className="btn-frame n-blue icon">Block Icon Button<i className="btn-edit"></i></button>
<button className="btn-frame red icon">Block Icon Button<i className="btn-arr"></i></button>
<button className="btn-frame l-blue icon"><i className="btn-clip"></i>Block Icon Button</button>
<button className="btn-frame icon login">Block Big Button <i className="btn-arr"></i></button>

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

@ -13,6 +13,7 @@ export default function MainPage(){
</div>
<Footer/>
</div>
{/* 회원정보 팝업 */}
<MemberInformationPop/>
</>
)

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

@ -0,0 +1,16 @@
import Footer from "@/components/layouts/Footer";
import Header from "@/components/layouts/Header";
export default function SaleDetailPage(){
return(
<div className="wrap">
<Header name={"調査物件一覧"} backBtn={true}/>
<div className="container">
<div className="sale-contents">
</div>
</div>
<Footer/>
</div>
)
}

19
src/app/salelist/page.tsx Normal file
View File

@ -0,0 +1,19 @@
import Footer from "@/components/layouts/Footer";
import Header from "@/components/layouts/Header";
import SaleListForm from "@/components/sale/salelist/SaleListForm";
import SaleListTable from "@/components/sale/salelist/SaleListTable";
export default function SaleListPage() {
return (
<div className="wrap">
<Header name={"調査物件一覧"} backBtn={true}/>
<div className="container">
<div className="sale-contents">
<SaleListForm/>
<SaleListTable/>
</div>
</div>
<Footer/>
</div>
)
}

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

@ -49,19 +49,7 @@ export default function PublishList (){
<td>Login</td>
<td>Login Page</td>
<td>
<Link href={'login'}>Login.tsx</Link>
</td>
<td></td>
<td className='c'>
</td>
<td className='c red'></td>
</tr>
<tr>
<td>Main</td>
<td>Main Page</td>
<td>
<Link href={'main'}>Main.tsx</Link>
<Link href={'login'}>LoginPage.tsx</Link>
</td>
<td></td>
<td className='c'>
@ -69,6 +57,43 @@ export default function PublishList (){
</td>
<td className='c red'>2025/04/28</td>
</tr>
<tr>
<td>Main</td>
<td>Main Page</td>
<td>
<Link href={'main'}>MainPage.tsx</Link>
</td>
<td className='c'>
회원정보 팝업 포함
</td>
<td className='c'>
</td>
<td className='c red'>2025/04/29</td>
</tr>
<tr>
<td rowSpan={3}>매물</td>
<td>매물 목록</td>
<td>
<Link href={'salelist'}>SaleListPage.tsx</Link>
</td>
<td className='c'>
</td>
<td className='c'>
</td>
<td className='c red'>2025/04/29</td>
</tr>
<tr>
<td>매물 상세</td>
<td>
<Link href={'saledetail'}>SaleDetailPage.tsx</Link>
</td>
<td className='c'>
</td>
<td className='c'>
</td>
<td className='c red'>2025/04/29</td>
</tr>
</tbody>
</table>
</div>

39
src/components/sale/salelist/SaleListForm.tsx Normal file
View File

@ -0,0 +1,39 @@
export default function SaleListForm(){
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">
<select className="select-form" name="" id="">
<option value="">全体</option>
<option value="">全体</option>
<option value="">全体</option>
<option value="">全体</option>
<option value="">全体</option>
</select>
</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 className="sale-form-bx">
<div className="check-form-box">
<input type="checkbox" id="ch01"/>
<label htmlFor="ch01">私が書いた物件</label>
</div>
</div>
<div className="sale-form-bx">
<select className="select-form" name="" id="">
<option value="">最近の登録日</option>
<option value="">最近の登録日</option>
<option value="">最近の登録日</option>
<option value="">最近の登録日</option>
<option value="">最近の登録日</option>
</select>
</div>
</div>
)
}

27
src/components/sale/salelist/SaleListTable.tsx Normal file
View File

@ -0,0 +1,27 @@
export default function SaleListTable(){
return(
<div className="sale-frame">
<ul className="sale-list-wrap">
{Array.from({ length: 4 }).map((_, idx) => (
<li className="sale-list-item" key={idx}>
<div className="sale-item-bx">
<div className="sale-item-date-bx">
<div className="sale-item-num">0000000021</div>
<div className="sale-item-date">2025.04.22</div>
</div>
<div className="sale-item-tit">Hanwha Building</div>
<div className="sale-item-customer">Gil dong</div>
<div className="sale-item-update-bx">
<div className="sale-item-name">Hong Gildong</div>
<div className="sale-item-update">2025.04.22 10:00:21</div>
</div>
</div>
</li>
))}
</ul>
<div className="sale-edit-btn">
<button className="btn-frame n-blue icon">もっと見る<i className="btn-edit"></i></button>
</div>
</div>
)
}

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

@ -49,6 +49,14 @@
background-size: cover;
margin-left: 12px;
}
.btn-edit{
display: block;
width: 10px;
height: 10px;
background: url(/assets/images/common/btn_edit.svg)no-repeat center;
background-size: cover;
margin-left: 12px;
}
.btn-clip{
display: block;
width: 18px;

3
src/styles/components/_index.scss
View File

@ -1,3 +1,4 @@
@forward 'main';
@forward 'login';
@forward 'pop-contents';
@forward 'pop-contents';
@forward 'sub';

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

@ -0,0 +1,107 @@
@use "../abstracts" as *;
.sale-contents{
width: 100%;
background-color: #F5F5F5;
.sale-frame{
padding: 0 20px;
border-top: 1px solid #ECECEC;
border-bottom: 1px solid #ECECEC;
margin-bottom: 10px;
padding-bottom: 24px;
padding-top: 24px;
background-color: $white-fff;
&:first-child{
padding-top: 0;
border-top: none;
}
&:last-child{
padding-bottom: 0;
border-bottom: none;
margin-bottom: 0;
}
}
}
.sale-form-bx{
margin-bottom: 14px;
&:last-child{
margin-bottom: 0;
}
}
.sale-list-wrap{
.sale-list-item{
padding-top: 14px;
padding-bottom: 14px;
border-bottom: 1px solid #ECECEC;
cursor: pointer;
&:first-child{
padding-top: 0;
}
&:last-child{
border-bottom: none;
padding-bottom: 0;
}
}
}
.sale-item-bx{
.sale-item-date-bx{
@include flex(0px);
align-items: center;
margin-bottom: 9px;
.sale-item-num{
position: relative;
@include defaultFont($font-s-13, $font-w-400, $font-c);
padding-right: 6px;
&::after{
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 1px;
height: 10px;
background-color: #A2ABB8;
}
}
.sale-item-date{
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
padding-left: 6px;
}
}
.sale-item-tit{
@include defaultFont($font-s-15, $font-w-500, $font-c);
margin-bottom: 9px;
}
.sale-item-customer{
@include defaultFont($font-s-13, $font-w-400, $font-c);
margin-bottom: 9px;
}
.sale-item-update-bx{
@include flex(0px);
align-items: center;
.sale-item-name{
position: relative;
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
padding-right: 6px;
&::after{
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 1px;
height: 10px;
background-color: #A2ABB8;
}
}
.sale-item-update{
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
padding-left: 6px;
}
}
}
.sale-edit-btn{
margin-top: 24px;
}