jichoi / lms_front star
박민혁 박민혁 2024-09-03
240903 박민혁 회원가입
@a31e2630c97b4d3a1d4a051a9d56e62bb0a4fd9c
da99f9f
a31e263
client/views/Join.vue
--- client/views/Join.vue
+++ client/views/Join.vue
@@ -2,8 +2,8 @@
 
    <div class="login-container">
 
       <div class="login-bg">
 
          <div>
 
-    
-  </div>
 
+
 
+         </div>
 
       </div>
 
       <div class="login ">
 
          <div class="logo flex justify-end"><img src="../resources/img/logo.png" alt=""></div>
@@ -14,22 +14,22 @@
 
                <h2>회원가입</h2>
 
             </div>
 
             <label class="mr20 title1">
 
-      <input  type="radio" v-model="selectedTab" value="tab1" />
 
-      학생
 
-    </label>
 
-    <label class="mr20 title1">
 
-      <input type="radio" v-model="selectedTab" value="tab2" />
 
-      학부모
 
-    </label>
 
-    <label class="mr20 title1">
 
-      <input type="radio" v-model="selectedTab" value="tab3" />
 
-      선생님
 
-    </label>
 
+               <input type="radio" v-model="selectedTab" value="tab1" />
 
+               학생
 
+            </label>
 
+            <label class="mr20 title1">
 
+               <input type="radio" v-model="selectedTab" value="tab2" />
 
+               학부모
 
+            </label>
 
+            <label class="mr20 title1">
 
+               <input type="radio" v-model="selectedTab" value="tab3" />
 
+               선생님
 
+            </label>
 
             <!-- 학생 -->
 
-            <form @submit.prevent="submitForm" class="login-form mt20" v-if="selectedTab === 'tab1'">
 
+            <div class="login-form mt20" v-if="selectedTab === 'tab1'">
 
                <div class="mb10 flex justify-between align-center">
 
                   <p class="title" for="username">아이디</p>
 
-                  <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요.">
 
+                  <input type="text" id="username" v-model="userId" placeholder="아이디를 입력하세요.">
 
                </div>
 
                <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png"
 
                      alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p>
@@ -37,33 +37,24 @@
 
                   <p class="title" for="password">비밀번호</p>
 
                   <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
 
                </div>
 
-               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em
 
-                     class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
 
+               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
 
+                     alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
 
                <div class="flex justify-between align-center mb10">
 
                   <p class="title" for="password">비밀번호 확인</p>
 
-                  <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
 
+                  <input type="password" id="password" v-model="passwordCheck" placeholder="비밀번호를 입력하세요.">
 
                </div>
 
-               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em
 
-                     class="green ml10">비밀번호가 일치 합니다.</em></p>
 
+               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
 
+                     alt=""><em class="green ml10">비밀번호가 일치 합니다.</em></p>
 
                <div class="mb30 flex justify-between align-center">
 
                   <p class="title" for="username">이름</p>
 
                   <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요.">
 
                </div>
 
                <div class="mb30 flex justify-between align-center">
 
                   <p class="title" for="username">전화번호</p>
 
-                  <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="username"
 
-                       >
 
-                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" >
 
-                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" >
 
-                  </div>
 
-               </div>
 
-               <div class="mb30 flex justify-between align-center">
 
-                  <p class="title" for="username">학교</p>
 
-                  <div class="search-wrap" style="width: 100%;">
 
-                     <input type="text" placeholder="검색하세요.">
 
-                     <button @click="buttonSearch" type="button" title="위원회 검색">
 
-                        <img src="../resources/img/look_t.png" alt="">
 
-                     </button>
 
+                  <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;"
 
+                        type="text" id="username" v-model="tel1">
 
+                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel2">
 
+                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel3">
 
                   </div>
 
                </div>
 
                <div class="mb30 flex justify-between align-center">
@@ -78,23 +69,23 @@
 
                      <select name="" id="" class="data-wrap">
 
                         <option value="">번호</option>
 
                      </select>
 
-                     
+
 
                   </div>
 
                </div>
 
                <div class="flex justify-end align-center mb10">
 
                   <input type="checkbox" class="ui-checkbox mr10">
 
                   <p class="title2" for="password">개인정보 수집 동의</p>
 
                </div>
 
-               <button style="width: 100%;" class="login-btn mt50" type="submit" @click="goToApp"><img src="../resources/img/btn_.png"
 
-                     alt="">
 
-                  <p>로그인</p>
 
+               <button style="width: 100%;" class="login-btn mt50" type="submit" @click="submitForm"><img
 
+                     src="../resources/img/btn_.png" alt="">
 
+                  <p>회원가입</p>
 
                </button>
 
-            </form>
 
+            </div>
 
             <!-- 학부모 -->
 
-            <form @submit.prevent="submitForm" class="login-form mt20" v-else-if="selectedTab === 'tab2'">
 
+            <div class="login-form mt20" v-else-if="selectedTab === 'tab2'">
 
                <div class="mb10 flex justify-between align-center">
 
                   <p class="title" for="username">아이디</p>
 
-                  <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요.">
 
+                  <input type="text" id="username" v-model="userId" placeholder="아이디를 입력하세요.">
 
                </div>
 
                <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png"
 
                      alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p>
@@ -102,33 +93,33 @@
 
                   <p class="title" for="password">비밀번호</p>
 
                   <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
 
                </div>
 
-               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em
 
-                     class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
 
+               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
 
+                     alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
 
                <div class="flex justify-between align-center mb10">
 
                   <p class="title" for="password">비밀번호 확인</p>
 
-                  <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
 
+                  <input type="password" id="password" v-model="passwordCheck" placeholder="비밀번호를 입력하세요.">
 
                </div>
 
-               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em
 
-                     class="green ml10">비밀번호가 일치 합니다.</em></p>
 
+               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
 
+                     alt=""><em class="green ml10">비밀번호가 일치 합니다.</em></p>
 
                <div class="mb30 flex justify-between align-center">
 
                   <p class="title" for="username">이름</p>
 
                   <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요.">
 
                </div>
 
                <div class="mb30 flex justify-between align-center">
 
                   <p class="title" for="username">전화번호</p>
 
-                  <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="username"
 
-                       >
 
-                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" >
 
-                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" >
 
+                  <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;"
 
+                        type="text" id="username" v-model="tel1">
 
+                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel2">
 
+                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel3">
 
                   </div>
 
                </div>
 
-              <div class="flex justify-between mb20">
 
+               <div class="flex justify-between mb20">
 
                   <p class="title " for="username"><em class="yellow">학생 정보</em></p>
 
                   <div class="flex justify-end align-center mb10">
 
                      <img src="../resources/img/img192_78p.png" alt="">
 
                      <p class="title2 ml10" for="password">자녀 추가하기</p>
 
                   </div>
 
-              </div>
 
+               </div>
 
                <div class="mb30 flex justify-between align-center">
 
                   <p class="title" for="username">학교</p>
 
                   <div class="search-wrap" style="width: 100%;">
@@ -150,23 +141,23 @@
 
                      <select name="" id="" class=" data-wrap">
 
                         <option value="">번호</option>
 
                      </select>
 
-                     
+
 
                   </div>
 
                </div>
 
                <div class="flex justify-end align-center mb10">
 
                   <input type="checkbox" class="ui-checkbox mr10">
 
                   <p class="title2" for="password">개인정보 수집 동의</p>
 
                </div>
 
-               <button style="width: 100%;" class="login-btn mt50" type="submit" ><img src="../resources/img/btn_.png"
 
-                     alt="">
 
-                  <p>로그인</p>
 
+               <button style="width: 100%;" class="login-btn mt50" type="submit" @click="submitForm"><img
 
+                     src="../resources/img/btn_.png" alt="">
 
+                  <p>회원가입</p>
 
                </button>
 
-            </form>
 
+            </div>
 
             <!-- 선생님 -->
 
-            <form @submit.prevent="submitForm" class="login-form mt20" v-else-if="selectedTab === 'tab3'">
 
+            <div class="login-form mt20" v-else-if="selectedTab === 'tab3'">
 
                <div class="mb10 flex justify-between align-center">
 
                   <p class="title" for="username">아이디</p>
 
-                  <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요.">
 
+                  <input type="text" id="username" v-model="userId" placeholder="아이디를 입력하세요.">
 
                </div>
 
                <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png"
 
                      alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p>
@@ -174,24 +165,24 @@
 
                   <p class="title" for="password">비밀번호</p>
 
                   <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
 
                </div>
 
-               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img194_78p.png" alt=""><em
 
-                     class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
 
+               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
 
+                     alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
 
                <div class="flex justify-between align-center mb10">
 
                   <p class="title" for="password">비밀번호 확인</p>
 
-                  <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
 
+                  <input type="password" id="password" v-model="passwordCheck" placeholder="비밀번호를 입력하세요.">
 
                </div>
 
-               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em
 
-                     class="green ml10">비밀번호가 일치 합니다.</em></p>
 
+               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
 
+                     alt=""><em class="green ml10">비밀번호가 일치 합니다.</em></p>
 
                <div class="mb30 flex justify-between align-center">
 
                   <p class="title" for="username">이름</p>
 
                   <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요.">
 
                </div>
 
                <div class="mb30 flex justify-between align-center">
 
                   <p class="title" for="username">전화번호</p>
 
-                  <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="username"
 
-                       >
 
-                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" >
 
-                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" >
 
+                  <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;"
 
+                        type="text" id="username" v-model="tel1">
 
+                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel2">
 
+                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel3">
 
                   </div>
 
                </div>
 
                <div class="mb30 flex justify-between align-center">
@@ -215,101 +206,174 @@
 
                      <select name="" id="" class="data-wrap">
 
                         <option value="">번호</option>
 
                      </select>
 
-                     
+
 
                   </div>
 
                </div>
 
                <div class="flex justify-end align-center mb10">
 
                   <input type="checkbox" class="ui-checkbox mr10">
 
                   <p class="title2" for="password">개인정보 수집 동의</p>
 
                </div>
 
-               <button style="width: 100%;" class="login-btn mt50" type="submit" ><img src="../resources/img/btn_.png"
 
-                     alt="">
 
-                  <p>로그인</p>
 
+               <button style="width: 100%;" class="login-btn mt50" type="submit" @click="submitForm"><img
 
+                     src="../resources/img/btn_.png" alt="">
 
+                  <p>회원가입</p>
 
                </button>
 
-            </form>
 
+            </div>
 
          </div>
 
       </div>
 
    </div>
 
    <div v-show="searchOpen" class="popup-wrap">
 
-                <div class="popup-box ">
 
-                    <div class="flex justify-between mb30">
 
-                        <p class="popup-title">학교 검색</p>
 
-                        <button type="button" class="popup-close-btn" @click="closeBtn">
 
-                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
 
+      <div class="popup-box ">
 
+         <div class="flex justify-between mb30">
 
+            <p class="popup-title">학교 검색</p>
 
+            <button type="button" class="popup-close-btn" @click="closeBtn">
 
+               <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
 
 
-                        </button>
 
-                    </div>
 
-                    <div class="mb30 flex justify-between align-center">
 
-                  <p class="title1" for="username" style="width: 12rem;">시/도</p>
 
-                  <div class="search-wrap flex justify-end" style="width: 100%;">
 
-                     <select name="" id="" class="mr10 data-wrap">
 
-                        <option value="">시</option>
 
-                     </select>
 
-                     <select name="" id="" class=" data-wrap">
 
-                        <option value="">도</option>
 
-                     </select>
 
-                  </div>
 
-               </div>
 
-               <div class="mb10 flex justify-between align-center">
 
-                  <p class="title1" for="username" style="width: 12rem;">학교명</p>
 
-                  <div class="search-wrap" style="width: 100%;">
 
-                     <input type="text" placeholder="검색하세요.">
 
-                     <button @click="buttonSearch" type="button" title="위원회 검색">
 
-                        <img src="../resources/img/look_t.png" alt="">
 
-                     </button>
 
-                  </div>
 
-               </div>
 
-               <p class="title2 mb20 flex align-center help" for="username" style="margin-left: 10rem;"><img src="../resources/img/img194_78p.png" alt=""><em
 
-                  class="gray ml10">학교명을 입력 후 찾기 버튼을 클릭하십시오.</em></p>
 
-                    <div class="flex justify-center ">
 
-                        <button type="button" title="글쓰기" class="new-btn mr10">
 
-                            취소
 
-                        </button>
 
-                        <button type="button" title="글쓰기" class="new-btn">
 
-                            등록
 
-                        </button>
 
-                    </div>
 
-                </div>
 
+            </button>
 
+         </div>
 
+         <div class="mb30 flex justify-between align-center">
 
+            <p class="title1" for="username" style="width: 12rem;">시/도</p>
 
+            <div class="search-wrap flex justify-end" style="width: 100%;">
 
+               <select name="" id="" class="mr10 data-wrap">
 
+                  <option value="">시</option>
 
+               </select>
 
+               <select name="" id="" class=" data-wrap">
 
+                  <option value="">도</option>
 
+               </select>
 
             </div>
 
+         </div>
 
+         <div class="mb10 flex justify-between align-center">
 
+            <p class="title1" for="username" style="width: 12rem;">학교명</p>
 
+            <div class="search-wrap" style="width: 100%;">
 
+               <input type="text" placeholder="검색하세요.">
 
+               <button @click="buttonSearch" type="button" title="위원회 검색">
 
+                  <img src="../resources/img/look_t.png" alt="">
 
+               </button>
 
+            </div>
 
+         </div>
 
+         <p class="title2 mb20 flex align-center help" for="username" style="margin-left: 10rem;"><img
 
+               src="../resources/img/img194_78p.png" alt=""><em class="gray ml10">학교명을 입력 후 찾기 버튼을 클릭하십시오.</em></p>
 
+         <div class="flex justify-center ">
 
+            <button type="button" title="글쓰기" class="new-btn mr10">
 
+               취소
 
+            </button>
 
+            <button type="button" title="글쓰기" class="new-btn">
 
+               등록
 
+            </button>
 
+         </div>
 
+      </div>
 
+   </div>
 
 </template>
 
 
 <script>
 
 import SvgIcon from '@jamescoyle/vue-icon';
 
 import { mdiMagnify, mdiWindowClose } from '@mdi/js';
 
+import axios from "axios";
 
+
 
 export default {
 
    data() {
 
       return {
 
          mdiWindowClose: mdiWindowClose,
 
+         userId: '',
 
          username: '',
 
          password: '',
 
+         passwordCheck: '',
 
+         tel1: '',
 
+         tel2: '',
 
+         tel3: '',
 
+         email: null,
 
          selectedTab: 'tab1', // 초기 선택 탭
 
          showModal: false,
 
-            searchOpen: false,
 
+         searchOpen: false,
 
       }
 
    },
 
    methods: {
 
       submitForm() {
 
-         // 여기에 로그인 로직을 추가하세요.
 
-         console.log('Username:', this.username);
 
-         console.log('Password:', this.password);
 
+         const vm = this;
 
+
 
+         const passwordPattern = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{6,}$/;
 
+
 
+         if (!vm.userId) {
 
+            alert("로그인 아이디가 비어 있습니다!");
 
+            return;
 
+         }
 
+
 
+         if (!vm.password) {
 
+            alert("비밀번호가 비어 있습니다!");
 
+            return;
 
+         }
 
+
 
+         if (vm.password !== vm.passwordCheck) {
 
+            alert("비밀번호가 일치하지 않습니다.");
 
+            return;
 
+         }
 
+
 
+         if (!passwordPattern.test(vm.password)) {
 
+            alert("비밀번호는 영문, 숫자, 특수문자를 조합하여 6자리 이상이어야 합니다.");
 
+            return;
 
+         }
 
+
 
+         if (!vm.username) {
 
+            alert("유저 이름이 비어 있습니다!");
 
+            return;
 
+         }
 
+
 
+         if (!vm.tel1 && !vm.tel2 && !vm.tel3) {
 
+            alert("전화번호가 비어 있습니다!");
 
+            return;
 
+         }
 
+
 
+         const telno = vm.tel1 + '-' + vm.tel2 + '-' + vm.tel3;
 
+
 
+         let auth = null;
 
+
 
+         if (vm.selectedTab === 'tab1') {
 
+            auth = 'STUDENT'
 
+         } else if (vm.selectedTab === 'tab2') {
 
+            auth = 'PARENT'
 
+         } else if (vm.selectedTab === 'tab3') {
 
+            auth = 'TEACHER'
 
+         }
 
+         
+         axios({
 
+            url: "/auth/insertUser.json",
 
+            method: "post",
 
+            data: {
 
+
 
+               loginId: vm.userId,
 
+               password: vm.password,
 
+               userNm: vm.username,
 
+               email: vm.email,
 
+               telno: telno,
 
+               authcd: auth
 
+            },
 
+         }).then(function (response) {
 
+            if(response.data.status === 'success'){
 
+               alert("회원가입에 성공했습니다!")
 
+               vm.goToApp();
 
+            } else {
 
+               alter("입력창을 다시 확인해주세요!")
 
+            }
 
+         }).catch(function (error) {
 
+         });
 
+         
       },
 
       goToApp() {
 
-         this.$router.push('/app.page');
 
+         this.$router.push('/Login.page');
 
       },
 
       closeModal() {
 
-            this.showModal = false;
 
-        },
 
-        buttonSearch() {
 
-            this.searchOpen = true;
 
-        },
 
-        closeBtn() {
 
-            this.searchOpen = false;
 
+         this.showModal = false;
 
+      },
 
+      buttonSearch() {
 
+         this.searchOpen = true;
 
+      },
 
+      closeBtn() {
 
+         this.searchOpen = false;
 
 
-        },
 
+      },
 
    },
 
    components: {
 
-        SvgIcon
 
-    },
 
+      SvgIcon
 
+   },
 
 }
 
 </script>
da99f9f
a31e263
client/views/Login.vue
--- client/views/Login.vue
+++ client/views/Login.vue
@@ -9,7 +9,7 @@
 
                <img src="../resources/img/icon1.png" alt="" class="mr20">
 
                <h2> 로그인 하기</h2>
 
             </div>
 
-            <form @submit.prevent="submitForm" class="login-form ">
 
+            <div class="login-form ">
 
                <div class="mb30">
 
                   <p class="mb15 title" for="username">아이디</p>
 
                   <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요.">
@@ -30,7 +30,7 @@
 
                      <p class="underline title2" @click="goToPage('Join')">회원가입</p>
 
                   </button>
 
                </div>
 
-            </form>
 
+            </div>
 
          </div>
 
       </div>
 
    </div>
@@ -54,59 +54,55 @@
 
             </label>
 
          </div>
 
          <!-- 아이디 찾기 -->
 
-         <form @submit.prevent="submitForm" class="find-form mt30" v-if="selectedTab === 'tab1'">
 
+         <div class="find-form mt30" v-if="selectedTab === 'tab1'">
 
             <div class="mb20 flex justify-between align-center">
 
                <p class="title2" for="username" style="width: 12rem;">이름</p>
 
-               <input class="data-wrap" type="text" id="username" v-model="username" placeholder="이름을 입력하세요.">
 
+               <input class="data-wrap" type="text" id="username" v-model="findUserNm" placeholder="이름을 입력하세요.">
 
             </div>
 
             <div class="mb30 flex justify-between align-center">
 
                <p class="title2" for="username" style="width: 12rem;">전화번호</p>
 
                <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap"
 
-                     style="width: 12rem;" type="text" id="username" v-model="username">
 
+                     style="width: 12rem;" type="text" id="username" v-model="findTel1">
 
                   <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"
 
-                     v-model="username">
 
+                     v-model="findTel2">
 
                   <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"
 
-                     v-model="username">
 
+                     v-model="findTel3">
 
                </div>
 
             </div>
 
             <div class="flex justify-center ">
 
-               <button type="button" title="글쓰기" class="new-btn mr10">
 
+               <button type="button" title="글쓰기" class="new-btn mr10" @click="closeBtn">
 
                   취소
 
                </button>
 
-               <button @click="selectedTab = 'tab3'" type="button" title="글쓰기" class="new-btn">
 
+               <button @click="findId" type="button" title="글쓰기" class="new-btn">
 
                   찾기
 
                </button>
 
             </div>
 
-         </form>
 
+         </div>
 
          <!-- 비밀번호 찾기 -->
 
-         <form @submit.prevent="submitForm" class="find-form mt30" v-else-if="selectedTab === 'tab2'">
 
+         <div class="find-form mt30" v-else-if="selectedTab === 'tab2'">
 
             <div class="mb20 flex justify-between align-center">
 
                <p class="title2" for="username" style="width: 12rem;">아이디</p>
 
-               <input class="data-wrap" type="text" id="username" v-model="username" placeholder="아이디를 입력하세요.">
 
+               <input class="data-wrap" type="text" id="username" v-model="changeUserNm" placeholder="아이디를 입력하세요.">
 
             </div>
 
             <div class="mb20 flex justify-between align-center">
 
-               <p class="title2" for="username" style="width: 12rem;">이름</p>
 
-               <input class="data-wrap" type="text" id="username" v-model="username" placeholder="이름을 입력하세요.">
 
+               <p class="title2" for="username" style="width: 12rem;">변경할 비밀번호</p>
 
+               <input class="data-wrap" type="text" id="username" v-model="changeUserPw" placeholder="변경할 비밀번호를 입력하세요.">
 
             </div>
 
-            <div class="mb30 flex justify-between align-center">
 
-               <p class="title2" for="username" style="width: 12rem;">전화번호</p>
 
-               <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap"
 
-                     style="width: 12rem;" type="text" id="username" v-model="username">
 
-                  <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"
 
-                     v-model="username">
 
-                  <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username"
 
-                     v-model="username">
 
-               </div>
 
+            <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png"
 
+                     alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
 
+            <div class="mb20 flex justify-between align-center">
 
+               <p class="title2" for="username" style="width: 12rem;">비밀번호 확인</p>
 
+               <input class="data-wrap" type="text" id="username" v-model="changeUserPwCheck" placeholder="변경할 비밀번호를 입력하세요.">
 
             </div>
 
             <div class="flex justify-center ">
 
-               <button type="button" title="글쓰기" class="new-btn mr10">
 
+               <button type="button" title="글쓰기" class="new-btn mr10" @click="closeBtn">
 
                   취소
 
                </button>
 
-               <button @click="selectedTab = 'tab4'" type="button" title="글쓰기" class="new-btn">
 
+               <button @click="changePw" type="button" title="글쓰기" class="new-btn">
 
                   찾기
 
                </button>
 
             </div>
 
-         </form>
 
+         </div>
 
          <!-- 아이디 찾기 결과 -->
 
          <div v-else-if="selectedTab === 'tab3'">
 
             <div class="flex justify-center mt30">
@@ -115,11 +111,11 @@
 
             <table class="find-table mt30 mb30">
 
                <tr>
 
                   <td class="thead">이름</td>
 
-                  <td></td>
 
+                  <td>{{ findUserInfo.userNm }}</td>
 
                </tr>
 
                <tr>
 
                   <td class="thead">아이디</td>
 
-                  <td></td>
 
+                  <td>{{ findUserInfo.loginId }}</td>
 
                </tr>
 
             </table>
 
             <div class="flex justify-center ">
@@ -131,21 +127,16 @@
 
          <!-- 비밀번호 찾기 결과 -->
 
          <div v-else-if="selectedTab === 'tab4'">
 
             <div class="flex justify-center mt30">
 
-               <p class="title2">비밀번호 찾기가 완료 되었습니다.</p>
 
+               <p class="title2">비밀번호가 변경되었습니다.</p>
 
             </div>
 
             <table class="find-table mt30 mb30">
 
                <tr>
 
-                  <td class="thead">이름</td>
 
-                  <td></td>
 
-               </tr>
 
-               <tr>
 
-                  <td class="thead">비밀번호</td>
 
-                  <td></td>
 
+                  <td class="thead">변경된 비밀번호에 맞춰 로그인해주세요.</td>
 
                </tr>
 
             </table>
 
             <div class="flex justify-center ">
 
                <button @click="closeBtn" type="button" title="글쓰기" class="new-btn">
 
-                  로그인 하기
 
+                  로그인하기
 
                </button>
 
             </div>
 
          </div>
@@ -168,9 +159,15 @@
 
          mdiWindowClose: mdiWindowClose,
 
          showModal: false,
 
          searchOpen: false,
 
+         findUserNm: '',
 
+         findTel1: '',
 
+         findTel2: '',
 
+         findTel3: '',
 
+         findUserInfo : {},
 
       }
 
    },
 
    methods: {
 
+      // 로그인
 
       submitForm() {
 
          console.log('Username:', this.username);
 
          console.log('Password:', this.password);
@@ -196,6 +193,7 @@
 
          });
 
 
       },
 
+      // 로그인 후 권한에 따라 이동
 
       branchPage() {
 
          const vm = this;
 
          const token = localStorage.getItem('token');
@@ -243,6 +241,31 @@
 
             console.error('No token found');
 
          }
 
       },
 
+
 
+      // 아이디 찾기
 
+      findId() {
 
+         const vm = this;
 
+
 
+         const telno = vm.findTel1 + '-' + vm.findTel2 + '-' + vm.findTel3;
 
+
 
+         axios({
 
+            url: "/auth/findId.json",
 
+            method: "post",
 
+            data: {
 
+               telno: telno,
 
+               userNm: vm.findUserNm,
 
+            },
 
+         }).then(function (response) {
 
+            vm.selectedTab = 'tab3';
 
+            vm.findUserInfo = response.data;
 
+         }).catch(function (error) {
 
+            alert("등록되지 않은 사용자입니다!");
 
+            console.log(error);
 
+         });
 
+      },
 
+
 
+      // 비밀번호 확인하기
 
+
 
       closeModal() {
 
          this.showModal = false;
 
       },
Add a comment
List