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-07-18 15:54:18 +09:00
parent 46d3c5c4cc
commit 279bcacada
3 changed files with 345 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,38 +1,50 @@
import Link from 'next/link' import Link from "next/link";
import '@/styles/publishpage.scss' import "@/styles/publishpage.scss";
export default function PublishList (){ export default function PublishList() {
return( return (
<div className="publish-list"> <div className="publish-list">
<div className="p-header"> <div className="p-header">
<h1>Hanasys 현지조사</h1> <h1>Hanasys 현지조사</h1>
</div> </div>
<div className="p-body"> <div className="p-body">
<div className="p-contents"> <div className="p-contents">
<div className='p-guide'> <div className="p-guide">
<div className="p-guide-header">Publish Guide</div> <div className="p-guide-header">Publish Guide</div>
<div className="p-guide-content"> <div className="p-guide-content">
<p>※ className은 케밥 케이스 사용 <span>ex) "sample-class"</span></p> <p>
<p>※ img네이밍은 "_"로 사용, 번호 사용시 01, 02 와 같이 2자리 숫자 사용 <span>ex) "img_sample01"</span></p> ※ className은 케밥 케이스 사용 <span>ex) "sample-class"</span>
<p>※ button, select, checkbox, radio... 등 기본 설정은 <span>InputCommon.jsx</span>에 정의된 내용만 사용 (icon버튼 제외)</p> </p>
<p>※ scss파일 생성시 "_"를 앞에 붙힌 후 생성, 또한 해당 카테고리에 적합한 폴더에 생성</p> <p>
<div className='p-guide-inputcommon'> ※ img네이밍은 "_"로 사용, 번호 사용시 01, 02 와 같이 2자리 숫자
사용 <span>ex) "img_sample01"</span>
</p>
<p>
※ button, select, checkbox, radio... 등 기본 설정은{" "}
<span>InputCommon.jsx</span>에 정의된 내용만 사용 (icon버튼
제외)
</p>
<p>
※ scss파일 생성시 "_"를 앞에 붙힌 후 생성, 또한 해당 카테고리에
적합한 폴더에 생성
</p>
<div className="p-guide-inputcommon">
<h3>기본 SetUp Input 모음</h3> <h3>기본 SetUp Input 모음</h3>
<Link href={'/inputcommon'}>InputCommon.jsx</Link> <Link href={"/inputcommon"}>InputCommon.jsx</Link>
</div> </div>
</div> </div>
</div> </div>
<div className='p-list-wrap'> <div className="p-list-wrap">
<h2>Publish List</h2> <h2>Publish List</h2>
<div className='p-list-table'> <div className="p-list-table">
<table> <table>
<colgroup> <colgroup>
<col style={{width: '10%'}}/> <col style={{ width: "10%" }} />
<col/> <col />
<col style={{width: '20%'}}/> <col style={{ width: "20%" }} />
<col style={{width: '13%'}}/> <col style={{ width: "13%" }} />
<col style={{width: '20%'}}/> <col style={{ width: "20%" }} />
<col style={{width: '13%'}}/> <col style={{ width: "13%" }} />
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
@ -49,66 +61,54 @@ export default function PublishList (){
<td>Login</td> <td>Login</td>
<td>Login Page</td> <td>Login Page</td>
<td> <td>
<Link href={'login'}>LoginPage.tsx</Link> <Link href={"login"}>LoginPage.tsx</Link>
</td> </td>
<td></td> <td></td>
<td className='c'> <td className="c"></td>
<td className="c red">2025/04/28</td>
</td>
<td className='c red'>2025/04/28</td>
</tr> </tr>
<tr> <tr>
<td>Main</td> <td>Main</td>
<td>Main Page</td> <td>Main Page</td>
<td> <td>
<Link href={'main'}>MainPage.tsx</Link> <Link href={"main"}>MainPage.tsx</Link>
</td> </td>
<td className='c'> <td className="c">회원정보 팝업 포함</td>
회원정보 팝업 포함 <td className="c red">
</td>
<td className='c red'>
<ul> <ul>
<li>2025/05/15</li> <li>2025/05/15</li>
<li>* 팝업 img태그 Image 컴포넌트 변환</li> <li>* 팝업 img태그 Image 컴포넌트 변환</li>
</ul> </ul>
</td> </td>
<td className='c red'>2025/04/29</td> <td className="c red">2025/04/29</td>
</tr> </tr>
<tr> <tr>
<td>Alert</td> <td>Alert</td>
<td>Alert 모음</td> <td>Alert 모음</td>
<td> <td>
<Link href={'alert'}>AlertPage.tsx</Link> <Link href={"alert"}>AlertPage.tsx</Link>
</td> </td>
<td className='c'> <td className="c"></td>
<td className="c"></td>
</td> <td className="c red">2025/04/29</td>
<td className='c'>
</td>
<td className='c red'>2025/04/29</td>
</tr> </tr>
<tr> <tr>
<td rowSpan={3}>매물</td> <td rowSpan={3}>매물</td>
<td>매물 목록</td> <td>매물 목록</td>
<td> <td>
<Link href={'sale/salelist'}>SaleListPage.tsx</Link> <Link href={"sale/salelist"}>SaleListPage.tsx</Link>
</td> </td>
<td className='c'> <td className="c"></td>
</td> <td className="c"></td>
<td className='c'> <td className="c red">2025/04/29</td>
</td>
<td className='c red'>2025/04/29</td>
</tr> </tr>
<tr> <tr>
<td>매물 상세</td> <td>매물 상세</td>
<td> <td>
<Link href={'sale/saledetail'}>SaleDetailPage.tsx</Link> <Link href={"sale/saledetail"}>SaleDetailPage.tsx</Link>
</td> </td>
<td className='c'> <td className="c">제출 팝업 포함</td>
제출 팝업 포함 <td className="c red">
</td>
<td className='c red'>
{/* <ul> {/* <ul>
<li>2025/05/15</li> <li>2025/05/15</li>
<li>* 상세 페이지 전체 재수정</li> <li>* 상세 페이지 전체 재수정</li>
@ -123,26 +123,32 @@ export default function PublishList (){
<li>2025/05/27</li> <li>2025/05/27</li>
<li>* 제출 팝업 상단 select 영역 추가</li> <li>* 제출 팝업 상단 select 영역 추가</li>
</ul> */} </ul> */}
<ul> {/* <ul>
<li>2025/05/28</li> <li>2025/05/28</li>
<li>* 제출 팝업 발송자 영역 최상단 위치 조정</li> <li>* 제출 팝업 발송자 영역 최상단 위치 조정</li>
<li>* 제출 팝업 내용 영역 수정</li> <li>* 제출 팝업 내용 영역 수정</li>
<li>* 지붕 구조의 순서 영역 수정</li> <li>* 지붕 구조의 순서 영역 수정</li>
</ul> */}
<ul>
<li>2025/07/18</li>
<li>
* 매물 상세 등록번호 임시저장시 색깔 클래스 추가
</li>
</ul> </ul>
</td> </td>
<td className='c red'>2025/04/29</td> <td className="c red">2025/04/29</td>
</tr> </tr>
<tr> <tr>
<td>매물 신규등록</td> <td>매물 신규등록</td>
<td> <td>
<Link href={'sale/saleedit'}>SaleEditPage.tsx</Link> <Link href={"sale/saleedit"}>SaleEditPage.tsx</Link>
</td> </td>
<td className='c'> <td className="c">
<ul> <ul>
<li>주소 검색 팝업 포함</li> <li>주소 검색 팝업 포함</li>
</ul> </ul>
</td> </td>
<td className='c red'> <td className="c red">
{/* <ul> {/* <ul>
<li>2025/05/15</li> <li>2025/05/15</li>
<li>* 페이지 추가</li> <li>* 페이지 추가</li>
@ -154,48 +160,53 @@ export default function PublishList (){
<li>* 지붕 구조의 순서 영역 수정</li> <li>* 지붕 구조의 순서 영역 수정</li>
</ul> </ul>
</td> </td>
<td className='c red'>2025/05/15</td> <td className="c red">2025/05/15</td>
</tr> </tr>
<tr> <tr>
<td rowSpan={4}>1:1 문의</td> <td rowSpan={4}>1:1 문의</td>
<td>1:1 문의 목록</td> <td>1:1 문의 목록</td>
<td> <td>
<Link href={'inquiry/inquirylist'}>InquiryListPage.tsx</Link> <Link href={"inquiry/inquirylist"}>
InquiryListPage.tsx
</Link>
</td> </td>
<td className='c'> <td className="c"></td>
</td> <td className="c red">
<td className='c red'>
<ul> <ul>
<li>2025/05/13</li> <li>2025/05/13</li>
<li>* 제목 변경 및 문의 유형 추가</li> <li>* 제목 변경 및 문의 유형 추가</li>
</ul> </ul>
</td> </td>
<td className='c red'>2025/04/30</td> <td className="c red">2025/04/30</td>
</tr> </tr>
<tr> <tr>
<td>1:1 문의 작성</td> <td>1:1 문의 작성</td>
<td> <td>
<Link href={'inquiry/inquirycreate'}>InquiryCreatePage.tsx</Link> <Link href={"inquiry/inquirycreate"}>
InquiryCreatePage.tsx
</Link>
</td> </td>
<td className='c'> <td className="c"></td>
</td> <td className="c red">
<td className='c red'>
<ul> <ul>
<li>2025/05/13</li> <li>2025/05/13</li>
<li>* 문의 유형 필드 및 연락처, 이름 필드 추가, 제목 변경</li> <li>
* 문의 유형 필드 및 연락처, 이름 필드 추가, 제목 변경
</li>
</ul> </ul>
</td> </td>
<td className='c red'>2025/04/30</td> <td className="c red">2025/04/30</td>
</tr> </tr>
<tr> <tr>
<td>1:1 문의 상세</td> <td>1:1 문의 상세</td>
<td> <td>
<Link href={'inquiry/inquirydetail'}>InquiryDetailPage.tsx</Link> <Link href={"inquiry/inquirydetail"}>
InquiryDetailPage.tsx
</Link>
</td> </td>
<td className='c'> <td className="c"></td>
</td> <td className="c red">
<td className='c red'>
{/* <ul> {/* <ul>
<li>2025/05/13</li> <li>2025/05/13</li>
<li>* 이름, 연락처, 문의 유형 추가, 제목 변경</li> <li>* 이름, 연락처, 문의 유형 추가, 제목 변경</li>
@ -205,16 +216,17 @@ export default function PublishList (){
<li>* 상세 인적 정보 위치 변경</li> <li>* 상세 인적 정보 위치 변경</li>
</ul> </ul>
</td> </td>
<td className='c red'>2025/04/30</td> <td className="c red">2025/04/30</td>
</tr> </tr>
<tr> <tr>
<td>1:1 문의 상세 (답변)</td> <td>1:1 문의 상세 (답변)</td>
<td> <td>
<Link href={'inquiry/inquiryanswer'}>InquiryAnswerPage.tsx</Link> <Link href={"inquiry/inquiryanswer"}>
InquiryAnswerPage.tsx
</Link>
</td> </td>
<td className='c'> <td className="c"></td>
</td> <td className="c red">
<td className='c red'>
{/* <ul> {/* <ul>
<li>2025/05/13</li> <li>2025/05/13</li>
<li>* 이름, 연락처, 문의 유형 추가, 제목 변경</li> <li>* 이름, 연락처, 문의 유형 추가, 제목 변경</li>
@ -224,30 +236,28 @@ export default function PublishList (){
<li>* 상세 인적 정보 위치 변경</li> <li>* 상세 인적 정보 위치 변경</li>
</ul> </ul>
</td> </td>
<td className='c red'>2025/04/30</td> <td className="c red">2025/04/30</td>
</tr> </tr>
<tr> <tr>
<td>비밀번호 변경</td> <td>비밀번호 변경</td>
<td>비밀번호 변경 페이지</td> <td>비밀번호 변경 페이지</td>
<td> <td>
<Link href={'pwchange'}>PwChangePage.tsx</Link> <Link href={"pwchange"}>PwChangePage.tsx</Link>
</td> </td>
<td className='c'> <td className="c"></td>
</td> <td className="c"></td>
<td className='c'> <td className="c red">2025/04/30</td>
</td>
<td className='c red'>2025/04/30</td>
</tr> </tr>
<tr> <tr>
<td>지붕재 적합성</td> <td>지붕재 적합성</td>
<td>지붕재 적합성 페이지</td> <td>지붕재 적합성 페이지</td>
<td> <td>
<Link href={'roofcompliance'}>RoofCompliancePage.tsx</Link> <Link href={"roofcompliance"}>
RoofCompliancePage.tsx
</Link>
</td> </td>
<td className='c'> <td className="c">지붕재 적합성 상세 팝업 포함</td>
지붕재 적합성 상세 팝업 포함 <td className="c red">
</td>
<td className='c red'>
{/* <ul> {/* <ul>
<li>2025/05/13</li> <li>2025/05/13</li>
<li>* Search Input 지우기 버튼 추가가</li> <li>* Search Input 지우기 버튼 추가가</li>
@ -257,39 +267,36 @@ export default function PublishList (){
<li>* 팝업 img태그 Image 컴포넌트 변환</li> <li>* 팝업 img태그 Image 컴포넌트 변환</li>
<li>* 최하단 버튼 모음 float버튼 변환</li> <li>* 최하단 버튼 모음 float버튼 변환</li>
</ul> */} </ul> */}
<ul className='mt5'> <ul className="mt5">
<li>2025/06/05</li> <li>2025/06/05</li>
<li>* 팝업 버튼 float 변경</li> <li>* 팝업 버튼 float 변경</li>
</ul> </ul>
</td> </td>
<td className='c red'>2025/05/08</td> <td className="c red">2025/05/08</td>
</tr> </tr>
<tr> <tr>
<td rowSpan={2}>PDF 뷰어</td> <td rowSpan={2}>PDF 뷰어</td>
<td>조사매물 pdf</td> <td>조사매물 pdf</td>
<td> <td>
<Link href={'pdfview'}>PDFView.tsx</Link> <Link href={"pdfview"}>PDFView.tsx</Link>
</td> </td>
<td className='c'> <td className="c"></td>
</td> <td className="c red"></td>
<td className='c red'> <td className="c red">2025/05/19</td>
</td>
<td className='c red'>2025/05/19</td>
</tr> </tr>
<tr> <tr>
<td>지붕재 적합성 pdf</td> <td>지붕재 적합성 pdf</td>
<td> <td>
<Link href={'pdftable'}>PDFTablePage.tsx</Link> <Link href={"pdftable"}>PDFTablePage.tsx</Link>
</td> </td>
<td className='c'> <td className="c"></td>
</td> <td className="c red">
<td className='c red'> <ul className="mt5">
<ul className='mt5'>
<li>2025/06/02</li> <li>2025/06/02</li>
<li>* 하단 날짜 추가 및 min max width 수정</li> <li>* 하단 날짜 추가 및 min max width 수정</li>
</ul> </ul>
</td> </td>
<td className='c red'>2025/05/28</td> <td className="c red">2025/05/28</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -298,5 +305,5 @@ export default function PublishList (){
</div> </div>
</div> </div>
</div> </div>
) );
} }

18
src/components/sale/saledetail/SaleDetailData.tsx
View File

@ -1,15 +1,15 @@
export default function SaleDetailData(){ export default function SaleDetailData() {
return( return (
<div className="sale-data-table-wrap"> <div className="sale-data-table-wrap">
<table className="sale-data-table"> <table className="sale-data-table">
<colgroup> <colgroup>
<col style={{width: '80px'}}/> <col style={{ width: "80px" }} />
<col /> <col />
</colgroup> </colgroup>
<tbody> <tbody>
<tr> <tr>
<th>登録番号</th> <th>登録番号</th>
<td>0000000020</td> <td className="sale-data-num">0000000020</td>
</tr> </tr>
<tr> <tr>
<th>登録日</th> <th>登録日</th>
@ -26,11 +26,13 @@ export default function SaleDetailData(){
<tr> <tr>
<th>ダウンロード</th> <th>ダウンロード</th>
<td> <td>
<button className="data-down">HWJ現地調査票確認<i className="down-icon"></i></button> <button className="data-down">
HWJ現地調査票確認<i className="down-icon"></i>
</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
) );
} }

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

@ -1,38 +1,38 @@
@use "../abstracts" as *; @use "../abstracts" as *;
// input form 공통 // input form 공통
.data-input-form-bx{ .data-input-form-bx {
margin-bottom: 18px; margin-bottom: 18px;
&:last-child{ &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.data-input-form-tit{ .data-input-form-tit {
@include defaultFont($font-s-13, $font-w-500, $font-c); @include defaultFont($font-s-13, $font-w-500, $font-c);
margin-bottom: 10px; margin-bottom: 10px;
.import{ .import {
color: #F00; color: #f00;
} }
span{ span {
display: block; display: block;
@include defaultFont($font-s-13, $font-w-400, #A8B6C7); @include defaultFont($font-s-13, $font-w-400, #a8b6c7);
} }
} }
.data-input-guide{ .data-input-guide {
margin-top: 8px; margin-top: 8px;
@include defaultFont($font-s-13, $font-w-400, #A8B6C7); @include defaultFont($font-s-13, $font-w-400, #a8b6c7);
} }
} }
.btn-flex-wrap{ .btn-flex-wrap {
@include flex(5px); @include flex(5px);
margin-top: 24px; margin-top: 24px;
.btn-bx{ .btn-bx {
flex: 1; flex: 1;
} }
&.com{ &.com {
.btn-bx{ .btn-bx {
flex: 1 1 auto; flex: 1 1 auto;
button{ button {
font-size: 12px; font-size: 12px;
} }
} }
@ -40,13 +40,13 @@
} }
// 매물 common // 매물 common
.top-btn{ .top-btn {
position: fixed; position: fixed;
bottom: 96px; bottom: 96px;
right: 15px; right: 15px;
width: 38px; width: 38px;
height: 38px; height: 38px;
background-color: rgba(0, 0, 0, 0.50); background-color: rgba(0, 0, 0, 0.5);
background-image: url(/assets/images/sub/top_btn_icon.svg); background-image: url(/assets/images/sub/top_btn_icon.svg);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -55,277 +55,282 @@
z-index: 90000; z-index: 90000;
} }
.sale-contents{ .sale-contents {
width: 100%; width: 100%;
background-color: #F5F5F5; background-color: #f5f5f5;
.sale-frame{ .sale-frame {
padding: 0 20px; padding: 0 20px;
border-top: 1px solid #ECECEC; border-top: 1px solid #ececec;
border-bottom: 1px solid #ECECEC; border-bottom: 1px solid #ececec;
margin-bottom: 10px; margin-bottom: 10px;
padding-bottom: 24px; padding-bottom: 24px;
padding-top: 24px; padding-top: 24px;
background-color: $white-fff; background-color: $white-fff;
&:first-child{ &:first-child {
padding-top: 0; padding-top: 0;
border-top: none; border-top: none;
} }
&:last-child{ &:last-child {
padding-bottom: 0; padding-bottom: 0;
border-bottom: none; border-bottom: none;
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
.sale-form-btn-wrap{ .sale-form-btn-wrap {
padding: 20px 20px 0 ; padding: 20px 20px 0;
background-color: #fff; background-color: #fff;
.btn-flex-wrap{ .btn-flex-wrap {
margin-top: 0; margin-top: 0;
} }
} }
// 매물 목록 // 매물 목록
.sale-form-bx{ .sale-form-bx {
margin-bottom: 14px; margin-bottom: 14px;
&:last-child{ &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.sale-list-wrap{ .sale-list-wrap {
.sale-list-item{ .sale-list-item {
padding-top: 14px; padding-top: 14px;
padding-bottom: 14px; padding-bottom: 14px;
border-bottom: 1px solid #ECECEC; border-bottom: 1px solid #ececec;
cursor: pointer; cursor: pointer;
&:first-child{ &:first-child {
padding-top: 0; padding-top: 0;
} }
&:last-child{ &:last-child {
border-bottom: none; border-bottom: none;
padding-bottom: 0; padding-bottom: 0;
} }
} }
} }
.sale-item-bx{ .sale-item-bx {
.sale-item-date-bx{ .sale-item-date-bx {
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
margin-bottom: 9px; margin-bottom: 9px;
.sale-item-num{ .sale-item-num {
position: relative; position: relative;
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
padding-right: 6px; padding-right: 6px;
&::after{ &::after {
content: ''; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0; right: 0;
transform: translateY(-50%); transform: translateY(-50%);
width: 1px; width: 1px;
height: 10px; height: 10px;
background-color: #A2ABB8; background-color: #a2abb8;
} }
} }
.sale-item-date{ .sale-item-date {
@include defaultFont($font-s-13, $font-w-400, #A2ABB8); @include defaultFont($font-s-13, $font-w-400, #a2abb8);
padding-left: 6px; padding-left: 6px;
} }
} }
.sale-item-tit{ .sale-item-tit {
@include defaultFont($font-s-15, $font-w-500, $font-c); @include defaultFont($font-s-15, $font-w-500, $font-c);
@include ellipsis(1); @include ellipsis(1);
margin-bottom: 9px; margin-bottom: 9px;
} }
.sale-item-customer{ .sale-item-customer {
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
margin-bottom: 9px; margin-bottom: 9px;
} }
.sale-item-update-bx{ .sale-item-update-bx {
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
.sale-item-name{ .sale-item-name {
position: relative; position: relative;
@include defaultFont($font-s-13, $font-w-400, #A2ABB8); @include defaultFont($font-s-13, $font-w-400, #a2abb8);
padding-right: 6px; padding-right: 6px;
&::after{ &::after {
content: ''; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0; right: 0;
transform: translateY(-50%); transform: translateY(-50%);
width: 1px; width: 1px;
height: 10px; height: 10px;
background-color: #A2ABB8; background-color: #a2abb8;
} }
} }
.sale-item-update{ .sale-item-update {
@include defaultFont($font-s-13, $font-w-400, #A2ABB8); @include defaultFont($font-s-13, $font-w-400, #a2abb8);
padding-left: 6px; padding-left: 6px;
} }
} }
&.nodata{ &.nodata {
.sale-item-nodata{ .sale-item-nodata {
padding: 5px 0; padding: 5px 0;
text-align: center; text-align: center;
@include defaultFont($font-s-15, $font-w-500, $font-c); @include defaultFont($font-s-15, $font-w-500, $font-c);
} }
} }
} }
.sale-edit-btn{ .sale-edit-btn {
margin-top: 24px; margin-top: 24px;
} }
// 매물 상세 // 매물 상세
.sale-data-table-wrap{ .sale-data-table-wrap {
padding: 24px; padding: 24px;
background-color: #fff; background-color: #fff;
border-top: 1px solid #ECECEC; border-top: 1px solid #ececec;
.sale-data-num {
color: #1259cb;
}
} }
.sale-data-table{ .sale-data-table {
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
tbody{ tbody {
tr{ tr {
th{ th {
@include defaultFont($font-s-13, $font-w-500, $font-c); @include defaultFont($font-s-13, $font-w-500, $font-c);
vertical-align: top; vertical-align: top;
padding: 5px 0; padding: 5px 0;
} }
td{ td {
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
padding: 5px 0 8px 14px; padding: 5px 0 8px 14px;
.data-down{ .data-down {
@include flex(8px); @include flex(8px);
align-items: center; align-items: center;
color: #1259CB; color: #1259cb;
i{ i {
display: block; display: block;
width: 8px; width: 8px;
height: 12px; height: 12px;
background: url(/assets/images/sub/down_icon.svg)no-repeat center; background: url(/assets/images/sub/down_icon.svg) no-repeat center;
background-size: cover; background-size: cover;
} }
} }
} }
&:first-child{ &:first-child {
th,td{ th,
td {
padding-top: 0; padding-top: 0;
} }
} }
&:last-child{ &:last-child {
th,td{ th,
td {
padding-bottom: 0; padding-bottom: 0;
} }
} }
} }
} }
} }
.sale-detail-toggle-wrap{ .sale-detail-toggle-wrap {
border-top: 1px solid #ECECEC; border-top: 1px solid #ececec;
} }
.sale-detail-toggle-bx{ .sale-detail-toggle-bx {
border-bottom: 1px solid #ECECEC; border-bottom: 1px solid #ececec;
} }
.sale-detail-toggle-head{ .sale-detail-toggle-head {
@include flex(5px); @include flex(5px);
padding: 14px 18px; padding: 14px 18px;
background-color: $white-fff; background-color: $white-fff;
cursor: pointer; cursor: pointer;
.sale-detail-toggle-name{ .sale-detail-toggle-name {
@include defaultFont($font-s-13, $font-w-500, $font-c); @include defaultFont($font-s-13, $font-w-500, $font-c);
} }
.sale-detail-toggle-btn-wrap{ .sale-detail-toggle-btn-wrap {
margin-left: auto; margin-left: auto;
.sale-detail-toggle-btn{ .sale-detail-toggle-btn {
display: block; display: block;
width: 22px; width: 22px;
height: 22px; height: 22px;
background: url(/assets/images/sub/sale_toggle_btn.svg)no-repeat center; background: url(/assets/images/sub/sale_toggle_btn.svg) no-repeat center;
background-size: cover background-size: cover;
} }
} }
} }
.sale-detail-toggle-cont{ .sale-detail-toggle-cont {
display: none; display: none;
.sale-frame{ .sale-frame {
padding: 24px 20px; padding: 24px 20px;
&:first-child{ &:first-child {
padding-top: 24px; padding-top: 24px;
} }
&:last-child{ &:last-child {
padding-bottom: 24px; padding-bottom: 24px;
} }
} }
} }
.sale-detail-toggle-bx{ .sale-detail-toggle-bx {
&.act{ &.act {
.sale-detail-toggle-head{ .sale-detail-toggle-head {
background-color: #5F738E; background-color: #5f738e;
.sale-detail-toggle-name{ .sale-detail-toggle-name {
color: #fff color: #fff;
} }
.sale-detail-toggle-btn-wrap{ .sale-detail-toggle-btn-wrap {
.sale-detail-toggle-btn{ .sale-detail-toggle-btn {
background: url(/assets/images/sub/sale_toggle_btn_white.svg)no-repeat center; background: url(/assets/images/sub/sale_toggle_btn_white.svg)
no-repeat center;
} }
} }
} }
.sale-detail-toggle-cont{ .sale-detail-toggle-cont {
display: block; display: block;
} }
} }
} }
// 매물 기본정보 // 매물 기본정보
.form-flex{ .form-flex {
@include flex(5px); @include flex(5px);
.form-bx{ .form-bx {
flex: 1; flex: 1;
} }
} }
.form-btn{ .form-btn {
margin-top: 12px; margin-top: 12px;
} }
// 매물 전기 지붕정보 // 매물 전기 지붕정보
.sale-roof-title{ .sale-roof-title {
@include defaultFont($font-s-15, $font-w-500, $font-c); @include defaultFont($font-s-15, $font-w-500, $font-c);
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 20px; margin-bottom: 20px;
border-bottom: 1px solid #2E3A59; border-bottom: 1px solid #2e3a59;
} }
.data-check-wrap{ .data-check-wrap {
@include flex(10px); @include flex(10px);
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 12px; margin-bottom: 12px;
.radio-form-box, .radio-form-box,
.check-form-box{ .check-form-box {
width: calc(50% - 5px); width: calc(50% - 5px);
} }
&.mb0{ &.mb0 {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.data-input{ .data-input {
&.flex{ &.flex {
@include flex(8px); @include flex(8px);
align-items: center; align-items: center;
span{ span {
flex: none; flex: none;
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
} }
} }
} }
// 1:1 문의 common // 1:1 문의 common
.inquiry-frame{ .inquiry-frame {
padding: 0 20px; padding: 0 20px;
} }
.badge{ .badge {
min-width: 60px; min-width: 60px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
@ -334,92 +339,91 @@
text-align: center; text-align: center;
font-size: $font-s-12; font-size: $font-s-12;
font-weight: $font-w-500; font-weight: $font-w-500;
&.blue{ &.blue {
color: #5497E9; color: #5497e9;
background-color: #ECF5FF; background-color: #ecf5ff;
} }
&.orange{ &.orange {
color: #F86A56; color: #f86a56;
background-color: #FFEFED; background-color: #ffefed;
} }
&.block{ &.block {
width: 100%; width: 100%;
} }
} }
// 1:1 문의 목록 // 1:1 문의 목록
.inquiry-table-filter{ .inquiry-table-filter {
margin-bottom: 24px; margin-bottom: 24px;
.filter-check{ .filter-check {
margin-bottom: 12px; margin-bottom: 12px;
} }
} }
.inquiry-list-tit{ .inquiry-list-tit {
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #2E3A59; border-bottom: 1px solid #2e3a59;
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
span{ span {
font-weight: $font-w-500; font-weight: $font-w-500;
} }
} }
.inquiry-list{ .inquiry-list {
.inquiry-item{ .inquiry-item {
padding: 10px 0; padding: 10px 0;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #ECECEC; border-bottom: 1px solid #ececec;
&:last-child{ &:last-child {
border-bottom: none; border-bottom: none;
padding-bottom: 0; padding-bottom: 0;
} }
.inquiry-item-bx{ .inquiry-item-bx {
position: relative; position: relative;
padding-right: 70px; padding-right: 70px;
.inquiry-item-category{ .inquiry-item-category {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 5px; margin-bottom: 5px;
span{ span {
position: relative; position: relative;
display: block; display: block;
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
padding: 0 6px; padding: 0 6px;
&:first-child{ &:first-child {
padding-left: 0; padding-left: 0;
} }
&:last-child{ &:last-child {
padding-right: 0; padding-right: 0;
&::before{ &::before {
display: none; display: none;
} }
} }
&::before{ &::before {
content: ''; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0; right: 0;
transform: translateY(-50%); transform: translateY(-50%);
width: 1px; width: 1px;
height: 10px; height: 10px;
background-color: #A2ABB8; background-color: #a2abb8;
} }
} }
} }
.inquiry-item-tit{ .inquiry-item-tit {
@include defaultFont($font-s-15, $font-w-500, $font-c); @include defaultFont($font-s-15, $font-w-500, $font-c);
@include ellipsis(1); @include ellipsis(1);
margin-bottom: 5px; margin-bottom: 5px;
} }
.inquiry-item-date{ .inquiry-item-date {
@include defaultFont($font-s-13, $font-w-400, #A2ABB8); @include defaultFont($font-s-13, $font-w-400, #a2abb8);
} }
.inquiry-badge{ .inquiry-badge {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
} }
&.nodata{ &.nodata {
padding-right: 0; padding-right: 0;
.inquiry-item-nodata{ .inquiry-item-nodata {
padding: 10px 0; padding: 10px 0;
text-align: center; text-align: center;
@include defaultFont($font-s-15, $font-w-500, $font-c); @include defaultFont($font-s-15, $font-w-500, $font-c);
@ -430,42 +434,43 @@
} }
// 1:1문의 작성 // 1:1문의 작성
.inquiry-file-wrap{ .inquiry-file-wrap {
margin-top: 20px; margin-top: 20px;
.file-list-wrap{ .file-list-wrap {
margin-top: 14px; margin-top: 14px;
} }
} }
.file-list-tit{ .file-list-tit {
@include defaultFont($font-s-13, $font-w-500, $font-c); @include defaultFont($font-s-13, $font-w-500, $font-c);
} }
.file-list{ .file-list {
margin-top: 14px; margin-top: 14px;
.file-item{ .file-item {
border-top: 1px solid #EDEDED; border-top: 1px solid #ededed;
cursor: default; cursor: default;
.file-item-bx{ .file-item-bx {
width: 100%; width: 100%;
padding: 14px 0; padding: 14px 0;
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
.file-item-name{ .file-item-name {
@include ellipsis(1); @include ellipsis(1);
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
padding-right: 10px; padding-right: 10px;
} }
.file-del{ .file-del {
flex: none; flex: none;
display: block; display: block;
margin-left: auto; margin-left: auto;
width: 16px; width: 16px;
height: 16px; height: 16px;
background: url(/assets/images/common/id_delete_icon.svg)no-repeat center; background: url(/assets/images/common/id_delete_icon.svg) no-repeat
center;
background-size: cover; background-size: cover;
} }
} }
&:last-child{ &:last-child {
.file-item-bx{ .file-item-bx {
padding-bottom: 0; padding-bottom: 0;
} }
} }
@ -473,186 +478,186 @@
} }
// 1:1 문의 상세 // 1:1 문의 상세
.inquiry-detail-data-table{ .inquiry-detail-data-table {
padding: 20px 0; padding: 20px 0;
border-bottom: 1px solid #ECECEC; border-bottom: 1px solid #ececec;
} }
.inquiry-detail-data{ .inquiry-detail-data {
padding: 20px 0; padding: 20px 0;
border-bottom: 1px solid #2E3A59; border-bottom: 1px solid #2e3a59;
margin-bottom: 24px; margin-bottom: 24px;
.inquiry-detail-category{ .inquiry-detail-category {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 3px; margin-bottom: 3px;
span{ span {
position: relative; position: relative;
display: block; display: block;
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
padding: 0 6px; padding: 0 6px;
&:first-child{ &:first-child {
padding-left: 0; padding-left: 0;
} }
&:last-child{ &:last-child {
padding-right: 0; padding-right: 0;
&::before{ &::before {
display: none; display: none;
} }
} }
&::before{ &::before {
content: ''; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0; right: 0;
transform: translateY(-50%); transform: translateY(-50%);
width: 1px; width: 1px;
height: 10px; height: 10px;
background-color: #A2ABB8; background-color: #a2abb8;
} }
} }
} }
.inquiry-detail-tit{ .inquiry-detail-tit {
@include defaultFont($font-s-15, $font-w-500, $font-c); @include defaultFont($font-s-15, $font-w-500, $font-c);
margin-bottom: 10px; margin-bottom: 10px;
} }
.inquiry-detail-txt{ .inquiry-detail-txt {
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
white-space: pre-line; white-space: pre-line;
} }
} }
// 1:1 문의 답변 // 1:1 문의 답변
.inquiry-answer-wrap{ .inquiry-answer-wrap {
margin-top: 24px; margin-top: 24px;
} }
.inquiry-answer-header{ .inquiry-answer-header {
padding: 20px 0; padding: 20px 0;
border-top: 1px solid #F86A56; border-top: 1px solid #f86a56;
border-bottom: 1px solid #ECECEC; border-bottom: 1px solid #ececec;
.inquiry-answer-tit{ .inquiry-answer-tit {
@include defaultFont($font-s-14, $font-w-500, #F86A56); @include defaultFont($font-s-14, $font-w-500, #f86a56);
margin-bottom: 5px; margin-bottom: 5px;
} }
.inquiry-answer-date{ .inquiry-answer-date {
@include defaultFont($font-s-13, $font-w-400, #F86A56); @include defaultFont($font-s-13, $font-w-400, #f86a56);
} }
} }
.inquiry-answer-tit{ .inquiry-answer-tit {
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
margin-bottom: 3px; margin-bottom: 3px;
} }
// 비밀번호 변경 // 비밀번호 변경
.border-frame{ .border-frame {
padding: 20px; padding: 20px;
border-top: 1px solid #ECECEC; border-top: 1px solid #ececec;
border-bottom: 1px solid #ECECEC; border-bottom: 1px solid #ececec;
background-color: #fff; background-color: #fff;
margin-bottom: 10px; margin-bottom: 10px;
&:last-child{ &:last-child {
border-bottom: none; border-bottom: none;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 0; margin-bottom: 0;
} }
} }
.pw-guide{ .pw-guide {
.pw-guide-tit{ .pw-guide-tit {
@include defaultFont($font-s-16, $font-w-500, #1259CB); @include defaultFont($font-s-16, $font-w-500, #1259cb);
} }
.pw-guide-txt{ .pw-guide-txt {
@include defaultFont($font-s-13, $font-w-400, #417DDC); @include defaultFont($font-s-13, $font-w-400, #417ddc);
} }
} }
// 지붕재 적합성 // 지붕재 적합성
.compliance-icon{ .compliance-icon {
display: flex; display: flex;
} }
.compliance-check-wrap{ .compliance-check-wrap {
padding-top: 10px; padding-top: 10px;
} }
.compliance-check-bx{ .compliance-check-bx {
position: relative; position: relative;
padding: 14px 18px; padding: 14px 18px;
border: 1px solid #EFEFEF; border: 1px solid #efefef;
border-radius: 4px; border-radius: 4px;
margin-bottom: 10px; margin-bottom: 10px;
&:last-child{ &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&.act{ &.act {
.bx-btn{ .bx-btn {
transform: rotate(0) !important; transform: rotate(0) !important;
} }
.reference-list{ .reference-list {
display: block display: block;
} }
} }
} }
.check-name-wrap{ .check-name-wrap {
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
.check-name{ .check-name {
@include defaultFont($font-s-13, $font-w-500, $font-c); @include defaultFont($font-s-13, $font-w-500, $font-c);
} }
.check-name-btn{ .check-name-btn {
padding-left: 5px; padding-left: 5px;
margin-left: auto; margin-left: auto;
.bx-btn{ .bx-btn {
display: block; display: block;
width: 22px; width: 22px;
height: 22px; height: 22px;
background: url(/assets/images/sub/compliance_bx_icon.svg)no-repeat center; background: url(/assets/images/sub/compliance_bx_icon.svg) no-repeat
center;
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
} }
.reference-list{ .reference-list {
display: none; display: none;
margin-top: 10px; margin-top: 10px;
padding-top: 14px; padding-top: 14px;
border-top: 1px solid #ECECEC; border-top: 1px solid #ececec;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
.reference-item{ .reference-item {
margin-bottom: 8px; margin-bottom: 8px;
padding-left: 14px; padding-left: 14px;
.reference-item-bx{ .reference-item-bx {
@include flex(10px); @include flex(10px);
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
align-items: center; align-items: center;
} }
&:last-child{ &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
&.check{ &.check {
.reference-item{ .reference-item {
margin-bottom: 14px; margin-bottom: 14px;
} }
} }
} }
.compliace-nosearch{ .compliace-nosearch {
padding: 30px 0; padding: 30px 0;
span{ span {
display: block; display: block;
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
text-align: center; text-align: center;
} }
} }
.check-item-wrap{ .check-item-wrap {
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
} }
.compliance-icon-wrap{ .compliance-icon-wrap {
margin-left: auto; margin-left: auto;
min-width: 44px; min-width: 44px;
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
} }
.float-btn-wrap{ .float-btn-wrap {
position: sticky; position: sticky;
bottom: 10px; bottom: 10px;
left: 0; left: 0;
@ -660,14 +665,14 @@
background-color: #fff; background-color: #fff;
z-index: 9; z-index: 9;
} }
@media screen and (max-width: 360px){ @media screen and (max-width: 360px) {
.btn-flex-wrap{ .btn-flex-wrap {
flex-direction: column; flex-direction: column;
} }
.data-check-wrap{ .data-check-wrap {
.radio-form-box, .radio-form-box,
.check-form-box{ .check-form-box {
width: 100%; width: 100%;
} }
} }
} }