Kernel360 · julia98percent · May 13, 2025 · May 13, 2025 · May 13, 2025
diff --git 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<HTMLInputElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
 }
 
-const PasswordInput = ({ password, handleChangePassword }: Props) => {
+const PasswordInput = ({
+  password,
+  handleChangePassword,
+  onKeyDown,
+}: Props) => {
   return (
     <TextField
       label="비밀번호"
       type="password"
       value={password}
       onChange={handleChangePassword}
+      onKeyDown={onKeyDown}
     />
   );
 };

diff --git 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 (
     <div className="h-screen bg-gray-50">
       <div className="h-full flex">
@@ -71,10 +77,12 @@ const SignInPage = () => {
               <UserIdInput
                 userId={userId}
                 handleChangeUserId={handleChangeUserId}
+                onKeyDown={handleKeyDown}
               />
               <PasswordInput
                 password={password}
                 handleChangePassword={handleChangePassword}
+                onKeyDown={handleKeyDown}
               />
             </div>
 

diff --git 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<HTMLInputElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
 }
 
-const UserIdInput = ({ userId, handleChangeUserId }: Props) => {
+const UserIdInput = ({ userId, handleChangeUserId, onKeyDown }: Props) => {
   return (
-    <TextField label="아이디" value={userId} onChange={handleChangeUserId} />
+    <TextField
+      label="아이디"
+      value={userId}
+      onChange={handleChangeUserId}
+      onKeyDown={onKeyDown}
+    />
   );
 };
 

diff --git a/src/pages/SignUpPage/EmailInput.tsx b/src/pages/SignUpPage/EmailInput.tsx
@@ -1,13 +1,15 @@
 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;
   handleChangeEmail: (e: ChangeEvent<HTMLInputElement>) => void;
   error?: boolean;
   helperText?: string;
   onBlur?: () => void;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
 }
 
 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 (
     <div style={{ position: "relative" }}>
-      <TextField
+      <TextFieldComponent
         label="이메일"
         value={email}
         onChange={handleChangeEmail}
         onBlur={onBlur}
+        onKeyDown={onKeyDown}
         fullWidth
         required
         variant="outlined"

diff --git a/src/pages/SignUpPage/NameInput.tsx b/src/pages/SignUpPage/NameInput.tsx
@@ -1,13 +1,15 @@
 import { ChangeEvent } from "react";
 import { TextField, Tooltip } from "@mui/material";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import TextFieldComponent from "@components/TextField";
 
 export interface NameInputProps {
   name: string;
   handleChangeName: (e: ChangeEvent<HTMLInputElement>) => void;
   error?: boolean;
   helperText?: string;
   onBlur?: () => void;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
 }
 
 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 (
     <div style={{ position: "relative" }}>
-      <TextField
+      <TextFieldComponent
         fullWidth
         required
         label="이름"
         value={name}
         onChange={handleChangeName}
         onBlur={onBlur}
+        onKeyDown={onKeyDown}
         error={isError}
         placeholder="2자 이상 20자 이하로 입력해주세요"
         InputProps={{

diff --git a/src/pages/SignUpPage/PasswordInput.tsx b/src/pages/SignUpPage/PasswordInput.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 PasswordInputProps {
   password: string;
@@ -10,6 +11,7 @@ export interface PasswordInputProps {
   error?: boolean;
   helperText?: string;
   onBlur?: () => void;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
 }
 
 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 (
     <>
       <div style={{ position: "relative" }}>
-        <TextField
+        <TextFieldComponent
           fullWidth
           required
           type="password"
@@ -62,10 +65,11 @@ const PasswordInput = ({
               </Tooltip>
             ),
           }}
+          onKeyDown={onKeyDown}
         />
       </div>
       <div style={{ position: "relative" }}>
-        <TextField
+        <TextFieldComponent
           fullWidth
           required
           type="password"
@@ -86,6 +90,7 @@ const PasswordInput = ({
               </Tooltip>
             ),
           }}
+          onKeyDown={onKeyDown}
         />
       </div>
     </>

diff --git 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<HTMLInputElement>;
 }
 
-
 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
@@ -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}
               />
               <UserIdInput
                 userId={userId}
                 handleChangeUserId={handleChangeUserId}
                 onBlur={() => handleBlur("userId", userId)}
+                onKeyDown={handleKeyDown}
               />
               <EmailInput
                 email={email}
                 handleChangeEmail={handleChangeEmail}
                 onBlur={() => handleBlur("email", email)}
+                onKeyDown={handleKeyDown}
               />
               <PasswordInput
                 password={password}
                 passwordCheck={passwordCheck}
                 handleChangePassword={handleChangePassword}
                 handleChangePasswordCheck={handleChangePasswordCheck}
+                onKeyDown={handleKeyDown}
               />
               <PhoneNumberInput
                 phoneNumber={phoneNumber}
                 handleChangePhoneNumber={handleChangePhoneNumber}
                 onBlur={() => 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) => (
                     <MenuItem key={q.uid} value={q.uid}>
@@ -212,6 +239,7 @@ const SignUpPage = () => {
                 value={questionAnswer}
                 onChange={(e) => setQuestionAnswer(e.target.value)}
                 placeholder="질문에 대한 답변을 입력해주세요"
+                onKeyDown={handleKeyDown}
               />
             </div>