스프링 쇼핑몰 만들기 #26. 모든 상품 소감(댓글) 확인/삭제 구현 : kuzuro

관리자는 사용자들이 작성한 상품 소감(댓글)을 한번에 확인할 수 있어야하고, 상황에 따라 삭제/수정을 할 수 있어야합니다.

여기서는 모든 상품 소감을 확인하고, 삭제하는 기능을 구현하겠습니다.

모든 상품 소감을 출력하는 쿼리를 작성합니다.

사용자의 닉네임이 출력되도록, 두개의 테이블을 조인했습니다.

매퍼에 쿼리를 추가합니다. 소감 지우기 쿼리는 간단하므로 따로 테스트하지않고 바로 매퍼에 추가했습니다.

<!--  모든 소감(댓글) -->

<select id="allReply" resultType="com.kubg.domain.ReplyListVO">

 select

     r.gdsNum, r.userId, r.repNum, r.repCon, r.repDate,

     m.userName

 from tbl_reply r

      inner join tbl_member m

         on r.userId = m.userId

</select>



<!-- 소감(댓글) 지우기 -->

<delete id="deleteReply">

 delete tbl_reply

     where repNum = #{repNum}

</delete>

DAO와 Service를 작성합니다.<

컨트롤러에 모든 소감을 출력하는 메서드를 추가합니다.

// 모든 소감(댓글)

@RequestMapping(value = "/shop/allReply", method = RequestMethod.GET)

public void getAllReply(Model model) throws Exception {

 logger.info("get all reply");

   

 List<ReplyListVO> reply = adminService.allReply();

 

 model.addAttribute("reply", reply);

}

/view/admin/shop에 orderList.jsp를 복사/붙여넣기 한뒤 allReply.jsp로 이름을 변경하고 코드를 추가합니다.

<div id="container_box">

 <ul>

  <c:forEach items="${reply}" var="reply">

  <li>

   <div class="replyInfo">

    <p>

     <span>작성자</span>${reply.userName} (${reply.userId})

    </p>

    <p>

     <span>작성된 상품</span> <a href="/shop/view?n=${reply.gdsNum}">바로가기</a>

    </p>

   </div>

   <div class="replyContent">

    ${reply.repCon}

   </div>

  </li>     

  </c:forEach>

 </ul>

</div>

추가한 요소에 대한 스타일을 추가합니다.

<style>

/*

#container_box table { width:900px; }

#container_box table th { font-size:20px; font-weight:bold;

       text-align:center; padding:10px; border-bottom:2px solid #666; }

#container_box table tr:hover { background:#eee; }

#container_box table td { padding:10px; text-align:center; }

#container_box table img { width:150px; height:auto; }

*/



#container_box ul li { margin-bottom:20px; border:10px solid #eee; }

.replyInfo { background:#eee; padding:10px; font-size:18px; }

.replyInfo span { font-size:20px; font-weight:bold; margin-right:20px; }

.replyContent { padding:10px; }

</style>

사이드바를 이용해 모든 상품 소감을 볼 수 있도록, aside.jsp에 링크를 추가합니다.

allReply.jsp에 접속해보면 위처럼 모든 소감들이 보입니다.

삭제 기능을 사용하기 위해 버튼을 추가합니다.

<div class="replyControll">

 <button type="submit" class="delete_${reply.repNum}_btn">삭제</button>

</div>

버튼의 스타일을 추가합니다.

.replyControll {text-align:right; padding:10px; }

.replyControll button { border:2px solid #999; background:#fff; }

소감의 한쪽 구석에 삭제 버튼이 생겼습니다.

이 버튼들을 모두 폼(form)으로 묶어준뒤 소감 번호(repNum)를 담아둘 인풋박스를 생성하고, 버튼의 타입을 button에서 submit으로 변경해줍니다.

<div class="replyControll">

 <form role="form" method="post">

  <input type="hidden" name="repNum" value="${reply.repNum}" />

  <button type="submit" class="delete_${reply.repNum}_btn">삭제</button>

 </form>

</div>

이제 삭제하고자하는 소감의 삭제 버튼을 클릭하면

소감이 삭제되었습니다.