스프링부트+jsp로 배달사이트 만들기-03 메인페이지 만들기2(쿠키,세션으로 주소저장)

매장 목록을 보려고하면 주소를 입력해야 볼수있게했습니다

 

주소를 입력할수 있게 다음 주소 api를 사용합니다

다음 주소api는 무료로 복붙만 해도 바로 사용할수있습니다

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

Daum 우편번호 서비스

 

ifame을 이용하여 레이어 띄우기를 참고

 

해당 사이트의 코드를 약간 수정하고 다른페이지에서 재활용하기 위해 modifyAddress.jsp파일로 저장하고 include합니다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<input type="hidden" id="sample2_extraAddress" placeholder="참고항목" readonly>


<!-- iOS에서는 position:fixed 버그가 있음, 적용하는 사이트에 맞게 position:absolute 등을 이용하여 top,left값 조정 필요 -->
<div id="layer"
	style="display: none; position: fixed; overflow: hidden; z-index: 2; -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');

	function closeDaumPostcode() {
		// iframe을 넣은 element를 안보이게 한다.
		element_layer.style.display = 'none';

	}

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

						// 각 주소의 노출 규칙에 따라 주소를 조합한다.
						// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
						var addr = ''; // 주소 변수
						var extraAddr = ''; // 참고항목 변수

						//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
						if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
							addr = data.roadAddress;
						} else { // 사용자가 지번 주소를 선택했을 경우(J)
							addr = data.jibunAddress;
						}

						// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
						if (data.userSelectedType === 'R') {
							// 법정동명이 있을 경우 추가한다. (법정리는 제외)
							// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
							if (data.bname !== ''
									&& /[동|로|가]$/g.test(data.bname)) {
								extraAddr += data.bname;
							}
							// 건물명이 있고, 공동주택일 경우 추가한다.
							if (data.buildingName !== ''
									&& data.apartment === 'Y') {
								extraAddr += (extraAddr !== '' ? ', '
										+ data.buildingName : data.buildingName);
							}
							// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
							if (extraAddr !== '') {
								extraAddr = ' (' + extraAddr + ')';
							}
							// 조합된 참고항목을 해당 필드에 넣는다.
							document.getElementById("sample2_extraAddress").value = extraAddr;

						} else {
							document.getElementById("sample2_extraAddress").value = '';
						}

						// 우편번호와 주소 정보를 해당 필드에 넣는다.
						$("#deleveryAddress1").val(data.zonecode);
						$("#deleveryAddress2").val(addr);

						// 추가
						console.log("data.zonecode = " + data.zonecode);
						console.log("addr = " + addr);
						
						$.ajax({
							url: "/addressModify",
							data: {address1 : data.zonecode , address2 : addr},
							type: "post",
							success: function(){
								$(".address1").text(addr);
								address1 = data.zonecode;
							},
							fail: function(){
								alert("실패");
							}
						})
						// 추가
						
						// 커서를 상세주소 필드로 이동한다.
						/* document.getElementById("deleveryAddress3").focus(); */
						
						$("#deleveryAddress3").focus();
						// iframe을 넣은 element를 안보이게 한다.
						// (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
						element_layer.style.display = 'none';

					},
					width : '100%',
					height : '100%',
					maxSuggestItems : 5
				}).embed(element_layer);

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

		// iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다.
		initLayerPosition();
	}

	// 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는
	// resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나,
	// 직접 element_layer의 top,left값을 수정해 주시면 됩니다.
	function initLayerPosition() {
		var width = 300; //우편번호서비스가 들어갈 element의 width
		var height = 400; //우편번호서비스가 들어갈 element의 height
		var borderWidth = 5; //샘플에서 사용하는 border의 두께

		// 위에서 선언한 값들을 실제 element에 넣는다.
		element_layer.style.width = width + 'px';
		element_layer.style.height = height + 'px';
		element_layer.style.border = borderWidth + 'px solid';
		// 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계다.
		element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width) / 2 - borderWidth)
				+ 'px';
		element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height) / 2 - borderWidth)
				+ 'px';
	}
</script>

 

 

 

 

이 코드를 추가했는데 /addresModify로 주소를 보내고 주소를 세션과 쿠키에 저장합니다

// 추가
console.log("data.zonecode = " + data.zonecode);
console.log("addr = " + addr);
						
$.ajax({
    url: "/addressModify",
    data: {address1 : data.zonecode , address2 : addr},
    type: "post"
})
.done(function(){
    $(".address1").text(addr);
	address1 = data.zonecode;
})
.fail(function(){
    alert("실패");
})
// 추가

 

 

MainController에 추가합니다

	@ResponseBody
	@PostMapping("/addressModify")
	public void addressModify(String address1, String address2, HttpServletResponse response, HttpSession session)
			throws UnsupportedEncodingException {
//		address1 = 우편번호
//		address2 = 주소

		System.out.println("address1 =" + address1);
		System.out.println("address2 =" + address2);

		String address = "{\"address1\" : \"" + address1 + "\",\"address2\" : \"" + address2 + "\"}"; 
		
		// 쿠키에 JSON으로 저장
		Cookie cookie = new Cookie("BMaddress", URLEncoder.encode(address, "UTF-8"));

		int age = 60 * 60 * 24 * 7; // 일주일
		cookie.setMaxAge(age);

		response.addCookie(cookie);

		// 세션에 map으로 저장
		Map<String, String> addMap = new HashMap<>();
		addMap.put("address1", address1);
		addMap.put("address2", address2);
		session.setMaxInactiveInterval(3600 * 3); // 3시간
		session.setAttribute("BMaddress", addMap);
	}

 

 

String address = "{\"address1\" : \"" + address1 + "\",\"address2\" : \"" + address2 + "\"}";

넘어온 우편번호와 주소를 json형태로 변환합니다

 

Cookie cookie = new Cookie("BMaddress", URLEncoder.encode(address, "UTF-8"));

세션은 오브젝트도 저장할수 있지만 쿠키는 문자열만 저장할수있고 

쿠키 문자열에 공백이나 특수문자가 들어가게 되면 에러가 나서

 

URLEncoder로 변환후 저장해야 합니다

쿠키의값을 꺼낼때는 다시 URLDecoder로 변환합니다

 

이제 주소를 입력해보면 세션과 쿠키에 저장되고 매장목록 페이지를 볼수있습니다