feat: 문의 제목, 문의 내용 글자수 검사 #80

oduck-team · Sep 7, 2023 · 4b522a1 · 4b522a1
1 parent e663c64
commit 4b522a1
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 11 deletions.
diff --git 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
           />
         </FormItem>
@@ -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
           />
         </FormItem>

diff --git 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<number>(0);
-  const [titleError, setTitleError] = useState(false);
-  const [contentError, setContentError] = useState(false);
+  const [titleError, setTitleError] = useState<number>(0);
+  const [contentError, setContentError] = useState<number>(0);
 
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     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("전송");