Signup.js 2.74 KB
Newer Older
한규민's avatar
한규민 committed
1
import styles from "./signup.module.scss";
2
import { useState } from 'react';
한규민's avatar
한규민 committed
3
4

const Signup = () => {
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

    const [userText, setUserState] = useState({
        userName: '',
        userBirthday: 0,
        userMbnum: 0,
        userPassword: '',
        userRePassword: ''
    })

    const handleUserOnChange = (e) => {
        setUserState({
            ...userText,
            [e.target.name]: e.target.value
        })
    }


한규민's avatar
한규민 committed
22
    return (
한규민's avatar
한규민 committed
23
24
        <div className={`d-flex ${styles.signup} col-md-8 col-12 justify-content-center`}>
            <div className="d-flex flex-column">
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
                {console.log(userText)}
                <div className={styles.contents}>
                    <label className={styles.signupLabel}>아이디</label>
                    <input className={styles.input} type="text" name="userName" id="userID" placeholder="8자리" onChange={handleUserOnChange} minlength="8" required />
                    <button className={` border-0 rounded-2 mt-2 ${styles.butterYellow} ${styles.btnHover}`}>중복확인</button>
                </div>
                <div className={styles.contents}>
                    <label className={styles.signupLabel}>별명</label>
                    <input className={styles.input} type="text" name="userName" id="userName" placeholder="별명" onChange={handleUserOnChange} minlength="8" required />
                </div>
                <div className={styles.contents}>
                    <label className={styles.signupLabel}>생년월일</label>
                    <input className={styles.input} type="number" name="userBirthday" id="userBirthday" placeholder="6자리" onChange={handleUserOnChange} minlength="6" required />
                </div>
                <div className={styles.contents}>
                    <label className={styles.signupLabel}>휴대폰 번호</label>
                    <input className={styles.input} type="number" name="userMbnum" id="userMbnum" placeholder="-없이 8자리 입력" onChange={handleUserOnChange} minlength="8" required />
                </div>
                <div className={styles.contents}>
                    <label className={styles.signupLabel}>비밀번호</label>
                    <input className={styles.input} type="text" name="userPassword" id="password" placeholder="비밀번호" onChange={handleUserOnChange} minlength="8" required />
                    <input className={styles.input} type="text" name="userRePassword" id="password" placeholder="비밀번호 확인" onChange={handleUserOnChange} minlength="8" required />
                </div>

                <input className={` border-0 rounded-2 mt-2 ${styles.butterYellow} ${styles.btnHover}`} type="submit" value="가입하기" />
            </div>
한규민's avatar
한규민 committed
51
52
53
54
55
        </div>
    )
}

export default Signup