<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" v-if="!isPasswordValid && userPassword.newPassword !== null"> <img :src="erroricon" alt=""> <span>영문, 숫자, 특수문자를 최소 한 가지씩 조합하고 8자 이상 ~ 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" v-if="newPasswordCheck !== null && !passwordsMatch"> <img :src="erroricon" alt=""><span>비밀번호가 일치하지 않습니다.</span> </div> </dd> </dl> </form> <div class="btn-group flex-end"> <button class="signout" type="button" @click="fnDeleteUser">회원탈퇴</button> <button class="update" 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; } // 정규식: 영문, 숫자, 특수문자를 최소 한 가지씩 조합하고 8자 이상 20자 이내 const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,20}$/; this.isPasswordValid = passwordRegex.test(this.userPassword.newPassword); }, async fnDeleteUser() { 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.isValidationPasswdord()) { alert("수정 할 내용이 없습니다."); } else { if (confirm("비밀번호 변경을 하시겠습니까?")) { try { const response = await updatePassword(this.$store.state.userId, this.userPassword); if (response.status === 200) { this.resetForm(); alert("비밀번호가 변경되었습니다."); window.location.reload(); // 페이지 새로 고침 } } catch (error) { if (error.response && error.response.status === 401) { alert("비밀번호 변경이 실패하였습니다."); window.location.reload(); // 페이지 새로 고침 } } } } } else { if (this.$store.state.userNm !== this.userInfo.userNm) { if (this.isValidationPasswdord()) { if (confirm("회원정보를 변경을 하시겠습니까?")) { 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) { if (error.response && error.response.status === 401) { alert("회원정보 변경이 실패하였습니다."); window.location.reload(); // 페이지 새로 고침 } } } } else { if (confirm("회원과 비밀번호를 변경하시겠습니까?")) { 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) { if (error.response && error.response.status === 401) { alert("회원 및 비밀번호 변경이 실패하였습니다."); window.location.reload(); // 페이지 새로 고침 } } } } } else { if (this.isValidationPasswdord()) { alert("수정 할 내용이 없습니다."); } else { if (confirm("비밀번호 변경을 하시겠습니까?")) { try { const response = await updatePassword(this.$store.state.userId, this.userPassword); if (response.status === 200) { this.resetForm(); alert("비밀번호가 변경되었습니다."); window.location.reload(); // 페이지 새로 고침 } } catch (error) { if (error.response && error.response.status === 401) { alert("비밀번호 변경이 실패하였습니다."); window.location.reload(); // 페이지 새로 고침 } } } } } } } }, watch: {}, computed: { passwordsMatch() { return this.userPassword.newPassword === this.newPasswordCheck; } }, components: {}, mounted() { }, }; </script>