비밀번호와 비밀번호 확인 동일여부 체크,

숫자타입 자리수 완료

client/src/components/Login/Login.js

@@ -22,7 +22,7 @@ const Login = () => {
         // ... 전개 연산자
         // 현재 state에 방금 변화한 값을 다시 저장함
         setLoginText({ ...loginText,
-            [e.target.name]:e.target.value,
+            [e.target.name]:e.target.value
         })
     };
 
@@ -36,7 +36,6 @@ const Login = () => {
         <div className={`d-flex flex-column col-md-5 col-10`}>
             {/* nav-tabs */}
             {/* {console.log(loginText)} */}
-            {console.log(guestText)}
             <ul className="nav nav-fill nav-tabs w-100" id="loginTab" role="tablist">
                 <li className="nav-item fs-6" role="presentation">
                     <button className={`nav-link active px-2 ${styles.fontSize}`} style={{ color: state ? "black" : "#FEDC00", backgroundColor: state ? "#FEDC00" : "black"}} 

client/src/components/Signup/Signup.js

@@ -11,36 +11,33 @@ const Signup = () => {
         userPassword: '',
         userRePassword: '',
     })
+    const [passwordError,setPasswordError] = useState(false);
 
     const handleUserOnChange = (e) => {
         setUserState({
             ...userText,
             [e.target.name]: e.target.value
         })
-    }
-
-    // const handleOnInput = (e) => {
-    //     if (el.value.length > e.target.attributes.docu) {
-    //         el.value
-    //             = el.value.substr(0, maxlength);
-    //     }
-    // }
+        if(e.target.name === "userRePassword"){
+        setPasswordError(e.target.value !== userText.userPassword);
+    }}
 
-    const comparePassword = () => {
-        if (userText.userPassword !== userText.userRePassword) {
-            return alert("비밀번호가 같지 않습니다.")
+    const onSubmit = (e) => {
+        e.preventDefault();
+        if(userText.userPassword !== userText.userRePassword){
+            return setPasswordError(true);
         }
+        console.log(userText);
     }
 
     return (
         <form className={`d-flex col-md-6 col-12 justify-content-center`}>
             <div className="d-flex flex-column">
-                {console.log(userText)}
                 <div className={styles.inputContent}>
                     <label className={styles.signupLabel}>아이디</label>
                     <div className="d-flex col-md-auto">
                         <input className={styles.input} type="text" name="userID" id="userID" placeholder="8자리입력" onChange={handleUserOnChange} maxLength="8" minlength="8" required />
-                        <button type="button" className={`btn btn-primary rounded-2 mt-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} data-bs-toggle="modal" data-bs-target="#exampleModal">중복확인</button>
+                        <button type="button" className={`rounded-2 mt-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} data-bs-toggle="modal" data-bs-target="#exampleModal">중복확인</button>
                     </div>
                 </div>
                 <div className={styles.inputContent}>
@@ -49,25 +46,25 @@ const Signup = () => {
                 </div>
                 <div className={styles.inputContent}>
                     <label className={styles.signupLabel}>생년월일</label>
-                    <input className={`${styles.input} ${styles.inputSize} ${styles.input.placeholder}`} type="number" name="userBirthday" id="userBirthday" placeholder="6자리(예시: 991225)" onChange={handleUserOnChange} maxLength="6" required />
+                    <input className={`${styles.input} ${styles.inputSize} ${styles.input.placeholder}`} type="number" name="userBirthday" id="userBirthday" placeholder="6자리(예시: 991225)" onChange={handleUserOnChange} min="0" max="999999" required />
                 </div>
                 <div className={styles.inputContent}>
                     <label className={styles.signupLabel}>휴대폰 번호</label>
-                    <input className={`${styles.input} ${styles.inputSize}`} type="number" name="userMbnum" id="userMbnum" placeholder="-없이 11자리 입력" onChange={handleUserOnChange} required />
+                    <input className={`${styles.input} ${styles.inputSize}`} type="number" name="userMbnum" id="userMbnum" placeholder="-없이 11자리 입력" onChange={handleUserOnChange} min="0" max="99999999999" required />
                 </div>
                 <div className={`${styles.inputContent}`}>
                     <label className={styles.signupLabel}>비밀번호</label>
                     <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userPassword" id="password" placeholder="8자리 입력" onChange={handleUserOnChange} maxLength="8" minlength="8" required />
                 </div>
-                <div className={styles.inputContent}>
-                    <label className={styles.signupLabel}>비밀번호 확인</label>
-                    <div className="d-flex col-md-auto">
-                        <input className={styles.input} type="text" name="userRePassword" id="userRePassword" placeholder="8자리 입력" onChange={handleUserOnChange} maxLength="8" minlength="8" required />
-                        <button type="button" className={`rounded-2 mt-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={comparePassword}>중복확인</button>
+                <div className="d-flex flex-column">
+                    <div className={styles.inputContent}>                    
+                        <label className={styles.signupLabel}>비밀번호 확인</label>
+                        <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userRePassword" id="userRePassword" placeholder="8자리 입력" onChange={handleUserOnChange} maxLength="8" minlength="8" required />
                     </div>
+                    {passwordError && <p className={styles.passwordConfirmError}>비밀번호가 일치하지 않습니다.</p>}
                 </div>
 
-                <input className={`rounded-2 my-4 py-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} type="submit" value="가입하기" />
+                <input className={`rounded-1 my-3 py-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} type="submit" value="가입하기" onClick={onSubmit}/>
             </div>
 
             {/* 아이디 중복 확인 모달창 */}
@@ -82,7 +79,7 @@ const Signup = () => {
                             이 아이디는 사용가능합니다.
                         </div>
                         <div class="modal-footer">
-                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
+                            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                         </div>
                     </div>
                 </div>

client/src/components/Signup/signup.module.scss

@@ -21,20 +21,18 @@
   padding: 0.5rem 0 0.5rem 0;
   color:black;
   border-radius: 3px;
-  
-}
-.input.placeholder{
   text-align: center;
 }
 
 .inputSize{
-  width: 15rem;
+  width: 15.3rem;
 }
 
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-    }
+  -webkit-appearance: none;
+}
+
 .butterYellowAndBtn{
   color: black;
 background-color:  #FEDC00;
@@ -53,4 +51,11 @@ border: 1px solid white ;
   color: black;
   border-color: none;
   box-shadow: none;
+}
+.passwordConfirmError{
+  margin-bottom: 0;
+  margin-top: 0.5rem;
+  text-align: end;
+  font-size: 13px;
+  color: #FEDC00;
 }
\ No newline at end of file