From 4b522a10f7c94f97e3b828f2f7dfac47b74a3025 Mon Sep 17 00:00:00 2001
From: mihee <s2809h29@gmail.com>
Date: Thu, 7 Sep 2023 23:44:14 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AC=B8=EC=9D=98=20=EC=A0=9C=EB=AA=A9?=
 =?UTF-8?q?,=20=EB=AC=B8=EC=9D=98=20=EB=82=B4=EC=9A=A9=20=EA=B8=80?=
 =?UTF-8?q?=EC=9E=90=EC=88=98=20=EA=B2=80=EC=82=AC=20#80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/common/routes/HelpDesk/Form.tsx  | 20 ++++++++++---
 .../common/routes/HelpDesk/useForm.ts         | 28 ++++++++++++++-----
 2 files changed, 37 insertions(+), 11 deletions(-)

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
           />
         </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
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<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("전송");