Code - yjryu/KERIS

<template> <div class="w1400"> <section class="join-logo"> <h1>회원가입</h1> </section> <section class="join-b"> <div class="join-b-button"> <input type="radio" id="company" v-model="selectedMembership" value="company"> <label for="company" class="radio-t t1" :style="{ backgroundColor: selectedMembership === 'company' ? '#86868644' : '#e2ecfc' }">기관회원 <img src="../../../../resources/jpg/join-bt2.png" alt=""></label> <input type="radio" id="two" v-model="selectedMembership" value="two"> <label for="two" class="radio-t t2" :style="{ backgroundColor: selectedMembership === 'common' ? '#86868644' : '#e6fff1' }">일반회원 <img src="../../../../resources/jpg/join-bt.png" alt=""></label> </div> </section> <div v-if="selectedMembership === 'company'"> <div class="login-info2"> <div> <h3>회사소개</h3> <hr> </div> <div class="login-info-grid"> <div class="login-info-grid-1"> <section class="join-sec0"> <div> <p id="logoImg" ref="logoImg">logo</p> <img id="logoImg" ref="logoImg" style="height:250px;" /> <input type="file" accept="image/*" name="logoImg" id="logoImg" style="display: none;" /> <label for="logoImg">파일선택</label> </div> </section> </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>  </section> <section class="join-sec1 joinsub0-1"> <div class="join-sec-sub "> <span>회사명</span> </div> <div> <input type="text" v-model="company['company_nm']" placeholder="회사명을 입력해주세요."> </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 j-s-3"> <div class="join-sec-sub"> <span>회사소개글</span> </div> <div class="join-sub-input"> <input type="text" v-model="company['company_info']"> </div> </section> <section class="join-sec4 joinsub"> <div class="join-sec-sub join-sec-1"> <span>회사소개서 첨부파일</span> </div> <div class="join-sub-input"> <input type="file" name="companyProfile" id="companyProfile" ref="companyProfile" @change="companyProfileUpload" /> </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-sec4 joinsub"> <div class="join-sec-sub join-sec-1"> <span>담당자 명함</span> </div> <div class="join-sub-input"> <input type="file" accept="image/*" name="imgFile" id="businessCardImg" ref="businessCardImg" @change="businessCardUpload" /> </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> <div class="login-info"> <div> <h3>회원정보</h3> <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> </div> <div> <input type="text" v-model="user['user_nm']"> </div> </section> <section class="join-sec6"> <div class="join-sec-sub"> <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="">직접 입력</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 class="join-w1400"> <section class="join-email-bt"> <input type="checkbox"> <span>E-mail 구독서비스를 신청하시겠습니까?</span> </section> <section class="join-end-bt"> <button>이전</button> <button v-if="selectedMembership === 'company'" @click="commonFileInsert">회원가입</button> <button v-else @click="userInsert">회원가입</button> </section> </div> </div>  <div class="joinmodal" v-if="isVisible"> <section class="join-modal-a"> <div> <h1>회원가입 안내</h1> </div> <div> <p>회원가입이 완료되었습니다. 승인 결과는 작성해주신 이메일로 발송될 예정입니다. 회원가입 승인 전까지 특정 서비스는 이용하실 수 없으며, 승인 이후 모든 서비스를 이용하실 수 있습니다. 또한, 해당 기업은 같은 기업명으로 중복 계정 생성이 불가합니다. </p> </div> <div> <button @click="hideDiv">확인</button> </div> </section> </div> </template> <script> import axios from 'axios'; export default { data() { return { company: { company_id: null, company_nm: null, company_info: null, file_id: null, }, user: { user_id: null, user_pw: null, user_eml: null, user_auth: null, }, file: null, keyword: { }, logo_img: null, business_card_img: null, company_profile: null, //기업 ID 중복 확인 companyIdCheck_boolean: null, //사용자 ID 중복 확인 userIdCheck_boolean: null, //PW 확인 pwCheck: null, passwordCheckFlag: null, email_id: null, email_dns: null, select_email_dns: null, selectedMembership: 'company', 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("중복검사 오류, 다시 시도해주세요."); }); }, userInsert: function () { this.user.user_auth = this.selectedMembership; const vm = this; axios({ url: "/user/userInsert.json", method: "post", headers: { "Content-Type": "application/json; charset=UTF-8", }, data: vm.user, }).then(function (response) { console.log("userInsert - response: ", response.data); vm.isVisible = true; vm.loginPage(); }).catch(function (error) { console.log("userInsert - error : ", error); }); }, //회원가입 등록 companyInsert: function () { const vm = this; axios({ url: "/company/companyInsert.json", method: "post", headers: { "Content-Type": "application/json; charset=UTF-8", }, data: vm.company, }).then(function (response) { console.log("companyInsert - response: ", response.data); vm.userInsert(); }).catch(function (error) { console.log("companyInsert - error : ", error); }); }, joinInsert: function () { if (this.selectedMembership == "company") { this.companyInsert(); } else { this.userInsert(); } }, //file 등록 commonFileInsert: function () { const vm = this; //this.post를 문자열로 변경 후, 바이너리 형태로 변형한 다음, FormData에 담을 필요 없음 //vm.formData.append('params', new Blob([JSON.stringify(this.post)],{type: 'application/json'})); //문자열로만 변경한 후, FormData에 담기 vm.file.append('params', JSON.stringify(this.company)); // if (this.joinInsertCheck()) { // return; // }; axios({ url: "/commonFile/commonFileInsert.file", method: "post", headers: { "Content-Type": "multipart/form-data; charset=UTF-8", }, data: vm.file, }).then(function (response) { console.log("commonFileInsert - response : ", response.data); vm.company["file_id"] = response.data; console.log("ok check : "); // vm.joinInsert(); }).catch(function (error) { console.log("commonFileInsert - error : ", error); }); }, //로고 이미지 등록 logoUpload: function (e) { const vm = this; for (const file of e.target.files) { vm.file.append('logo_img', file); var reader = new FileReader(); reader.onload = function (e) { var output = document.getElementById("logoImg"); output.src = reader.result; }; reader.readAsDataURL(file); } }, //명함 이미지 등록 businessCardUpload: function (e) { const vm = this; for (const file of e.target.files) { vm.file.append('business_card_img', file); var reader = new FileReader(); reader.onload = function (e) { var output = document.getElementById("businessCardImg"); output.src = reader.result; }; reader.readAsDataURL(file); } }, companyProfileUpload: function (e) { const vm = this; for (const file of e.target.files) { vm.file.append('company_profile', file); } }, // companyProfileUpload: function (e) { // const vm = this; // vm.company_profile = new FormData() // for (const file of e.target.files) { // vm.company_profile.append('company_profile', file); // } // }, //유효성 검사 joinInsertCheck: function () { if (COMMON_UTIL.isEmpty(this.post["main_number"]) == true) { alert("구간을 선택해주세요"); // this.$refs["main_number"].focus(); return true; } if (COMMON_UTIL.isEmpty(this.post["sub_number"]) == true) { alert("구간번호를 입력해주세요"); // this.$refs["sub_number"].focus(); return true; } if (COMMON_UTIL.isEmpty(this.post["season"]) == true) { alert("계절을 선택해주세요"); // this.$refs["season"].focus(); return true; } // if(COMMON_UTIL.isEmpty(this.post["main_number"])==true){ // alert("항공뷰 ID를 입력해주세요"); // this.$refs["main_number"].focus(); // } }, showDiv: function () { this.isVisible = true; }, hideDiv: function () { this.isVisible = false; } }, 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: { }, mounted() { console.log('Join mounted'); this.file = new FormData() } } </script> <style scoped> /* 모달 */ .joinmodal { width: 100%; height: 100%; background-color: #33333324; margin: 0 auto; text-align: center; padding: 3rem; position: fixed; top: 0; left: 0; } .join-modal-a { position: fixed; top: 50%; left: 50%; padding: 4rem; border-radius: 2rem; background-color: #f9f9f9; transform: translate(-50%, -50%); /* margin: 0 auto; */ box-shadow: 2px 2px 5px #86868644; width: 25%; } .join-modal-a h1 { font-size: 2rem; padding: 3rem 0 0 0; } .join-modal-a p { width: 85%; margin: 0 auto; font-size: 1.5rem; padding: 3rem; text-align: left; } .join-modal-a button { width: 20%; background-color: #3f87f7; border-radius: 1.5rem; color: white; font-family: "Pretendard-Regular"; } /* ----------------------------------- */ .join-b { width: 100%; /* border: 1px solid red; */ } .join-logo { padding: 6rem; } .login-info p { color: rgb(255, 0, 0); padding: 0 1rem; font-size: 1.5rem; } .join-logo h1 { font-family: SBaggroM; color: #0e0077; font-size: 4rem; } .join-b-button { width: 50%; display: grid; grid-template-columns: 1fr 1fr; margin: 0 auto; gap: 6rem; flex-direction: row; /* padding: 9rem; */ } .join-b-button input[type="radio"] { display: none; } .join-b-button button { height: 20rem; display: grid; grid-template-columns: 1fr; border-radius: 2rem; text-align: center; box-shadow: 2px 2px 5px #86868644; /* padding: 1rem; */ } .join-b-button button p { padding: 3rem 0 0; /* padding: 3rem 0rem 1rem 3rem; */ font-size: 3rem; font-family: SBaggroM; color: #014099; } .join-b-button button img { width: 200px; height: 100px; text-align: center; margin: 0 auto; /* border: 1px solid red; */ background-position: center; } .background { background-color: #000000; } .join-b-button button:nth-child(1).background { background-color: #000000; } .light { z-index: 1; background-color: #ff0000; } .join-b-button button:nth-child(2) { background-color: #e6fff1; } .join-b-button button:nth-child(2) img { width: 100px; } .join-b-button button:nth-child(2) p { color: #0e5e2e; } .radio-t { padding: 3rem; height: 25rem; font-size: 3rem; border-radius: 2rem; font-family: SBaggroM; margin: 0 auto; box-shadow: 2px 2px 5px #33333330; text-align: center; } .t1 { padding: 6rem 0; color: #014099; background-color: #e2ecfc; } .t1 img { padding: 1rem; width: 90%; margin: 0 auto; } .t2 img { padding: 1rem; width: 50%; margin: 0 auto; } .t2 { padding: 6rem 0; color: #0e5e2e; background-color: #e6fff1; } /* 공통요소-------------------------------------------------------------------------*/ hr { margin: 1rem 0 3rem 0; border: 1px solid #cbcbcb; } section div span { font-size: 1.5rem; font-family: "Pretendard-Regular"; /* float: left; */ color: #3f87f7; padding: 1rem 1rem 1rem 5rem; } section div span span { padding: 0rem; color: #a6a6a6; } section div input { width: 100%; padding: 1rem; border: 1px solid #cbcbcb; color: #cbcbcb; border-radius: 0.5rem; } section div button { width: 100%; padding: 1rem; cursor: pointer; border-radius: 0.5rem; } section div select { width: 100%; padding: 1rem; border: 1px solid #cbcbcb; border-radius: 0.5rem; color: #6b6b6b; font-family: "Pretendard-Regular"; } /* -------------------------------------------------------------------------------- */ .login-info, .login-info2 { width: 50%; margin: 0 auto; } .login-info2 { display: block; } .login-info2.Chacked { display: none; } .login-info h3, .login-info2 h3 { color: #0e0077; font-size: 2rem; font-family: "Pretendard-Regular"; padding: 3rem 1rem 1rem 1rem; } .joinsub0 { padding: 1rem; display: grid; grid-template-columns: 200px 2fr 1fr; gap: 1rem; } .j-s-3 { display: grid; grid-template-rows: 30rem; } .j-s-3 input { height: 100%; } .join-sec1 button { font-size: 1.5rem; color: white; font-family: "Pretendard-Regular"; background-color: #3f87f7; } .joinsub { padding: 1rem; display: grid; grid-template-columns: 200px 2fr; gap: 1rem; } .join-sec6 { padding: 1rem; display: grid; grid-template-columns: 200px 1fr; gap: 1rem; } .join-sec6 div:nth-child(3) { padding: 1rem 0; font-size: 1.5rem; font-family: "Pretendard-Regular"; } .login-info-grid { display: grid; grid-template-columns: 100px 1fr; } .join-sec0 { display: grid; padding: 2rem; grid-row: 1 / span 3; } .join-sec0 div p { width: 100px; height: 100px; line-height: 100px; border-radius: 50%; text-align: center; color: #333; font-size: 2.5rem; font-family: "Pretendard-Regular"; background-color: #b5b5b5; /* border: 1px solid red; */ box-shadow: 2px 2px 5px #33333328; } .joinsub0-1 { padding: 1rem; display: grid; grid-template-columns: 209px 2fr; } .join-w1400 { width: 50%; margin: 0 auto; } .join-email-bt { font-size: 1.6rem; padding: 3rem 3rem 3rem 0rem; } .join-email-bt input[type=checkbox] { margin: 1rem; /* border: 1px solid red; */ transform: scale(1.5); } .join-email-bt span { color: #898989; font-family: "Pretendard-Regular"; } .join-end-bt { display: grid; grid-template-columns: 25% 73%; gap: 1rem; padding: 6rem 0rem 6rem 0rem; } .join-end-bt button { padding: 2rem; cursor: pointer; border-radius: 1.2rem; font-size: 1.5rem; font-family: "Pretendard-Regular"; } .join-end-bt button:nth-child(2) { background-color: #3f87f7; color: white; } .login-info2 { width: 50%; } .email-sec { display: grid; grid-template-columns: 1fr 30px 1fr 1fr; } .email-sec div { /* padding: 2rem; */ padding: 1rem 0; font-size: 1.5rem; font-family: "Pretendard-Regular"; /* border: 1px solid red; */ text-align: center; gap: 1rem; } .email-sec div:nth-child(2) { padding: 2rem 0; } @media all and (min-width: 767px) and (max-width: 1023px) {} @media all and (min-width: 1023px) and (max-width: 1268px) { .email-sec { width: 100%; display: grid; /* border: 1px solid red; */ grid-template-columns: 1fr 30px 1fr 1fr; } .email-sec div { /* padding: 2rem; */ padding: 1rem 0; font-size: 1.5rem; font-family: "Pretendard-Regular"; /* border: 1px solid red; */ text-align: center; gap: 1rem; } .email-sec div:nth-child(2) { padding: 2rem 0; } .login-info2 { width: 50%; } } </style>