게시물 삭제 시 확인창 띄우기 (부트스트랩 Modal(모달))

백엔드 공부하면서 프론트는 대충 테스트로 사용하는 분들 전용입니다. 간편하게 부트스트랩4를 사용하고 있습니다.

 

게시물을 삭제할 때 확인창을 띄운 뒤 확인 버튼을 누르면 Form 태그 안의 파라미터를 submit 하는 방법입니다. 좀 더 고급진 방법이 많겠지만 가장 간단한 방법으로 진행합니다.

 

---

 

부트스트랩 홈페이지에서 Modal을 찾아보면 여러 스타일들이 있습니다. 창 자체를 띄우는 것에 자바스크립트도 필요 없는 것들이 있기 때문에 바로 가져와서 사용해주면 됩니다. 창이 보여지거나 사라지는 기능은 이미 있으므로 우리가 해야할 것은 '삭제하기' 버튼을 눌렀을 때 실제 form 태그안의 파라미터들이 지정된 URL로 전송되도록 하는 것입니다.

 

부트스트랩4 공식 홈페이지 Modal 가이드

 

 

먼저 모달 버튼과 창을 만들어줍니다. 공식홈에서 그대로 가져온 코드에 출력될 글자들과 버튼 색깔만 좀 바꿔주면 됩니다.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  삭제
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">게시물 삭제</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        게시물을 정말 삭제하시겠습니까?
      </div>
      <div class="modal-footer">
      	<button type="button" class="btn btn-primary">삭제하기</button>
       	<button type="button" class="btn btn-secondary" data-dismiss="modal">취소하기</button>
      </div>
    </div>
  </div>
</div>

 

 

위의 코드만 넣으면 아래와 같이 버튼과 모달창이 생성됩니다. 닫기 까지도 모두 구현돼 있습니다.

 

 

---

 

 

이제 남은건 삭제하기 버튼을 눌렀을 때 form 태그에서 submit을 눌렀을 때와 같은 효과를 자바스크립트로 주면 됩니다. 일단 form 태그를 작성해줍니다. 저는 스프링 시큐리티의 CSRF 기능을 사용중이라 토큰을 넣어주고, 게시판 이름과 게시물 번호를 히든 타입으로 넣어줬습니다. 또 이 form의 내용을 삭제 기능에서만 사용하는 것이 아니라 form 태그에서는 action과 method를 생략했습니다. 삭제에만 사용할 예정이라면 두 값을 모두 form 태그에 넣어주면 됩니다.

 

GET 방식으로 버튼에 URL 링크만 걸어줘도 되겠지만 CSRF 등과 같은 보안적 기능을 생각하면 form 태그를 통해 POST 방식으로 요청하는 것이 더 좋을 것 같습니다.

<form name="boardInfo">
	<s:csrfInput />
	<input type="hidden" name="boardName" value="${boardName}">
	<input type="hidden" name="bId" value="${vo.bId}">
</form>

 

 

이제 버튼을 누르면 실행될 자바스크립트 코드를 간단하게 짜줍니다. 위 form 태그의 name을 찾아서 action과 method를 추가해준 뒤 submit을 실행해줍니다.

<script>
	function clickDel(formName) {
		formName.action = "/board/contentDelAsk";
		formName.method = "post";
		formName.submit();
	}
</script>

 

 

마지막으로 '삭제하기' 버튼을 클릭했을 때 위의 자바스크립트 코드가 실행되도록 onclick 설정만 해주면 완료됩니다.

<button type="button" class="btn btn-primary" onclick="clickDel(boardInfo)">삭제하기</button>

 

 

 

---

 

 

 

아래는 전체코드입니다.

<!-- 삭제버튼 (작성자에게만 보여주도록 함) -->
<s:authorize access="isAuthenticated()">
	<div class="col-md-auto">
		<c:if test="${user.username eq vo.bUserId}">
			<!-- Button trigger modal -->
			<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">삭제</button>

			<!-- Modal -->
			<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
				aria-labelledby="exampleModalLabel" aria-hidden="true"
			>
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="exampleModalLabel">게시물 삭제</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">게시물을 삭제하시겠습니까?</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" onclick="clickDel(boardInfo)">삭제하기</button>
							<button type="button" class="btn btn-secondary" data-dismiss="modal">취소하기</button>
						</div>
					</div>
				</div>
			</div>
			<script>
				function clickDel(formName) {
					formName.action = "/board/contentDelAsk";
					formName.method = "post";
					formName.submit();
				}
			</script>
		</c:if>
	</div>
</s:authorize>