diff --git a/src/features/common/routes/HelpDesk/Form.tsx b/src/features/common/routes/HelpDesk/Form.tsx index f370e4de..d49c1e98 100644 --- a/src/features/common/routes/HelpDesk/Form.tsx +++ b/src/features/common/routes/HelpDesk/Form.tsx @@ -33,6 +33,18 @@ export default function Form({ goPrev, inquiryTypeName, setSuccess }: Props) { "이메일 형식이 올바르지 않습니다.", ]; + const titleErrorMessage = [ + "", + "문의 제목을 입력해 주세요.", + "문의 제목을 50자 내로 입력해 주세요.", + ]; + + const contentErrorMessage = [ + "", + "문의 내용을 입력해 주세요.", + "문의 내용을 1000자 내로 입력해 주세요.", + ]; + const handlerPrevClick = () => { goPrev(); resetForm(); @@ -64,8 +76,8 @@ export default function Form({ goPrev, inquiryTypeName, setSuccess }: Props) { type="text" placeholder="제목을 입력해 주세요.(최대 50자)" onChange={handleTitleChange} - warn={titleError} - message="문의 제목을 입력해 주세요." + warn={Boolean(titleError)} + message={titleError ? titleErrorMessage[titleError] : ""} required /> @@ -75,8 +87,8 @@ export default function Form({ goPrev, inquiryTypeName, setSuccess }: Props) { value={inquiryContent} onChange={handleContentChange} placeholder="내용을 입력해 주세요.(최대 1,000자)" - warn={contentError} - message="문의 내용을 입력해 주세요." + warn={Boolean(contentError)} + message={contentError ? contentErrorMessage[contentError] : ""} required /> diff --git a/src/features/common/routes/HelpDesk/useForm.ts b/src/features/common/routes/HelpDesk/useForm.ts index 69a9ccda..c4b8df81 100644 --- a/src/features/common/routes/HelpDesk/useForm.ts +++ b/src/features/common/routes/HelpDesk/useForm.ts @@ -10,8 +10,8 @@ export default function useForm({ setSuccess }: Props) { const [inquiryContent, setInquiryContent] = useState(""); const [emailError, setEmailError] = useState(0); - const [titleError, setTitleError] = useState(false); - const [contentError, setContentError] = useState(false); + const [titleError, setTitleError] = useState(0); + const [contentError, setContentError] = useState(0); const handleEmailChange = (e: React.ChangeEvent) => { setEmail(e.target.value); @@ -30,8 +30,8 @@ export default function useForm({ setSuccess }: Props) { setTitle(""); setInquiryContent(""); setEmailError(0); - setTitleError(false); - setContentError(false); + setTitleError(0); + setContentError(0); }; const send = () => { @@ -41,10 +41,24 @@ export default function useForm({ setSuccess }: Props) { else if (!emailPattern.test(email)) return 2; else return 0; }); - setTitleError(() => title === ""); - setContentError(() => inquiryContent === ""); + setTitleError(() => { + if (title === "") return 1; + else if (title.length > 50) return 2; + else return 0; + }); + setContentError(() => { + if (inquiryContent === "") return 1; + else if (inquiryContent.length > 1000) return 2; + else return 0; + }); + const ok = - emailPattern.test(email) && title !== "" && inquiryContent !== ""; + emailPattern.test(email) && + title !== "" && + title.length <= 50 && + inquiryContent !== "" && + inquiryContent.length <= 1000; + if (ok) { // TODO: API 요청 console.log("전송");