From 9231d9a857c5651adb4bd47a86e30f6c6bee6689 Mon Sep 17 00:00:00 2001
From: 78-artilleryman <ywy040150@gmail.com>
Date: Sun, 7 Apr 2024 19:39:31 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=8B=A4=ED=8C=A8=EC=8B=9C=20=EC=98=A4=EB=A5=98=20=EB=A9=94?=
 =?UTF-8?q?=EC=84=B8=EC=A7=80=20=EC=B6=94=EA=B0=80,=20=EC=98=A4=EB=A5=98?=
 =?UTF-8?q?=EC=8B=9C=20=EC=9D=B8=ED=92=8B=20border=20=EC=83=89=EA=B9=94=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=EB=90=98=EA=B2=8C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/signinPage/Input.tsx | 11 +++++++----
 src/pages/signin/index.tsx          | 16 ++++++----------
 src/pages/signup/index.tsx          | 19 +++----------------
 3 files changed, 16 insertions(+), 30 deletions(-)

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<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
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 && (
-              <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
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 && (
-            <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="다른 방식으로 가입하기" />