[shop] modal 사용하여 회원가입 (주소 입력하기)

1. join 클릭 시 실행되는 Modal

join 버튼 클릭 시 실행되는 모달

<div class="modal fade" id="join_modal" tabindex="-1"
	aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">

			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">JOIN</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal"
					aria-label="Close"></button>				
            </div>

			<div class="modal-body">

				<form action="/member/join" class="row g-3" method="post">

					<div class="col-12">
						<label for="memberId" class="form-label">ID</label> <input
							type="text" class="form-control" placeholder="아이디를 입력하세요"
							aria-label="name" id="memberId" name="memberId">
					</div>
					<div class="col-12">
						<label for="memberPw" class="form-label">PW</label> <input
							type="password" class="form-control" placeholder="비밀번호를 입력하세요"
							aria-label="name" id="memberPw" name="memberPw">
					</div>
					<div class="col-12">
						<label for="memberName" class="form-label">NAME</label> <input
							type="text" class="form-control" placeholder="이름을 입력하세요"
							aria-label="name" id="memberName" name="memberName">
					</div>

					<div class="col-12">
						<label for="memberEmail" class="form-label">Email</label> <input
							type="email" class="form-control" placeholder="이메일을 입력하세요"
							id="memberEmail" name="memberEmail">
					</div>


					<div class="col-12">
						<label for="memberAddr" class="form-label">Address</label>
						<div class="input-group mb-3">
							<input type="text" class="form-control" name="memberAddr"
								placeholder="주소를 입력하세요" aria-label="Recipient's username"
								aria-describedby="button-addon2" id="memberAddr" readonly
								onclick="searchAddr();">
							<button class="btn btn-secondary" type="button"
								onclick="searchAddr();">주소검색</button>
						</div>

						<div class="col-12">
							<input type="text" class="form-control" id="addrDetail"
								placeholder="상세주소를 입력하세요" name="addrDetail">
						</div>
					</div>

					<div class="col-12 d-grid gap-2">
						<input type="submit" class="btn btn-primary" value="Sign in">
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
	<script	src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

<div class="input-group mb-3">
<input type="text" class="form-control" name="memberAddr"
placeholder="주소를 입력하세요" aria-label="Recipient's username"
aria-describedby="button-addon2" id="memberAddr" readonly
onclick="searchAddr();">
★주소 키보드로 작성 방지 및 데이터 넘기기 가능 -> readonly 
 disabled  데이터 넘기기 불가하다!!  

 

2. 주소 작성하기

<button class="btn btn-secondary" type="button" onclick="searchAddr();">주소검색</button>

 

 

카카오 주소 api

https://postcode.map.daum.net/guide

Daum 우편번호 서비스

	function searchAddr() {
		new daum.Postcode({
			oncomplete : function(data) {
			
            도로명 주소 입력
			const roadAddr = data.roadAddress;
			document.querySelector('#memberAddr').value = roadAddr;			
			
			}
		}).open();
	}

 

 

 

3. 모달 창 닫았다가 다시 열었을 때 기존 작성한 데이터 삭제한 화면 구현

const join_modal = document.querySelector('#join_modal');
(document - 현재 열려있는 html 문서에서 querySelector('#id')를 선택하겠다.)

	회원가입 모달이 닫힐 때 실행되는 이벤트
	join_modal.addEventListener('hidden.bs.modal', function(event){	
    function (매개변수 이름 자유) 
    hidden.bs.modal <-모달이 닫히면
	shown.bs.modal <- 모달이 실행되면
	
    첫번째 방법    
    const inputs = join_modal.querySelectorAll('input:not([type="submit"])');
	 
	 for(const inputTag of inputs){  
		inputTag.value = ''; 
	}
	
	두번째 방법
	join_modal.querySelector('form').reset();
	
    (★input 태그의 기능 중에 reset이 있다. 그래서 여기서 reset을 실행시키도록 구현한 것이다.)
	
	
	});

 

4. mapper

<insert id="joinMember">
	INSERT INTO SHOP_MEMBER(
		MEMBER_ID
		, MEMBER_PW
		, MEMBER_NAME
		, MEMBER_ADDR
		, ADDR_DETAIL
		, MEMBER_EMAIL
		, MEMBER_STATUS
		)VALUES(
		#{memberId}
		, #{memberPw}
		, #{memberName}
		, #{memberAddr}
		, #{addrDetail}
		, #{memberEmail}
		, 'ACTIVE'
	)
</insert>

회원가입
	@Override
	public void joinMember(MemberVO member) {
		sqlSession.insert("memberMapper.joinMember", member);
	}

 

5. controller

	회원가입
	@PostMapping("/join")
	public String joinMember(MemberVO member) {
		memberService.joinMember(member);
	
		return "redirect:/item/list";
	}