feat : Input 태그 내부에 입력되는 아이디와 비밀번호가 적합한지에 대한 여부와 데이터베이스와 입력 받은 값을 비교하…

…였을 경우 일치하지 않을 경우 에러를 다루는 방식의 변경

package.json

@@ -28,6 +28,7 @@
     "eslint-config-next": "13.4.19",
     "gsap": "^3.12.4",
     "next": "^14.0.3",
+    "next-auth": "^4.24.5",
     "pg": "^8.11.3",
     "punycode": "^2.3.1",
     "react": "^18.2.0",

src/components/LoginForm/Form/Form.tsx

@@ -8,21 +8,21 @@ import LoginButton from "./LoginButton";
 function Form() {
   const [id, setId] = React.useState("");
   const [password, setPassword] = React.useState("");
-  const [isIdValid, setIsIdValid] = React.useState({
+  const [isValid, setIsValid] = React.useState({
     id: true,
     password: true,
   });
 
   const InputProps = {
     setId,
     setPassword,
-    isIdValid,
+    isValid,
   };
 
   const ButtonProps = {
     id,
     password,
-    setIsIdValid,
+    setIsValid,
   };
 
   return (

src/components/LoginForm/Form/LoginButton/LoginButton.tsx

@@ -3,7 +3,7 @@ import * as Styled from "../Form.styled";
 interface LoginButtonProps {
   id: string;
   password: string;
-  setIsIdValid: React.Dispatch<
+  setIsValid: React.Dispatch<
     React.SetStateAction<{
       id: boolean;
       password: boolean;
@@ -12,23 +12,23 @@ interface LoginButtonProps {
 }
 
 function LoginButton({ props }: { props: LoginButtonProps }) {
-  const { id, password, setIsIdValid } = props;
+  const { id, password, setIsValid } = props;
   return (
     <Styled.Button
       id={"submit-id-pwd-btn"}
       type="submit"
       onClick={() => {
         if (id.length >= 6 && id.length <= 20) {
-          setIsIdValid((prev) => ({ ...prev, id: true }));
+          setIsValid((prev) => ({ ...prev, id: true }));
         }
         if (password.length >= 8) {
-          setIsIdValid((prev) => ({ ...prev, password: true }));
+          setIsValid((prev) => ({ ...prev, password: true }));
         }
 
         if (id.length < 6 || id.length > 20) {
-          setIsIdValid((prev) => ({ ...prev, id: false }));
+          setIsValid((prev) => ({ ...prev, id: false }));
         } else if (password.length < 8) {
-          setIsIdValid((prev) => ({ ...prev, password: false }));
+          setIsValid((prev) => ({ ...prev, password: false }));
         }
       }}
     >

src/components/LoginForm/Form/LoginInput/LoginInput.tsx

@@ -1,20 +1,24 @@
+"use client";
+
+import { createPortal } from "react-dom";
 import InvalidMessage from "@/components/InvalidMessage";
 import Helper from "../Helper";
 import Id from "./Id";
 import Password from "./Password";
 import * as Styled from "../Form.styled";
+import React from "react";
 
 interface LoginInputProps {
   setId: React.Dispatch<React.SetStateAction<string>>;
   setPassword: React.Dispatch<React.SetStateAction<string>>;
-  isIdValid: {
+  isValid: {
     id: boolean;
     password: boolean;
   };
 }
 
 function LoginInput({ props }: { props: LoginInputProps }) {
-  const { setId, setPassword, isIdValid } = props;
+  const { setId, setPassword } = props;
 
   return (
     <>
@@ -23,14 +27,15 @@ function LoginInput({ props }: { props: LoginInputProps }) {
         <Password setPassword={setPassword} />
       </Styled.InputGroup>
       <Helper />
-      {isIdValid.id ? null : (
-        <InvalidMessage message={"아이디 입력이 잘못되었습니다."} />
-      )}
-      {isIdValid.password ? null : (
-        <InvalidMessage message={"비밀번호 입력이 잘못되었습니다."} />
-      )}
     </>
   );
 }
 
 export default LoginInput;
+
+// {isIdValid.id ? null : (
+//   <InvalidMessage message={"아이디 입력이 잘못되었습니다."} />
+// )}
+// {isIdValid.password ? null : (
+//   <InvalidMessage message={"비밀번호 입력이 잘못되었습니다."} />
+// )}