File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="container">
<section class="section register min-vh-100 d-flex flex-column align-items-center justify-content-center py-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-4 col-md-6 d-flex flex-column align-items-center justify-content-center">
<div class="d-flex justify-content-center py-4">
<a href="index.html" class="logo d-flex align-items-center w-auto">
<span class="d-none d-lg-block"> <img :src="logo" alt=""></span>
</a>
</div><!-- End Logo -->
<div class="card mb-3">
<div class="card-body">
<div class=" pb-2">
<h5 class="card-title text-center pb-0 fs-4">회원가입</h5>
</div>
<form class="row g-3 needs-validation " :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate>
<div class="col-12">
<label for="yourName" class="form-label">이름</label>
<input v-model="name" type="text" name="name" class="form-control" id="yourName" required>
<div class="invalid-feedback">이름을 입력해주세요.</div>
</div>
<div class="col-12">
<label for="yourUsername" class="form-label">Email</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input v-model="email" type="text" name="username" class="form-control" id="yourUsername" required>
<div class="invalid-feedback">회사 이메일을 입력해주세요.</div>
</div>
</div>
<div class="col-12">
<label for="yourPassword" class="form-label">비밀번호</label>
<input v-model="password" type="password" name="password" class="form-control" id="yourPassword" required>
<div class="invalid-feedback">비밀번호를 입력해주세요.</div>
</div>
<div class="col-12">
<div class="form-check">
<input v-model="acceptTerms" class="form-check-input" name="terms" type="checkbox" value="" id="acceptTerms" required>
<label class="form-check-label" for="acceptTerms">이용약관에 동의합니다.</label>
<div class="invalid-feedback">이용약관에 동의하셔야 합니다.</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary w-100" type="submit">계정 생성</button>
</div>
<div class="col-12">
<p class="small mb-0">이미 계정이 있으신가요? <router-link to="Login">로그인</router-link></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
password: '',
acceptTerms: false,
formSubmitted: false,
logo: "/client/resources/img/logo_t.png", // 경로를 Vue 프로젝트 구조에 맞게 설정
};
},
methods: {
handleRegister() {
this.formSubmitted = true;
// 이메일과 비밀번호가 빈 값이 아니어야 한다
if (this.email && this.password && this.name && this.acceptTerms) {
// 로컬 스토리지에 회원가입 정보 저장
const userData = {
name: this.name,
email: this.email,
password: this.password,
};
localStorage.setItem("user", JSON.stringify(userData)); // 로컬 스토리지에 데이터 저장
// 계정 생성 후 로그인 페이지로 리디렉션
this.$router.push("/login");
} else {
}
},
},
};
</script>
<style scoped>
</style>