daum 주소 api 적용하기(1)

새로 받은 프로젝트에 주소찾기 api가 적용된 부분이 있었는데

홈페이지가 반응형은 아니고 웹사이트인데.. 모바일에서 봤을 때 일정 비율로 줄어드는...

모바일 웹이라고 해야 하나 ... 무튼 그렇다..

 

내가 안드로이드를 써서 이 전의 아이폰 상태를 확인하지는 못했다.

그런데 문제점으로 나온게 아이폰에서 글씨를 쓸 때 화면이 커지고? 

또.. 주소 api는 적용이 안되서 

그냥 텍스트 박스에 직접 입력을 하게 했었다고 한다. 

이 때도 주소 입력이 끝나면 화면이 확대된 상태여서 사용자가 직접 화면은 줄였어야 한다고 한다.. 

이 얘기 전달해 주신 분도 안드로이드를 쓰고 계셔서.. 이 때도 문제점을 눈으로 확인하지 못했다..

 

그래서..무작정 해당 페이지에 api를 적용시켜 봤다.

https://postcode.map.daum.net/guide#sample

Daum 우편번호 서비스

'iframe을 이용하여 레이어 띄우기' 가 기존 홈페이지에서 안드로이드에만 적용되어 있었고
(현재 iOS 8.x 이상, Safari, webview 브라우저에서 position:fixed, inner-scroll 이용시 가상키보드 터치 불량 및 스크롤이 멈추는 현상이 간혈적으로 발생하고 있습니다. 이점 참고해 주시기 바라며, 모바일 환경에서는 가급적 아래의 "페이지에 끼워넣기" 예제를 참고하시는 것을 추천드립니다.)
'iframe을 이용하여 페이지에 끼워 넣기'를 적용해봤는데 아이폰에서도 보이지만 화면이 너무 작았다. 아마 크기 변경하는 부분은 추가했으면 됐을 것 같은데 이 때에는 생각하지 못했다.

 

다시 도전을 했다. 일단 해보고 안되면

https://www.juso.go.kr/openIndexPage.do 여기서 api로 받아와서 화면을 만들 생각이었다.

 

 

 

 

'iframe을 이용하여 레이어 띄우기' 예제에서 수정

<input type="text" id="address" placeholder="주소"><br>
<input type="button" onclick="DaumPostcode()" value="우편번호 찾기"><br>


<!-- iOS에서는 position:fixed 버그가 있음, 적용하는 사이트에 맞게 position:absolute 등을 이용하여 top,left값 조정 필요 -->
<div id="layer" style="display:none;position:fixed;/*overflow:hidden*/;z-index:1;-webkit-overflow-scrolling:touch;">
<img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="closeDaumPostcode()" alt="닫기 버튼">
</div>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    // 우편번호 찾기 화면을 넣을 element
    var element_layer = document.getElementById('layer');
	var device = "";

    function closeDaumPostcode() {
        // iframe을 넣은 element를 안보이게 한다.
        element_layer.style.display = 'none';
    }
	
	function checkDevice(){
	var UA = navigator.userAgent.toLowerCase();
		if(UA.indexOf('android') > -1){
			device = "android";
		}else if(UA.indexOf('iphone') > -1 || UA.indexOf('ipad') > -1 || UA.indexOf('ipod') > -1){
			device = "ios";
		}
	}

    function DaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var addr = ''; // 주소 변수
               
                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById("address").value = addr;

                // iframe을 넣은 element를 안보이게 한다.
                // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
                element_layer.style.display = 'none';
            },
            width : '100%',
            height : '100%'
        }).embed(element_layer);
		
		// iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다.
        initLayerPosition();

        // iframe을 넣은 element를 보이게 한다.
        element_layer.style.display = 'block';

      
    }

    // 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는
    // resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나,
    // 직접 element_layer의 top,left값을 수정해 주시면 됩니다.
    function initLayerPosition(){
	
		var bt_close = document.createElement('img');
		bt_close.src = '/resource/img/button.png'; // 원래 x이미지 였는데 아이폰에서 엑스버튼이 사라지는게 아니고 숨는다는 걸 뒤늦게 알아서..급한대로 빈 png넣어서 기능만 하게 함.
		//bt_close.classList.add('img-center'); //classList.add클래스 추가할 때 이렇게 하는 거라는데 적용이 안되서 뺌
		//bt_close.classList.add('img-close');
		bt_close.style.width = 50+"px";
		bt_close.style.height = 50+"px";
		bt_close.style.position = "absolute";
		bt_close.style.display = "block";
		bt_close.style.margin = 0;
		bt_close.style.right = 0+"px";
		//bt_close.style.border = 0+"px";
		bt_close.style.border = "none";
		bt_close.style.zIndex = "999";
		bt_close.style.top = -50+"px";
		bt_close.setAttribute("onclick","closeDaumPostcode()");
		
		if(device === 'android'){
			element_layer.style.width = "40%";
			element_layer.style.height = "23.5%";
			element_layer.style.border = "5px solid";
			element_layer.style.transform = "scale(2)";
			element_layer.style.left = "30%";
			element_layer.style.top = "30%";
		}else if(device === 'ios'){
			element_layer.prepend(bt_close);
			element_layer.style.width = "40%";
			element_layer.style.height = "30.5%";
			element_layer.style.border = "5px solid";
			element_layer.style.transform = "scale(2)";
			element_layer.style.left = "30%";
			element_layer.style.top = "30%";
		}else{ //pc일 때
			element_layer.style.width = "50%";
			element_layer.style.height = "40%";
			element_layer.style.border = "5px solid";
			element_layer.style.transform = "scale(2)";
			element_layer.style.left = "25%";
			element_layer.style.top = "25%";
		}
     
    }
</script>

- scale을 써서 확대 해놨는데 이게 .. 흐르게 보임. 해결 방법이 있을까나.. '-'
- 아이폰에서 x버튼이 있지만 돋보기 뒤로 숨어버리는데.. 이걸 임시로.. 빈 이미지 넣어서 처리 해뒀는데 이것도 방법 바꿔야 할 것 같다. '-' 하핳..

- 입력끝난 후 포커스 처리안함

- 주소입력 창 떠 있을 때 뒷배경 어둡게 안함

- 주소입력 창 떠 있을 때 뒷배경에 버튼 눌림

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://www.juso.go.kr/openIndexPage.do

주소정보누리집(도로명주소 안내시스템)

https://postcode.map.daum.net/guide#sample

Daum 우편번호 서비스

https://github.com/daumPostcode/QnA

GitHub - daumPostcode/QnA: Daum 우편번호 서비스 Q&A