feat: 일반 auth 폼에 엔터시 제출하는 로직 추가

woowacourse-teams · Oct 22, 2024 · a897aff · a897aff
1 parent 579adb8
commit a897aff
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/frontend/src/components/_common/Button/Button.tsx b/frontend/src/components/_common/Button/Button.tsx
@@ -8,6 +8,7 @@ import theme from '@/styles/theme';
 
 type ButtonSize = 'xSmall' | 'small' | 'medium' | 'full';
 type ColorOption = 'light' | 'dark' | 'disabled';
+type ButtonType = 'button' | 'submit' | 'reset';
 
 interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   size?: ButtonSize;
@@ -18,6 +19,7 @@ interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
   Icon?: FunctionComponent<SVGProps<SVGSVGElement>>;
   id?: string;
+  type?: ButtonType;
 }
 
 const Button = ({
@@ -27,6 +29,7 @@ const Button = ({
   isSquare = false,
   onClick = () => {},
   disabled,
+  type = 'button',
   id,
   Icon,
   ...rest
@@ -49,6 +52,7 @@ const Button = ({
       disabled={disabled}
       aria-label={label}
       tabIndex={1}
+      type={type}
     >
       <FlexBox.Horizontal>
         {Icon && <Icon aria-hidden="true" />}

diff --git a/frontend/src/pages/SignInPage.tsx b/frontend/src/pages/SignInPage.tsx
@@ -52,6 +52,12 @@ const SignInPage = () => {
     }
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.keyCode === 13 && !disabled) {
+      handleSubmit();
+    }
+  };
+
   const handleMoveSignUp = () => {
     navigate(ROUTE_PATH.signUp);
   };
@@ -70,7 +76,7 @@ const SignInPage = () => {
         </S.LogoBox>
         <S.Box>
           <S.Label>로그인</S.Label>
-          <FormField>
+          <FormField onKeyDown={handleKeyDown}>
             <FormField.Label label="이메일" />
             <FormField.Input maxLength={254} value={email} name="email" onChange={onChangeEmail} />
             <FormField.ErrorMessage value={getEmailErrors()} />

diff --git a/frontend/src/pages/SignUpPage.tsx b/frontend/src/pages/SignUpPage.tsx
@@ -80,6 +80,12 @@ const SignUpPage = () => {
     navigate(ROUTE_PATH.root);
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.keyCode === 13 && !disabled) {
+      handleSubmit();
+    }
+  };
+
   return (
     <>
       <Header left={<Header.Backward onClick={handleClickLanding} />} />
@@ -90,7 +96,7 @@ const SignUpPage = () => {
         </S.LogoBox>
         <S.Box>
           <S.Label>회원가입</S.Label>
-          <FormField>
+          <FormField onKeyDown={handleKeyDown}>
             <FormField.Label label="이메일" />
             <FormField.Input value={email} name="email" onChange={onChangeEmail} maxLength={254} />
             <FormField.ErrorMessage value={getEmailError()} />