yjryu / KERIS star
youngsuk 2023-10-27
231027 서영석 사용자 회원가입 (수정중)
@f504de62573dc65b0a07dab93a483a6d53feff7c
client/views/pages/App.vue
--- client/views/pages/App.vue
+++ client/views/pages/App.vue
@@ -28,7 +28,7 @@
 import AdminFooter from '../layout/AdminFooter.vue';
 
 const App = {
-   data: () => {
+   data() {
       return {
          title: null,
          isLogin: false,
@@ -85,7 +85,7 @@
       'Footer': Footer,
       'AdminFooter': AdminFooter,
    },
-   mounted: () => {
+   mounted() {
       console.log('Vue mounted');
       this.loginUserSelectOne();
       // //vue router에게 페이지 변경 요청을 하여, router가 페이지 변경 전, 실행되는 훅(이벤트)
client/views/pages/user/join/Join.vue
--- client/views/pages/user/join/Join.vue
+++ client/views/pages/user/join/Join.vue
@@ -17,98 +17,6 @@
             </div>
         </section>
         <div v-if="selectedMembership === 'one'">
-            <div class="login-info">
-                <div>
-                    <h3>회원정보</h3>
-                    <p>※ 기업회원의 경우 담당자 1인만 가입할 수 있습니다. 이미 가입한 기업은 중복 계정 생성이 불가합니다.
-                    </p>
-                    <hr>
-                </div>
-                <section class="join-sec1 joinsub0">
-                    <div class="join-sec-sub ">
-                        <span>아이디</span>
-                    </div>
-                    <div>
-                        <input type="text" value="아이디를 입력하세요.">
-                    </div>
-                    <div>
-
-                        <button>중복확인</button>
-                    </div>
-                </section>
-
-
-                <section class="join-sec2 joinsub">
-
-                    <div class="join-sec-sub">
-                        <span>기관업체</span>
-                    </div>
-                    <div class="join-sub-input">
-                        <input type="text">
-
-                    </div>
-
-                </section>
-
-
-                <section class="join-sec3 joinsub">
-                    <div class="join-sec-sub">
-                        <span>비밀번호</span>
-                    </div>
-                    <div class="join-sub-input">
-                        <input type="text">
-
-                    </div>
-                </section>
-
-
-                <section class="join-sec4 joinsub">
-                    <div class="join-sec-sub">
-                        <span>비밀번호 확인</span>
-                    </div>
-                    <div class="join-sub-input">
-                        <input type="text">
-
-                    </div>
-                </section>
-
-
-                <section class="join-sec5 joinsub">
-                    <div class="join-sec-sub">
-                        <span>담당자명<span>(필수)</span></span>
-                    </div>
-                    <div>
-                        <input type="text">
-
-                    </div>
-                </section>
-
-
-                <section class="join-sec6">
-                    <div class="join-sec-sub">
-                        <span>이메일<span>(필수)</span></span>
-                    </div>
-                    <div class="email-sec">
-
-                        <div>
-                            <input type="text" name="email_id" id="email_id">
-                        </div>
-                        <div>@</div>
-                        <div>
-                            <input type="text" name="email_dns" id="email_dns">
-                        </div>
-                        <div>
-                            <select name="email_sel" id="email_sel">
-                                <option value="">직접 입력</option>
-                                <option value="naver.com">naver</option>
-                                <option value="hanmail.net">daum</option>
-                                <option value="gmail.com">google</option>
-                            </select>
-                        </div>
-                    </div>
-
-                </section>
-            </div>
             <div class="login-info2">
                 <div>
                     <h3>회사소개</h3>
@@ -124,17 +32,27 @@
                     </div>
 
                     <div class="login-info-grid-2">
+                        <section class="join-sec1 joinsub0">
+                            <div class="join-sec-sub ">
+                                <span>사업자등록번호</span>
+                            </div>
+                            <div>
+                                <input type="text" v-model="company['company_id']" placeholder="사업자등록번호를 입력하세요.">
+                            </div>
+                            <div>
+                                <button @click="companyIdCheck">중복확인</button>
+                            </div>
+                            <!-- <div v-if="this.companyIdCheck_boolean" style="color:chartreuse"></div>
+                            <div v-else style="color:red">사업자등록번호: 이미 등록되어있는 사업자등록번호 입니다.</div> -->
+                        </section>
                         <section class="join-sec1 joinsub0-1">
                             <div class="join-sec-sub ">
                                 <span>회사명</span>
                             </div>
                             <div>
-                                <input type="text" value="회사명을 입력해주세요.">
+                                <input type="text" v-model="company['company_nm']" placeholder="회사명을 입력해주세요.">
                             </div>
-
                         </section>
-
-
                         <section class="join-sec2 joinsub">
 
                             <div class="join-sec-sub">
@@ -153,8 +71,7 @@
                                 <span>회사소개글</span>
                             </div>
                             <div class="join-sub-input">
-                                <input type="text">
-
+                                <input type="text" v-model="company['company_info']">
                             </div>
                         </section>
 
@@ -165,13 +82,86 @@
                             </div>
                             <div class="join-sub-input">
                                 <input type="file">
-
                             </div>
                         </section>
                     </div>
                 </div>
+            </div>
+            <div class="login-info">
+                <div>
+                    <h3>회원정보</h3>
+                    <p>※ 기업회원의 경우 담당자 1인만 가입할 수 있습니다. 이미 가입한 기업은 중복 계정 생성이 불가합니다.
+                    </p>
+                    <hr>
+                </div>
+                <section class="join-sec1 joinsub0">
+                    <div class="join-sec-sub ">
+                        <span>아이디</span>
+                    </div>
+                    <div>
+                        <input type="text" v-model="user['user_id']" placeholder="아이디를 입력하세요.">
+                    </div>
+                    <div>
+
+                        <button @click="userIdCheck">중복확인</button>
+                    </div>
+                </section>
+                <section class="join-sec3 joinsub">
+                    <div class="join-sec-sub">
+                        <span>비밀번호</span>
+                    </div>
+                    <div class="join-sub-input">
+                        <input type="text" v-model="user['user_pw']" @change="passwordSyncCheck()" placeholder="비밀번호 입력">
+                    </div>
+                </section>
 
 
+                <section class="join-sec4 joinsub">
+                    <div class="join-sec-sub">
+                        <span>비밀번호 확인</span>
+                    </div>
+                    <div class="join-sub-input">
+                        <input type="text" v-model="pwCheck" @change="passwordSyncCheck()" placeholder="비밀번호 확인">
+                    </div>
+                    <div v-if="this.passwordCheckFlag" style="color:chartreuse">비밀번호 일치</div>
+                    <div v-else style="color:red">비밀번호 불일치</div>
+                </section>
+
+
+                <section class="join-sec5 joinsub">
+                    <div class="join-sec-sub">
+                        <span>담당자명<span>(필수)</span></span>
+                    </div>
+                    <div>
+                        <input type="text" v-model="user['user_nm']">
+                    </div>
+                </section>
+
+
+                <section class="join-sec6">
+                    <div class="join-sec-sub">
+                        <span>이메일<span>(필수)</span></span>
+                    </div>
+                    <div class="email-sec">
+
+                        <div>
+                            <input type="text" name="email_id" id="email_id" v-model="email_id">
+                        </div>
+                        <div>@</div>
+                        <div>
+                            <input v-if="select_email_dns==null" type="text" name="email_dns" id="email_dns" v-model="email_dns">
+                            <input v-else type="text" name="email_dns" id="email_dns" v-model="select_email_dns">
+                        </div>
+                        <div>
+                            <select name="email_sel" id="email_sel" v-model="select_email_dns">
+                                <option :value=null>직접 입력</option>
+                                <option value="naver.com">naver.com</option>
+                                <option value="hanmail.net">hanmail.net</option>
+                                <option value="gmail.com">google.com</option>
+                            </select>
+                        </div>
+                    </div>
+                </section>
             </div>
         </div>
         <div v-else>
@@ -185,7 +175,7 @@
                         <span>아이디</span>
                     </div>
                     <div>
-                        <input type="text" value="아이디를 입력하세요.">
+                        <input type="text" v-model="user['user_id']" placeholder="아이디를 입력하세요.">
                     </div>
                     <div>
 
@@ -212,7 +202,7 @@
                         <span>비밀번호</span>
                     </div>
                     <div class="join-sub-input">
-                        <input type="text">
+                        <input type="text" v-model="user['user_pw']">
 
                     </div>
                 </section>
@@ -231,10 +221,10 @@
 
                 <section class="join-sec5 joinsub">
                     <div class="join-sec-sub">
-                        <span>담당자명</span>
+                        <span>이름</span>
                     </div>
                     <div>
-                        <input type="text">
+                        <input type="text" v-model="user['user_nm']">
 
                     </div>
                 </section>
@@ -247,11 +237,11 @@
                     <div class="email-sec">
 
                         <div>
-                            <input type="text" name="email_id" id="email_id">
+                            <input type="text" name="email_id" id="email_id" v-model="email_id">
                         </div>
                         <div>@</div>
                         <div>
-                            <input type="text" name="email_dns" id="email_dns">
+                            <input type="text" name="email_dns" id="email_dns" v-model="email_dns">
                         </div>
                         <div>
                             <select name="email_sel" id="email_sel">
@@ -315,17 +305,101 @@
 </template>
 
 <script>
-
+import axios from 'axios';
 
 export default {
     data() {
         return {
+            company:{
+                company_id:null,
+                company_nm:null,
+                company_info:null,
+            },
+            user:{
+                user_id:null,
+                user_pw:null,
+                user_eml:null,
+                user_auth:null,
+            },
+            keyword:{
+
+            },
+            //기업 ID 중복 확인
+            companyIdCheck_boolean:null,
+            //사용자 ID 중복 확인
+            userIdCheck_boolean:null,
+            //PW 확인
+            pwCheck:null,
+            passwordCheckFlag:null,
+            email_id:null,
+            email_dns:null,
+            select_email_dns:null,
             selectedMembership: 'one',
             isVisible: false
         }
     },
     methods: {
+        //비밀번호 매칭 확인
+        passwordSyncCheck: function () {
+            console.log("this.user.user_pw : ", this.user.user_pw);
+            console.log("this.pwCheck : ", this.pwCheck);
 
+            if (this.user.user_pw != this.pwCheck) this.passwordCheckFlag = false;
+            else this.passwordCheckFlag = true;
+        },
+        //company ID 중복 검사
+        companyIdCheck: function() {
+            const vm = this;
+            axios({
+                url: '/company/companySelectOne.json',
+                method: 'post',
+                herders: {
+                'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: vm.company
+            }).then( function (response) {
+                // console.log("idCheck - response : ", response.data);
+                if(response.data != null) {
+                    alert("중복된 사업자등록번호 입니다.");
+                    vm.companyIdCheck_boolean = false;
+                    return false;
+                } else {
+                    alert("사용가능한 사업자등록번호 입니다.");
+                    vm.companyIdCheck_boolean = true;
+                    return true;
+                }
+            }).catch( function (error) {
+                console.log("companyIdCheck - error : ", error);
+                alert("중복검사 오류, 다시 시도해주세요.");
+            });
+        },
+
+        //user ID 중복 검사
+        userIdCheck: function() {
+            const vm = this;
+            axios({
+                url: '/user/userSelectOne.json',
+                method: 'post',
+                herders: {
+                'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: vm.user
+            }).then( function (response) {
+                // console.log("idCheck - response : ", response.data);
+                if(response.data != null) {
+                    alert("중복된 ID 입니다.");
+                    vm.userIdCheck_boolean = false;
+                    return false;
+                } else {
+                alert("사용가능한 ID 입니다.");
+                    vm.userIdCheck_boolean = true;
+                    return true;
+                }
+            }).catch( function (error) {
+                console.log("userIdCheck - error : ", error);
+                alert("중복검사 오류, 다시 시도해주세요.");
+            });
+        },
         showDiv: function () {
             this.isVisible = true;
         },
@@ -334,7 +408,15 @@
         }
     },
     watch: {
-
+        "email_id":function(){
+            this.user["user_eml"]=this.email_id+"@"+this.email_dns;
+        },
+        "email_dns":function(){
+            this.user["user_eml"]=this.email_id+"@"+this.email_dns;
+        },
+        "select_email_dns":function(){
+            this.user["user_eml"]=this.email_id+"@"+this.select_email_dns;
+        },
     },
     computed: {
 
package-lock.json
--- package-lock.json
+++ package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "KERIS-1",
+  "name": "KERIS",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
Add a comment
List