<aside> 💡 실제 로그인과 회원가입이 가능한 페이지이다.

• 기존에 있는 아이디와 비밀번호를 입력하면 로그인이 되고, 메인홈페이지의 회색바에 로그아웃 이라고(로그인이 되었으므로 로그아웃이 되려면 로그아웃 버튼을 눌러라 라는 의미) 나와있고,

• 회원가입 버튼을 누르면 회원가입을 할 수 있는 페이지로 넘어간다.

• 카카오 로그인/회원가입 버튼을 누르면 카카오 계정과 연동하겠냐는 페이지로 이동한다.

</aside>

• input바와 fontawesome을 활용하여 아이디와 비밀번호를 입력할 수 있게 만든 후 placeholder에

어느것이 ID과 비밀번호인지 구분하였다.

• 내가 만들 로고를 넣었다

• 로그인, 회원가입, 카카오 로그인/회원가입 버튼을 이용하여 각각의 기능을 다하는 버튼을 생성하였다.

• js를 활용하여 이벤트를 통한 간단한 로그인 로직을 구현하였다.

  • 아이디와 비밀번호가 맞다면 ‘로그인 되었습니다!’ alert를, 다르다면 error스택을 찍고 ‘아이디와 비밀번호를 다시 한 번 확인해주세요!’ alert를 내보낸다.

  • 그밖의 없는 아이디나 비밀번호(존재 x 계정) 일 시 ‘존재하지 않는 계정입니다.’

  • 비밀번호를 5회이상 틀리면 5회이상 틀렸다는 alert를 표시한다.

    const id = document.getElementById('id')
    const password = document.getElementById('password')
    const login = document.getElementById('login')
    let errStack = 0;
    
    login.addEventListener('click', () => {
        if (id.value == 'acid') {
            if (password.value == '0000') {
                alert('로그인 되었습니다!')
            }
            else {
                alert('아이디와 비밀번호를 다시 한 번 확인해주세요!')
                errStack ++;
            }
        }
        else {
            alert('존재하지 않는 계정입니다.')
        }
    
        if (errStack >= 5) {
            alert('비밀번호를 5회 이상 틀리셨습니다.')
        }
    })
    

• 푸터에는 Myshop 저작권 표시를 해주었고, 로그인 상태유지는 구현하지 않고 모양만 낸 상태인데 나중에 기회가 된다면 구현해보고 싶다 😎