|
|
|
@ -2,7 +2,7 @@ import { Button, Badge } from 'reactstrap';
|
|
|
|
|
import AppCollapse from '@components/app-collapse'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import * as Actions from '../../../modules/cstmrService/inquiry/action'; |
|
|
|
|
import { Fragment, useCallback, useEffect, useState } from 'react'; |
|
|
|
|
import { Fragment, useCallback, useEffect, useRef, useState } from 'react'; |
|
|
|
|
import moment from 'moment'; |
|
|
|
|
import InquiryWrite from '../../../components/cstmrService/inquiry/InquiryWrite'; |
|
|
|
|
import { InfoModal } from '../../../components/modal/InfoModal'; |
|
|
|
@ -15,13 +15,16 @@ export default function UserInquiryContainer({ memberName }) {
|
|
|
|
|
state => state.qnaState |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const fileInputRef = useRef(null); |
|
|
|
|
const [isInquiryModalOpen, setIsInquiryModalOpen] = useState(false); |
|
|
|
|
const [inquiryForm, setInquiryForm] = useState({ |
|
|
|
|
category: '칭찬', |
|
|
|
|
contact: '', |
|
|
|
|
title: '', |
|
|
|
|
content: '' |
|
|
|
|
content: '', |
|
|
|
|
fileInfos: [] |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const [validationModal, setValidationModal] = useState({ |
|
|
|
|
errorType: { |
|
|
|
|
isOpen: false, |
|
|
|
@ -129,7 +132,8 @@ export default function UserInquiryContainer({ memberName }) {
|
|
|
|
|
category: '칭찬', |
|
|
|
|
contact: '', |
|
|
|
|
title: '', |
|
|
|
|
content: '' |
|
|
|
|
content: '', |
|
|
|
|
fileInfos: [] |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
setIsInquiryModalOpen(!isInquiryModalOpen); |
|
|
|
@ -148,9 +152,25 @@ export default function UserInquiryContainer({ memberName }) {
|
|
|
|
|
[inquiryForm] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const handlerFileChange = e => { |
|
|
|
|
const file = e.target.files[0]; |
|
|
|
|
setInquiryForm({ |
|
|
|
|
...inquiryForm, |
|
|
|
|
fileInfos: [file] |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerFileClear = () => { |
|
|
|
|
setInquiryForm({ |
|
|
|
|
...inquiryForm, |
|
|
|
|
fileInfos: [] |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 문의 등록 event handler
|
|
|
|
|
const handlerSubmitInquiryForm = type => { |
|
|
|
|
const { category, title, content, contact, qnaSno } = inquiryForm; |
|
|
|
|
const { category, title, content, contact, fileInfos, qnaSno } = |
|
|
|
|
inquiryForm; |
|
|
|
|
|
|
|
|
|
if (!contact) { |
|
|
|
|
setValidationModal({ |
|
|
|
@ -192,6 +212,34 @@ export default function UserInquiryContainer({ memberName }) {
|
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} else if (fileInfos.length > 0) { |
|
|
|
|
const allowedExtensions = ['jpg', 'png', 'jpeg', 'gif']; |
|
|
|
|
const fileExtension = fileInfos[0].name.split('.').pop().toLowerCase(); |
|
|
|
|
const maxFileSize = 3 * 1024 * 1024; // 3MB
|
|
|
|
|
|
|
|
|
|
if (!allowedExtensions.includes(fileExtension)) { |
|
|
|
|
setValidationModal({ |
|
|
|
|
...validationModal, |
|
|
|
|
errorType: { |
|
|
|
|
title: '파일 형식 오류', |
|
|
|
|
isOpen: true, |
|
|
|
|
desc: '파일 형식은 jpg, png, jpeg, gif 형식만 가능합니다.' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (fileInfos[0].size > maxFileSize) { |
|
|
|
|
setValidationModal({ |
|
|
|
|
...validationModal, |
|
|
|
|
errorType: { |
|
|
|
|
title: '파일 크기 오류', |
|
|
|
|
isOpen: true, |
|
|
|
|
desc: '파일 크기는 3MB를 초과할 수 없습니다.' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (type === 'post') { |
|
|
|
@ -201,6 +249,10 @@ export default function UserInquiryContainer({ memberName }) {
|
|
|
|
|
form.append('title', title); |
|
|
|
|
form.append('content', content); |
|
|
|
|
|
|
|
|
|
if (fileInfos.length > 0) { |
|
|
|
|
form.append('files', fileInfos[0]); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
dispatch(Actions.USER_INQUIRY.request(form)); |
|
|
|
|
} else if (type === 'edit') { |
|
|
|
|
dispatch( |
|
|
|
@ -249,13 +301,16 @@ export default function UserInquiryContainer({ memberName }) {
|
|
|
|
|
|
|
|
|
|
<InquiryWrite |
|
|
|
|
isInquiryModalOpen={isInquiryModalOpen} |
|
|
|
|
handlerInquiryModal={handlerInquiryModal} |
|
|
|
|
detail={detail} |
|
|
|
|
inquiryForm={inquiryForm} |
|
|
|
|
memberName={memberName} |
|
|
|
|
fileInputRef={fileInputRef} |
|
|
|
|
handlerChangeInquiryForm={handlerChangeInquiryForm} |
|
|
|
|
handlerSubmitInquiryForm={handlerSubmitInquiryForm} |
|
|
|
|
memberName={memberName} |
|
|
|
|
inquiryForm={inquiryForm} |
|
|
|
|
handlerInquiryModal={handlerInquiryModal} |
|
|
|
|
handlerDeleteConfirmInquiry={handlerDeleteConfirmInquiry} |
|
|
|
|
handlerFileChange={handlerFileChange} |
|
|
|
|
handlerFileClear={handlerFileClear} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<InfoModal |
|
|
|
|