From 7e4b4565e9dca0d9b53e66fa10cbe1c56be98477 Mon Sep 17 00:00:00 2001 From: zxcv3508 Date: Thu, 13 Jul 2023 17:12:43 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EC=A0=95=EA=B7=9C=20=ED=91=9C?= =?UTF-8?q?=ED=98=84=EC=8B=9D=EC=9D=84=20=EC=9D=B4=EC=9A=A9=ED=95=9C=20?= =?UTF-8?q?=EB=8B=89=EB=84=A4=EC=9E=84=EC=9D=98=20=EC=98=81=EC=96=B4,=20?= =?UTF-8?q?=ED=95=9C=EA=B8=80=EB=A1=9C=EB=A7=8C=20=EA=B5=AC=EC=84=B1?= =?UTF-8?q?=EB=90=98=EA=B2=8C=20=EC=A0=9C=ED=95=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 한글과 영어로만 구성되는 닉네임 규칙에따라 제한 - 정규 표현식으로 한글, 영어가 아닌 문자는 빈문자로 대체시킴 = 테스트 결과 개행이 들어갈 수있어서 추가로 개행도 대체 표현식에 추가시킴 --- src/pages/home/components/profile/editor/ProfileText.jsx | 5 +++++ src/pages/signup/components/SignUpUser.jsx | 2 ++ 2 files changed, 7 insertions(+) diff --git a/src/pages/home/components/profile/editor/ProfileText.jsx b/src/pages/home/components/profile/editor/ProfileText.jsx index 9a6f29d6..9023a831 100644 --- a/src/pages/home/components/profile/editor/ProfileText.jsx +++ b/src/pages/home/components/profile/editor/ProfileText.jsx @@ -7,6 +7,11 @@ export default function ProfileText({ userData, setUserData }) { { + 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/signup/components/SignUpUser.jsx b/src/pages/signup/components/SignUpUser.jsx index e15b08fc..1e17befa 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); }; From 12284d174a6a0b30ba09f7a5674de8f18c4599c1 Mon Sep 17 00:00:00 2001 From: zxcv3508 Date: Fri, 14 Jul 2023 18:38:59 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=20=EB=8B=89?= =?UTF-8?q?=EB=84=A4=EC=9E=84=20=EC=A0=9C=EC=99=B8=20input=EA=B0=92=20?= =?UTF-8?q?=EC=A0=9C=EC=96=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 유저 닉네임을 제외한 모든 input 값에 대해 앞 뒤 공백제거 적용 - onChange에 useInput 훅의 onHandler 를 사용하는 곳 전부에 적용 시키조가 useInput 변경 앞 공백 제거 - 아이템 추가/수정 컴포넌트에서 아이템 닉네임, 브랜드 input에서 onBlur시 뒷 공백 제거 - 사용자가 엔터를 치는 경우에도 같은 동작을 하기위해 onsubmit 시 trim된 값 서버에 전달 --- src/hooks/useInput.jsx | 2 ++ .../components/modification/ItemAdd/ItemAddDetail.jsx | 10 ++++++++-- .../modification/ItemEdit/ItemEditDetail.jsx | 10 ++++++++-- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/hooks/useInput.jsx b/src/hooks/useInput.jsx index 7f638ff6..f82e5d66 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.lengght); setValue(e.target.value); }, []); return [value, handler, setValue]; diff --git a/src/pages/item/components/modification/ItemAdd/ItemAddDetail.jsx b/src/pages/item/components/modification/ItemAdd/ItemAddDetail.jsx index f7a081cf..55941c59 100644 --- a/src/pages/item/components/modification/ItemAdd/ItemAddDetail.jsx +++ b/src/pages/item/components/modification/ItemAdd/ItemAddDetail.jsx @@ -39,14 +39,18 @@ const ItemAddDetail = ({ category, submitCallback, onCancel }) => { 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 ( @@ -58,6 +62,7 @@ const ItemAddDetail = ({ category, submitCallback, onCancel }) => { { { } setIsError(false); editCallback({ - nickname, + nickname: nickname.trim(), type, - brand, + brand: brand.trim(), price, purchaseDate, goalUsageCount, }); }; + const handleInputBlur = (e) => { + e.preventDefault(); + e.target.value = e.target.value.trim(); + }; return ( @@ -61,6 +65,7 @@ const ItemEditDetail = ({ itemDetail, editCallback, onCancel }) => { { Date: Wed, 26 Jul 2023 14:12:26 +0900 Subject: [PATCH 3/5] Update src/hooks/useInput.jsx Co-authored-by: Sumin Song --- src/hooks/useInput.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useInput.jsx b/src/hooks/useInput.jsx index f82e5d66..1f0e6b83 100644 --- a/src/hooks/useInput.jsx +++ b/src/hooks/useInput.jsx @@ -4,7 +4,7 @@ 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.lengght); + e.target.value = e.target.value.slice(1, e.target.value.length); setValue(e.target.value); }, []); return [value, handler, setValue]; From fdb56f2782135e1247a26b4c1c451809c438432d Mon Sep 17 00:00:00 2001 From: zxcv3508 <37266744+zxcv3508@users.noreply.github.com> Date: Wed, 26 Jul 2023 14:12:38 +0900 Subject: [PATCH 4/5] Update src/pages/item/components/modification/ItemEdit/ItemEditDetail.jsx Co-authored-by: Sumin Song --- .../item/components/modification/ItemEdit/ItemEditDetail.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/item/components/modification/ItemEdit/ItemEditDetail.jsx b/src/pages/item/components/modification/ItemEdit/ItemEditDetail.jsx index 98ce953f..cc9bc08b 100644 --- a/src/pages/item/components/modification/ItemEdit/ItemEditDetail.jsx +++ b/src/pages/item/components/modification/ItemEdit/ItemEditDetail.jsx @@ -53,7 +53,6 @@ const ItemEditDetail = ({ itemDetail, editCallback, onCancel, isMutating }) => { }); }; const handleInputBlur = (e) => { - e.preventDefault(); e.target.value = e.target.value.trim(); }; From 6f3c56ecbf31f61a405fed98349202fd51e0ff63 Mon Sep 17 00:00:00 2001 From: zxcv3508 Date: Wed, 26 Jul 2023 15:06:09 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=EC=84=9C=EB=B2=84=20=EA=B2=80?= =?UTF-8?q?=EC=A6=9D=20=ED=9B=84=20=EC=95=88=EB=82=B4=20alert=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 한 가지 입력값만이 아니라 모든 양식 데이터에대한 검증의 결과이므로 일단 잘못된 양식을 제출했다는 안내 제공 --- src/pages/home/components/profile/editor/ProfileEditor.jsx | 5 +++++ src/pages/item/components/modification/ItemAdd/ItemAdd.jsx | 5 +++++ src/pages/item/components/modification/ItemEdit/ItemEdit.jsx | 5 +++++ 3 files changed, 15 insertions(+) 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/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/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);