프론트엔드 공부/회원가입 실습

08일차 프론트엔드 공부 - 회원 가입 실습 2

프망생222 2024. 9. 4. 20:06

- 08일차 프론트엔드 공부 -

 

회원가입 페이지를 만들어보려고 한다

간단히 핸드폰 번호를 입력하고 인증번호를 생성하며 3분안에 인증을 해야한다.

또한 회원가입을 위한 정보를 입력하기 전에 가입하기 버튼을 누르면 입력하지 않은 칸 밑에 텍스트를 통해 보여주고 모두 입력 시 팝업을 통해 회원가입 축하 팝업을 출력할것이다.

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Signup</title>
    <script src="./signup.js"></script>
    <link href="./styles/signup.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="wrapper_header">회원가입</div>
        <div class="email">
            <input type="text" id= "email_box" class="email_box" placeholder="이메일을 입력해주세요."></input>
            <div class="email_hint" id="email_hint"></div>
        </div>
        <div class="name">
            <input type="text" id= "name_box" class="name_box" placeholder="이름을 입력해주세요."></input>
            <div class="name_hint" id="name_hint"></div>
        </div>
        <div class="pw1">
            <input type="password" id= "pw1_box" class="pw1_box" placeholder="비밀번호를 입력해주세요."></input>
            <div class="pw1_hint" id="pw1_hint"></div>
        </div>
        <div class="pw2">
            <input type="password" id= "pw2_box" class="pw2_box" placeholder="비밀번호를 다시 입력해주세요."></input>
            <div class="pw2_hint" id="pw2_hint"></div>
        </div>
        <div class="phone">
            <input type="text" class="p1" id="p1" oninput="changep1()" maxlength="3">
            <span> - </span>
            <input type="text" class="p2" id="p2" oninput="changep2()" maxlength="4">
            <span> - </span>
            <input type="text" class="p3" id="p3" oninput="phone3()" maxlength="4">
        </div>
        <div class="varification">
            <div class="num" id="num">000000</div>
            <button class="send_btn" id="send_btn" onclick="getNum()" disabled>인증번호 전송</button>
        </div>
        <div class="time">
            <div class="timer" id="timer">3:00</div>
            <button class="timer_btn" id="timer_btn" onclick="getTimerConfirm()"disabled>인증완료</button>
        </div>
        <div class="location_box">
            <select class="location" id="location">
                <option disabled="true" selected="true">지역을 선택하세요</option>
                <option>서울</option>
                <option>경기</option>
                <option>인천</option>
            </select>
            <div class="location_hint" id="location_hint"></div>
        </div>
        <div class="gender">
            <div class="gender_radio">
                <input type="radio" id="gender_woman" name="gender">여성
                <input type="radio" id="gender_man" name="gender">남성
            </div>
            <div class="gender_hint" id="gender_hint"></div>
        </div>
        <div class="line"></div>
        <button class="regist_btn" id="regist_btn" onclick="signup()" disabled>가입하기</button>
    </div>
</body>
</html>
* {
    box-sizing: border-box;
    margin: 0;
}

body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.wrapper {
    width: 540px;
    height: 960px;
    border: 1px solid #AACDFF;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 45px;
    background-color: white;
}

.wrapper_header {
    color: #0068FF;
    font-size: 32px;
    font-weight: 700;
    width: 380px;
    margin-bottom: 60px;
}

.email {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.email_box {
    width: 380px;
    height: 60px;
    border: 1px solid #0068FF;
    border-radius: 7px;
    font-size: 16px;
    padding: 18px;
    background-color: white;
}

.email_hint {
    height: 10px;
    color:red;
    font-size: 10px;
}

.name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.name_box {
    width: 380px;
    height: 60px;
    border: 1px solid #0068FF;
    border-radius: 7px;
    font-size: 16px;
    padding: 18px;
    background-color: white;
}

.name_hint {
    height: 10px;
    color:red;
    font-size: 10px;
}

.pw1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.pw1_box {
    width: 380px;
    height: 60px;
    border: 1px solid #0068FF;
    border-radius: 7px;
    font-size: 16px;
    padding: 18px;
    background-color: white;
}

.pw1_hint {
    height: 10px;
    color:red;
    font-size: 10px;
}

.pw2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.pw2_box {
    width: 380px;
    height: 60px;
    border: 1px solid #0068FF;
    border-radius: 7px;
    font-size: 16px;
    padding: 18px;
    background-color: white;
}

.pw2_hint {
    height: 10px;
    color:red;
    font-size: 10px;
}

.phone {
    width: 380px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.p1 {
    width: 100px;
    height: 40px;
    border: 1px solid #d2d2d2;
    border-radius: 7px;
}

.p2 {
    width: 100px;
    height: 40px;
    border: 1px solid #d2d2d2;
    border-radius: 7px;
}

.p3 {
    width: 100px;
    height: 40px;
    border: 1px solid #d2d2d2;
    border-radius: 7px;
}

.varification {
    display: flex;
    flex-direction: row;
    width: 380px;
    height: 40px;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
}

.num {
    width: 60px;
    height: 27px;
    font-size: 18px;
    color: #0068FF;
}

.send_btn {
    width: 120px;
    height: 40px;
    margin-left: 20px;
    background-color: #d2d2d2;
    color: white;
    font-size: 16px;
    border: 1px solid #d2d2d2;
    border-radius: 7px;
}

.time {
    display: flex;
    flex-direction: row;
    width: 380px;
    height: 40px;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
}

.timer {
    width: 60px;
    height: 27px;
    font-size: 18px;
    color: #0068FF;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.timer_btn {
    width: 120px;
    height: 40px;
    margin-left: 20px;
    background-color: #d2d2d2;
    color: white;
    font-size: 16px;
    border: 1px solid #d2d2d2;
    border-radius: 7px;
}

.location_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.location {
    width: 380px;
    height: 60px;
    padding: 18px;
    font-size: 16px;
    border: 1px solid #d2d2d2;
    border-radius: 7px;
    color: #797979;
}

.location_hint {
    height: 10px;
    color:red;
    font-size: 10px;
}

.gender {
    width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.gender_radio {
    width: 140px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: 16px;
}

.gender_hint {
    height: 10px;
    color:red;
    font-size: 10px;
}

.line {
    width: 380px;
    border-top: 1px solid #E6E6E6;
    margin-bottom: 20px;
}

.regist_btn {
    width: 380px;
    height: 75px;
    border: 1px solid #0068FF;
    border-radius: 10px;
    background-color: white;
    color: #0068FF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
const changep1 = () => {
    const p1 = document.getElementById("p1").value
    if(p1.length === 3) {
        document.getElementById("p2").focus()
    }
}

const changep2 = () => {
    const p2 = document.getElementById("p2").value
    if(p2.length === 4) {
        document.getElementById("p3").focus()
    }
}

const phone3 = () => {
    const p1 = document.getElementById("p1").value
    const p2 = document.getElementById("p2").value
    const p3 = document.getElementById("p3").value
    if(p1.length === 3 && p2.length === 4 && p3.length === 4){
        document.getElementById("send_btn").style = "background-color: white; color: #0068FF; border: 1px solid #0068FF; cursor: pointer"
        document.getElementById("send_btn").removeAttribute("disabled")
    }else{
    } 
}

const getNum = () => {
    const num = String(Math.floor(Math.random() * 1000000)).padStart(6, "0")
    document.getElementById("num").innerText = num

    document.getElementById("send_btn").style = "background-color: #FFFFFF; color: #d2d2d2; cursor: default;"
    document.getElementById("send_btn").setAttribute("disabled", "true")
    document.getElementById("timer_btn").style="background-color: #0068FF; color: #FFFFFF; cursor: pointer;"
    document.getElementById("timer_btn").removeAttribute("disabled")
    getTokenTimer()
}

let interval;
function getTokenTimer(){
    let timer = 180
    interval = setInterval(() => {
        if(timer >= 0){
            const minutes = Math.floor(timer / 60)
            const seconds = timer % 60

            document.getElementById("timer").innerText = minutes + ":" + String(seconds).padStart(2, "0")
            timer -= 1
        } else {
            document.getElementById("num").innerText = "000000"
            document.getElementById("send_btn").style = ""
            document.getElementById("send_btn").setAttribute("disabled", "true")

            document.getElementById("timer").innerText = "3:00"
            document.getElementById("timer_btn").style = ""
            document.getElementById("timer_btn").setAttribute("disabled", "true")

            clearInterval(interval)
        }
    }, 1000)
}

const getTimerConfirm = () => {
    clearInterval(interval)
    document.getElementById("timer_btn").style = "background-color: #FFFFFF; color: #d2d2d2;cursor: default;"
    document.getElementById("timer_btn").setAttribute("disabled", "true")
    document.getElementById("timer_btn").innerText = "인증완료"
    alert("인증이 완료되었습니다.")

    document.getElementById("regist_btn").style = "background-color: #FFFFFF; color: #0068FF; border: 1px solid #0068FF ;cursor: pointer;"
    document.getElementById("regist_btn").removeAttribute("disabled")
}

const signup = () => {
    const email = document.getElementById("email_box").value
    const name = document.getElementById("name_box").value
    const password1 = document.getElementById("pw1_box").value
    const password2 = document.getElementById("pw2_box").value
    const location = document.getElementById("location").value
    const gender_woman = document.getElementById("gender_woman").checked
    const gender_man = document.getElementById("gender_man").checked
    
    let valid = true

    if(email.includes("@") === false){
        document.getElementById("email_hint").innerText = "이메일이 올바르지 않습니다."
        valid = false
    }else{
        document.getElementById("email_hint").innerText = ""
    }

    if(name.trim() === ""){
        document.getElementById("name_hint").innerText = "이름을 입력해주세요."
        valid = false
    }else{
        document.getElementById("name_hint").innerText = ""
    }

    if(password1.trim() === ""){
        document.getElementById("pw1_hint").innerText = "비밀번호를 입력해주세요."
        valid = false
    }else{
        document.getElementById("pw1_hint").innerText = ""
    }

    if(password2.trim() === ""){
        document.getElementById("pw2_hint").innerText = "비밀번호를 입력해주세요."
        valid = false
    }else{
        document.getElementById("pw2_hint").innerText = ""
    }

    if(password1 !== password2){
        document.getElementById("pw2_hint").innerText = "비밀번호를 다시 확인해주세요."
        valid = false
    }else{
        document.getElementById("pw2_hint").innerText = ""
    }

    if(location === "지역을 선택하세요"){
        document.getElementById("location_hint").innerText = "지역을 선택해주세요."
        valid = false
    }else{
        document.getElementById("location_hint").innerText = ""
    }

    if(!gender_woman && !gender_man){
        document.getElementById("gender_hint").innerText = "성별을 선택해주세요."
        valid = false
    }else{
        document.getElementById("gender_hint").innerText = ""
    }

    if(valid === true){
        alert("회원가입을 환영합니다.")
    }
}

 

회원가입 기본 틀
인증 번호 생성
인증 완료 팝업

 

미입력 칸 안내
회원가입 팝업
 

'프론트엔드 공부 > 회원가입 실습' 카테고리의 다른 글

04일차 프론트엔드 공부 - 회원 가입 실습 1  (4) 2024.09.04

'프론트엔드 공부/회원가입 실습'의 다른글

  • 현재글08일차 프론트엔드 공부 - 회원 가입 실습 2

관련글

티스토리툴바