From 90214e439fdbbd17985a5de85f2b151c9a549312 Mon Sep 17 00:00:00 2001
From: haerong22 <haerong22@naver.com>
Date: Tue, 3 Jan 2023 03:20:02 +0900
Subject: [PATCH] #26 pharmacy: main page - kakao postcode

---
 road/src/main/resources/templates/main.hbs | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/road/src/main/resources/templates/main.hbs b/road/src/main/resources/templates/main.hbs
index 70343cd1..09298c48 100644
--- a/road/src/main/resources/templates/main.hbs
+++ b/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>
\ No newline at end of file