File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="content">
<div class="sub-title-area mb-110">
<h2>내 정보 수정</h2>
<div class="breadcrumb-list">
<ul>
<li><img :src="homeicon" alt="Home Icon"></li>
<li><img :src="righticon" alt="Home Icon"></li>
<li>내 정보 수정</li>
</ul>
</div>
</div>
<h3>기본정보</h3>
<form action="" class="info-form mb-50">
<dl>
<dd>
<label for="id" class="require">아이디</label>
<input type="text" id="id" v-model="$store.state.loginId" readonly>
</dd>
<div class="hr"></div>
<dd>
<label for="name" class="require">이름</label>
<input type="text" id="name" v-model="userInfo.userNm">
</dd>
</dl>
</form>
<h3>비밀번호 변경</h3>
<form action="" class="pwchange-form mb-50">
<dl>
<dd>
<label for="id">현재 비밀번호</label>
<input type="password" id="id" placeholder="비밀번호를 입력하세요." v-model="userPassword.oldPassword">
</dd>
<div class="hr"></div>
<dd>
<label for="pw">새 비밀번호</label>
<input type="password" id="pw" placeholder="새 비밀번호를 입력하세요." v-model="userPassword.newPassword"
@input="validatePassword">
<div class="invalid-feedback border" v-if="!isPasswordValid && userPassword.newPassword !== null">
<img :src="erroricon" alt="">
<span>영문, 숫자, 특수문자를 최소 한 가지씩 조합하고 9자 이상 ~ 20자 이내로 입력해주세요.</span>
</div>
</dd>
<div class="hr"></div>
<dd>
<label for="pwCheck">새 비밀번호 확인</label>
<input type="password" id="pwCheck" placeholder="새 비밀번호를 입력하세요." v-model="newPasswordCheck">
<div class="invalid-feedback border" v-if="newPasswordCheck !== null && !passwordsMatch">
<img :src="erroricon" alt=""><span>비밀번호가 일치하지 않습니다.</span>
</div>
</dd>
</dl>
</form>
<div class="btn-group flex-end">
<button class="red-line" type="button" @click="fnDeleteUser">회원탈퇴</button>
<button class="blue-line" type="button" @click="fnUpdateUser">수정</button>
</div>
</div>
</template>
<script>
import axios from "axios";
import { updateUsers, logOutProc, updatePassword } from "../../../resources/api/user"
export default {
data() {
return {
// Define the image sources
homeicon: 'client/resources/images/icon/home.png',
erroricon: 'client/resources/images/icon/error.png',
righticon: 'client/resources/images/icon/right.png',
userInfo: {
userNm: this.$store.state.userNm,
userSttus: "1",
useAt: "Y"
},
userPassword: {
oldPassword: null,
newPassword: null
},
newPasswordCheck: null,
isPasswordValid: false // 비밀번호 유효성 체크를 위한 변수
};
},
methods: {
resetForm() {
// 사용자 정보 초기화
this.userPassword = {
oldPassword: null,
newPassword: null,
};
this.newPasswordCheck = null; // 비밀번호 확인 초기화
},
validatePassword() {
// 빈 문자열이나 null 체크
if (!this.userPassword.newPassword) {
this.isPasswordValid = false; // 빈 문자열일 경우 유효성 false
return;
}
// 정규식: 영문, 숫자, 특수문자를 최소 한 가지씩 조합하고 9자 이상 20자 이내
const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{9,20}$/;
this.isPasswordValid = passwordRegex.test(this.userPassword.newPassword);
},
async fnDeleteUser() {
if (confirm("회원탈퇴를 하시겠습니까?")) {
try {
this.userInfo.userSttus = "0";
this.userInfo.useAt = "N";
// 사용자 정보를 업데이트하는 API 호출
const response = await updateUsers(this.$store.state.userId, this.userInfo);
console.log(response); // 응답 확인
if (response.status === 200) {
logOutProc()
.then(() => {
console.log('로그아웃 성공 - 서버 측 쿠키 삭제 완료');
this.$store.commit('setStoreReset'); // 로그아웃 성공 후 스토어 초기화
this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트
})
.catch(err => {
console.error('로그아웃 처리 중 오류:', err);
this.$store.commit('setStoreReset'); // 오류가 있어도 스토어는 초기화
this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트
});
}
} catch (error) {
console.error("User error:", error); // 에러 로그
const message = error.response?.data?.message || "회원탈퇴퇴에 실패했습니다.";
alert(message);
}
}
},
//사용자 이름 벨류데이션 체크
isValidationUser() {
return this.userInfo.userNm == null || this.userInfo.userNm == '';
},
//사용자 비밀번호 벨류데이션 체크
isValidationPasswdord() {
return this.userPassword.oldPassword == null || this.userPassword.oldPassword == '' || this.userPassword.newPassword == null || this.userPassword.newPassword == '' || this.newPasswordCheck == null || this.newPasswordCheck == ''
},
async fnUpdateUser() {
if (this.isValidationUser()) {
if (this.$isEmpty(this.userPassword.oldPassword)) {
alert("비밀번호를 확인해주세요.")
} else if (this.$isEmpty(this.userPassword.newPassword)) {
alert("새 비밀번호를 확인해주세요.")
} else if (this.userPassword.newPassword != this.newPasswordCheck) {
alert("새 비밀번호를 확인해주세요.")
} else {
try {
const response = await updatePassword(this.$store.state.userId, this.userPassword);
if (response.status === 200) {
this.resetForm();
alert("비밀번호가 변경되었습니다.");
window.location.reload(); // 페이지 새로 고침
}
} catch (error) {
// HTTP 오류가 발생한 경우
const errorMessage = error.response?.data?.message || "비밀번호 변경이 실패하였습니다.";
alert(errorMessage); // 오류 메시지 표시
window.location.reload(); // 페이지 새로 고침
}
}
} else {
if (this.$store.state.userNm !== this.userInfo.userNm) {
if (this.isValidationPasswdord()) {
if (confirm("회원정보를 변경을 하시겠습니까?\n(이름은 2자 이상 50자 이하여야 합니다. 특수문자 제외)")) {
if (
this.userInfo.userNm &&
this.userInfo.userNm.length >= 2 &&
this.userInfo.userNm.length <= 50 &&
/^[\u3131-\u3163\uAC00-\uD7A3a-zA-Z0-9]*$/.test(this.userInfo.userNm) // 특수문자 제외
) {
try {
const response = await updateUsers(this.$store.state.userId, this.userInfo);
if (response.status === 200) {
this.$store.commit("setUserNm", this.userInfo.userNm);
this.resetForm();
alert("회원정보가 변경되었습니다.");
window.location.reload(); // 페이지 새로 고침
}
} catch (error) {
// HTTP 오류가 발생한 경우
const errorMessage = error.response?.data?.message || "회원정보 변경이 실패하였습니다.";
alert(errorMessage); // 오류 메시지 표시
window.location.reload(); // 페이지 새로 고침
}
} else {
alert("이름은 2자 이상 50자 이하여야 합니다. 특수문자 제외");
}
}
} else {
if (confirm("회원과 비밀번호를 변경하시겠습니까?")) {
if (this.$isEmpty(this.userPassword.oldPassword)) {
alert("비밀번호를 확인해주세요.")
} else if (this.$isEmpty(this.userPassword.newPassword)) {
alert("새 비밀번호를 확인해주세요.")
} else if (this.userPassword.newPassword != this.newPasswordCheck) {
alert("새 비밀번호를 확인해주세요.")
} else {
try {
const res = await updateUsers(this.$store.state.userId, this.userInfo);
const response = await updatePassword(this.$store.state.userId, this.userPassword);
if (res.status === 200 && response.status === 200) {
this.resetForm();
alert("회원과 비밀번호를 변경되었습니다.");
window.location.reload(); // 페이지 새로 고침
}
} catch (error) {
// HTTP 오류가 발생한 경우
const errorMessage = error.response?.data?.message || "비밀번호 변경이 실패하였습니다.";
alert(errorMessage); // 오류 메시지 표시
window.location.reload(); // 페이지 새로 고침
}
}
}
}
} else {
if (confirm("비밀번호 변경을 하시겠습니까?")) {
if (this.$isEmpty(this.userPassword.oldPassword)) {
alert("비밀번호를 확인해주세요.")
} else if (this.$isEmpty(this.userPassword.newPassword)) {
alert("새 비밀번호를 확인해주세요.")
} else if (this.userPassword.newPassword != this.newPasswordCheck) {
alert("새 비밀번호를 확인해주세요.")
} else {
try {
const response = await updatePassword(this.$store.state.userId, this.userPassword);
if (response.status === 200) {
this.resetForm();
alert("비밀번호가 변경되었습니다.");
window.location.reload(); // 페이지 새로 고침
}
} catch (error) {
// HTTP 오류가 발생한 경우
const errorMessage = error.response?.data?.message || "비밀번호 변경이 실패하였습니다.";
alert(errorMessage); // 오류 메시지 표시
window.location.reload(); // 페이지 새로 고침
}
}
}
}
}
}
},
watch: {},
computed: {
passwordsMatch() {
return this.userPassword.newPassword === this.newPasswordCheck;
}
},
components: {},
mounted() { },
};
</script>