(김유선) 중고거래사이트 2일차 - 디자인하기

INPUT태그에 포커싱 css 효과 없애기

커서로 클릭하면 생기는 요 검은 선을 없애는 방법

 

outline: none;  <- 요거 하나면 끝

해결!

 

 

자 이제 작성해뒀던 api 명세서를 토대로 디자인을 해보겠다. 

일단 내가 구현하려고 하는 것은 spa이므로 한 페이지에서 이것 모두를 넣을 수 있도록 애써보며 만들어보겟음

위에서부터 차근차근 하나하나 만들어보자

 

로그인 페이지

로그인 페이지를 만드는 방법은 2가지가 있다.

번개장터처럼 팝업을 띄우는 법

 

세컨웨어처럼 페이지를 이동시키는 법

 

전자는 아무래도 한 페이지에 추가해서 더 번거롭다(내 기준, 그리고 더 이쁘다).

후자는 링크를 이동시키기 때문에 서버를 사용하게 된다.

 

그래서 난 팝업을 띄우기로 했다. 로그인과 회원가입은 같은 버튼으로 만들 거다.

 

위와 같이 팝업을 완성했다. 버튼 위에 마우스를 올리면 '로그인하기'와 같은 모습이 된다.

조용하고 가벼운 갬성 ㅎㅎ 마음에 드네용

 

일단 로그인을 안한 상태에서의 모습을 만들고 있어서 로그아웃은 패스하겠다(기능을 넣는 건 미룸).

 

이제 유저 보는 것 등을 해야겠는데 그냥 기능을 한번 넣어보도록 하겠다... 기능 안 넣으면 할 수 없을 듯

 

로그인 기능을 만들어보겠다.

 

배열

let products = [ {img : "https://images.unsplash.com/photo-1709082804530-d588656ade88?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTcxMjU5MzM2NA&ixlib=rb-4.0.3&q=80&w=1080", title : '아주 귀여운 오양이', price : '5,000원' }, {img : "https://images.unsplash.com/photo-1709082804530-d588656ade88?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTcxMjU5MzM2NA&ixlib=rb-4.0.3&q=80&w=1080", title : '아주 귀여운 오양이', price : '5,000원' } ]

       

        products.forEach(function(a,i){

            $('.products').append(`

            <div class="product_container">

                    <img class="product_img" src=${products[i].img}>

                    <p class="product_title">${products[i].title}</p>

                    <div class="product_boxing">

                        <p class="product_price">${products[i].price}</p>

                        <img class="heart_empty" src="./img/heart-empty.png" alt="">

                    </div>

                </div>

            `)

        })

배열 오랜만에 써서 다시 기록해놓음, i가 인덱스임, 이러면 굳이 for문에다가 products.length 안 써도 알아서 개수만큼 움직여줌 굿

 

로그인 / 회원가입 기능

여기 회원가입을 누르면 가입이 되는데 문제는 아이디가 중복되면 안된다는 등의 조건이 있다. 폼태그로 post를 넣어버리면 데이터를 무조건 보내서 가입이 돼버리니까 조건을 넣기 위해 자바스크립트에서 post 요청을 해야 한다.

 

$('#register_submit').click(function(){

            $.post('/register',{

                id : $('#register_id').val(),

                pw : $('#register_pw').val()

            })

            .done(function(){

                $('.login_bg').css('display','none')

                $('.login_container').css('display','none')

                alert('가입을 축하드립니다!')

            })

        })

그 방법은 이것.

회원가입 버튼에 register_submit라는 아이디를 지정하고, 아이디와 비밀번호를 넣는 인풋 태그는 각각 register_id, register_pw 아이디를 먹여줬다.

 

그러니까 ajax로 post 요청을 하는 방법은

            $.post( 'post 요청하는 곳' , { '키값' : '입력 받은 값' })

            .done(function(){

               '성공했을 때 실행할 무언가'

            })

위와 같다는 것이다(와 아주 쉽다).

참고로 .done 이후의 것은 아예 작성하지 않아도 동작은 잘 한다. 근데 클라이언트 입장에서는 보내기 직전 상태와 변화가 없으므로 나처럼 가입 축하 메시지 따위를 적어주면 좋을 듯.

 

이제 나는 조건을 붙일 것이다.

1. 중복되는 아이디인지 확인 후, 중복되면 중복된 아이디 사용 금지 alert창을 띄울 것

2. 두 칸 중 하나라도 빈칸이 있다면 빈칸 금지 alert 창을 띄울 것

3. 두 칸 중 하나라도 영어 외 포함이 된다면 alert (온통 영어만 가능하게)