[FrontEnd3] 무신사 로그인 창 제작

안녕하세요~ 보라해바라기입니다:)

 

오늘은 기존에 제작된 무신사 로그인 창(html, css는 존재)에 

 

JS와 Jquery 라이브러리를 이용해 기능을 추가해보았습니다.

 

 

목표

• 자동로그인 체크 기능 구현
• 비회원 구매약관 동의 체크 기능 구현
• 탭메뉴 클릭시 해당 내용을 보여주는 것
• 탭메뉴 클릭 시 클릭된 부분이 활성화되고 나머지는 비활성화 되는 것

 

1. JS (HTML과 CSS는 제공 자료이기 때문에 핸드메이드 코드만 공개하겠습니다!)

$(document).ready(function(){
    auto_login_check()
    nonmember_check()
    tab()
})

function auto_login_check(){
    $(".auto_check").click(function(){
        var stat = $(".auto_check").hasClass("off")
        if (stat===true){ // off
            var result = confirm("공용 PC에서 자동로그인은 위험합니다.")
            if(result===true){
                $(".auto_check").removeClass("off")
                $(".auto_check").addClass("on")
                $(".auto_check>a>img").attr("src", "./images/check_small_on.png")
            }
        } else if (stat===false){ //on
            $(".auto_check").removeClass("on")
            $(".auto_check").addClass("off")
            $(".auto_check>a>img").attr("src", "./images/check_small_off.png")
        }
    })
}

function nonmember_check(){
    $(".non_member_check").addClass("off")
    $(".non_member_check").click(function(){
        var stat = $(".non_member_check").hasClass("off")
        if (stat===true){ // off
            $(".non_member_check").removeClass("off")
            $(".non_member_check").addClass("on")
            $(".non_member_check>a>img").attr("src", "./images/check_small_on.png")
        } else if (stat===false){ //on
            $(".non_member_check").removeClass("on")
            $(".non_member_check").addClass("off")
            $(".non_member_check>a>img").attr("src", "./images/check_small_off.png")
        }
    })
}

function tab(){
    $("#tab_btn>a").click(function(){
        var idx = $(this).index()
        $("#tab_contents>div").hide()
        $("#tab_contents>div").eq(idx).show()

        $("#tab_btn>a").css({background: "#F1F1F1", color: "#AAAA"})
        $("#tab_btn>a").eq(idx).css({background: "white", color: "black"})
    })
}

 

2. 결과

자동로그인 체크와 비회원 구매약관 동의 체크

 

탭메뉴 이동 및 활성화