이메일 중복 확인

config/member.php

@@ -19,4 +19,13 @@ class Member {
 
         return $stmt->rowCount() ? true : false;
     }
+
+    public function email_exists($email) {
+        $sql  = "SELECT * FROM member WHERE email=:email";
+        $stmt = $this->conn->prepare($sql);
+        $stmt->bindParam(':email', $email);
+        $stmt->execute();
+
+        return $stmt->rowCount() ? true : false;
+    }
 }

dbtest.php

@@ -17,3 +17,15 @@ if ($mem->id_exists($id)) {
 } else {
     echo "ID '{$id}'는 사용 가능합니다.";
 }
+
+
+// 이메일 중복 테스트
+$email = 'sokuree1@sokuree.com';
+
+$mem = new Member($db);
+
+if ( $mem->email_exists($email)) {
+    echo " '{$email}'는 이미 존재합니다.";
+} else {
+    echo " '{$email}'는 사용 가능합니다.";
+}

js/member_input.js

@@ -25,7 +25,7 @@ document.addEventListener("DOMContentLoaded", () => {
         xhr.onload = () => {
             if(xhr.status == 200) {
                 const data = JSON.parse(xhr.responseText)
-                if(data.result == 'sucess') {
+                if(data.result == 'success') {
                     alert('사용이 가능한 아이디입니다.')
                     document.input_form.id_chk.value = "1"
                 }else if(data.result == 'fail') {
@@ -33,13 +33,58 @@ document.addEventListener("DOMContentLoaded", () => {
                     document.input_form.id_chk.value = "0"
                     f_id.value = ''
                     f_id.focus()
+                }else if(data.result == 'empty_id') {
+                    alert('아이디가 입력되지 않았습니다.')
+                    f_id.focus()
                 }
             }
-
         }
 
     })
 
+    // Email 중복 체크
+    const btn_email_check = document.querySelector("#btn_email_check")
+    btn_email_check.addEventListener("click", () => {
+        const f_email = document.querySelector("#f_email")
+
+        if (f_email.value.trim() === '') {
+            alert('이메일을 입력해 주세요');
+            f_email.focus();
+            return;
+        }
+
+
+        // AJAX
+        const f1 = new FormData()
+        f1.append('email', f_email.value)
+        f1.append('mode', 'email_chk')
+
+        const xhr = new XMLHttpRequest()
+        xhr.open("POST", "/member/pg/member_process.php", true); //절대경로
+
+        xhr.send(f1)
+
+        xhr.onload = () => {
+            if(xhr.status == 200) {
+                const data = JSON.parse(xhr.responseText)
+                if(data.result == 'success') {
+                    alert('사용이 가능한 이메일입니다.')
+                    document.input_form.email_chk.value = "1"
+                }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') {
+                    alert('이메일이 입력되지 않았습니다.')
+                    f_email.focus()
+                }
+            }
+        }
+        
+    })
+
+
     // 가입 버튼 클릭 시 비밀번호 일치 체크
     const btn_submit = document.querySelector("#btn_submit")
     btn_submit.addEventListener("click", () => {

member_input.php

@@ -16,9 +16,10 @@ include 'header.php';
 <main class="w-50 mx-auto border rounded-5 p-5">
     <h1 class="text-center">회원가입</h1>
     
-    <form name="input_form" method="post" enctype="multipart/form-data" action="pg/member_process.php">
+    <form name="input_form" method="post" enctype="multipart/form-data" autocomplete="off" action="pg/member_process.php">
         <input type="hidden" name="mode" value="input">
         <input type="hidden" name="id_chk" value="0">
+        <input type="hidden" name="email_chk" value="0">
     <div class="d-flex gap-2 align-items-end">
         <div class="flex-grow-1">
         <label for="f_id">아이디</label>
@@ -41,9 +42,9 @@ include 'header.php';
     <div class="d-flex gap-2 align-items-end">
         <div class="flex-grow-1">
         <label for="f_email">이메일</label>
-        <input typ="text" class="form-control" id="f_email" placeholder="이메일을 입력하세요">
+        <input typ="text" name="email" class="form-control" id="f_email" placeholder="이메일을 입력하세요">
         </div>
-        <button type="button" class="btn btn-secondary"> 이메일 중복확인 </button>
+        <button type="button" id="btn_email_check" class="btn btn-secondary"> 이메일 중복확인 </button>
     </div>
 
     <div class="d-flex gap-2 mt-3 align-items-end">

pg/member_process.php

@@ -5,14 +5,27 @@ include '../config/member.php';
 
 $mem = new Member($db);
 
-$id = $_POST['id'] ?? '';
+$id = (isset($_POST['id']) && $_POST['id'] != '') ? $_POST['id'] : '';
-
+$email = (isset($_POST['email']) && $_POST['email'] != '') ? $_POST['email'] : '';
-if($mem->id_exists($id)) {
-
-    die(json_encode(['result' => 'fail']));
-
-}else {
-    
-    die(json_encode(['result' => 'sucess']));
 
+ if($_POST['mode'] == 'id_chk') {
+    if($id == '') {
+    die(json_encode(['result' => 'empty_id']));
+    }
+    if($mem->id_exists($id)) {
+    die(json_encode(['result' => 'fail']));
+    }else {
+        die(json_encode(['result' => 'success']));
+    }
+}
+
+if($_POST['mode'] == 'email_chk') {
+    if($email == '') {
+    die(json_encode(['result' => 'empty_email']));
+    }
+    if($mem->email_exists($email)) {
+    die(json_encode(['result' => 'fail']));
+    }else {
+        die(json_encode(['result' => 'success']));
+    }
 }