soozya
[FRONT] 회원정보 확인하기 본문
[👩🏻💻소스코드]
<%@page contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/Zspace/js/asj.js?ver=1"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="/Zspace/css/bootstrap.min.css" rel="stylesheet">
<link href="/Zspace/css/asj.css" rel="stylesheet">
<link href="/Zspace/css/tool.css" rel="stylesheet">
<title>::회원정보 수정::</title>
<script>
$(function(){
$('#email_sel').change(function(){
$("#email_sel option:selected").each(function(){
if($(this).val()=='1'){
$('#email2').val('');
$('#email2').attr("disabled",false); //#email2 활성화
}else{
$('#email2').val($(this).text()); //선택값 입력
$('#email2').attr("disabled",true); //#email2 비활성화
}
})
})
})
</script>
<style>
table td{
padding-left:10px
}
</style>
</head>
<body>
<jsp:include page="../sideBar.jsp" />
<div id="contents"> <!-- 사이드 제외 전체구역 -->
<div class="main">
<div class="top">
<img src="/Zspace/icon/mem_join.png" id="mem_info_img" width="50px">
<div id="mem_info"><font size="4"><b>회원정보</b></font><br>
회원정보 수정이 가능합니다.<p>
</div>
<hr>
</div> <!-- top -->
<div class="middle">
<table id="mem_info_tb" align="center" border="2px solid gray">
<tr>
<td width="120px">이름</td>
<td><input type="text" name="mem_name" disabled></td>
</tr>
<tr>
<td width="120px">아이디</td>
<td><input type="text" name="mem_id" disabled></td>
</tr>
<tr>
<td width="120px">비밀번호</td>
<td><input type="password" name="mem_pwd"></td>
</tr>
<tr>
<td width="120px">비밀번호 확인</td>
<td><span class="pwu_pop" title="※ 비밀번호 입력 조건
- 영소문자 / 숫자 / 특수기호 3가지 포함 8자~16자
- 입력가능 특수문자 [ ~, !, @, #, $, ^, -, _ ]
- 공백 입력 불가능">
<input type="password" name="mem_pwd2"></span></td>
</tr>
<tr id="addr">
<td width="120px">주소</td>
<td><input type="text" name="mem_zipcode">
<button id="zipbtn">우편번호 검색</button><p><p>
<input type="text" name="mem_addr1">
<input type="text" name="mem_addr2" width="70px" placeholder="추가 주소를 입력하세요">
</td>
</tr>
<tr>
<td width="120px">핸드폰 번호</td>
<td><input type="text" name="mem_phone"></td>
</tr>
<tr>
<td width="120px">이메일</td>
<td><input type="text" name="mem_email" size="13"> @
<input type="text" name="mem_email2" id="email2" size="13">
<select name="mem_email_sel" id="email_sel">
<option value="" selected>선택하세요</option>
<option value="1">직접 입력</option>
<option value="daum.net">daum.net</option>
<option value="google.com">google.com</option>
<option value="naver.com">naver.com</option>
<option value="nate.com">nate.com</option>
<option value="empas.com">empas.com</option>
</select>
</td>
</tr>
</table>
<div>
<button id="update_btn" onclick="update()">수정 완료</button>
<a href="login.jsp"><button id="mem_info_close_btn">취소</button></a>
<button id="delete_mem_btn" onclick="delpop()">회원 탈퇴하기</button>
</div>
</div><!-- middle -->
</div><!-- main -->
</div> <!-- content -->
<jsp:include page="../footer.jsp" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/Zspace/js/bootstrap.min.js"></script>
</body>
</html>
[💬설명]
📢 회원가입 양식과 거의 유사함
1️⃣ 이름, 아이디는 수정할 수 없도록 'disabled' 입력
◾ 'disabled', 'readonly' 모두 비활성화 되지만 시각적으로 명확하게 보이길 바랐음.
- table을 <form>태그로 묶어줬어야 했는데, 이 당시 화면구현을 빨리 해야돼서 생각하지 못했었음..ㅠㅠ
백엔드 맡은 팀원이 확인하고 form태그로 묶어서 구현 완~
👉🏻 이름 : disabled
👉🏻 아이디 : readonly
2️⃣ 회원 정보 '수정완료'
◾ 프론트구현 당시 시각적으로 분명하게 변하는 과정을 보여주기 위해 로그인 창으로 연결하였음.
- 백엔드 담당 팀원은 수정 페이지에 그대로 머무르게 코드 변경함.
⬇
👉🏻수정 완료 클릭 시 alert창이 뜨고, 로그인 창으로 연결
3️⃣ '회원탈퇴하기' 팝업창
◾ 실제 사이트 구현 시 '회원 탈퇴하기' 팝업창은 비활성화 시키고 버튼 클릭 시 사이트 메인화면으로 넘어가도록 하였음
⬇
👉🏻
[💻결과]
'👩🏻💻프로젝트 > 👥팀프로젝트' 카테고리의 다른 글
| [BACK] 게시판 글 쓰기, 상세보기 (0) | 2023.07.29 |
|---|---|
| [BACK] 게시판 글 목록 보기 (0) | 2023.07.20 |
| [FRONT] 관리자 페이지 (0) | 2023.04.28 |
| [FRONT] 회원가입 페이지 (0) | 2023.04.16 |
| [FRONT] 로그인 화면 구현하기 (0) | 2023.04.16 |
'👩🏻💻프로젝트/👥팀프로젝트' Related Articles
more
