스프링 쇼핑몰 만들기 #19. 상품 소감(댓글) 삭제 구현

스프링 쇼핑몰 만들기
- 깃허브 링크

상품 소감(댓글)을 작성할 수 있으니, 이번엔 수정과 삭제입니다.

지난 게시판 만들기에서 했던것과 다르게, 이번엔 모든 CRUD(생성/조회/수정/삭제)가 에이젝스로 이루어지기 때문에 약간 다릅니다.

수정과 삭제 중, 삭제 기능을 먼저 구현하겠습니다.

view.jsp의 스크립트에서 위의 표시된 코드를 추가합니다.

 + "<div class='replyFooter'>"

 + "<button type='button' class='modify' data-repNum='" + this.repNum + "'>M</button>"

 + "<button type='button' class='delete' data-repNum='" + this.repNum + "'>D</button>"

 + "</div>"

스크립트에서 버튼의 HTML코드까지 입력되어진 상태입니다.

프로젝트를 실행해보면, 버튼이 생성된걸 확인할 수 있습니다.

스타일을 추가합니다.

section.replyList div.replyFooter button { font-size:14px; border: 1px solid #999; background:none; margin-right:10px; }

깔끔하고, 주변에 맞게 스타일이 적용되었습니다.

삭제 쿼리는 간단합니다. 삭제할 소감 번호(repNum)와 사용자(userId)로 구분하여 삭제할 수 있습니다.

여기서 사용자(userId)가 중요한데, 현재 로그인한 사용자가 실제로 소감을 작성한 사용자인지 구분해야합니다. 구분하지 않는다면 다른 사용자가 작성한 소감을 아무나 삭제할 수 있으면 안되겠죠.

이 쿼리는 소감 번호(repNum)의 작성자를 확인하는 쿼리입니다.

두가지 쿼리를 매퍼에 추가합니다.

<!-- 상품 소감(댓글) 삭제 -->

<delete id="deleteReply">

 delete tbl_reply

     where repNum = #{repNum}

         and userId = #{userId}

</delete>



<!-- 아이디 체크 -->

<select id="replyUserIdCheck" resultType="String">

 select userId

  from tbl_reply

      where repNum = #{repNum}

</select>

아이디 체크용 쿼리는 아이디(userId)만 가져오기 때문에, 결과 타입(resultType)을 ReplyVO가 아닌 String으로 사용합니다.

DAO와 Service를 작성합니다. 두개의 쿼리를 추가했으니, DAO와 Service도 각각 두개입니다.

컨트롤러를 수정하기 전에 jsp먼저 수정합니다.

view.jsp의 소감 목록 하단에 스크립트를 추가합니다.

<script>

 $(document).on("click", ".delete", function(){

  

  var data = {repNum : $(this).attr("data-repNum")};

   

  $.ajax({

   url : "/shop/view/deleteReply",

   type : "post",

   data : data,

   success : function(){

     replyList();

   }

  });

 });

</script>

소감 목록은 스크립트로인해 생성된 동적인 HTML코드로, 일반적인 클릭 메서드 .click() 가 아니라 .on() 메서드를 사용해야합니다.

버튼의 HTML코드에있는 data-repNum의 값을 에이젝스를 통해 컨트롤러로 전달합니다.

컨트롤러에 상품 소감 삭제용 메서드를 생성합니다.

// 상품 소감(댓글) 삭제

@ResponseBody

@RequestMapping(value = "/view/deleteReply", method = RequestMethod.POST)

public int getReplyList(ReplyVO reply,  HttpSession session) throws Exception {

 logger.info("post delete reply");



 int result = 0;

 

 MemberVO member = (MemberVO)session.getAttribute("member");

 String userId = service.idCheck(reply.getRepNum());

   

 if(member.getUserId().equals(userId)) {

  

  reply.setUserId(member.getUserId());

  service.deleteReply(reply);

  

  result = 1;

 }

 

 return result; 

}

현재 세션을 가져와서 변수 member에 저장하고, 아이디 체크용 쿼리의 결과를 가져와서 변수 userId에 저장합니다.

변수 member에서 userId부분만 추출한 값과, 변수 userId의 값을 비교합니다. 이때 비교식은 이퀄(=) 부호 2개가 아닌 이퀄 메서드 .equals() 를 사용합니다.

이렇게 현재 로그인한 사용자의 아이디와 소감을 작성한 사용자의 아이디를 비교했을 때, 결과가 참(true)이라면 삭제 작업을 진행한 뒤 변수 result에 1을 저장하고, 거짓(false)이라면 아무 작업을 하지 않고 끝냅니다.

변수 result의 결과가 0이라면 아이디가 다르기에 삭제 작업이 진행되지 않은것이며, 변수 result의 결과가 1이라면 아이디가 같아서 삭제 작업이 진행된것입니다.

에이젝스의 success 함수 내부의 코드를 수정합니다.

success : function(result){

 

 if(result == 1) {

  replyList();

 } else {

  alert("작성자 본인만 할 수 있습니다.");     

 }

}

컨트롤러부터 받아온 result의 값이 1이라면 삭제 작업이 진행되었으니 소감 목록을 다시 불러오고, 1이 아니라면 삭제 작업이 진행되지 않은것이며, 그렇다는건 로그인한 사용자와 소감을 작성한 사용자가 다른것이므로 메시지를 띄웁니다.

다른 아이디로 작성한 소감을 삭제하려고 할 경우 이렇게 메시지가 나옵니다.

자신이 작성한 소감을 지우려고하면 잘 지워지긴하는데, 실수로 누를 경우에도 지워지니 뭔가 대책이 필요합니다.

이때 컨펌(confirm) 메서드를 사용합니다.

컨펌 메서드는 내부의 텍스트를 사용자에게 보여주며 확인 버튼과 취소 버튼을 같으 보여줍니다. 확인 버튼을 클릭하면 참(true)를 반환하고, 취소 버튼을 클릭하면 거짓(false)를 반환합니다.

컨펌 메시지가 있는 동안 다른 작업을 할 수 없으므로, 사용자가 실수로 삭제 버튼을 누르더라도 바로 삭제되는 일을 방지할 수 있습니다.

다음은 로그인하지 않은 상태에서 버튼을 눌렀을 때입니다.

컨트롤러에서 세션을 가져온 뒤 작업하는데, 로그인하지 않았다면 모든 세션이 null이므로 에러가 발생됩니다. 에이젝스는 에러가 발생할 경우에 실행될 코드를 따로 설정할 수 있습니다.

$.ajax({

 url : "/shop/view/deleteReply",

 type : "post",

 data : data,

 success : function(result){

  

  if(result == 1) {

   replyList();

  } else {

   alert("작성자 본인만 할 수 있습니다.");    

  }

 },

 error : function(){

  alert("로그인하셔야합니다.")

 }

});

로그인하지 않은 상태에서 삭제 버튼을 클릭할 경우, 이렇게 로그인하라는 메시지가 출력됩니다.