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

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

View File

@ -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

View File

@ -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

View File

@ -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,

View File

@ -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 (
<>
<div className="inquiry-frame">
@ -30,24 +33,30 @@ export default function Detail() {
<tbody>
<tr>
<th></th>
<td>{inquiryDetail?.regDt}</td>
<td>{inquiryDetail?.regDt.split(' ')[0]}</td>
</tr>
<tr>
<th></th>
<td>{inquiryDetail?.regUserNm}</td>
<th></th>
<td>
{session?.userNm} {session?.builderNo ? `[${session?.builderNo}]` : ''}
</td>
</tr>
<tr>
<th></th>
<td>{inquiryDetail?.storeNm}</td>
</tr>
<tr>
<th></th>
<td>{inquiryDetail?.compCd}</td>
</tr>
<tr>
<th>E-mail</th>
<td>{inquiryDetail?.regEmail}</td>
</tr>
<tr>
<th></th>
<td>{inquiryDetail?.regUserNm}</td>
</tr>
<tr>
<th></th>
<td>{inquiryDetail?.regUserTelNo}</td>
</tr>
</tbody>
</table>
</div>

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>
</>
)
}

View File

@ -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<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 (
<>
<div className="inquiry-frame">
@ -120,6 +152,7 @@ export default function RegistForm() {
))}
</select>
</div>
{commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd).length > 0 && (
<div className="data-input mt5">
<select
className="select-form"
@ -140,6 +173,8 @@ export default function RegistForm() {
))}
</select>
</div>
)}
{commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd).length > 0 && (
<div className="data-input mt5">
<select
className="select-form"
@ -160,6 +195,7 @@ export default function RegistForm() {
))}
</select>
</div>
)}
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">
@ -181,10 +217,13 @@ export default function RegistForm() {
<div className="data-input">
<input
className="input-frame"
type="text"
type="tel"
inputMode="tel"
placeholder="電話番号を書き留めてください"
onChange={(e) => setInquiryRequest({ ...inquiryRequest, regUserTelNo: e.target.value })}
onChange={handlePhoneNumberChange}
value={inquiryRequest.regUserTelNo ?? ''}
id="regUserTelNo"
maxLength={13}
/>
</div>
</div>
@ -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"
/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">
<i className="import">*</i>
<i className="import">*</i>
</div>
<div className="data-input">
<textarea
className="textarea-form"
rows={6}
id="contents"
placeholder="TextArea Filed"
placeholder="お問い合わせ内容を入力してください"
onChange={(e) => setInquiryRequest({ ...inquiryRequest, contents: e.target.value })}
value={inquiryRequest.contents}
maxLength={2000}
></textarea>
</div>
</div>
@ -253,7 +296,10 @@ export default function RegistForm() {
))}
</ul>
</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}>
<i className="btn-arr"></i>
</button>

View File

@ -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<HTMLSelectElement>) => {
@ -98,13 +102,14 @@ export default function ListTable() {
<div className="inquiry-list-tit">
<span>{heldInquiryList.length > 0 ? heldInquiryList[0].totCnt : 0}</span>
</div>
<ul className="inquiry-list">
{heldInquiryList.length === 0 || (heldInquiryList.length > 0 && heldInquiryList[0].totCnt === 0) ? (
<li className="inquiry-item">
<div className="inquiry-item-bx nodata">
<div className="inquiry-item-nodata"></div>
</div>
</li>
) : (
<ul className="inquiry-list">
{heldInquiryList.length > 0 &&
heldInquiryList.map((inquiry: InquiryList) => (
<li className="inquiry-item" key={inquiry.qnaNo} onClick={() => router.push(`/inquiry/${inquiry.qnaNo}`)}>
<div className="inquiry-item-bx">
@ -120,9 +125,10 @@ export default function ListTable() {
</div>
</div>
</li>
))}
</ul>
))
)}
</ul>
</div>
<div className="sale-edit-btn">
<LoadMoreButton
hasMore={hasMore}
@ -132,7 +138,6 @@ export default function ListTable() {
/>
</div>
</div>
</div>
</>
)
}

View File

@ -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 함수에 전달합니다.

View File

@ -1,4 +1,4 @@
@use "../abstracts" as *;
@use '../abstracts' as *;
// input form 공통
.data-input-form-bx {
@ -10,16 +10,16 @@
@include defaultFont($font-s-13, $font-w-500, $font-c);
margin-bottom: 10px;
.import {
color: #F00;
color: #f00;
}
span {
display: block;
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
@include defaultFont($font-s-13, $font-w-400, #a8b6c7);
}
}
.data-input-guide {
margin-top: 8px;
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
@include defaultFont($font-s-13, $font-w-400, #a8b6c7);
}
}
@ -46,7 +46,7 @@
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;
@ -57,11 +57,11 @@
.sale-contents {
width: 100%;
background-color: #F5F5F5;
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;
@ -96,7 +96,7 @@
.sale-list-item {
padding-top: 14px;
padding-bottom: 14px;
border-bottom: 1px solid #ECECEC;
border-bottom: 1px solid #ececec;
cursor: pointer;
&:first-child {
padding-top: 0;
@ -124,11 +124,11 @@
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);
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
padding-left: 6px;
}
}
@ -146,7 +146,7 @@
align-items: center;
.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 {
content: '';
@ -156,11 +156,11 @@
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);
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
padding-left: 6px;
}
}
@ -180,7 +180,7 @@
.sale-data-table-wrap {
padding: 24px;
background-color: #fff;
border-top: 1px solid #ECECEC;
border-top: 1px solid #ececec;
}
.sale-data-table {
width: 100%;
@ -198,7 +198,7 @@
.data-down {
@include flex(8px);
align-items: center;
color: #1259CB;
color: #1259cb;
i {
display: block;
width: 8px;
@ -209,12 +209,14 @@
}
}
&:first-child {
th,td{
th,
td {
padding-top: 0;
}
}
&:last-child {
th,td{
th,
td {
padding-bottom: 0;
}
}
@ -223,10 +225,10 @@
}
.sale-detail-toggle-wrap {
border-top: 1px solid #ECECEC;
border-top: 1px solid #ececec;
}
.sale-detail-toggle-bx {
border-bottom: 1px solid #ECECEC;
border-bottom: 1px solid #ececec;
}
.sale-detail-toggle-head {
@include flex(5px);
@ -243,7 +245,7 @@
width: 22px;
height: 22px;
background: url(/assets/images/sub/sale_toggle_btn.svg) no-repeat center;
background-size: cover
background-size: cover;
}
}
}
@ -263,9 +265,9 @@
.sale-detail-toggle-bx {
&.act {
.sale-detail-toggle-head {
background-color: #5F738E;
background-color: #5f738e;
.sale-detail-toggle-name {
color: #fff
color: #fff;
}
.sale-detail-toggle-btn-wrap {
.sale-detail-toggle-btn {
@ -295,7 +297,7 @@
@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 {
@include flex(10px);
@ -320,7 +322,6 @@
}
}
// 1:1 문의 common
.inquiry-frame {
padding: 0 20px;
@ -335,16 +336,15 @@
font-size: $font-s-12;
font-weight: $font-w-500;
&.blue {
color: #5497E9;
background-color: #ECF5FF;
color: #5497e9;
background-color: #ecf5ff;
}
&.orange {
color: #F86A56;
background-color: #FFEFED;
color: #f86a56;
background-color: #ffefed;
}
&.block {
width: 100%;
}
}
// 1:1 문의 목록
@ -356,7 +356,7 @@
}
.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 {
font-weight: $font-w-500;
@ -366,7 +366,7 @@
.inquiry-item {
padding: 10px 0;
cursor: pointer;
border-bottom: 1px solid #ECECEC;
border-bottom: 1px solid #ececec;
&:last-child {
border-bottom: none;
padding-bottom: 0;
@ -400,7 +400,7 @@
transform: translateY(-50%);
width: 1px;
height: 10px;
background-color: #A2ABB8;
background-color: #a2abb8;
}
}
}
@ -408,9 +408,14 @@
@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);
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
}
.inquiry-badge {
position: absolute;
@ -430,6 +435,9 @@
}
// 1:1문의 작성
.textarea-form {
white-space: pre-wrap;
}
.inquiry-file-wrap {
margin-top: 20px;
.file-list-wrap {
@ -442,7 +450,7 @@
.file-list {
margin-top: 14px;
.file-item {
border-top: 1px solid #EDEDED;
border-top: 1px solid #ededed;
cursor: default;
.file-item-bx {
width: 100%;
@ -475,11 +483,11 @@
// 1:1 문의 상세
.inquiry-detail-data-table {
padding: 20px 0;
border-bottom: 1px solid #ECECEC;
border-bottom: 1px solid #ececec;
}
.inquiry-detail-data {
padding: 20px 0;
border-bottom: 1px solid #2E3A59;
border-bottom: 1px solid #2e3a59;
margin-bottom: 24px;
.inquiry-detail-category {
display: flex;
@ -507,34 +515,37 @@
transform: translateY(-50%);
width: 1px;
height: 10px;
background-color: #A2ABB8;
background-color: #a2abb8;
}
}
}
.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 {
@include defaultFont($font-s-13, $font-w-400, $font-c);
white-space: pre-line;
}
}
// 1:1 문의 답변
.inquiry-answer-wrap {
margin-top: 24px;
}
.inquiry-answer-header {
padding: 20px 0;
border-top: 1px solid #F86A56;
border-bottom: 1px solid #ECECEC;
border-top: 1px solid #f86a56;
border-bottom: 1px solid #ececec;
.inquiry-answer-tit {
@include defaultFont($font-s-14, $font-w-500, #F86A56);
@include defaultFont($font-s-14, $font-w-500, #f86a56);
margin-bottom: 5px;
}
.inquiry-answer-date {
@include defaultFont($font-s-13, $font-w-400, #F86A56);
@include defaultFont($font-s-13, $font-w-400, #f86a56);
}
}
.inquiry-answer-tit {
@ -545,8 +556,8 @@
// 비밀번호 변경
.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 {
@ -557,10 +568,10 @@
}
.pw-guide {
.pw-guide-tit {
@include defaultFont($font-s-16, $font-w-500, #1259CB);
@include defaultFont($font-s-16, $font-w-500, #1259cb);
}
.pw-guide-txt {
@include defaultFont($font-s-13, $font-w-400, #417DDC);
@include defaultFont($font-s-13, $font-w-400, #417ddc);
}
}
@ -574,7 +585,7 @@
.compliance-check-bx {
position: relative;
padding: 14px 18px;
border: 1px solid #EFEFEF;
border: 1px solid #efefef;
border-radius: 4px;
margin-bottom: 10px;
&:last-child {
@ -585,7 +596,7 @@
transform: rotate(0) !important;
}
.reference-list {
display: block
display: block;
}
}
}
@ -611,8 +622,8 @@
display: none;
margin-top: 10px;
padding-top: 14px;
border-top: 1px solid #ECECEC;
transition: all .15s ease-in-out;
border-top: 1px solid #ececec;
transition: all 0.15s ease-in-out;
.reference-item {
margin-bottom: 8px;
padding-left: 14px;