diff --git a/src/components/signinPage/Input.tsx b/src/components/signinPage/Input.tsx index ae8bfdce3..de82a25c1 100644 --- 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 { 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(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({ )} + {errors && } ); } diff --git a/src/pages/signin/index.tsx b/src/pages/signin/index.tsx index 06c3bf427..b3f82640d 100644 --- 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 && ( - - )}
@@ -100,12 +100,8 @@ function SigninPage() { type="password" placeholder="비밀번호를 입력해 주세요" validation={passwordValidation} + errors={errors} /> - {errors && ( - - )}
로그인 diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx index b2e2e6d77..96202fe45 100644 --- 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 && ( - - )} - {errors && ( - - )} - {errors && ( - - )} 회원가입