|
|
|
|
@ -1,29 +1,62 @@
|
|
|
|
|
import { Button, Badge } from 'reactstrap'; |
|
|
|
|
import AppCollapse from '@components/app-collapse'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import { |
|
|
|
|
ADMIN_DETAIL, |
|
|
|
|
ADMIN_DETAIL_INITAL, |
|
|
|
|
USER_LIST |
|
|
|
|
} from '../../../modules/cstmrService/inquiry/action'; |
|
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
|
import * as Actions from '../../../modules/cstmrService/inquiry/action'; |
|
|
|
|
import { Fragment, useCallback, useEffect, useState } from 'react'; |
|
|
|
|
import moment from 'moment'; |
|
|
|
|
import InquiryWrite from '../../../components/cstmrService/inquiry/InquiryWrite'; |
|
|
|
|
import { InfoModal } from '../../../components/modal/InfoModal'; |
|
|
|
|
import { ErrorModal } from '../../../components/modal/ErrorModal'; |
|
|
|
|
|
|
|
|
|
export default function UserInquiryContainer() { |
|
|
|
|
export default function UserInquiryContainer({ memberName }) { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
const { userList: lists, adminDetail: detail } = useSelector( |
|
|
|
|
state => state.qnaState |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const [isInquiryModalOpen, setIsInquiryModalOpen] = useState(false); |
|
|
|
|
const [inquiryForm, setInquiryForm] = useState({ |
|
|
|
|
category: '칭찬', |
|
|
|
|
contact: '', |
|
|
|
|
title: '', |
|
|
|
|
content: '' |
|
|
|
|
}); |
|
|
|
|
const [validationModal, setValidationModal] = useState({ |
|
|
|
|
errorType: { |
|
|
|
|
isOpen: false, |
|
|
|
|
desc: '', |
|
|
|
|
title: '필수값 입력 오류' |
|
|
|
|
}, |
|
|
|
|
successType: { |
|
|
|
|
isOpen: false, |
|
|
|
|
desc: '', |
|
|
|
|
title: '필수값 입력 오류' |
|
|
|
|
}, |
|
|
|
|
confirmType: { |
|
|
|
|
isOpen: false, |
|
|
|
|
desc: '', |
|
|
|
|
title: '필수값 입력 오류' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
dispatch(USER_LIST.request({ category: '', searchType: '', word: '' })); |
|
|
|
|
dispatch( |
|
|
|
|
Actions.USER_LIST.request({ category: '', searchType: '', word: '' }) |
|
|
|
|
); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (detail) setInquiryForm({ ...detail }); |
|
|
|
|
}, [detail]); |
|
|
|
|
|
|
|
|
|
// 줄바꿈 문자(\r\n)을 <br>로 변환
|
|
|
|
|
const textLineBreaks = text => { |
|
|
|
|
return text.replace((/\n/g, '<br/>')); |
|
|
|
|
return text.split('\r\n').map((line, index) => ( |
|
|
|
|
<Fragment key={index}> |
|
|
|
|
{line} |
|
|
|
|
{index < text.split('\r\n').length - 1 && <br />} |
|
|
|
|
</Fragment> |
|
|
|
|
)); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 문의 내역 list
|
|
|
|
|
@ -64,22 +97,17 @@ export default function UserInquiryContainer() {
|
|
|
|
|
<> |
|
|
|
|
<div className='faq-a'> |
|
|
|
|
<span className='faq-icon-q'>Q</span> |
|
|
|
|
<span |
|
|
|
|
className='faq-a-text' |
|
|
|
|
dangerouslySetInnerHTML={{ __html: textLineBreaks(i.content) }} |
|
|
|
|
> |
|
|
|
|
<span className='faq-a-text'> |
|
|
|
|
{/* br처리? 줄바꿈.. 추후에 생각 */} |
|
|
|
|
{textLineBreaks(i.content)} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
{i.anserStatus === 'Y' && ( |
|
|
|
|
<div className='faq-a' style={{ marginTop: '7px' }}> |
|
|
|
|
<span className='faq-icon-a'>A</span> |
|
|
|
|
<span |
|
|
|
|
className='faq-a-text' |
|
|
|
|
dangerouslySetInnerHTML={{ |
|
|
|
|
__html: textLineBreaks(i.anserContent) |
|
|
|
|
}} |
|
|
|
|
></span> |
|
|
|
|
<span className='faq-a-text'> |
|
|
|
|
{textLineBreaks(i.anserContent)} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</> |
|
|
|
|
@ -88,16 +116,91 @@ export default function UserInquiryContainer() {
|
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 1:1 문의하기 Modal handler
|
|
|
|
|
// 1:1 문의/수정 Modal handler
|
|
|
|
|
const handlerInquiryModal = qnaSno => { |
|
|
|
|
if (!isInquiryModalOpen && qnaSno) { |
|
|
|
|
dispatch(ADMIN_DETAIL.request(qnaSno)); |
|
|
|
|
dispatch(Actions.ADMIN_DETAIL.request(qnaSno)); |
|
|
|
|
} else { |
|
|
|
|
dispatch(ADMIN_DETAIL_INITAL()); |
|
|
|
|
dispatch(Actions.ADMIN_DETAIL_INITAL()); |
|
|
|
|
setInquiryForm({ |
|
|
|
|
category: '칭찬', |
|
|
|
|
contact: '', |
|
|
|
|
title: '', |
|
|
|
|
content: '' |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
setIsInquiryModalOpen(!isInquiryModalOpen); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 문의 등록 Form value change handler
|
|
|
|
|
const handlerChangeInquiryForm = useCallback( |
|
|
|
|
(type, val) => { |
|
|
|
|
if (type === 'contact') { |
|
|
|
|
const phoneNumber = val.replace(/[^0-9]/g, ''); |
|
|
|
|
setInquiryForm({ ...inquiryForm, [type]: phoneNumber }); |
|
|
|
|
} else { |
|
|
|
|
setInquiryForm({ ...inquiryForm, [type]: val }); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
[inquiryForm] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
// 문의 등록 event handler
|
|
|
|
|
const handlerSubmitInquiryForm = () => { |
|
|
|
|
const { category, title, content, contact } = inquiryForm; |
|
|
|
|
|
|
|
|
|
if (!contact) { |
|
|
|
|
setValidationModal({ |
|
|
|
|
...validationModal, |
|
|
|
|
errorType: { |
|
|
|
|
title: '필수값 입력 오류', |
|
|
|
|
isOpen: true, |
|
|
|
|
desc: '연락처를 입력해주세요.' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} else if (!title) { |
|
|
|
|
setValidationModal({ |
|
|
|
|
...validationModal, |
|
|
|
|
errorType: { |
|
|
|
|
title: '필수값 입력 오류', |
|
|
|
|
isOpen: true, |
|
|
|
|
desc: '제목을 입력해주세요.' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} else if (!content) { |
|
|
|
|
setValidationModal({ |
|
|
|
|
...validationModal, |
|
|
|
|
errorType: { |
|
|
|
|
title: '필수값 입력 오류', |
|
|
|
|
isOpen: true, |
|
|
|
|
desc: '내용을 입력해주세요.' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} else if (content.length > 300) { |
|
|
|
|
setValidationModal({ |
|
|
|
|
...validationModal, |
|
|
|
|
errorType: { |
|
|
|
|
title: '필수값 입력 오류', |
|
|
|
|
isOpen: true, |
|
|
|
|
desc: '300자 이하로 작성해주세요.' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let form = new FormData(); |
|
|
|
|
form.append('category', category); |
|
|
|
|
form.append('contact', contact); |
|
|
|
|
form.append('title', title); |
|
|
|
|
form.append('content', content); |
|
|
|
|
|
|
|
|
|
dispatch(Actions.USER_INQUIRY.request(form)); |
|
|
|
|
setIsInquiryModalOpen(false); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className='faq'> |
|
|
|
|
<div className='my-faq'> |
|
|
|
|
@ -119,6 +222,33 @@ export default function UserInquiryContainer() {
|
|
|
|
|
isInquiryModalOpen={isInquiryModalOpen} |
|
|
|
|
handlerInquiryModal={handlerInquiryModal} |
|
|
|
|
detail={detail} |
|
|
|
|
handlerChangeInquiryForm={handlerChangeInquiryForm} |
|
|
|
|
handlerSubmitInquiryForm={handlerSubmitInquiryForm} |
|
|
|
|
memberName={memberName} |
|
|
|
|
inquiryForm={inquiryForm} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<InfoModal |
|
|
|
|
modal={validationModal.successType} |
|
|
|
|
setModal={val => { |
|
|
|
|
setValidationModal({ |
|
|
|
|
...validationModal, |
|
|
|
|
successType: { |
|
|
|
|
...val |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
<ErrorModal |
|
|
|
|
modal={validationModal.errorType} |
|
|
|
|
setModal={val => { |
|
|
|
|
setValidationModal({ |
|
|
|
|
...validationModal, |
|
|
|
|
errorType: { |
|
|
|
|
...val |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
|
hhjk00
11 months ago