우편번호 찾기 연동 및 프로필 이미지 미리보기

js/member_input.js

@@ -23,17 +23,17 @@ document.addEventListener("DOMContentLoaded", () => {
         xhr.send(f1)
 
         xhr.onload = () => {
-            if(xhr.status == 200) {
+            if (xhr.status == 200) {
                 const data = JSON.parse(xhr.responseText)
-                if(data.result == 'success') {
+                if (data.result == 'success') {
                     alert('사용이 가능한 아이디입니다.')
                     document.input_form.id_chk.value = "1"
-                }else if(data.result == 'fail') {
+                } else if (data.result == 'fail') {
                     alert('이미 사용 중인 아이디입니다. 다른 아이디를 입력해 주세요.')
                     document.input_form.id_chk.value = "0"
                     f_id.value = ''
                     f_id.focus()
-                }else if(data.result == 'empty_id') {
+                } else if (data.result == 'empty_id') {
                     alert('아이디가 입력되지 않았습니다.')
                     f_id.focus()
                 }
@@ -65,17 +65,17 @@ document.addEventListener("DOMContentLoaded", () => {
         xhr.send(f1)
 
         xhr.onload = () => {
-            if(xhr.status == 200) {
+            if (xhr.status == 200) {
                 const data = JSON.parse(xhr.responseText)
-                if(data.result == 'success') {
+                if (data.result == 'success') {
                     alert('사용이 가능한 이메일입니다.')
                     document.input_form.email_chk.value = "1"
-                }else if(data.result == 'fail') {
+                } else if (data.result == 'fail') {
                     alert('이미 사용 중인 이메일입니다. 다른 이메일을 입력해 주세요.')
                     document.input_form.email_chk.value = "0"
                     f_email.value = ''
                     f_email.focus()
-                }else if(data.result == 'empty_id') {
+                } else if (data.result == 'empty_id') {
                     alert('이메일이 입력되지 않았습니다.')
                     f_email.focus()
                 }
@@ -122,4 +122,66 @@ document.addEventListener("DOMContentLoaded", () => {
 
     })
 
+    // 우편번호 찾기
+
+    const btn_zipcode = document.querySelector("#btn_zipcode")
+    btn_zipcode.addEventListener("click", () => {
+        new daum.Postcode({
+            oncomplete: function (data) {
+
+                console.log(data)
+                let addr = ''
+                let extra_addr = ''
+
+                //기본 주소
+                if (data.userSelectedType === 'J') {
+                    addr = data.jibunAddress
+                } else if (data.userSelectedType === 'R') {
+                    addr = data.roadAddress
+                }
+
+                // 동/리 (법정동명)
+                if (data.bname !== '') {
+                    extra_addr = data.bname
+                }
+                // 건물명
+                if (data.buildingName !== '') {
+                    if (extra_addr === '') {
+                        extra_addr = data.buildingName
+                    } else {
+                        extra_addr += ',' + data.buildingName
+                    }
+                    // 괄호 추가
+                    if (extra_addr !== '') {
+                        extra_addr = ' (' + extra_addr + ')'
+                    }
+                }
+                // 주소 + 참고항목
+                const f_addr1 = document.querySelector("#f_addr1")
+                f_addr1.value = addr + extra_addr
+                // 우편번호 입력
+                const f_zipcode = document.querySelector("#f_zipcode")
+                f_zipcode.value = data.zonecode
+
+                const f_addr2 = document.querySelector("#f_addr2")
+                f_addr2.focus()
+            }
+        }).open();
+    })
+
+    const f_photo = document.querySelector("#f_photo")
+    f_photo.addEventListener("change", (e) => {
+        //console.log(e)
+        const reader = new FileReader()
+        reader.readAsDataURL(e.target.files[0])
+
+        reader.onload = function (event) {
+            // console.log(event)
+            // const img = document.createElement("img")
+            // img.setAttribute("src", event.target.result)
+            // document.querySelector("#f_preview").appendChild(img)
+            const f_preview = document.querySelector("#f_preview")
+            f_preview.setAttribute("src", event.target.result)
+        }
+    })
 })

member_input.php

@@ -13,6 +13,10 @@ include 'header.php';
 
 ?>
 
+<!-- 다음 카카오 우편번호 서비스 -->
+<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
+
+
 <main class="w-50 mx-auto border rounded-5 p-5">
     <h1 class="text-center">회원가입</h1>
     
@@ -50,9 +54,9 @@ include 'header.php';
     <div class="d-flex gap-2 mt-3 align-items-end">
         <div>
             <label for="f_zipcode">우편번호</label>
-            <input type="text" name="zipcode" id="zipcode" class="form-control" maxlength="5" minlength="5">
+            <input type="text" name="zipcode" id="f_zipcode" class="form-control" maxlength="5" minlength="5">
         </div>
-        <button type="button" class="btn btn-secondary">우편번호 찾기</button>
+        <button type="button" class="btn btn-secondary" id="btn_zipcode">우편번호 찾기</button>
     </div>
 
     <div class="d-flex mt-3 gap-2 justify-content-between">
@@ -69,9 +73,9 @@ include 'header.php';
     <div class="mt-3 d-flex gap-5">
         <div>
             <lable for="f_photo" class="form-label">프로필 이미지</lable>
-            <input type="file" name="profile" class="form-control">
+            <input type="file" name="photo" id="f_photo" class="form-control">
         </div>
-        <img src="images/person.jpg" class="w-25" alt="profile image">
+        <img src="images/person.jpg" id="f_preview" class="w-25" alt="profile image">
     </div>
 
     <div class="mt-3 d-flex gap-2">