728x90
✳ signUp.jsp / main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<link rel="stylesheet" href="/resources/css/member/signUp-style.css">
</head>
<body>
<main>
<%-- header.jsp include --%>
<%-- 다른 JSP 코드를 현재 위치에 포함
webapp부터의 jsp 경로를 작성 --%>
<jsp:include page="/WEB-INF/views/common/header.jsp"/>
<section class="signUp-content">
<form action="/member/signUp" method="POST" name="signUpFrm" id="signUpFrm">
<!-- 이메일 입력 -->
<label for="memberEmail">
<span class="required">*</span> 아이디(이메일)
</label>
<div class="signUp-input-area">
<input type="text" name="memberEmail" id="memberEmail"
placeholder="아이디(이메일)" maxlength="30" autocomplete="off">
<button id="sendAuthKeyBtn" type="button">인증번호 받기</button>
</div>
<span class="signUp-message" id="emailMessage">메일을 받을 수 있는 이메일을 입력해주세요.</span>
<!-- 인증번호 입력 -->
<label for="emailCheck">
<span class="required">*</span> 인증번호
</label>
<div class="signUp-input-area">
<input type="text" name="authKey" id="authKey" s placeholder="인증번호 입력" maxlength="6" autocomplete="off" >
<button id="checkAuthKeyBtn" type="button">인증하기</button>
</div>
<span class="signUp-message" id="authKeyMessage"></span>
<!-- 인증번호가 일치하지 않습니다 -->
<!-- 비밀번호/비밀번호 확인 입력 -->
<label for="memberPw">
<span class="required">*</span> 비밀번호
</label>
<div class="signUp-input-area">
<input type="password" name="memberPw" id="memberPw"
placeholder="비밀번호" maxlength="20" >
</div>
<div class="signUp-input-area">
<input type="password" name="memberPwConfirm" id="memberPwConfirm"
placeholder="비밀번호 확인" maxlength="20" >
</div>
<span class="signUp-message" id="pwMessage">영어,숫자,특수문자(!,@,#,-,_) 6~20글자 사이로 입력해주세요.</span>
<!-- 닉네임 입력 -->
<label for="memberNickname">
<span class="required">*</span> 닉네임
</label>
<div class="signUp-input-area">
<input type="text" name="memberNickname" id="memberNickname" placeholder="닉네임" maxlength="10" >
</div>
<span class="signUp-message" id="nickMessage">한글,영어,숫자로만 2~10글자</span>
<!-- 전화번호 입력 -->
<label for="memberTel">
<span class="required">*</span> 전화번호
</label>
<div class="signUp-input-area">
<input type="text" name="memberTel" id="memberTel" placeholder="(- 없이 숫자만 입력)" maxlength="11">
</div>
<span class="signUp-message" id="telMessage">전화번호를 입력해주세요.(- 제외)</span>
<!-- 주소 입력 -->
<label for="memberAddress">주소</label>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="우편번호" maxlength="6">
<button type="button">검색</button>
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="도로명/지번 주소">
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="상세 주소">
</div>
<button id="signUpBtn">가입하기</button>
</form>
</section>
</main>
<%-- footer.jsp include --%>
<jsp:include page="/WEB-INF/views/common/footer.jsp"/>
</body>
</html>
🌝 main.jsp
<article class="signup-find-area">
<a href="/member/signUp">회원가입</a>
<span>|</span>
<a href="#">ID/PW 찾기</a>
</article>
✳ signUp-style.css
.signUp-content{
display: flex;
justify-content: center;
height: auto;
}
#signUpFrm{
margin-top: 30px;
}
#signUpFrm > label{
display: block;
margin-top: 40px;
font-size: 18px;
}
#signUpFrm > span{
display: block;
height: 20px;
}
/* 필수 작성 */
.required{
color: red;
padding: 0 5px;
}
/* input 태그를 감싸고 있는 div 태그 */
.signUp-input-area{
width: 500px;
height: 50px;
margin-bottom: 10px;
border-bottom: 2px solid #ddd;
display: flex;
align-items: center;
}
.signUp-input-area > input{
width: 70%;
height: 100%;
padding : 15px 10px 5px;
font-size: 16px;
font-weight: bold;
border : none;
outline: none;
}
.signUp-input-area > button{
width: 30%;
height: 70%;
background-color: white;
border: 1px solid gray;
cursor: pointer;
}
/* :focus-within : 내부 input 요소에 포커스가 맞춰졌을 때 */
.signUp-input-area:focus-within{
border-bottom-color: #455ba8;
}
/* 입력 관련 메세지 */
.signUp-message{
font-size: 14px;
letter-spacing: -1px;
}
/* 메세지 색상 지정 */
.confirm{ color : green; }
.error{ color : red; }
/* 회원가입 버튼 */
#signUpBtn{
width: 100%;
padding: 10px;
margin: 50px 0;
border: none;
font-size: 20px;
font-weight: bold;
background-color: #455ba8;
color : white;
cursor: pointer;
}
#signUpBtn:active{
transform: scale(0.95);
}✳ MemberController class
// 회원 가입 페이지로 이동
@GetMapping("/signUp")
public String signUp() {
// /WEB-INF/views/member/signUp.jsp forward(요청 위임)
// -> ViewResolver가 prefix, suffix를 리턴 값 앞, 뒤에 붙임
return "member/signUp";
}
// 회원 가입 진행
@PostMapping("/signUp")
public String signUp(Member inputMember
, String[] memberAddress
, RedirectAttributes ra) {
// ----------- 매개 변수 설명 -----------
// Member inputMember : 커맨드 객체(제출된 파라미터가 저장된 객체)
// String[] memberAddress :
// input name = "memberAddress" 3개가 저장된 배열
// RedirectAttributes ra :
// 리다이렉트 시 데이터를 request scope로 전달하는 객체
// ----------------------------------
// 12345^^^서울시^^^2층
// 주소 구분자를 , -> ^^^로 변경
// String addr = inputMember.getMemberAddress().replaceAll(",", "^^^");
// inputMember.setMemberAddress(addr);
// -> 클라이언트가 ,를 직접 입력하면 문제가 발생함
// 만약 주소를 입력하지 않은 경우(,,) null로 변경
if(inputMember.getMemberAddress().equals(",,")) {
inputMember.setMemberAddress(null);
} else {
// String.join("구분자", String[])
// 배열의 요소를 하나의 문자열로 변경
// 단, 요소 사이에 "구분자" 추가
String addr = String.join("^^^", memberAddress);
inputMember.setMemberAddress(addr);
}
// 회원 가입 서비스 호출
int result = service.signUp(inputMember);
// 가입 성공 여부에 따라 주소 결정
String path = "redirect:";
String message = null;
if(result > 0) { // 가입 성공
path += "/"; // 메인 페이지
message = inputMember.getMemberNickname() + " 님의 가입을 환영합니다! :)";
} else { // 가입 실패
// 회원 가입 페이지
// path += "/member/signUp"; // 절대 경로
path += "signUp"; // 상대 경로
message = "회원 가입 실패 ;(";
}
// 리다이렉트 시 session에 잠깐 올라갔다 내려오도록 세팅
ra.addFlashAttribute("message", message);
return path;
}
✳MemberService class
/** 회원 가입 서비스(비밀번호 암호화 필요)
* @param inputMember
* @return result(0:실패, 1:성공)
*/
int signUp(Member inputMember);✳ MemberServiceImpl class
// @Transactional(rollbackFor = {Exception.class})
// 예외가 발생하면 rollback
// 발생 안 하면 Service 종료 시 commit -> Spring AOP라고 함
// 회원 가입 서비스
@Transactional(rollbackFor = {Exception.class})
@Override
public int signUp(Member inputMember) {
// 비밀번호 BCrypt를 이용하여 암호화 후 다시 inputMember에 세팅
String encPw = bcrypt.encode(inputMember.getMemberPw());
inputMember.setMemberPw(encPw);
// DAO 호출
int result = dao.signUp(inputMember);
return result;
}
✳ MemberDAO class 사용
/** 회원 가입 DAO
* @param inputMember
* @return result
*/
public int signUp(Member inputMember) {
// 1) mapper의 namespace를 지정 후
// 그 안에 어떤 id를 가지는 SQL을 수행할지 작성
// 2) SQL에 사용할 데이터를 전달(자료형 중요!)
// return sqlSession.insert(1) "namespace.id", 2) inputMember);
// insert 성공한 행의 개수 반환
return sqlSession.insert("memberMapper.signUp", inputMember);✳ member-mapper.xml 사용
<!--
insert, update, delete와 같은 DML 구문은
수행 결과가 항상 성공한 행의 개수(int 자료형)로 고정되어 있음
-> resultType을 작성하지 않는다! (항상 int니까! )
-->
<!-- 회원 가입 --> <!-- mybatis-config.xml에 지정된 별칭 -->
<insert id="signUp" parameterType="Member">
INSERT INTO "MEMBER"
VALUES(SEQ_MEMBER_NO.NEXTVAL
, #{memberEmail}
, #{memberPw}
, #{memberNickname}
, #{memberTel}
, #{memberAddress}
, NULL, DEFAULT, DEFAULT, DEFAULT)
</insert>회원 가입 중 주소를 입력 받는 부분에 주소 API를 이용해보자!
기장 쉬운 방법은 카카오에서 만든 우편번호 서비스를 사용하면된다.
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
그중에서 나의 개발 형태에 맞는 서비스를 찾으면 된다.
'사용자가 선택한 값 이용하기'를 이용하기로 하였다.
예제코드 보기를 클릭하면 아래와 같이, 예제코드를 볼수 있는데
내가 만들어놓았던 코드에 ' id / onclick' 이벤트를 작성하면 된다 !
<input type="text" id="sample6_postcode" placeholder="우편번호">
<input type="button" onclick="sample6_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample6_address" placeholder="주소"><br>
<input type="text" id="sample6_detailAddress" placeholder="상세주소">
<input type="text" id="sample6_extraAddress" placeholder="참고항목">
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraAddr !== ''){
extraAddr = ' (' + extraAddr + ')';
}
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("sample6_extraAddress").value = extraAddr;
} else {
document.getElementById("sample6_extraAddress").value = '';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
}
}).open();
}
</script>아까 상단에 만들어놓았던 signUp.jsp에 아래와 같이 코드를 넣어주면 된다.
signUp.jsp 주소 부분만 잘라서 놓은 것이니 참고 부탁 드린다.
<!-- 주소 입력 -->
<label for="memberAddress">주소</label>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="우편번호" maxlength="6" id="sample6_postcode">
<button type="button" onclick="sample6_execDaumPostcode()">검색</button>
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="도로명/지번 주소" id="sample6_address">
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="상세 주소" id="sample6_detailAddress">
</div>
<button id="signUpBtn">가입하기</button>
</form>
</section>
</main>
<%-- footer.jsp include --%>
<jsp:include page="/WEB-INF/views/common/footer.jsp"/>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
}
}).open();
}
</script>
</body>
</html이렇게 작성하게 되면 회원가입시 많이 보이는 화면처럼 이렇게 구현 된 것을 볼 수 있다.
🔮 구현 화면
728x90
'ON > spring' 카테고리의 다른 글
| [Spring] 필터 | 비밀번호 변경 | 회원 탈퇴 | 회원가입 (유효성검사) ④ (0) | 2023.08.16 |
|---|---|
| [Spring] 드롭다운 메뉴 | 회원정보 수정 ③ (0) | 2023.08.14 |
| [Spring] MyBatis 로그인 | 로그아웃 | 아이디 저장 | 암호화하기 | 예외페이지 만들기 세팅하기 ① (0) | 2023.08.11 |
| [Spring] Spring MVC 이란 ? (0) | 2023.08.11 |
| [Spring] 설치 진행하기 (0) | 2023.08.10 |
