diff --git a/src/hooks/useInput.jsx b/src/hooks/useInput.jsx index 7f638ff6..1f0e6b83 100644 --- a/src/hooks/useInput.jsx +++ b/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]; diff --git a/src/pages/home/components/profile/editor/ProfileEditor.jsx b/src/pages/home/components/profile/editor/ProfileEditor.jsx index 00c50d62..b515baf5 100644 --- a/src/pages/home/components/profile/editor/ProfileEditor.jsx +++ b/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) => { diff --git a/src/pages/home/components/profile/editor/ProfileText.jsx b/src/pages/home/components/profile/editor/ProfileText.jsx index e9e13ad5..633e57ec 100644 --- a/src/pages/home/components/profile/editor/ProfileText.jsx +++ b/src/pages/home/components/profile/editor/ProfileText.jsx @@ -7,6 +7,11 @@ function ProfileText({ userData, setUserData }, ref) { { + 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} diff --git a/src/pages/item/components/modification/ItemAdd/ItemAdd.jsx b/src/pages/item/components/modification/ItemAdd/ItemAdd.jsx index 5643586c..6c887184 100644 --- a/src/pages/item/components/modification/ItemAdd/ItemAdd.jsx +++ b/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); diff --git a/src/pages/item/components/modification/ItemAdd/ItemAddDetail.jsx b/src/pages/item/components/modification/ItemAdd/ItemAddDetail.jsx index 167ff65a..0a9de493 100644 --- a/src/pages/item/components/modification/ItemAdd/ItemAddDetail.jsx +++ b/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 ( @@ -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} /> diff --git a/src/pages/item/components/modification/ItemEdit/ItemEdit.jsx b/src/pages/item/components/modification/ItemEdit/ItemEdit.jsx index 752ddbdc..1b4f88d7 100644 --- a/src/pages/item/components/modification/ItemEdit/ItemEdit.jsx +++ b/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); diff --git a/src/pages/item/components/modification/ItemEdit/ItemEditDetail.jsx b/src/pages/item/components/modification/ItemEdit/ItemEditDetail.jsx index 068e5010..cc9bc08b 100644 --- a/src/pages/item/components/modification/ItemEdit/ItemEditDetail.jsx +++ b/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 ( @@ -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} diff --git a/src/pages/signup/components/SignUpUser.jsx b/src/pages/signup/components/SignUpUser.jsx index 15aafa0c..5c0ed9f6 100644 --- a/src/pages/signup/components/SignUpUser.jsx +++ b/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); };