티스토리 뷰

스프링/스프링부트 API 설계 정리

(springboot) 회원가입시 주소입력을 위한 카카오 주소 API 활용

구름뭉치 2021. 7. 17. 18:29

환경 : springboot + thymeleaf + h2(DB)

 

목적

회원가입시 주소를 입력해야하는데 이를 위해 카카오에서 제공하는 도로명 주소 API를 사용해보려 한다.

 

카카오 도로명 주소 API

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

 

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.daum.net

기본적으로 주석까지 자세하게 달려서 제공되고 있으므로 천천히 읽어보자

 

필자는 "사용자가 선택한 값 이용"을 선택해서 사용해 보겠다

 

기본 Address객체 클래스
@Embeddable
@Getter
public class Address {

	private String zipcode;
	private String streetAdr;
	private String detailAdr;

	protected Address() {
	}

	public Address(String zipcode, String streetAdr, String detailAdr) {
		this.zipcode = zipcode;
		this.streetAdr = streetAdr;
		this.detailAdr = detailAdr;
	}
}

 

회원가입 요청값, 반환값 처리
@GetMapping("/members/new")
public String createForm(Model model) {
	model.addAttribute("memberForm", new MemberForm());
	return "members/createMemberForm";
}

@PostMapping("/members/new")
public String create(@Valid MemberForm form) {

	Address address = new Address(form.getZipcode(), form.getStreetAdr(), form.getDetailAdr());

	Member member = new Member();
	member.setName(form.getName());
	member.setAddress(address);

	memberService.join(member);
	return "redirect:/";
}

 

회원가입 HTML - createMemberForm
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"/>
    <form role="form" action="/members/new" th:object="${memberForm}" method="post">
        <div class="form-group">
            <label th:for="name">이름</label>
            <input type="text" th:field="*{name}" class="form-control" placeholder="이름을 입력하세요"
                   th:class="${#fields.hasErrors('name')}? 'form-control  fieldError' : 'form-control'">
            <p th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Incorrect date</p>
        </div>
        <div class="form-group">
            <label th:for="zipcode">우편번호</label>
            <input type="text" th:field="*{zipcode}" class="form-control" placeholder="우편번호를 입력하세요" readonly onclick="findAddr()">
        </div>
        <div class="form-group">
            <label th:for="streetAdr">도로명 주소</label>
            <input type="text" th:field="*{streetAdr}" class="form-control" placeholder="도로명 주소를 입력하세요" readonly>
        </div>
        <div class="form-group">
            <label th:for="detailAdr">상세주소</label>
            <input type="text" th:field="*{detailAdr}" class="form-control" placeholder="상세주소를 입력하세요">
        </div>
        <br/>
        <button type="submit" class="btn btn-primary">입력</button>
    </form>
    <br/>
    <div th:replace="fragments/footer :: footer"/>
</div>
</body>
<script>
    function findAddr() {
        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("detailAdr").value = extraAddr;
                } else {
                    document.getElementById("detailAdr").value = '';
                }
                document.getElementById('zipcode').value = data.zonecode;
                document.getElementById("streetAdr").value = addr;
                document.getElementById("detailAdr").focus();
            }
        }).open();
    }
</script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</html>

 

결과

반응형
저작자표시

'스프링 > 스프링부트 API 설계 정리' 카테고리의 다른 글

API 개발 (4) - One to Many관계 - DTO 직접 조회  (0) 2021.07.29
API 개발 (3) - One to Many관계 - Entity조회 후 DTO로 변환  (0) 2021.07.29
API 개발 (2) - X to One관계  (0) 2021.07.28
API 개발 (1) - 회원 조회, 수정, 생성  (0) 2021.07.28
웹 애플리케이션 API 개발 (DTO)  (0) 2021.07.25
공유하기 링크
Comments
Related Articles more
반응형
최근에 올라온 글
최근에 달린 댓글
TAG more
Total
Today
Yesterday