soonitoon / wp-find-address

Find your post-address(in Korea)

웹 프로그래밍 과제

Juso API 확장

주소 찾기를 가장 많이 이용하는 곳은 쇼핑몰 사이트라고 생각하여 쇼핑몰에서 회원가입을 할 때 주소를 찾는 페이지를 만들어보았다.

기본적인 페이지 디자인은 지난 CSS과제를 응용해서 제작하였다. 입력 form을 감싸고 있는 main-container 부분은 CSS box-shadow를 이용하여 떠있는 듯한 입체감을 주었다. 또한 flexbox를 이용해 자식 요소들을 중앙 정렬했다.

제출 버튼과 주소 검색 버튼, 배송지 입력 부분도 CSS를 이용해서 예쁘게 다듬었다.

주소 검색 스크립트의 골격은 수업 시간에 배운 내용과 동일하다. 검색 결과로 나온 리스트를 예쁘게 보이도록 CSS로 다듬었고, 마우스를 올렸을 때 강조되도록 했다.

해당하는 주소를 클릭했을 때 검색창에 해당 주소가 입력되도록 만들고 싶었다. 그래서 주소 검색을 했을 때 만들어지는 li 태그들에게 이벤트 리스너를 달아서 클릭 시 해당 li 태그의 내용을 배송지 입력란에다 집어넣도록 했다.

li태그에 이벤트 리스너를 달기 위해서 주소를 받아올 때 만들어진 li 태그에 'address-li'라는 클래스를 추가했다. 그리고 이 클래스를 가진 요소를 가져와 배열로 만든 후 반복문으로 하나하나 이벤트 리스너를 달아주는 함수를 만들었다. 이 함수는 form 태그 이벤트 리스너 안의 마지막 부분에서 콜백되도록 했다.

마지막으로 주소를 선택하고 제출을 누르면 완료 메시지가 뜨게 만들었다.