Login.js 4.64 KB
Newer Older
한규민's avatar
한규민 committed
1
import { useState } from "react";
한규민's avatar
login    
한규민 committed
2
3
import styles from "./login.module.scss";

한규민's avatar
한규민 committed
4
const Login = () => {
5
6
    //useState를 이용해서 각 state 생성 및 초기값 저장
    const [state, setState] = useState(true); // 이 줄은 css에 해당하는 state
한규민's avatar
한규민 committed
7
    //state변수 지정 하지만 이 변수는 react에 의해 없어지지 않음, 그리고 그 다음 변수는 state변수를 갱신해주는 함수
한규민's avatar
한규민 committed
8
    const [login, setLogin] = useState({
9
10
11
        id:'',
        password:''
    });
한규민's avatar
한규민 committed
12
    const [success, setSuccess] = useState(false);
13
14
15
16
17
18
19
20
21
22
23
24

    const [guestText, setGusetText] = useState({
        guestName:'',
        gusetBirthday:'',
        gusetMbnum:'',
        guestPassword:''
    })

    //input태그에 걸려있는 onchange에서 실행할 함수설정
    const handleLoginOnChange = (e) =>{
        // ... 전개 연산자
        // 현재 state에 방금 변화한 값을 다시 저장함
한규민's avatar
한규민 committed
25
        setLogin({ ...login,
26
            [e.target.name]:e.target.value
27
28
29
30
31
32
33
34
        })
    };

    const handleGuestOnChange = (e) =>{
        setGusetText({ ...guestText,
            [e.target.name]:e.target.value
        })
    }
한규민's avatar
한규민 committed
35
36

    return (
한규민's avatar
한규민 committed
37
        <div className={`d-flex flex-column col-md-5 col-10`}>
한규민's avatar
한규민 committed
38
            {/* nav-tabs */}
한규민's avatar
한규민 committed
39
            {/* {console.log(login)} */}
한규민's avatar
한규민 committed
40
            <ul className="nav nav-fill nav-tabs w-100" id="loginTab" role="tablist">
한규민's avatar
login    
한규민 committed
41
                <li className="nav-item fs-6" role="presentation">
42
                    <button className={`nav-link active px-2 ${styles.fontSize}`} style={{ color: state ? "black" : "#FEDC00", backgroundColor: state ? "#FEDC00" : "black"}} 
한규민's avatar
login    
한규민 committed
43
44
                    id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true" 
                    onClick={() => setState(true)}>로그인</button>
한규민's avatar
한규민 committed
45
46
                </li>
                <li className="nav-item" role="presentation">
한규민's avatar
login    
한규민 committed
47
48
                    <button className={`nav-link px-2 ${styles.fontSize}`}
                    id="guest-tab" data-bs-toggle="tab" data-bs-target="#guest" type="button" role="tab" aria-controls="guest" aria-selected="false" 
49
                    onClick={() => setState(false)} style={{ color: state ? "#FEDC00" : "black", backgroundColor: state ? "black" : "#FEDC00" }}>비회원 예매 확인</button>
한규민's avatar
한규민 committed
50
51
                </li>
            </ul>
한규민's avatar
한규민 committed
52

한규민's avatar
한규민 committed
53
            <div className="tab-content w-100" id="myTabContent">
한규민's avatar
한규민 committed
54
55
                {/* 로그인 */}
                <div className="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
한규민's avatar
한규민 committed
56
                    <div className="d-flex flex-column ">
57
58
                        <input className={styles.input} type="text" name="id" placeholder="ID" onChange={handleLoginOnChange}/>
                        <input className={styles.input} type="text" name="password" placeholder="Password" onChange={handleLoginOnChange} minlength="8" required />
한규민's avatar
한규민 committed
59
                    <input className={`rounded-2 mt-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} type="submit" value="Login" />
한규민's avatar
한규민 committed
60
                        <span><a href="./signup" className={styles.intoSignupPage}>회원이 아니십니까?</a></span>
한규민's avatar
한규민 committed
61
62
63
64
65
                    </div>
                </div>

                {/* 비회원예매 학인 */}
                <div className="tab-pane fade" id="guest" role="tabpanel" aria-labelledby="guest-tab">
한규민's avatar
한규민 committed
66
                    <div className="d-flex flex-column">
67
68
69
70
                        <input className={styles.input} type="text" name="guestName" id="guestName" placeholder="이름" onChange={handleGuestOnChange} minlength="8" required />
                        <input className={styles.input} type="number" name="gusetBirthday" id="gusetBirthday" placeholder="생년월일" onChange={handleGuestOnChange} minlength="8" required />
                        <input className={styles.input} type="number" name="gusetMbnum" id="gusetMbnum" placeholder="휴대폰 번호" onChange={handleGuestOnChange} minlength="8" required />
                        <input className={styles.input} type="text" name="guestPassword" id="password" placeholder="비밀번호" onChange={handleGuestOnChange} minlength="8" required />
한규민's avatar
한규민 committed
71
72

                        <p className={`text-white ${styles.fontSizeTwo}`}>
한규민's avatar
한규민 committed
73
74
                             비회원 정보  입력  예매 내역 확인/취소  티켓 발권이 어려울  있으니 다시 한번 확인해 주시기 바랍니다.
                        </p>
한규민's avatar
한규민 committed
75
                            <input className={`rounded-2 mt-2 ${styles.butterYellowAndBtn} ${styles.btnHover}`} type="submit" value="비회원 예매 확인" />
한규민's avatar
한규민 committed
76
77
                    </div>
                </div>
한규민's avatar
login    
한규민 committed
78
79
80
81
82
83
            </div>
        </div>
    )
}

export default Login