input 규칙 적용

src/hooks/useInput.jsx

@@ -3,6 +3,8 @@ import { useCallback, useState } from "react";
 const useInput = (initialValue) => {
   const [value, setValue] = useState(initialValue);
   const handler = useCallback((e) => {
+    if (e.target.value[0] && e.target.value[0] === " ")
+      e.target.value = e.target.value.slice(1, e.target.value.length);
     setValue(e.target.value);
   }, []);
   return [value, handler, setValue];

src/pages/home/components/profile/editor/ProfileEditor.jsx

@@ -29,6 +29,11 @@ export default function ProfileEditor({ setIsEditing }) {
       queryClient.refetchQueries(["user"]);
       setIsEditing();
     },
+    onError: (code) => {
+      if (code.response.status === 400) {
+        alert("잘못된 양식을 제출했어요!");
+      }
+    },
   });
 
   const handleSubmit = (e) => {

src/pages/home/components/profile/editor/ProfileText.jsx

@@ -7,6 +7,11 @@ function ProfileText({ userData, setUserData }, ref) {
       <S.ProfileText
         value={userData.nickname}
         onChange={(e) => {
+          e.preventDefault();
+          const inputException = /((?![ㄱ-ㅎ|ㅏ-ㅣ|가-힣]|[a-zA-Z]).)|\n|$/g;
+          if (e.target.value.length > 8)
+            e.target.value = e.target.value.slice(0, 8);
+          e.target.value = e.target.value.replace(inputException, "");
           setUserData({ ...userData, nickname: e.target.value });
         }}
         rows={1}

src/pages/item/components/modification/ItemAdd/ItemAdd.jsx

@@ -20,6 +20,11 @@ const ItemAddOnAuth = () => {
       await queryClient.refetchQueries([`${item.category}`, "list"]);
       navigate("/item", { state: { item: res.id, category: item.category } });
     },
+    onError: (code) => {
+      if (code.response.status === 400) {
+        alert("잘못된 양식을 제출했어요!");
+      }
+    },
   });
 
   const itemImgFile = useRef(null);

src/pages/item/components/modification/ItemAdd/ItemAddDetail.jsx

@@ -41,14 +41,18 @@ const ItemAddDetail = ({ category, submitCallback, onCancel, isMutating }) => {
     setIsError(false);
     submitCallback({
       category,
-      nickname,
-      brand,
+      nickname: nickname.trim(),
+      brand: brand.trim(),
       price,
       purchaseDate,
       type,
       goalUsageCount,
     });
   };
+  const handleInputBlur = (e) => {
+    e.preventDefault();
+    e.target.value = e.target.value.trim();
+  };
 
   return (
     <S.Form onSubmit={handleSubmit}>
@@ -61,6 +65,7 @@ const ItemAddDetail = ({ category, submitCallback, onCancel, isMutating }) => {
             type="text"
             value={nickname}
             onChange={onNickname}
+            onBlur={handleInputBlur}
             minLength={2}
             maxLength={8}
           />
@@ -71,6 +76,7 @@ const ItemAddDetail = ({ category, submitCallback, onCancel, isMutating }) => {
             type="text"
             value={brand}
             onChange={onBrand}
+            onBlur={handleInputBlur}
             minLength={1}
             maxLength={10}
           />

src/pages/item/components/modification/ItemEdit/ItemEdit.jsx

@@ -35,6 +35,11 @@ const ItemEditOnAuth = () => {
       queryClient.invalidateQueries([`${item.category}`, "list"]);
       navigate("/item", { state: { item: item.id, category: item.category } });
     },
+    onError: (code) => {
+      if (code.response.status === 400) {
+        alert("잘못된 양식을 제출했어요!");
+      }
+    },
   });
 
   const itemImgFile = useRef(null);

src/pages/item/components/modification/ItemEdit/ItemEditDetail.jsx

@@ -44,14 +44,17 @@ const ItemEditDetail = ({ itemDetail, editCallback, onCancel, isMutating }) => {
     }
     setIsError(false);
     editCallback({
-      nickname,
+      nickname: nickname.trim(),
       type,
-      brand,
+      brand: brand.trim(),
       price,
       purchaseDate,
       goalUsageCount,
     });
   };
+  const handleInputBlur = (e) => {
+    e.target.value = e.target.value.trim();
+  };
 
   return (
     <S.Form onSubmit={handleSubmit}>
@@ -64,6 +67,7 @@ const ItemEditDetail = ({ itemDetail, editCallback, onCancel, isMutating }) => {
             type="text"
             value={nickname}
             onChange={onNickname}
+            onBlur={handleInputBlur} 
             minLength={2}
             maxLength={8}
             placeholder={itemDetail.nickname}
@@ -75,6 +79,7 @@ const ItemEditDetail = ({ itemDetail, editCallback, onCancel, isMutating }) => {
             type="text"
             value={brand}
             onChange={onBrand}
+            onBlur={handleInputBlur}
             minLength={1}
             maxLength={10}
             placeholder={itemDetail.brand}

src/pages/signup/components/SignUpUser.jsx

@@ -18,7 +18,9 @@ function SignUpUser(
   };
 
   const handleNicknameInput = (e) => {
+    const inputException = /((?![ㄱ-ㅎ|ㅏ-ㅣ|가-힣]|[a-zA-Z]).)|\n|$/g;
     lengthSliceInKorean(e);
+    e.target.value = e.target.value.replace(inputException, "");
     setUserInput({ ...userInput, nickname: e.target.value });
     if (warningText) setWarningText(null);
   };