File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="login-container">
<div class="login-bg">
<div>
</div>
</div>
<div class="login ">
<div class="logo flex justify-end"><img src="../resources/img/logo.png" alt=""></div>
<div class="join-box">
<div class="flex align-center justify-start mb40">
<img src="../resources/img/icon1.png" alt="" class="mr20">
<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>
<!-- 학생 -->
<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="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>
<div class="flex justify-between align-center mb10">
<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>
<div class="flex justify-between align-center mb10">
<p class="title" for="password">비밀번호 확인</p>
<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>
<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="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">
<p class="title" for="username">학교</p>
<div class="search-wrap flex justify-end mb20" style="width: 100%;">
<select name="" id="" class="mr10 data-wrap">
<option value="">학년</option>
</select>
<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="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="submitForm"><img
src="../resources/img/btn_.png" alt="">
<p>회원가입</p>
</button>
</div>
<!-- 학부모 -->
<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="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>
<div class="flex justify-between align-center mb10">
<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>
<div class="flex justify-between align-center mb10">
<p class="title" for="password">비밀번호 확인</p>
<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>
<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="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">
<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 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>
</div>
<div class="mb30 flex justify-between align-center">
<p class="title" for="username">학생 정보</p>
<div class="search-wrap flex justify-end mb20" style="width: 100%;">
<select name="" id="" class="mr10 data-wrap">
<option value="">학년</option>
</select>
<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="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="submitForm"><img
src="../resources/img/btn_.png" alt="">
<p>회원가입</p>
</button>
</div>
<!-- 선생님 -->
<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="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>
<div class="flex justify-between align-center mb10">
<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>
<div class="flex justify-between align-center mb10">
<p class="title" for="password">비밀번호 확인</p>
<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>
<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="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">
<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>
</div>
<div class="mb30 flex justify-between align-center">
<p class="title" for="username">학교</p>
<div class="search-wrap flex justify-end mb20" style="width: 100%;">
<select name="" id="" class="mr10 data-wrap">
<option value="">학년</option>
</select>
<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="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="submitForm"><img
src="../resources/img/btn_.png" alt="">
<p>회원가입</p>
</button>
</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>
</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,
}
},
methods: {
submitForm() {
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('/Login.page');
},
closeModal() {
this.showModal = false;
},
buttonSearch() {
this.searchOpen = true;
},
closeBtn() {
this.searchOpen = false;
},
},
components: {
SvgIcon
},
}
</script>
<style scoped></style>