refactor: 로그인 실패시 오류 메세지 추가, 오류시 인풋 border 색깔 변경되게 구현

codeit-bootcamp-frontend · Apr 7, 2024 · 9231d9a · 9231d9a
1 parent 0939f8f
commit 9231d9a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 30 deletions.
diff --git a/src/components/signinPage/Input.tsx b/src/components/signinPage/Input.tsx
@@ -3,7 +3,8 @@ import React, { InputHTMLAttributes, RefObject, useRef, useState } from "react";
 import styled from "styled-components";
 import setPwOff from "@/public/Icons/eye-off.svg";
 import setPwOn from "@/public/Icons/eye-on.svg";
-import { UseFormRegisterReturn, UseFormReturn, useForm } from "react-hook-form";
+import { FieldErrors, UseFormRegisterReturn, useForm } from "react-hook-form";
+import ErrorMesage from "./ErrorMesage";
 
 type InputStyledProps = {
   $error?: boolean;
@@ -49,7 +50,7 @@ const ImgPosition = styled.div`
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   id: string;
   placeholder: string;
-  error?: boolean;
+  errors: FieldErrors;
   label?: string;
   validation?: UseFormRegisterReturn;
 }
@@ -58,12 +59,13 @@ function Input({
   id,
   type = "text",
   placeholder,
-  error,
+  errors,
   label,
   validation,
 }: InputProps) {
   const [pwState, setPwState] = useState(false);
   const passwordRef = useRef<HTMLInputElement>(null);
+  const error = errors[id];
 
   const toggleEyesButton = () => {
     if (passwordRef.current) {
@@ -85,7 +87,7 @@ function Input({
           id={id}
           type={type}
           placeholder={placeholder}
-          $error={error}
+          $error={!!error}
           {...validation}
         />
         {type === "password" && (
@@ -98,6 +100,7 @@ function Input({
           </ImgPosition>
         )}
       </Layout>
+      {errors && <ErrorMesage text={error?.message?.toString()} />}
     </>
   );
 }

diff --git a/src/pages/signin/index.tsx b/src/pages/signin/index.tsx
@@ -43,6 +43,7 @@ function SigninPage() {
     register,
     formState: { errors },
     handleSubmit,
+    setError,
   } = useForm({ mode: "onBlur" });
 
   const emailValidation = register("userEmail", {
@@ -70,6 +71,9 @@ function SigninPage() {
       const { data } = res;
       window.localStorage.setItem("accessToken", data.accessToken);
       router.push("/folder");
+    } else {
+      setError("userEmail", { message: "이메일을 확인해주세요" });
+      setError("userPw", { message: "비밀번호를 확인해주세요" });
     }
   };
 
@@ -85,12 +89,8 @@ function SigninPage() {
               type="email"
               placeholder="이메일을 입력해 주세요"
               validation={emailValidation}
+              errors={errors}
             />
-            {errors && (
-              <ErrorMesage
-                text={errors.userEmail?.message?.toString()}
-              ></ErrorMesage>
-            )}
           </div>
 
           <div>
@@ -100,12 +100,8 @@ function SigninPage() {
               type="password"
               placeholder="비밀번호를 입력해 주세요"
               validation={passwordValidation}
+              errors={errors}
             />
-            {errors && (
-              <ErrorMesage
-                text={errors.userPw?.message?.toString()}
-              ></ErrorMesage>
-            )}
           </div>
           <SubmitBtn>로그인</SubmitBtn>
         </Form>

diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx
@@ -5,7 +5,6 @@ import SubmitBtn from "@/src/components/signinPage/SubmitBtn";
 import LogoBox from "@/src/components/signinPage/LogoBox";
 import { useForm } from "react-hook-form";
 import SocialBox from "@/src/components/signinPage/SocialBox";
-import ErrorMesage from "@/src/components/signinPage/ErrorMesage";
 import { chechEmail, signupRequest } from "@/src/utils/Api";
 import { useRouter } from "next/router";
 
@@ -103,36 +102,24 @@ function SignupPage() {
             type="email"
             placeholder="이메일을 입력해 주세요"
             validation={emailValidation}
+            errors={errors}
           />
-          {errors && (
-            <ErrorMesage
-              text={errors.userEmail?.message?.toString()}
-            ></ErrorMesage>
-          )}
           <Input
             label="비밀번호"
             id="userPw"
             type="password"
             placeholder="영문, 숫자를 조합해 8자 이상 입력해 주세요"
             validation={passwordValidation}
+            errors={errors}
           />
-          {errors && (
-            <ErrorMesage
-              text={errors.userPw?.message?.toString()}
-            ></ErrorMesage>
-          )}
           <Input
             label="비밀번호 확인"
             id="userPwCh"
             type="password"
             placeholder="비밀번호와 일치하는 값을 입력해 주세요"
             validation={passwordCheckValidation}
+            errors={errors}
           />
-          {errors && (
-            <ErrorMesage
-              text={errors.userPwCh?.message?.toString()}
-            ></ErrorMesage>
-          )}
           <SubmitBtn>회원가입</SubmitBtn>
         </Form>
         <SocialBox text="다른 방식으로 가입하기" />