#26 pharmacy: main page - kakao postcode

road/src/main/resources/templates/main.hbs

@@ -8,10 +8,11 @@
     <link rel="stylesheet" href="/css/lib/bootstrap.min.css">
 
     <style>
-        .grid-image{
+        .grid-image {
             display: flex;
             justify-content: center;
         }
+
         img {
             margin: 20px 0 20px;
             width: 50%;
@@ -27,7 +28,7 @@
                 <h2>Pharmacy Recommendation</h2>
             </div>
             <div class="body">
-                <form action="/search" method = "post">
+                <form action="/search" method="post">
                     <div>
                         <label for="address">주소를 입력하시면 주소 기준으로 가까운 약국의 위치 최대 3곳 추천드립니다.</label>
                         <input type="text" class="form-control" id="address_kakao" name="address"
@@ -46,5 +47,20 @@
 <script src="/js/lib/jquery.min.js"></script>
 <script src="/js/lib/bootstrap.min.js"></script>
 
+<!-- Kakao 우편번호 서비스 -->
+<!-- https://postcode.map.daum.net/guide -->
+<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
+<script>
+    window.onload = function () {
+        document.getElementById("address_kakao").addEventListener("click", function () {
+            new daum.Postcode({
+                oncomplete: function (data) {
+                    document.getElementById("address_kakao").value = data.address;
+                }
+            }).open();
+        });
+    }
+</script>
+
 </body>
 </html>