enter키로 로그인 구현

DSM-PICK · Mar 16, 2024 · 00ae1da · 00ae1da
2 parents 68ece50 + 9efa34e
commit 00ae1da
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/app/components/common/input/index.tsx b/src/app/components/common/input/index.tsx
@@ -1,5 +1,6 @@
 "use client";
-import { useState } from "react";
+
+import React, { useState } from "react";
 import Image from "next/image";
 import eye from "../../../../assets/img/Icon/eye.svg";
 import eyeOff from "../../../../assets/img/Icon/eyeOff.svg";
@@ -19,6 +20,7 @@ interface InputProps {
   onChange: ({ text, name }: ChangeProps) => void;
   disabled?: boolean;
   value: string;
+  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 const Input: React.FC<InputProps> = ({
@@ -30,6 +32,7 @@ const Input: React.FC<InputProps> = ({
   disabled,
   value,
   error,
+  onKeyDown,
   name = "",
 }) => {
   const [showOpen, setShowOpen] = useState<boolean>(false);
@@ -44,7 +47,7 @@ const Input: React.FC<InputProps> = ({
     }
     `;
 
-  const inputClassName = ` h-10 px-2 border-none bg-transparent placeholder-neutral-500 
+  const inputClassName = ` h-10 w-full px-2 border-none bg-transparent placeholder-neutral-500 
     focus:outline-none rounded font-sans
     `;
 
@@ -59,6 +62,7 @@ const Input: React.FC<InputProps> = ({
           value={value}
           onChange={(e) => onChange({ text: e.target.value, name })}
           disabled={disabled}
+          onKeyDown={onKeyDown}
         />
         {type === "password" && (
           <div onClick={() => setShowOpen(!showOpen)} className="">

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -30,6 +30,11 @@ const Login: NextPage = () => {
   const handleChange = ({ text, name }: ChangeProps) => {
     setData({ ...data, [name]: text });
   };
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      onClickBtn();
+    }
+  };
 
   const { mutate: loginMutate } = useLogin();
   const router = useRouter();
@@ -50,7 +55,7 @@ const Login: NextPage = () => {
       });
     } catch (error) {
       console.error("An unexpected error occurred:", error);
-        router.push("/login");
+      router.push("/login");
     }
   };
 
@@ -76,6 +81,7 @@ const Login: NextPage = () => {
                 placeholder="아이디"
                 onChange={handleChange}
                 value={data.admin_id}
+                onKeyDown={handleKeyDown}
                 name="admin_id"
               />
               <div className="flex flex-col gap-6">
@@ -85,6 +91,7 @@ const Login: NextPage = () => {
                   label="비밀번호"
                   placeholder="비밀번호"
                   onChange={handleChange}
+                  onKeyDown={handleKeyDown}
                   name="password"
                   value={data.password}
                 />