Commit 704bbe96 authored by 한규민's avatar 한규민
Browse files

signUp input css수정(아직 미완)

parent b24884e5
...@@ -19,15 +19,15 @@ const Signup = () => { ...@@ -19,15 +19,15 @@ const Signup = () => {
}) })
} }
const onlyNumber = (e) => { // const handleOnInput = (e) => {
const text = e.target.value; // if (el.value.length > e.target.attributes.docu) {
if(text !== typeof(1)){ // el.value
e.preventDefault(); // = el.value.substr(0, maxlength);
alert("숫자만 입력해주세요"); // }
} // }
}
const comparePassword = (userPassword, userRePassword, e) => { const comparePassword = () => {
if (userPassword !== userRePassword) { if (userText.userPassword !== userText.userRePassword) {
return alert("비밀번호가 같지 않습니다.") return alert("비밀번호가 같지 않습니다.")
} }
} }
...@@ -45,29 +45,29 @@ const Signup = () => { ...@@ -45,29 +45,29 @@ const Signup = () => {
</div> </div>
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>별명</label> <label className={styles.signupLabel}>별명</label>
<input className={styles.input} type="text" name="userName" id="userName" placeholder="10자리이내" onChange={handleUserOnChange} maxLength="10" required /> <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userName" id="userName" placeholder="10자리 이내" onChange={handleUserOnChange} maxLength="10" required />
</div> </div>
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>생년월일</label> <label className={styles.signupLabel}>생년월일</label>
<input className={styles.input} type="type" name="userBirthday" id="userBirthday" placeholder="6자리(예시: 991225)" onChange={handleUserOnChange} maxLength="6" minlength="6" required /> <input className={`${styles.input} ${styles.inputSize} ${styles.input.placeholder}`} type="number" name="userBirthday" id="userBirthday" placeholder="6자리(예시: 991225)" onChange={handleUserOnChange} maxLength="6" required />
</div> </div>
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>휴대폰 번호</label> <label className={styles.signupLabel}>휴대폰 번호</label>
<input className={`int ${styles.input}`} type="text" name="userMbnum" id="userMbnum" placeholder="-없이 11자리 입력" onChange={handleUserOnChange,onlyNumber} maxLength="11" minlength="11" required /> <input className={`${styles.input} ${styles.inputSize}`} type="number" name="userMbnum" id="userMbnum" placeholder="-없이 11자리 입력" onChange={handleUserOnChange} required />
</div> </div>
<div className={`${styles.inputContent}`}> <div className={`${styles.inputContent}`}>
<label className={styles.signupLabel}>비밀번호</label> <label className={styles.signupLabel}>비밀번호</label>
<input type="text" name="userPassword" id="password" placeholder="8자리 입력" onChange={handleUserOnChange} maxLength="8" minlength="8" required /> <input className={`${styles.input} ${styles.inputSize}`} type="text" name="userPassword" id="password" placeholder="8자리 입력" onChange={handleUserOnChange} maxLength="8" minlength="8" required />
</div> </div>
<div className={styles.inputContent}> <div className={styles.inputContent}>
<label className={styles.signupLabel}>비밀번호 확인</label> <label className={styles.signupLabel}>비밀번호 확인</label>
<div className="d-flex col-md-auto"> <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 /> <input className={styles.input} type="text" name="userRePassword" id="userRePassword" placeholder="8자리 입력" onChange={handleUserOnChange} maxLength="8" minlength="8" required />
<button className={`rounded-2 mt-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`}>중복확인</button> <button type="button" className={`rounded-2 mt-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} onClick={comparePassword}>중복확인</button>
</div> </div>
</div> </div>
<input className={`rounded-2 mt-3 ${styles.butterYellowAndBtn} ${styles.btnHover}`} type="submit" value="가입하기" onClick={comparePassword} /> <input className={`rounded-2 my-4 py-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} type="submit" value="가입하기" />
</div> </div>
{/* 아이디 중복 확인 모달창 */} {/* 아이디 중복 확인 모달창 */}
......
...@@ -21,12 +21,22 @@ ...@@ -21,12 +21,22 @@
padding: 0.5rem 0 0.5rem 0; padding: 0.5rem 0 0.5rem 0;
color:black; color:black;
border-radius: 3px; border-radius: 3px;
#userPassword{
padding: 0.7rem 0 0.7rem 0; }
} .input.placeholder{
text-align: center;
} }
.inputSize{
width: 15rem;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.butterYellowAndBtn{ .butterYellowAndBtn{
color: black;
background-color: #FEDC00; background-color: #FEDC00;
border: 1px solid black; border: 1px solid black;
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment