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

feat: change the order of fields at inquiry regist, detail page

Browse Source
This commit is contained in:
Dayoung 2025-05-29 11:35:19 +09:00
parent 02ce7217a7
commit f0b23c35af
9 changed files with 381 additions and 403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.env.development
View File

@ -2,15 +2,14 @@ NEXT_PUBLIC_RUN_MODE=development
# 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경 # 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경
# 다시 로컬에서 개발할때는 localhost로 변경 # 다시 로컬에서 개발할때는 localhost로 변경
#route handler #route handler
NEXT_PUBLIC_API_URL=http://172.30.1.23:3000 NEXT_PUBLIC_API_URL=http://localhost:3000
#qsp 로그인 api #qsp 로그인 api
NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120 NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
# NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com # NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com
#1:1문의 api #1:1문의 api
NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110 NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com
NEXT_PUBLIC_INQUIRY_FILE_DOWNLOAD_API_URL=https://jp-dev.qsalesplatform.com
#QPARTNER 로그인 api #QPARTNER 로그인 api

5
.env.localhost
View File

@ -2,15 +2,14 @@ NEXT_PUBLIC_RUN_MODE=local
# 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경 # 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경
# 다시 로컬에서 개발할때는 localhost로 변경 # 다시 로컬에서 개발할때는 localhost로 변경
#route handler #route handler
NEXT_PUBLIC_API_URL=http://172.30.1.23:3000 NEXT_PUBLIC_API_URL=http://localhost:3000
#qsp 로그인 api #qsp 로그인 api
NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120 NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
# NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com # NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com
#1:1문의 api #1:1문의 api
NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110 NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com
NEXT_PUBLIC_INQUIRY_FILE_DOWNLOAD_API_URL=https://jp-dev.qsalesplatform.com
#QPARTNER 로그인 api #QPARTNER 로그인 api
DB_HOST=202.218.61.226 DB_HOST=202.218.61.226

2
src/app/api/qna/file/route.ts
View File

@ -10,7 +10,7 @@ export async function GET(request: Request) {
return NextResponse.json({ error: 'encodeFileNo is required' }, { status: 400 }) return NextResponse.json({ error: 'encodeFileNo is required' }, { status: 400 })
} }
try { try {
const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_FILE_DOWNLOAD_API_URL}/api/file/downloadFile2`, { const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/file/downloadFile2`, {
responseType: 'arraybuffer', responseType: 'arraybuffer',
params: { params: {
encodeFileNo, encodeFileNo,

23
src/components/inquiry/Detail.tsx
View File

@ -3,6 +3,7 @@
import Answer from './Answer' import Answer from './Answer'
import { useInquiry } from '@/hooks/useInquiry' import { useInquiry } from '@/hooks/useInquiry'
import { useParams, useRouter } from 'next/navigation' import { useParams, useRouter } from 'next/navigation'
import { useSessionStore } from '@/store/session'
export default function Detail() { export default function Detail() {
const params = useParams() const params = useParams()
@ -12,6 +13,8 @@ export default function Detail() {
const { commonCodeList } = useInquiry() const { commonCodeList } = useInquiry()
const router = useRouter() const router = useRouter()
const { session } = useSessionStore()
return ( return (
<> <>
<div className="inquiry-frame"> <div className="inquiry-frame">
@ -30,24 +33,30 @@ export default function Detail() {
<tbody> <tbody>
<tr> <tr>
<th>登録日</th> <th>登録日</th>
<td>{inquiryDetail?.regDt}</td> <td>{inquiryDetail?.regDt.split(' ')[0]}</td>
</tr> </tr>
<tr> <tr>
<th>作者</th> <th>顧客名</th>
<td>{inquiryDetail?.regUserNm}</td> <td>
{session?.userNm} {session?.builderNo ? `[${session?.builderNo}]` : ''}
</td>
</tr> </tr>
<tr> <tr>
<th>販売店</th> <th>販売店</th>
<td>{inquiryDetail?.storeNm}</td> <td>{inquiryDetail?.storeNm}</td>
</tr> </tr>
<tr>
<th>施工店</th>
<td>{inquiryDetail?.compCd}</td>
</tr>
<tr> <tr>
<th>E-mail</th> <th>E-mail</th>
<td>{inquiryDetail?.regEmail}</td> <td>{inquiryDetail?.regEmail}</td>
</tr> </tr>
<tr>
<th>名前</th>
<td>{inquiryDetail?.regUserNm}</td>
</tr>
<tr>
<th>お問い合わせ</th>
<td>{inquiryDetail?.regUserTelNo}</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>

91
src/components/inquiry/ListTable.tsx
View File

@ -1,91 +0,0 @@
'use client'
export default function ListTable() {
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">
<span>屋根</span>
<span>適合性</span>
<span>屋根材</span>
</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">
<span>屋根</span>
<span>適合性</span>
<span>屋根材</span>
</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">
<span>屋根</span>
<span>適合性</span>
<span>屋根材</span>
</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">
<span>屋根</span>
<span>適合性</span>
<span>屋根材</span>
</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 nodata">
<div className="inquiry-item-nodata">조회된 데이터가 없습니다</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>
</>
)
}

138
src/components/inquiry/RegistForm.tsx
View File

@ -36,7 +36,13 @@ export default function RegistForm() {
useEffect(() => { useEffect(() => {
if (session?.isLoggedIn) { if (session?.isLoggedIn) {
setInquiryRequest({ ...inquiryRequest, regId: session?.userId ?? '', regUserNm: session?.userNm ?? '', storeId: session?.storeId ?? '' }) setInquiryRequest({
...inquiryRequest,
regId: session?.userId ?? '',
regUserNm: session?.userNm ?? '',
storeId: session?.storeId ?? '',
qstMail: session?.email ?? '',
})
} }
}, [session]) }, [session])
@ -74,6 +80,17 @@ export default function RegistForm() {
focusOnRequiredField('qstMail') focusOnRequiredField('qstMail')
return return
} }
if (inquiryRequest.title.length > 100) {
alert('お問い合わせタイトルは100文字以内で入力してください。')
focusOnRequiredField('title')
return
}
if (inquiryRequest.contents.length > 2000) {
alert('お問い合わせ内容は2,000文字以内で入力してください。')
focusOnRequiredField('contents')
return
}
const formData = new FormData() const formData = new FormData()
attachedFiles.forEach((file) => { attachedFiles.forEach((file) => {
formData.append('files', file) formData.append('files', file)
@ -92,6 +109,21 @@ export default function RegistForm() {
) )
} }
const handlePhoneNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value.replace(/[^\d]/g, '')
let formattedNumber = ''
if (value.length <= 3) {
formattedNumber = value
} else if (value.length <= 7) {
formattedNumber = `${value.slice(0, 3)}-${value.slice(3)}`
} else {
formattedNumber = `${value.slice(0, 3)}-${value.slice(3, 7)}-${value.slice(7, 11)}`
}
setInquiryRequest({ ...inquiryRequest, regUserTelNo: formattedNumber })
}
return ( return (
<> <>
<div className="inquiry-frame"> <div className="inquiry-frame">
@ -120,46 +152,50 @@ export default function RegistForm() {
))} ))}
</select> </select>
</div> </div>
<div className="data-input mt5"> {commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd).length > 0 && (
<select <div className="data-input mt5">
className="select-form" <select
name="qnaClsMidCd" className="select-form"
id="qnaClsMidCd" name="qnaClsMidCd"
value={inquiryRequest.qnaClsMidCd} id="qnaClsMidCd"
onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsMidCd: e.target.value })} value={inquiryRequest.qnaClsMidCd}
> onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsMidCd: e.target.value })}
<option value="" hidden> >
選択してください <option value="" hidden>
</option> 選択してください
{commonCodeList </option>
.filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd) {commonCodeList
.map((code) => ( .filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd)
<option key={code.code} value={code.code}> .map((code) => (
{code.name} <option key={code.code} value={code.code}>
</option> {code.name}
))} </option>
</select> ))}
</div> </select>
<div className="data-input mt5"> </div>
<select )}
className="select-form" {commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd).length > 0 && (
name="qnaClsSmlCd" <div className="data-input mt5">
id="qnaClsSmlCd" <select
value={inquiryRequest.qnaClsSmlCd ?? ''} className="select-form"
onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsSmlCd: e.target.value })} name="qnaClsSmlCd"
> id="qnaClsSmlCd"
<option value="" hidden> value={inquiryRequest.qnaClsSmlCd ?? ''}
選択してください onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsSmlCd: e.target.value })}
</option> >
{commonCodeList <option value="" hidden>
.filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd) 選択してください
.map((code) => ( </option>
<option key={code.code} value={code.code}> {commonCodeList
{code.name} .filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd)
</option> .map((code) => (
))} <option key={code.code} value={code.code}>
</select> {code.name}
</div> </option>
))}
</select>
</div>
)}
</div> </div>
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit"> <div className="data-input-form-tit">
@ -181,10 +217,13 @@ export default function RegistForm() {
<div className="data-input"> <div className="data-input">
<input <input
className="input-frame" className="input-frame"
type="text" type="tel"
inputMode="tel"
placeholder="電話番号を書き留めてください" placeholder="電話番号を書き留めてください"
onChange={(e) => setInquiryRequest({ ...inquiryRequest, regUserTelNo: e.target.value })} onChange={handlePhoneNumberChange}
value={inquiryRequest.regUserTelNo ?? ''}
id="regUserTelNo" id="regUserTelNo"
maxLength={13}
/> />
</div> </div>
</div> </div>
@ -197,6 +236,7 @@ export default function RegistForm() {
className="input-frame" className="input-frame"
type="text" type="text"
placeholder="E-mailを書いてください" placeholder="E-mailを書いてください"
value={inquiryRequest.qstMail}
onChange={(e) => setInquiryRequest({ ...inquiryRequest, qstMail: e.target.value })} onChange={(e) => setInquiryRequest({ ...inquiryRequest, qstMail: e.target.value })}
id="qstMail" id="qstMail"
/> />
@ -212,21 +252,24 @@ export default function RegistForm() {
type="text" type="text"
placeholder="お問い合わせタイトルを記入してください" placeholder="お問い合わせタイトルを記入してください"
onChange={(e) => setInquiryRequest({ ...inquiryRequest, title: e.target.value })} onChange={(e) => setInquiryRequest({ ...inquiryRequest, title: e.target.value })}
maxLength={100}
id="title" id="title"
/> />
</div> </div>
</div> </div>
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit"> <div className="data-input-form-tit">
お問い合わせタイプ <i className="import">*</i> お問い合わせ内容 <i className="import">*</i>
</div> </div>
<div className="data-input"> <div className="data-input">
<textarea <textarea
className="textarea-form" className="textarea-form"
rows={6} rows={6}
id="contents" id="contents"
placeholder="TextArea Filed" placeholder="お問い合わせ内容を入力してください"
onChange={(e) => setInquiryRequest({ ...inquiryRequest, contents: e.target.value })} onChange={(e) => setInquiryRequest({ ...inquiryRequest, contents: e.target.value })}
value={inquiryRequest.contents}
maxLength={2000}
></textarea> ></textarea>
</div> </div>
</div> </div>
@ -253,7 +296,10 @@ export default function RegistForm() {
))} ))}
</ul> </ul>
</div> </div>
<div className="sale-edit-btn"> <div className="btn-flex-wrap">
<button className="btn-frame n-blue icon" onClick={() => router.push('/inquiry/list')}>
リスト<i className="btn-arr"></i>
</button>
<button className="btn-frame n-blue icon" onClick={handleSubmit} disabled={isSavingInquiry}> <button className="btn-frame n-blue icon" onClick={handleSubmit} disabled={isSavingInquiry}>
登録<i className="btn-arr"></i> 登録<i className="btn-arr"></i>
</button> </button>

75
src/components/inquiry/list/ListTable.tsx
View File

@ -13,12 +13,12 @@ const badgeStyle = [
{ {
id: 'Y', id: 'Y',
label: '回答完了', label: '回答完了',
color: 'blue', color: 'orange',
}, },
{ {
id: 'N', id: 'N',
label: '回答待ち', label: '回答待ち',
color: 'orange', color: 'blue',
}, },
] ]
export default function ListTable() { export default function ListTable() {
@ -58,7 +58,11 @@ export default function ListTable() {
}, [session, inquiryList]) }, [session, inquiryList])
const handleMyInquiry = () => { const handleMyInquiry = () => {
setInquiryListRequest({ ...inquiryListRequest, schRegId: inquiryListRequest.schRegId ? null : session.userId }) setOffset(1)
setInquiryListRequest({
...inquiryListRequest,
schRegId: inquiryListRequest.schRegId ? null : session.userId,
})
} }
const handleFilter = (e: React.ChangeEvent<HTMLSelectElement>) => { const handleFilter = (e: React.ChangeEvent<HTMLSelectElement>) => {
@ -98,39 +102,40 @@ export default function ListTable() {
<div className="inquiry-list-tit"> <div className="inquiry-list-tit">
合計 <span>{heldInquiryList.length > 0 ? heldInquiryList[0].totCnt : 0}</span>個 合計 <span>{heldInquiryList.length > 0 ? heldInquiryList[0].totCnt : 0}</span>個
</div> </div>
{heldInquiryList.length === 0 || (heldInquiryList.length > 0 && heldInquiryList[0].totCnt === 0) ? ( <ul className="inquiry-list">
<div className="inquiry-item-bx nodata"> {heldInquiryList.length === 0 || (heldInquiryList.length > 0 && heldInquiryList[0].totCnt === 0) ? (
<div className="inquiry-item-nodata">照会されたデータがありません。</div> <li className="inquiry-item">
</div> <div className="inquiry-item-bx nodata">
) : ( <div className="inquiry-item-nodata">照会されたデータがありません。</div>
<ul className="inquiry-list"> </div>
{heldInquiryList.length > 0 && </li>
heldInquiryList.map((inquiry: InquiryList) => ( ) : (
<li className="inquiry-item" key={inquiry.qnaNo} onClick={() => router.push(`/inquiry/${inquiry.qnaNo}`)}> heldInquiryList.map((inquiry: InquiryList) => (
<div className="inquiry-item-bx"> <li className="inquiry-item" key={inquiry.qnaNo} onClick={() => router.push(`/inquiry/${inquiry.qnaNo}`)}>
<div className="inquiry-item-category"> <div className="inquiry-item-bx">
<span>{inquiry.qnaClsLrgCd}</span> <div className="inquiry-item-category">
<span>{inquiry.qnaClsMidCd}</span> <span>{inquiry.qnaClsLrgCd}</span>
<span>{inquiry.qnaClsSmlCd}</span> <span>{inquiry.qnaClsMidCd}</span>
</div> <span>{inquiry.qnaClsSmlCd}</span>
<div className="inquiry-item-tit">{inquiry.qstTitle}</div>
<div className="inquiry-item-date">{inquiry.regDt}</div>
<div className={`inquiry-badge badge ${badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.color}`}>
{badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.label}
</div>
</div> </div>
</li> <div className="inquiry-item-tit">{inquiry.qstTitle}</div>
))} <div className="inquiry-item-date">{inquiry.regDt}</div>
</ul> <div className={`inquiry-badge badge ${badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.color}`}>
)} {badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.label}
<div className="sale-edit-btn"> </div>
<LoadMoreButton </div>
hasMore={hasMore} </li>
onLoadMore={() => { ))
setOffset(offset + 10) )}
}} </ul>
/> </div>
</div> <div className="sale-edit-btn">
<LoadMoreButton
hasMore={hasMore}
onLoadMore={() => {
setOffset(offset + 10)
}}
/>
</div> </div>
</div> </div>
</> </>

2
src/config/config.local.ts
View File

@ -1,7 +1,7 @@
import getConfigs from '@/config/config.common' import getConfigs from '@/config/config.common'
// 환경마다 달라져야 할 변수, 값들을 정의합니다. (여기는 local 환경에 맞는 값을 지정합니다.) // 환경마다 달라져야 할 변수, 값들을 정의합니다. (여기는 local 환경에 맞는 값을 지정합니다.)
const baseUrl = 'http://172.30.1.23:3000' const baseUrl = 'http://localhost:3000'
const mode = 'local' const mode = 'local'
// 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다. // 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다.

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,68 +55,68 @@
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%;
@ -124,31 +124,31 @@
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%;
@ -156,176 +156,177 @@
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-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,65 +335,64 @@
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%;
@ -400,26 +400,31 @@
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;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: block;
} }
.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 +435,45 @@
} }
// 1:1문의 작성 // 1:1문의 작성
.inquiry-file-wrap{ .textarea-form {
white-space: pre-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,33 +481,33 @@
} }
// 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%;
@ -507,151 +515,154 @@
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;
word-wrap: break-word;
white-space: normal;
overflow-wrap: break-word;
} }
.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;
} }
} }
// 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;
@ -659,14 +670,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%;
} }
} }
} }