마이페이지지
This commit is contained in:
parent
8375ffee38
commit
931c4b6c9a
@ -191,8 +191,8 @@
|
||||
<div class="dropdown-divider my-1"></div>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="pages-profile-user.html">
|
||||
<i class="bx bx-user bx-md me-3"></i><span>My Profile</span>
|
||||
<a class="dropdown-item" href="javascript:void(0)" @click="goToMyPage">
|
||||
<i class="bx bx-user bx-md me-3"></i><span>My Page</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@ -332,6 +332,10 @@
|
||||
router.push('/login');
|
||||
};
|
||||
|
||||
const goToMyPage = () => {
|
||||
router.push('/mypage');
|
||||
};
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
@ -36,6 +36,12 @@ const routes = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/mypage',
|
||||
name: 'MyPage',
|
||||
component: () => import('@v/mypage/MyPage.vue'),
|
||||
meta: { requiresAuth: true }
|
||||
},
|
||||
{
|
||||
path: '/wordDict',
|
||||
component: () => import('@v/wordDict/wordDict.vue'),
|
||||
|
||||
127
src/views/mypage/MyPage.vue
Normal file
127
src/views/mypage/MyPage.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="card shadow-sm rounded-lg p-6 max-w-2xl mx-auto">
|
||||
<h2 class="text-2xl font-semibold mb-6 text-center">마이페이지</h2>
|
||||
|
||||
<!-- 사용자 정보 표시 -->
|
||||
<div class="mb-6 text-center">
|
||||
<p class="text-gray-700 font-medium">안녕하세요, <span class="font-bold text-blue-600">{{ userInfo?.name }}</span> 님</p>
|
||||
<p class="text-sm text-gray-500">사원번호: {{ userInfo?.employeeNo }}</p>
|
||||
</div>
|
||||
|
||||
<!-- MBTI 선택 -->
|
||||
<label class="block font-medium mb-1">MBTI *</label>
|
||||
<select v-model="form.mbti" class="border border-gray-300 rounded w-full p-2 mb-4">
|
||||
<option disabled value="">선택하세요</option>
|
||||
<option v-for="mbti in mbtiList" :key="mbti.code" :value="mbti.code">{{ mbti.name }}</option>
|
||||
</select>
|
||||
|
||||
<!-- 컬러 선택 -->
|
||||
<label class="block font-medium mb-1">컬러 *</label>
|
||||
<select v-model="form.color" class="border border-gray-300 rounded w-full p-2 mb-1" @change="checkColor">
|
||||
<option disabled value="">선택하세요</option>
|
||||
<option v-for="color in colorList" :key="color.code" :value="color.code">{{ color.name }}</option>
|
||||
</select>
|
||||
<p v-if="colorDuplicated" class="text-red-500 text-sm mb-4">이미 사용 중인 색상입니다.</p>
|
||||
|
||||
<!-- 전화번호 -->
|
||||
<label class="block font-medium mb-1">전화번호 *</label>
|
||||
<input v-model="form.phone" class="border border-gray-300 rounded w-full p-2 mb-1" @blur="checkPhone" />
|
||||
<p v-if="phoneDuplicated" class="text-red-500 text-sm mb-4">이미 등록된 전화번호입니다.</p>
|
||||
|
||||
<!-- 비밀번호 변경 -->
|
||||
<label class="block font-medium mb-1">현재 비밀번호</label>
|
||||
<input type="password" v-model="form.currentPassword" class="border border-gray-300 rounded w-full p-2 mb-4" />
|
||||
|
||||
<label class="block font-medium mb-1">새 비밀번호</label>
|
||||
<input type="password" v-model="form.newPassword" class="border border-gray-300 rounded w-full p-2 mb-1" @input="validatePassword" />
|
||||
<p v-if="passwordWarning" class="text-red-500 text-sm mb-1">비밀번호는 8자 이상, 특수문자/영어/숫자를 포함해야 합니다.</p>
|
||||
|
||||
<label class="block font-medium mb-1">비밀번호 확인</label>
|
||||
<input type="password" v-model="form.newPasswordConfirm" class="border border-gray-300 rounded w-full p-2 mb-1" />
|
||||
<p v-if="form.newPassword !== form.newPasswordConfirm" class="text-red-500 text-sm mb-4">비밀번호가 일치하지 않습니다.</p>
|
||||
|
||||
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 rounded" @click="submit">
|
||||
변경완료
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $api from "@api";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: null, // 사원 정보 저장용
|
||||
form: {
|
||||
mbti: '',
|
||||
color: '',
|
||||
phone: '',
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
newPasswordConfirm: ''
|
||||
},
|
||||
mbtiList: [],
|
||||
colorList: [],
|
||||
colorDuplicated: false,
|
||||
phoneDuplicated: false,
|
||||
passwordWarning: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loadUserInfo();
|
||||
this.loadMBTI();
|
||||
this.loadColor();
|
||||
},
|
||||
methods: {
|
||||
loadUserInfo() {
|
||||
$api.get('/api/user/info').then(res => {
|
||||
this.userInfo = res.data.result;
|
||||
|
||||
// 폼에 사원 데이터 반영 (전화번호, mbti, color 등)
|
||||
this.form.phone = this.userInfo.phone;
|
||||
this.form.mbti = this.userInfo.mbti;
|
||||
this.form.color = this.userInfo.color;
|
||||
});
|
||||
},
|
||||
loadMBTI() {
|
||||
$api.get('/api/user/mbti').then(res => this.mbtiList = res.data.result);
|
||||
},
|
||||
loadColor() {
|
||||
$api.get('/api/user/color', { params: { type: 'main' } }).then(res => this.colorList = res.data.result);
|
||||
},
|
||||
checkColor() {
|
||||
$api.get('/api/user/checkColor', { params: { memberCol: this.form.color } })
|
||||
.then(res => this.colorDuplicated = res.data.result);
|
||||
},
|
||||
checkPhone() {
|
||||
$api.get('/api/user/checkPhone', { params: { memberTel: this.form.phone } })
|
||||
.then(res => this.phoneDuplicated = !res.data.result);
|
||||
},
|
||||
validatePassword() {
|
||||
const regex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*()_+]).{8,}$/;
|
||||
this.passwordWarning = !regex.test(this.form.newPassword);
|
||||
},
|
||||
submit() {
|
||||
if (this.colorDuplicated || this.phoneDuplicated || this.passwordWarning || this.form.newPassword !== this.form.newPasswordConfirm) {
|
||||
alert('입력값을 다시 확인해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
$api.post('/api/user/checkPassword', {
|
||||
currentPassword: this.form.currentPassword
|
||||
}).then(res => {
|
||||
if (res.data.result) {
|
||||
$api.patch('/api/user/pwNew', {
|
||||
newPassword: this.form.newPassword
|
||||
}).then(() => alert('비밀번호가 변경되었습니다.'));
|
||||
} else {
|
||||
alert('현재 비밀번호가 일치하지 않습니다.');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user