환경 : 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) (1) | 2021.07.25 |