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 ( - + ); }; 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} />