From f1c6e48bc09b99b8613992bf5634de599af364ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B1=84=EC=A7=80=EC=9B=90?= Date: Tue, 13 May 2025 18:46:26 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EB=8C=80=EC=8B=A0=20?= =?UTF-8?q?=EC=97=94=ED=84=B0=ED=82=A4=EB=A1=9C=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=EC=9A=94=EC=B2=AD=ED=95=A0=20=EC=88=98=20=EC=9E=88?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=BD=94=EB=93=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SignInPage/PasswordInput.tsx | 8 +++++++- src/pages/SignInPage/SignInPage.tsx | 8 ++++++++ src/pages/SignInPage/UserIdInput.tsx | 10 ++++++++-- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/pages/SignInPage/PasswordInput.tsx b/src/pages/SignInPage/PasswordInput.tsx index 82cb72c..5a8f89e 100644 --- a/src/pages/SignInPage/PasswordInput.tsx +++ b/src/pages/SignInPage/PasswordInput.tsx @@ -3,15 +3,21 @@ import TextField from "@components/TextField"; interface Props { password: string; handleChangePassword: React.ChangeEventHandler; + onKeyDown?: React.KeyboardEventHandler; } -const PasswordInput = ({ password, handleChangePassword }: Props) => { +const PasswordInput = ({ + password, + handleChangePassword, + onKeyDown, +}: Props) => { return ( ); }; diff --git a/src/pages/SignInPage/SignInPage.tsx b/src/pages/SignInPage/SignInPage.tsx index 7b08e40..cbdb0af 100644 --- a/src/pages/SignInPage/SignInPage.tsx +++ b/src/pages/SignInPage/SignInPage.tsx @@ -39,6 +39,12 @@ const SignInPage = () => { }); }; + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter" && !isSignInButtonDisabled) { + handleClickSignInButton(); + } + }; + return (
@@ -71,10 +77,12 @@ const SignInPage = () => {
diff --git a/src/pages/SignInPage/UserIdInput.tsx b/src/pages/SignInPage/UserIdInput.tsx index 9ad96f9..4d3719e 100644 --- a/src/pages/SignInPage/UserIdInput.tsx +++ b/src/pages/SignInPage/UserIdInput.tsx @@ -3,11 +3,17 @@ import TextField from "@components/TextField"; interface Props { userId: string; handleChangeUserId: React.ChangeEventHandler; + onKeyDown?: React.KeyboardEventHandler; } -const UserIdInput = ({ userId, handleChangeUserId }: Props) => { +const UserIdInput = ({ userId, handleChangeUserId, onKeyDown }: Props) => { return ( - + ); }; From f377ef9924c9aca0f5878c3f1f924cc8c6faddb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B1=84=EC=A7=80=EC=9B=90?= Date: Tue, 13 May 2025 18:49:33 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EB=8C=80?= =?UTF-8?q?=EC=8B=A0=20=EC=97=94=ED=84=B0=ED=82=A4=EB=A1=9C=20=ED=9A=8C?= =?UTF-8?q?=EC=9B=90=EA=B0=80=EC=9E=85=20=EC=9A=94=EC=B2=AD=ED=95=A0=20?= =?UTF-8?q?=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SignUpPage/EmailInput.tsx | 6 ++++- src/pages/SignUpPage/NameInput.tsx | 6 ++++- src/pages/SignUpPage/PasswordInput.tsx | 9 ++++++-- src/pages/SignUpPage/PhoneNumberInput.tsx | 21 +++++++++++++---- src/pages/SignUpPage/SignUpPage.tsx | 28 +++++++++++++++++++++++ 5 files changed, 61 insertions(+), 9 deletions(-) diff --git a/src/pages/SignUpPage/EmailInput.tsx b/src/pages/SignUpPage/EmailInput.tsx index 614191b..32f96c8 100644 --- a/src/pages/SignUpPage/EmailInput.tsx +++ b/src/pages/SignUpPage/EmailInput.tsx @@ -1,6 +1,7 @@ import { ChangeEvent } from "react"; import { TextField, Tooltip } from "@mui/material"; import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; +import TextFieldComponent from "@components/TextField"; export interface EmailInputProps { email: string; @@ -8,6 +9,7 @@ export interface EmailInputProps { error?: boolean; helperText?: string; onBlur?: () => void; + onKeyDown?: React.KeyboardEventHandler; } const isValidEmail = (email: string) => @@ -19,6 +21,7 @@ const EmailInput = ({ error, helperText, onBlur, + onKeyDown, }: EmailInputProps) => { const isError = error || (email && !isValidEmail(email)); const errorMessage = @@ -27,11 +30,12 @@ const EmailInput = ({ return (
- void; + onKeyDown?: React.KeyboardEventHandler; } const isValidName = (name: string) => { @@ -20,6 +22,7 @@ const NameInput = ({ error, helperText, onBlur, + onKeyDown, }: NameInputProps) => { const isError = error || (name && !isValidName(name)); const errorMessage = @@ -30,13 +33,14 @@ const NameInput = ({ return (
- void; + onKeyDown?: React.KeyboardEventHandler; } const isValidPassword = (pw: string) => @@ -25,6 +27,7 @@ const PasswordInput = ({ error, helperText, onBlur, + onKeyDown, }: PasswordInputProps) => { const isPasswordError = error || (password && !isValidPassword(password)); const isPasswordCheckError = @@ -45,7 +48,7 @@ const PasswordInput = ({ return ( <>
- ), }} + onKeyDown={onKeyDown} />
- ), }} + onKeyDown={onKeyDown} />
diff --git a/src/pages/SignUpPage/PhoneNumberInput.tsx b/src/pages/SignUpPage/PhoneNumberInput.tsx index 902f79f..9886b0d 100644 --- a/src/pages/SignUpPage/PhoneNumberInput.tsx +++ b/src/pages/SignUpPage/PhoneNumberInput.tsx @@ -8,12 +8,15 @@ export interface PhoneNumberInputProps { error?: boolean; helperText?: string; onBlur?: () => void; + onKeyDown?: React.KeyboardEventHandler; } - const isValidPhoneNumber = (phone: string) => { - return /^01[0|1|6|7|8|9]-\d{3,4}-\d{4}$/.test(phone) && (phone.length === 12 || phone.length === 13); -} + return ( + /^01[0|1|6|7|8|9]-\d{3,4}-\d{4}$/.test(phone) && + (phone.length === 12 || phone.length === 13) + ); +}; const formatPhoneNumber = (input: string): string => { const cleanedInput = input.replace(/[^0-9]/g, ""); @@ -25,7 +28,10 @@ const formatPhoneNumber = (input: string): string => { } else if (cleanedInput.length <= 6) { formattedNumber = cleanedInput.replace(/^(\d{2})(\d{0,4})/, "$1-$2"); } else { - formattedNumber = cleanedInput.replace(/^(\d{2})(\d{4})(\d{4})/, "$1-$2-$3"); + formattedNumber = cleanedInput.replace( + /^(\d{2})(\d{4})(\d{4})/, + "$1-$2-$3" + ); } if (formattedNumber.length > 11) { formattedNumber = formattedNumber.slice(0, 11); @@ -36,7 +42,10 @@ const formatPhoneNumber = (input: string): string => { } else if (cleanedInput.length <= 7) { formattedNumber = cleanedInput.replace(/^(\d{3})(\d{0,4})/, "$1-$2"); } else { - formattedNumber = cleanedInput.replace(/^(\d{3})(\d{4})(\d{4})/, "$1-$2-$3"); + formattedNumber = cleanedInput.replace( + /^(\d{3})(\d{4})(\d{4})/, + "$1-$2-$3" + ); } if (formattedNumber.length > 13) { formattedNumber = formattedNumber.slice(0, 13); @@ -52,6 +61,7 @@ const PhoneNumberInput = ({ error, helperText, onBlur, + onKeyDown, }: PhoneNumberInputProps) => { const isError = error || (phoneNumber && !isValidPhoneNumber(phoneNumber)); const errorMessage = @@ -80,6 +90,7 @@ const PhoneNumberInput = ({ value={phoneNumber} onChange={handleChange} onBlur={onBlur} + onKeyDown={onKeyDown} placeholder="010-1234-5678" type="tel" fullWidth diff --git a/src/pages/SignUpPage/SignUpPage.tsx b/src/pages/SignUpPage/SignUpPage.tsx index 7ea4bbb..91e5bbd 100644 --- a/src/pages/SignUpPage/SignUpPage.tsx +++ b/src/pages/SignUpPage/SignUpPage.tsx @@ -69,6 +69,27 @@ const SignUpPage = () => { } }; + const handleKeyDown = (e: React.KeyboardEvent) => { + if ( + e.key === "Enter" && + name && + userId && + email && + password && + passwordCheck && + phoneNumber && + questionAnswer && + isValidName(name) && + isValidUserId(userId) && + isValidEmail(email) && + isValidPassword(password) && + isValidPhoneNumber(phoneNumber) && + password === passwordCheck + ) { + handleClickSignUpButton(); + } + }; + const handleClickSignUpButton = () => { if (!isValidName(name)) { toast.error("이름을 올바르게 입력해주세요."); @@ -166,27 +187,32 @@ const SignUpPage = () => { name={name} handleChangeName={handleChangeName} onBlur={() => handleBlur("name", name)} + onKeyDown={handleKeyDown} /> handleBlur("userId", userId)} + onKeyDown={handleKeyDown} /> handleBlur("email", email)} + onKeyDown={handleKeyDown} /> handleBlur("phoneNumber", phoneNumber)} + onKeyDown={handleKeyDown} /> {/* Password Question Fields */} @@ -196,6 +222,7 @@ const SignUpPage = () => { value={passwordQuestionUid} onChange={(e) => setPasswordQuestionUid(e.target.value)} label="비밀번호 찾기 질문" + onKeyDown={handleKeyDown} > {PASSWORD_QUESTIONS.map((q) => ( @@ -212,6 +239,7 @@ const SignUpPage = () => { value={questionAnswer} onChange={(e) => setQuestionAnswer(e.target.value)} placeholder="질문에 대한 답변을 입력해주세요" + onKeyDown={handleKeyDown} />