JSP
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="<http://java.sun.com/jsp/jstl/fmt>" %>
<%@ taglib prefix="c" uri="<http://java.sun.com/jsp/jstl/core>" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<%
request.setCharacterEncoding("UTF-8");
%>
<!-- style="text-decoration-line:none" -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마이페이지</title>
</head>
<script src="<http://code.jquery.com/jquery-latest.js>"></script>
<script src="<http://dmaps.daum.net/map_js_init/postcode.v2.js>"></script>
<script>
$(document).ready(function(){
$('.nav1_ul_li').mouseenter(function(){
$(this).children('.sub-ul').children('.sub-ul_li').stop().slideDown(400);
});
$('.nav1_ul_li').mouseleave(function(){
$(this).children('.sub-ul').children('.sub-ul_li').stop().slideUp(400);
});
});
</script>
<style>
.nav1{
position: relative;
}
.nav1_ul{
display: flex;
justify-content: center; /* 가로 방향 중앙 정렬 */
width: 100%;
}
.nav1_ul_li {
list-style: none;
text-align: center;
position: relative;
height: 20px; /* 서브메뉴 뜨는 높이 */
margin: 5px 50px 5px 50px;
padding: 0px;
padding-bottom: 5px;
}
.sub-ul{display: flex;
position: absolute;
top: 100%;
transform: translateX(-50%); /* 서브메뉴 위치 조정 */
width: max-content;
}
.sub-ul_li {
list-style: none;
text-align: center;
}
.sub-ul_li {
display: none;
margin: 20px;
}
.nav1_ul_li_a, .sub-nav_a {
color: black;
text-decoration-line: none;
}
.nav1_ul_li:hover {
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: #DE6963;
}
.sub-nav_a:hover {
color: #DE6963;
}
a{
font-weight:bold;
}
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
font-family: "BMJUA", "Noto Sans KR", sans-serif;
}
.container {
width: 100%;
position: relative;
margin-left: auto;
margin-right: auto;
min-width : 986px;
max-width : 986px;
}
li{
font-weight:bold;
}
.imageCircle img {
margin-top: 50px;
width: 200px;
height: 200px;
border-radius: 50%; /* 동그라미 만들기 */
object-fit: fill; /* 우겨 넣기 */
/* object-fit: cover; */ /* 자르기 */
border: 1px solid #ccc;
}
.imageCircle img:hover {
cursor: pointer;
opacity: 0.3;
}
#memberModify{
min-width : 500px;
max-width : 500px;
margin-left: auto;
margin-right: auto;
}
#memberModify p{
font-weight: bold;
text-align: left;
}
#memberPhone1, #memberPhone2, #memberPhone3{
width: 155px;
}
#phone{
width:101.6%;
display: flex;
justify-content: space-between;
align-items: center;
margin-left: auto;
margin-right: auto;
}
#authentication{
background-color: #DE6963;
color: white;
width: 130px;
height: 45px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 0px;
margin-left:8px;
}
#authentication:hover {
background-color: #DE9A63;
color: white;
cursor: pointer;
}
#phone input{
width: 130px;
height: 45px;
font-size: 16px;
border: 1px solid #ccc;
}
#email{
width: 507px;
display: flex;
justify-content: space-between;
align-items: center;
margin-left: auto;
margin-right: auto;
}
#memberEmail1, #memberEmail2{
width: 231px;
}
input {
width:100%;
height: 45px;
border-radius: 5px;
border: 1px solid #ccc;
}
#memberModifySelect{
margin-top:10px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#memberModifySelect a{
margin-bottom:5px;
}
#complete{
align-self: center;
}
#complete{
margin-left:5px;
width:507px;
height: 45px;
background-color: #DE6963;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
margin-bottom:100px;
}
#complete:hover{
background-color: #DE9A63;
}
#chk_zip {
display: flex;
align-items: center;
width:103.5%;
}
#chk_zip a {
margin-right: 10px;
}
#chk_zip input{
width:100%;
height: 45px;
border-radius: 5px;
border: 1px solid #ccc;
margin-right:10px;
}
#chk_zip button {
width: 130px;
height: 45px;
font-size: 16px;
border: 1px solid #ccc;
}
#chk_zip button:hover {
background-color: #B0B3B5;
cursor: pointer;
}
#selectEmail2{
width: 130px;
height: 45px;
font-size: 16px;
border: 1px solid #ccc;
}
#memberPhone1{
width: 50px;
height: 45px;
font-size: 16px;
border: 1px solid #ccc;
}
#adress {
color: white;
width: 150px;
height: 45px;
color: white;
font-size: 16px;
border: 1px solid #ccc;
background-color: #DE6963;
text-align: center;
display: inline-block; /* inline-block으로 설정 */
line-height: 45px; /* 높이와 동일하게 설정하여 수직 중앙 정렬 */
text-decoration: none; /* 링크의 밑줄 제거 (선택 사항) */
font-weight: normal;
}
#adress:hover {
background-color: #DE9A63;
color: white;
font-weight: normal;
}
#memberModifySelect a{
cursor: pointer;
}
</style>
<script>
//중복확인용 변수
var msg1; // document.getElement 쓰기 위함
var msg2; // document.getElement 쓰기 위함
var usable; // '사용가능' 문자 넣기 위함
var not_usable; // '사용불가능' 문자 넣기 위함
var de_check_requirement = new Array();
var check_requirement = new Array();
var result1 = "true"; // ajax - /member/nickNameCheck.do 메서드랑 연관있음 / 닉네임 상태
var InputMemberNameStatusCheck = true; // memberName 입력 상태
var InputEmail1StatusCheck = true; // email1 입력 상태
var InputEmail2StatusCheck = true; // email2 입력 상태
var InputPwdStatusCheck = true; // 비밀번호 입력 상태
var doubleCheckPwd = true; // 비밀번호확인 입력 상태
var checkZip = true; // 우편번호 입력 상태
//닉네임 중복확인 (실시간)
function nickNameCheck(){
var nickName = document.getElementsByName("memberNickName")[0].value;
msg1 = document.getElementById('nickMsg1');
msg2 = document.getElementById('nickMsg2');
if(nickName.length < 2 || nickName.length > 10){
msg1.innerText = '2 ~ 10 글자만 가능합니다.';
msg2.innerText = "";
result1 = "false";
} else{
$.ajax({
url: '${contextPath}/member/nickNameCheck.do',
method: 'post',
data: {'nickName':nickName},
dataType: 'json',
success: function(data){
result1 = data.result;
usable = '사용가능한 닉네임입니다.';
not_usable = '중복되는 닉네임입니다.';
if(result1 == "false"){
msg2.innerText = "";
msg1.innerText = not_usable;
result1 = "false";
}else{
msg1.innerText = "";
msg2.innerText = usable;
result1 = "true";
}
},error: function(data){
alert('error');
}
});
}
};
//입력란 기호에 안맞는 문자 입력 필터
function deInputKo(e){
if(!(e.keyCode >= 37 && e.keyCode <= 40)){
document.getElementById('emailMsg1').innerText = ""; // 재입력 시 경고 메시지 안뜨게
document.getElementById('emailMsg2').innerText = "";
var inputEmail = document.getElementsByName("memberEmail1")[0].value;
var inputEmail2 = document.getElementsByName("memberEmail2")[0].value;
var check = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; // 한글
var check1 = /[~!@#$%";'^,&*()_+|</>=>`?:{[\\}]/g; // 특수문자
var check2 = /\\s+/g; // 중간중간 공백 검사
// var check2 = /^\\s+|\\s+$/g // 얘는 문자 양쪽 끝만 확인
if(check.test(inputEmail) || check1.test(inputEmail) || check2.test(inputEmail)){
InputEmail1StatusCheck = false;
document.getElementById('emailMsg1').innerText = "영문/숫자만 입력해주세요.";
}
if(check.test(inputEmail2) || check2.test(inputEmail2)){
InputEmail2StatusCheck = false;
document.getElementById('emailMsg1').innerText = "공백 및 한글을 제외한 입력이 감지되었습니다.";
}
}
};
//이메일 도메인 선택/직접입력
function choiceEmail(value){
if(value === '직접입력'){
document.getElementsByName("memberEmail2")[0].value = "";
document.getElementsByName("memberEmail2")[0].disabled = false;
} else {
document.getElementsByName("memberEmail2")[0].value = value;
document.getElementsByName("memberEmail2")[0].disabled = true;
document.getElementById('emailMsg1').innerText = ""; // 도메인 선택했으면 경고메시지 초기화
document.getElementById('emailMsg2').innerText = "";
}
if(document.getElementsByName("memberEmail2")[0].value != ""){InputEmail2StatusCheck = true;}
else{InputEmail2StatusCheck = false;}
};
//우편번호 검색 API
function execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var fullRoadAddr = data.roadAddress; // 도로명 주소 변수
var extraRoadAddr = ''; // 도로명 조합형 주소 변수
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraRoadAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraRoadAddr !== ''){
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
// 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.
if(fullRoadAddr !== ''){
fullRoadAddr += extraRoadAddr;
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('memberZip1').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('memberZip2').value = fullRoadAddr;
checkZip = true;
}
}).open();
};
// 최종 확인
function updateMember() {
const form = document.getElementsByTagName('form')[0];
form.onsubmit = function() {
if (InputEmail1StatusCheck && result1 == "true") {
alert('다 입력함');
return true;
} else {
alert('다시 확인');
var location;
var tagId;
// 입력 문제 있는 곳 가는거
if (!InputEmail1StatusCheck) {
tagId = document.getElementById('email');
tagId.scrollIntoView({ behavior: "smooth" });
} else if (!InputEmail2StatusCheck) {
tagId = document.getElementById('email');
tagId.scrollIntoView({ behavior: "smooth" });
} else if (!checkZip) {
tagId = document.getElementById('zip');
tagId.scrollIntoView({ behavior: "smooth" });
}
// 입력 문제 있는거 * 표시 해주는거
if (!InputEmail1StatusCheck) { tagId = document.getElementById('emailCheck'); tagId.innerText = ' *'; }
else { tagId = document.getElementById('emailCheck'); tagId.innerText = ''; }
if (!checkZip) { tagId = document.getElementById('zipCheck'); tagId.innerText = ' *'; }
else { tagId = document.getElementById('zipCheck'); tagId.innerText = ''; }
if (result1 == "false") { tagId = document.getElementById('nickNameCheck'); tagId.innerText = ' *'; }
else { tagId = document.getElementById('nickNameCheck'); tagId.innerText = ''; }
return false; // 폼 제출 방지
}
};
}
// 프로필 사진 변경 관련
function profileImage(){
if (confirm("프로필 사진을 변경하시겠습니까?") == true){
$('#imagesButton').click();
}else{
return false;
}
}
let data = {
boardMyhomeArticleNo: `${selectMyHome.boardMyhomeArticleNo}`,
memberId : `${member.memberId}`,
isLogOn : `${isLogOn}`,
member : `${member}`,
};
// 이미지 업로드 (나중에 미리보기로 만들어볼까?)
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("imagesButton").addEventListener("change", function() {
if (this.files.length > 0) {
var formData = new FormData();
formData.append("file", this.files[0]);
// 아이디 가져오기
var memberId = data.memberId;
// 경로 지정
var src = '/memberProfileImage/' + memberId + '/';
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
processData: false,
contentType: false,
url: "/gami/member/memberProfileImageUpload.do",
data: formData,
dataType: "json",
success: function(fileName) {
alert('프로필 사진이 변경되었습니다.');
alert(fileName.fileName);
var fileName = fileName.fileName;
var image = src + fileName;
alert(image);
// img src 속성에 이미지 경로 넣어주기.
$("#memberProfileImage2").attr("src","");
$("#memberProfileImage").attr("src","");
$("#memberProfileImage").attr("src",image);
$("#memberProfileImage2").attr("src",image);
$("#memberImage").val(fileName);
},
error: function(status) {
alert('사진 업로드 실패');
alert(status);
}
});
} else {
console.log("파일이 선택되지 않았습니다.");
}
});
});
function showPopupDelete() {
window.open("memberDeletePwd.do", "비밀번호 확인", "width=600, height=600, left=711, top=100]");
}
function showPopupPwd() {
window.open("changePassword.do", "비밀번호 수정", "width=600, height=600, left=711, top=100]");
}
</script>
</head>
<body>
<nav class="nav1">
<ul class="nav1_ul">
<li class="nav1_ul_li">프로필
<ul class="sub-ul">
<li class="sub-ul_li"><a href="${contextPath}/mypage/myhome/myPageMyHomeList.do" class="sub-nav_a">나의 게시글</a></li>
<li class="sub-ul_li"><a href="${contextPath}/mypage/bookmark/bookMarkList.do" class="sub-nav_a">북마크</a></li>
<li class="sub-ul_li"><a href="${contextPath}/mypage/like/likeList.do" class="sub-nav_a">좋아요</a></li>
</ul>
</li>
<li class="nav1_ul_li">나의 쇼핑
<ul class="sub-ul">
<li class="sub-ul_li"><a href="${contextPath}/mypage/delivery/deliveryList.do" class="sub-nav_a">주문배송목록</a></li>
<li class="sub-ul_li"><a href="${contextPath}/mypage/wishlist/wishList.do" class="sub-nav_a">상품 찜 목록</a></li>
<li class="sub-ul_li"><a href="#" class="sub-nav_a">포인트</a></li>
<li class="sub-ul_li"><a href="#" class="sub-nav_a">나의 리뷰</a></li>
</ul>
</li class="nav1_ul_li">
<li class="nav1_ul_li"><a style="color:#DE6963;" href="${contextPath}/member/memberModifyForm.do" class="nav1_ul_li_a">설정</a></li>
<li class="nav1_ul_li"><a href="#" class="nav1_ul_li_a">문의내역</a></li>
</ul>
</nav>
<div id="memberModify">
<form action="${contextPath}/member/memberUpdate.do" method="POST">
<div class="imageCircle">
<c:if test="${member.memberImage==null}">
<img id="memberProfileImage2" src="${contextPath}/resources/image/mypage.png" onclick="profileImage()"/><br> <!-- 프로필 사진 넣기 -->
</c:if>
<c:if test="${member.memberImage!=null}">
<img id="memberProfileImage" src="/memberProfileImage/${member.memberId}/${member.memberImage}" onclick="profileImage()"/><br> <!-- 프로필 사진 넣기 -->
</c:if>
<input onchange="imageButtonCilck()" id="imagesButton" type="file" style="display:none;" accept="image/jpeg,image/jpg,image/png" />
<input id="memberImage" name="memberImage" type="hidden" value=''/>
</div>
<!-- readonly : 값은 못바꾸지만 폼타고 전송됨.
disabled : 값을 못바꾸지만 폼으로 전송도 안됨. -->
<p>아이디</p>
<input style="font-size: 16px; color: rgba(0, 0, 0, 0.5);" type="text" value="${member.memberId}" readonly/>
<p id="nickName">닉네임<b id="nickNameCheck"></b></p>
<input type="text" name="memberNickName" maxlength="10" onkeyup="nickNameCheck()" value="${member.memberNickname}" />
<p id="nickMsg1"></p>
<p id="nickMsg2"></p>
<p>이메일<b id="emailCheck" ></b></p>
<div id="email">
<input id="memberEmail1" type="text" name="memberEmail1" onkeyup="deInputKo(event)" value="${member.memberEmail1}"/>
@ <input id="memberEmail2" type="text" name="memberEmail2" onkeyup="deInputKo(event)" value="${member.memberEmail2}"/>
<select style="margin-left:15px;" id="selectEmail2" onchange="choiceEmail(this.value)">
<option class="email2Select" value="직접입력">직접입력</option>
<option class="email2Select" value="gmail.com">gmail.com</option>
<option class="email2Select" value="naver.com">naver.com</option>
<option class="email2Select" value="daum.net">daum.net</option>
<option class="email2Select" value="yahoo.com">yahoo.com</option>
</select>
</div>
<p id="emailMsg1"></p>
<p id="emailMsg2"></p>
<p>전화번호</p>
<div id="phone">
<select id="memberPhone1" name="memberPhone1">
<c:if test="${member.memberPhone1 != '010'}">
<option class="phone1Select" value="010">010</option>
</c:if>
<c:if test="${member.memberPhone1 == '010'}">
<option class="phone1Select" value="010" selected>010</option>
</c:if>
<c:if test="${member.memberPhone1 != '011'}">
<option class="phone1Select" value="011">011</option>
</c:if>
<c:if test="${member.memberPhone1 == '011'}">
<option class="phone1Select" value="011" selected>011</option>
</c:if>
<c:if test="${member.memberPhone1 != '011'}">
<option class="phone1Select" value="016">016</option>
</c:if>
<c:if test="${member.memberPhone1 == '011'}">
<option class="phone1Select" value="016" selected>016</option>
</c:if>
</select>
<b>-</b> <input type="text" name="memberPhone2" maxlength='4' oninput="this.value = this.value.replace(/[^0-9]/g, '')" value="${member.memberPhone2}"/>
<b>-</b> <input type="text" name="memberPhone3" maxlength='4' oninput="this.value = this.value.replace(/[^0-9]/g, '')" value="${member.memberPhone3}"/>
<input type="button" id="authentication" value="본인인증" onclick="verification()" />
</div>
<h2 id="zip" style="margin-top:50px;">주소</h2>
<p>우편번호<b id="zipCheck"></b></p>
<div id="chk_zip">
<input type="text" id="memberZip1" name="memberZip1" readonly value="${member.memberZip1}"/>
<a id="adress" href="javascript:execDaumPostcode()">우편번호 검색</a>
</div>
<p>도로명 주소</p>
<input type="text" id="memberZip2" name="memberZip2" readonly value="${member.memberZip2}" />
<p>상세주소</p>
<input type="text" id="memberZip3" name="memberZip3" value="${member.memberZip3}"/>
<div id="memberModifySelect">
<%-- <a style="margin-top:20px;" href="${contextPath}/member/memberDeleteLastCh.do">탈퇴하기 ></a> --%>
<a style="margin-top:20px;" onclick="showPopupDelete();">탈퇴하기 ></a>
<a onclick="showPopupPwd();">비밀번호 수정 ></a>
<button id="complete" onclick="updateMember()">수정</button>
</div>
</form>
</div>
</body>
</html>