From f0b23c35af754a2bdac14de2fc149d45fa1b1461 Mon Sep 17 00:00:00 2001 From: keyy1315 Date: Thu, 29 May 2025 11:35:19 +0900 Subject: [PATCH] feat: change the order of fields at inquiry regist, detail page --- .env.development | 5 +- .env.localhost | 5 +- src/app/api/qna/file/route.ts | 2 +- src/components/inquiry/Detail.tsx | 23 +- src/components/inquiry/ListTable.tsx | 91 ----- src/components/inquiry/RegistForm.tsx | 138 ++++--- src/components/inquiry/list/ListTable.tsx | 75 ++-- src/config/config.local.ts | 2 +- src/styles/components/_sub.scss | 443 +++++++++++----------- 9 files changed, 381 insertions(+), 403 deletions(-) delete mode 100644 src/components/inquiry/ListTable.tsx diff --git a/.env.development b/.env.development index a62742c..d821f10 100644 --- a/.env.development +++ b/.env.development @@ -2,15 +2,14 @@ NEXT_PUBLIC_RUN_MODE=development # 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경 # 다시 로컬에서 개발할때는 localhost로 변경 #route handler -NEXT_PUBLIC_API_URL=http://172.30.1.23:3000 +NEXT_PUBLIC_API_URL=http://localhost:3000 #qsp 로그인 api NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120 # NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com #1:1문의 api -NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110 -NEXT_PUBLIC_INQUIRY_FILE_DOWNLOAD_API_URL=https://jp-dev.qsalesplatform.com +NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com #QPARTNER 로그인 api diff --git a/.env.localhost b/.env.localhost index 2935f56..1480c7a 100644 --- a/.env.localhost +++ b/.env.localhost @@ -2,15 +2,14 @@ NEXT_PUBLIC_RUN_MODE=local # 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경 # 다시 로컬에서 개발할때는 localhost로 변경 #route handler -NEXT_PUBLIC_API_URL=http://172.30.1.23:3000 +NEXT_PUBLIC_API_URL=http://localhost:3000 #qsp 로그인 api NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120 # NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com #1:1문의 api -NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110 -NEXT_PUBLIC_INQUIRY_FILE_DOWNLOAD_API_URL=https://jp-dev.qsalesplatform.com +NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com #QPARTNER 로그인 api DB_HOST=202.218.61.226 diff --git a/src/app/api/qna/file/route.ts b/src/app/api/qna/file/route.ts index 38aaf1b..7149b28 100644 --- a/src/app/api/qna/file/route.ts +++ b/src/app/api/qna/file/route.ts @@ -10,7 +10,7 @@ export async function GET(request: Request) { return NextResponse.json({ error: 'encodeFileNo is required' }, { status: 400 }) } 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', params: { encodeFileNo, diff --git a/src/components/inquiry/Detail.tsx b/src/components/inquiry/Detail.tsx index 9e5d971..0aae351 100644 --- a/src/components/inquiry/Detail.tsx +++ b/src/components/inquiry/Detail.tsx @@ -3,6 +3,7 @@ import Answer from './Answer' import { useInquiry } from '@/hooks/useInquiry' import { useParams, useRouter } from 'next/navigation' +import { useSessionStore } from '@/store/session' export default function Detail() { const params = useParams() @@ -12,6 +13,8 @@ export default function Detail() { const { commonCodeList } = useInquiry() const router = useRouter() + const { session } = useSessionStore() + return ( <>
@@ -30,24 +33,30 @@ export default function Detail() { 登録日 - {inquiryDetail?.regDt} + {inquiryDetail?.regDt.split(' ')[0]} - 作者 - {inquiryDetail?.regUserNm} + 顧客名 + + {session?.userNm} {session?.builderNo ? `[${session?.builderNo}]` : ''} + 販売店 {inquiryDetail?.storeNm} - - 施工店 - {inquiryDetail?.compCd} - E-mail {inquiryDetail?.regEmail} + + 名前 + {inquiryDetail?.regUserNm} + + + お問い合わせ + {inquiryDetail?.regUserTelNo} +
diff --git a/src/components/inquiry/ListTable.tsx b/src/components/inquiry/ListTable.tsx deleted file mode 100644 index 95911a6..0000000 --- a/src/components/inquiry/ListTable.tsx +++ /dev/null @@ -1,91 +0,0 @@ -'use client' -export default function ListTable() { - return ( - <> -
-
-
-
- - -
-
-
- -
-
-
-
- 合計 98個 -
-
    -
  • -
    -
    - 屋根 - 適合性 - 屋根材 -
    -
    屋根材適合性確認依頼
    -
    2025.04.02
    -
    回答待ち
    -
    -
    • -
  • -
    -
    - 屋根 - 適合性 - 屋根材 -
    -
    設置可能ですか？
    -
    2025.04.02
    -
    回答完了
    -
    -
    • -
  • -
    -
    - 屋根 - 適合性 - 屋根材 -
    -
    屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼
    -
    2025.04.02
    -
    回答待ち
    -
    -
    • -
  • -
    -
    - 屋根 - 適合性 - 屋根材 -
    -
    設置可能ですか？
    -
    2025.04.02
    -
    回答完了
    -
    -
    • -
  • -
    -
    조회된 데이터가 없습니다
    -
    -
    • -
-
- -
-
-
- - ) -} diff --git a/src/components/inquiry/RegistForm.tsx b/src/components/inquiry/RegistForm.tsx index 0c3f452..93df62f 100644 --- a/src/components/inquiry/RegistForm.tsx +++ b/src/components/inquiry/RegistForm.tsx @@ -36,7 +36,13 @@ export default function RegistForm() { useEffect(() => { 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]) @@ -74,6 +80,17 @@ export default function RegistForm() { focusOnRequiredField('qstMail') 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() attachedFiles.forEach((file) => { formData.append('files', file) @@ -92,6 +109,21 @@ export default function RegistForm() { ) } + const handlePhoneNumberChange = (e: React.ChangeEvent) => { + 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 ( <>
@@ -120,46 +152,50 @@ export default function RegistForm() { ))}
-
- -
-
- -
+ {commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd).length > 0 && ( +
+ +
+ )} + {commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd).length > 0 && ( +
+ +
+ )}
@@ -181,10 +217,13 @@ export default function RegistForm() {
setInquiryRequest({ ...inquiryRequest, regUserTelNo: e.target.value })} + onChange={handlePhoneNumberChange} + value={inquiryRequest.regUserTelNo ?? ''} id="regUserTelNo" + maxLength={13} />
@@ -197,6 +236,7 @@ export default function RegistForm() { className="input-frame" type="text" placeholder="E-mailを書いてください" + value={inquiryRequest.qstMail} onChange={(e) => setInquiryRequest({ ...inquiryRequest, qstMail: e.target.value })} id="qstMail" /> @@ -212,21 +252,24 @@ export default function RegistForm() { type="text" placeholder="お問い合わせタイトルを記入してください" onChange={(e) => setInquiryRequest({ ...inquiryRequest, title: e.target.value })} + maxLength={100} id="title" />
- お問い合わせタイプ * + お問い合わせ内容 *
@@ -253,7 +296,10 @@ export default function RegistForm() { ))} -
+
+ diff --git a/src/components/inquiry/list/ListTable.tsx b/src/components/inquiry/list/ListTable.tsx index d01de9d..cbb88af 100644 --- a/src/components/inquiry/list/ListTable.tsx +++ b/src/components/inquiry/list/ListTable.tsx @@ -13,12 +13,12 @@ const badgeStyle = [ { id: 'Y', label: '回答完了', - color: 'blue', + color: 'orange', }, { id: 'N', label: '回答待ち', - color: 'orange', + color: 'blue', }, ] export default function ListTable() { @@ -58,7 +58,11 @@ export default function ListTable() { }, [session, inquiryList]) 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) => { @@ -98,39 +102,40 @@ export default function ListTable() {
合計 {heldInquiryList.length > 0 ? heldInquiryList[0].totCnt : 0}個
- {heldInquiryList.length === 0 || (heldInquiryList.length > 0 && heldInquiryList[0].totCnt === 0) ? ( -
-
照会されたデータがありません。
-
- ) : ( -
    - {heldInquiryList.length > 0 && - heldInquiryList.map((inquiry: InquiryList) => ( -
  • router.push(`/inquiry/${inquiry.qnaNo}`)}> -
    -
    - {inquiry.qnaClsLrgCd} - {inquiry.qnaClsMidCd} - {inquiry.qnaClsSmlCd} -
    -
    {inquiry.qstTitle}
    -
    {inquiry.regDt}
    -
    badge.id === inquiry.answerYn)?.color}`}> - {badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.label} -
    +
      + {heldInquiryList.length === 0 || (heldInquiryList.length > 0 && heldInquiryList[0].totCnt === 0) ? ( +
    • +
      +
      照会されたデータがありません。
      +
      +
      • + ) : ( + heldInquiryList.map((inquiry: InquiryList) => ( +
    • router.push(`/inquiry/${inquiry.qnaNo}`)}> +
      +
      + {inquiry.qnaClsLrgCd} + {inquiry.qnaClsMidCd} + {inquiry.qnaClsSmlCd}
      -
      • - ))} -
    - )} -
    - { - setOffset(offset + 10) - }} - /> -
    +
    {inquiry.qstTitle}
    +
    {inquiry.regDt}
    +
    badge.id === inquiry.answerYn)?.color}`}> + {badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.label} +
    +
    +
    • + )) + )} +
+
+
+ { + setOffset(offset + 10) + }} + />
diff --git a/src/config/config.local.ts b/src/config/config.local.ts index 8fbf68b..ac02c97 100644 --- a/src/config/config.local.ts +++ b/src/config/config.local.ts @@ -1,7 +1,7 @@ import getConfigs from '@/config/config.common' // 환경마다 달라져야 할 변수, 값들을 정의합니다. (여기는 local 환경에 맞는 값을 지정합니다.) -const baseUrl = 'http://172.30.1.23:3000' +const baseUrl = 'http://localhost:3000' const mode = 'local' // 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다. diff --git a/src/styles/components/_sub.scss b/src/styles/components/_sub.scss index 73c5fc4..939c66e 100644 --- a/src/styles/components/_sub.scss +++ b/src/styles/components/_sub.scss @@ -1,38 +1,38 @@ -@use "../abstracts" as *; +@use '../abstracts' as *; // input form 공통 -.data-input-form-bx{ +.data-input-form-bx { margin-bottom: 18px; - &:last-child{ + &:last-child { margin-bottom: 0; } - .data-input-form-tit{ + .data-input-form-tit { @include defaultFont($font-s-13, $font-w-500, $font-c); margin-bottom: 10px; - .import{ - color: #F00; + .import { + color: #f00; } - span{ + span { 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; - @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); margin-top: 24px; - .btn-bx{ + .btn-bx { flex: 1; } - &.com{ - .btn-bx{ + &.com { + .btn-bx { flex: 1 1 auto; - button{ + button { font-size: 12px; } } @@ -40,13 +40,13 @@ } // 매물 common -.top-btn{ +.top-btn { position: fixed; bottom: 96px; right: 15px; width: 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-position: center; background-repeat: no-repeat; @@ -55,68 +55,68 @@ z-index: 90000; } -.sale-contents{ +.sale-contents { width: 100%; - background-color: #F5F5F5; - .sale-frame{ + background-color: #f5f5f5; + .sale-frame { padding: 0 20px; - border-top: 1px solid #ECECEC; - border-bottom: 1px solid #ECECEC; + 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{ + &:first-child { padding-top: 0; border-top: none; } - &:last-child{ + &:last-child { padding-bottom: 0; border-bottom: none; margin-bottom: 0; } } } -.sale-form-btn-wrap{ - padding: 20px 20px 0 ; +.sale-form-btn-wrap { + padding: 20px 20px 0; background-color: #fff; - .btn-flex-wrap{ + .btn-flex-wrap { margin-top: 0; } } // 매물 목록 -.sale-form-bx{ +.sale-form-bx { margin-bottom: 14px; - &:last-child{ + &:last-child { margin-bottom: 0; } -} -.sale-list-wrap{ - .sale-list-item{ +} +.sale-list-wrap { + .sale-list-item { padding-top: 14px; padding-bottom: 14px; - border-bottom: 1px solid #ECECEC; + border-bottom: 1px solid #ececec; cursor: pointer; - &:first-child{ + &:first-child { padding-top: 0; } - &:last-child{ + &:last-child { border-bottom: none; padding-bottom: 0; } } } -.sale-item-bx{ - .sale-item-date-bx{ +.sale-item-bx { + .sale-item-date-bx { @include flex(0px); align-items: center; margin-bottom: 9px; - .sale-item-num{ + .sale-item-num { position: relative; @include defaultFont($font-s-13, $font-w-400, $font-c); padding-right: 6px; - &::after{ + &::after { content: ''; position: absolute; top: 50%; @@ -124,31 +124,31 @@ transform: translateY(-50%); width: 1px; height: 10px; - background-color: #A2ABB8; + background-color: #a2abb8; } } - .sale-item-date{ - @include defaultFont($font-s-13, $font-w-400, #A2ABB8); + .sale-item-date { + @include defaultFont($font-s-13, $font-w-400, #a2abb8); padding-left: 6px; } } - .sale-item-tit{ + .sale-item-tit { @include defaultFont($font-s-15, $font-w-500, $font-c); @include ellipsis(1); margin-bottom: 9px; } - .sale-item-customer{ + .sale-item-customer { @include defaultFont($font-s-13, $font-w-400, $font-c); margin-bottom: 9px; } - .sale-item-update-bx{ + .sale-item-update-bx { @include flex(0px); align-items: center; - .sale-item-name{ + .sale-item-name { position: relative; - @include defaultFont($font-s-13, $font-w-400, #A2ABB8); + @include defaultFont($font-s-13, $font-w-400, #a2abb8); padding-right: 6px; - &::after{ + &::after { content: ''; position: absolute; top: 50%; @@ -156,176 +156,177 @@ transform: translateY(-50%); width: 1px; height: 10px; - background-color: #A2ABB8; + background-color: #a2abb8; } } - .sale-item-update{ - @include defaultFont($font-s-13, $font-w-400, #A2ABB8); + .sale-item-update { + @include defaultFont($font-s-13, $font-w-400, #a2abb8); padding-left: 6px; } } - &.nodata{ - .sale-item-nodata{ + &.nodata { + .sale-item-nodata { padding: 5px 0; text-align: center; @include defaultFont($font-s-15, $font-w-500, $font-c); } } } -.sale-edit-btn{ +.sale-edit-btn { margin-top: 24px; } // 매물 상세 -.sale-data-table-wrap{ +.sale-data-table-wrap { padding: 24px; background-color: #fff; - border-top: 1px solid #ECECEC; + border-top: 1px solid #ececec; } -.sale-data-table{ +.sale-data-table { width: 100%; table-layout: fixed; - tbody{ - tr{ - th{ + tbody { + tr { + th { @include defaultFont($font-s-13, $font-w-500, $font-c); vertical-align: top; padding: 5px 0; } - td{ + td { @include defaultFont($font-s-13, $font-w-400, $font-c); padding: 5px 0 8px 14px; - .data-down{ + .data-down { @include flex(8px); align-items: center; - color: #1259CB; - i{ + color: #1259cb; + i { display: block; width: 8px; 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; } } } - &:first-child{ - th,td{ + &:first-child { + th, + td { padding-top: 0; } } - &:last-child{ - th,td{ + &:last-child { + th, + td { padding-bottom: 0; } } } } -} +} -.sale-detail-toggle-wrap{ - border-top: 1px solid #ECECEC; +.sale-detail-toggle-wrap { + border-top: 1px solid #ececec; } -.sale-detail-toggle-bx{ - border-bottom: 1px solid #ECECEC; +.sale-detail-toggle-bx { + border-bottom: 1px solid #ececec; } -.sale-detail-toggle-head{ +.sale-detail-toggle-head { @include flex(5px); padding: 14px 18px; background-color: $white-fff; cursor: pointer; - .sale-detail-toggle-name{ + .sale-detail-toggle-name { @include defaultFont($font-s-13, $font-w-500, $font-c); } - .sale-detail-toggle-btn-wrap{ + .sale-detail-toggle-btn-wrap { margin-left: auto; - .sale-detail-toggle-btn{ + .sale-detail-toggle-btn { display: block; width: 22px; height: 22px; - background: url(/assets/images/sub/sale_toggle_btn.svg)no-repeat center; - background-size: cover + background: url(/assets/images/sub/sale_toggle_btn.svg) no-repeat center; + background-size: cover; } } } -.sale-detail-toggle-cont{ +.sale-detail-toggle-cont { display: none; - .sale-frame{ + .sale-frame { padding: 24px 20px; - &:first-child{ + &:first-child { padding-top: 24px; } - &:last-child{ + &:last-child { padding-bottom: 24px; } } } -.sale-detail-toggle-bx{ - &.act{ - .sale-detail-toggle-head{ - background-color: #5F738E; - .sale-detail-toggle-name{ - color: #fff +.sale-detail-toggle-bx { + &.act { + .sale-detail-toggle-head { + background-color: #5f738e; + .sale-detail-toggle-name { + color: #fff; } - .sale-detail-toggle-btn-wrap{ - .sale-detail-toggle-btn{ - background: url(/assets/images/sub/sale_toggle_btn_white.svg)no-repeat center; + .sale-detail-toggle-btn-wrap { + .sale-detail-toggle-btn { + background: url(/assets/images/sub/sale_toggle_btn_white.svg) no-repeat center; } } } - .sale-detail-toggle-cont{ + .sale-detail-toggle-cont { display: block; } } } // 매물 기본정보 -.form-flex{ +.form-flex { @include flex(5px); - .form-bx{ + .form-bx { flex: 1; } } -.form-btn{ +.form-btn { margin-top: 12px; } // 매물 전기 지붕정보 -.sale-roof-title{ +.sale-roof-title { @include defaultFont($font-s-15, $font-w-500, $font-c); padding-bottom: 10px; margin-bottom: 20px; - border-bottom: 1px solid #2E3A59; + border-bottom: 1px solid #2e3a59; } -.data-check-wrap{ +.data-check-wrap { @include flex(10px); flex-wrap: wrap; margin-bottom: 12px; .radio-form-box, - .check-form-box{ + .check-form-box { width: calc(50% - 5px); } - &.mb0{ + &.mb0 { margin-bottom: 0; } } -.data-input{ - &.flex{ +.data-input { + &.flex { @include flex(8px); align-items: center; - span{ + span { flex: none; @include defaultFont($font-s-13, $font-w-400, $font-c); } } } - // 1:1 문의 common -.inquiry-frame{ +.inquiry-frame { padding: 0 20px; } -.badge{ +.badge { min-width: 60px; height: 30px; line-height: 30px; @@ -334,65 +335,64 @@ text-align: center; font-size: $font-s-12; font-weight: $font-w-500; - &.blue{ - color: #5497E9; - background-color: #ECF5FF; + &.blue { + color: #5497e9; + background-color: #ecf5ff; } - &.orange{ - color: #F86A56; - background-color: #FFEFED; + &.orange { + color: #f86a56; + background-color: #ffefed; } - &.block{ + &.block { width: 100%; - } } // 1:1 문의 목록 -.inquiry-table-filter{ +.inquiry-table-filter { margin-bottom: 24px; - .filter-check{ + .filter-check { margin-bottom: 12px; } } -.inquiry-list-tit{ +.inquiry-list-tit { padding-bottom: 10px; - border-bottom: 1px solid #2E3A59; + border-bottom: 1px solid #2e3a59; @include defaultFont($font-s-13, $font-w-400, $font-c); - span{ + span { font-weight: $font-w-500; } } -.inquiry-list{ - .inquiry-item{ +.inquiry-list { + .inquiry-item { padding: 10px 0; cursor: pointer; - border-bottom: 1px solid #ECECEC; - &:last-child{ + border-bottom: 1px solid #ececec; + &:last-child { border-bottom: none; padding-bottom: 0; } - .inquiry-item-bx{ + .inquiry-item-bx { position: relative; padding-right: 70px; - .inquiry-item-category{ + .inquiry-item-category { display: flex; align-items: center; margin-bottom: 5px; - span{ + span { position: relative; display: block; @include defaultFont($font-s-13, $font-w-400, $font-c); padding: 0 6px; - &:first-child{ + &:first-child { padding-left: 0; } - &:last-child{ + &:last-child { padding-right: 0; - &::before{ + &::before { display: none; } } - &::before{ + &::before { content: ''; position: absolute; top: 50%; @@ -400,26 +400,31 @@ transform: translateY(-50%); width: 1px; 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 ellipsis(1); margin-bottom: 5px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + display: block; } - .inquiry-item-date{ - @include defaultFont($font-s-13, $font-w-400, #A2ABB8); + .inquiry-item-date { + @include defaultFont($font-s-13, $font-w-400, #a2abb8); } - .inquiry-badge{ + .inquiry-badge { position: absolute; top: 0; right: 0; } - &.nodata{ + &.nodata { padding-right: 0; - .inquiry-item-nodata{ + .inquiry-item-nodata { padding: 10px 0; text-align: center; @include defaultFont($font-s-15, $font-w-500, $font-c); @@ -430,42 +435,45 @@ } // 1:1문의 작성 -.inquiry-file-wrap{ +.textarea-form { + white-space: pre-wrap; +} +.inquiry-file-wrap { margin-top: 20px; - .file-list-wrap{ + .file-list-wrap { margin-top: 14px; } } -.file-list-tit{ +.file-list-tit { @include defaultFont($font-s-13, $font-w-500, $font-c); } -.file-list{ +.file-list { margin-top: 14px; - .file-item{ - border-top: 1px solid #EDEDED; + .file-item { + border-top: 1px solid #ededed; cursor: default; - .file-item-bx{ + .file-item-bx { width: 100%; padding: 14px 0; @include flex(0px); align-items: center; - .file-item-name{ + .file-item-name { @include ellipsis(1); @include defaultFont($font-s-13, $font-w-400, $font-c); padding-right: 10px; } - .file-del{ + .file-del { flex: none; display: block; margin-left: auto; width: 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; } } - &:last-child{ - .file-item-bx{ + &:last-child { + .file-item-bx { padding-bottom: 0; } } @@ -473,33 +481,33 @@ } // 1:1 문의 상세 -.inquiry-detail-data-table{ +.inquiry-detail-data-table { padding: 20px 0; - border-bottom: 1px solid #ECECEC; + border-bottom: 1px solid #ececec; } -.inquiry-detail-data{ +.inquiry-detail-data { padding: 20px 0; - border-bottom: 1px solid #2E3A59; + border-bottom: 1px solid #2e3a59; margin-bottom: 24px; - .inquiry-detail-category{ + .inquiry-detail-category { display: flex; align-items: center; margin-bottom: 3px; - span{ + span { position: relative; display: block; @include defaultFont($font-s-13, $font-w-400, $font-c); padding: 0 6px; - &:first-child{ + &:first-child { padding-left: 0; } - &:last-child{ + &:last-child { padding-right: 0; - &::before{ + &::before { display: none; } } - &::before{ + &::before { content: ''; position: absolute; top: 50%; @@ -507,151 +515,154 @@ transform: translateY(-50%); width: 1px; height: 10px; - background-color: #A2ABB8; + background-color: #a2abb8; } } } - .inquiry-detail-tit{ + .inquiry-detail-tit { @include defaultFont($font-s-15, $font-w-500, $font-c); 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); + white-space: pre-line; } } // 1:1 문의 답변 -.inquiry-answer-wrap{ +.inquiry-answer-wrap { margin-top: 24px; - } -.inquiry-answer-header{ +.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); + 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); + .inquiry-answer-date { + @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); margin-bottom: 3px; } // 비밀번호 변경 -.border-frame{ +.border-frame { padding: 20px; - border-top: 1px solid #ECECEC; - border-bottom: 1px solid #ECECEC; + border-top: 1px solid #ececec; + border-bottom: 1px solid #ececec; background-color: #fff; margin-bottom: 10px; - &:last-child{ + &:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } } -.pw-guide{ - .pw-guide-tit{ - @include defaultFont($font-s-16, $font-w-500, #1259CB); +.pw-guide { + .pw-guide-tit { + @include defaultFont($font-s-16, $font-w-500, #1259cb); } - .pw-guide-txt{ - @include defaultFont($font-s-13, $font-w-400, #417DDC); + .pw-guide-txt { + @include defaultFont($font-s-13, $font-w-400, #417ddc); } } // 지붕재 적합성 -.compliance-icon{ +.compliance-icon { display: flex; } -.compliance-check-wrap{ +.compliance-check-wrap { padding-top: 10px; } -.compliance-check-bx{ +.compliance-check-bx { position: relative; padding: 14px 18px; - border: 1px solid #EFEFEF; + border: 1px solid #efefef; border-radius: 4px; margin-bottom: 10px; - &:last-child{ + &:last-child { margin-bottom: 0; } - &.act{ - .bx-btn{ + &.act { + .bx-btn { transform: rotate(0) !important; } - .reference-list{ - display: block + .reference-list { + display: block; } } } -.check-name-wrap{ +.check-name-wrap { @include flex(0px); align-items: center; - .check-name{ + .check-name { @include defaultFont($font-s-13, $font-w-500, $font-c); } - .check-name-btn{ + .check-name-btn { padding-left: 5px; margin-left: auto; - .bx-btn{ + .bx-btn { display: block; width: 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); } } } -.reference-list{ +.reference-list { display: none; margin-top: 10px; padding-top: 14px; - border-top: 1px solid #ECECEC; - transition: all .15s ease-in-out; - .reference-item{ + border-top: 1px solid #ececec; + transition: all 0.15s ease-in-out; + .reference-item { margin-bottom: 8px; padding-left: 14px; - .reference-item-bx{ + .reference-item-bx { @include flex(10px); @include defaultFont($font-s-13, $font-w-400, $font-c); align-items: center; } - &:last-child{ + &:last-child { margin-bottom: 0; } } - &.check{ - .reference-item{ + &.check { + .reference-item { margin-bottom: 14px; } } } -.compliace-nosearch{ +.compliace-nosearch { padding: 30px 0; - span{ + span { display: block; @include defaultFont($font-s-13, $font-w-400, $font-c); text-align: center; } } -.check-item-wrap{ +.check-item-wrap { @include flex(0px); align-items: center; } -.compliance-icon-wrap{ +.compliance-icon-wrap { margin-left: auto; min-width: 44px; @include flex(0px); align-items: center; } -.float-btn-wrap{ +.float-btn-wrap { position: sticky; bottom: 10px; left: 0; @@ -659,14 +670,14 @@ background-color: #fff; z-index: 9; } -@media screen and (max-width: 360px){ - .btn-flex-wrap{ +@media screen and (max-width: 360px) { + .btn-flex-wrap { flex-direction: column; } - .data-check-wrap{ + .data-check-wrap { .radio-form-box, - .check-form-box{ + .check-form-box { width: 100%; } } -} \ No newline at end of file +}