[shop] 구매내역조회 화면 구현하기

modal의 아코디언을 활용하여 구매내역 조회를 하고자 한다.

1. mapper

<mapper namespace="buyMapper">

<resultMap type="kh.study.shop.buy.vo.BuyVO" id="buy">
<id column="BUY_CODE" property="buyCode"/>
<result column="MEMBER_ID" property="memberId"/>
<result column="BUY_DATE" property="buyDate"/>
<result column="TOTAL_PRICE" property="totalPrice"/>
<result column="BUY_CNT" property="buyCnt"/>

<collection property="buyDetailList" resultMap="buyDetail"/>

</resultMap>

<resultMap type="kh.study.shop.buy.vo.BuyDetailVO" id="buyDetail">
<id column="BUY_DETAIL_CODE" property="buyDetailCode"/>
<result column="ITEM_CODE" property="itemCode"/>
<result column="BUY_CODE" property="buyCode"/>
<result column="BUY_AMOUNT" property="buyAmount"/>
<result column="BUY_PRICE" property="buyPrice"/>

<association property="itemInfo" resultMap="itemMapper.item"/>

</resultMap>

구매내역 조회
<select id="buyList" resultMap="buy">
SELECT BUY_DATE
     , B.BUY_CODE
     , TOTAL_PRICE
     , (SELECT COUNT(BUY_DETAIL_CODE) 
        FROM SHOP_BUY_DETAIL 
        WHERE BUY_CODE = B.BUY_CODE)AS BUY_CNT
FROM SHOP_BUY B
WHERE MEMBER_ID = #{memberId}
ORDER BY BUY_DATE DESC
</select>

구매내역 상세 리스트
<select id="buyHistory" resultMap="buyDetail">
	SELECT S.ITEM_CODE
		  , CATE_NAME
		  , ITEM_NAME
		  , ITEM_PRICE
		  , BUY_AMOUNT
		  , ATTACHED_NAME
		  , (ITEM_PRICE * BUY_AMOUNT) AS BUY_PRICE
		  , B.BUY_CODE
	FROM SHOP_ITEM S, ITEM_CATEGORY C, ITEM_IMG G,  SHOP_BUY_DETAIL D, SHOP_BUY B
	WHERE S.ITEM_CODE = G.ITEM_CODE
	AND S.ITEM_CODE = D.ITEM_CODE
	AND C.CATE_CODE = S.CATE_CODE
	AND B.BUY_CODE = D.BUY_CODE
	AND MEMBER_ID = #{memberId}
	AND IS_MAIN = 'Y'
	ORDER BY BUY_DATE DESC
</select>

위 두개의 쿼리를 하나로 작성도 가능하다.

 SELECT  B.BUY_CODE
        , (SELECT ITEM_PRICE FROM SHOP_ITEM
           WHERE ITEM_CODE = D.ITEM_CODE)AS ITEM_PRICE
        , TOTAL_PRICE
        , BUY_DATE
        , BUY_AMOUNT
        , (SELECT ITEM_NAME FROM SHOP_ITEM 
           WHERE ITEM_CODE = D.ITEM_CODE)AS ITEM_NAME 
        , (SELECT COUNT(BUY_DETAIL_CODE) 
            FROM SHOP_BUY_DETAIL 
            WHERE BUY_CODE = B.BUY_CODE)AS BUY_CNT
        , (SELECT ITEM_PRICE FROM SHOP_ITEM
           WHERE ITEM_CODE = D.ITEM_CODE)*BUY_AMOUNT AS BUY_PRICE
        , (SELECT CATE_NAME FROM ITEM_CATEGORY WHERE CATE_CODE 
            = (SELECT CATE_CODE FROM SHOP_ITEM 
            WHERE ITEM_CODE = D.ITEM_CODE)AS CATE_NAME
        , (SELECT ATTACHED_NAME FROM ITEM_IMG 
           WHERE ITEM_CODE = D.ITEM_CODE AND IS_MAIN = 'Y')   
 FROM SHOP_BUY B, SHOP_BUY_DETAIL D
 WHERE MEMBER_ID = #{memberId}
 AND B.BUY_CODE = D.BUY_CODE
 ORDER BY BUY_DATE DESC

필요한 변수를 쿼리를 작성하는 과정에서 만들어 추가하는 것 가능하다!

구매내역
@Override
public List<BuyVO> buyList(String memberId) {
    return sqlSession.selectList("buyMapper.buyList", memberId);
}
구매 상세내역 조회
@Override
public List<BuyDetailVO> buyHistory(String memberId) {

    return sqlSession.selectList("buyMapper.buyHistory", memberId);
}

2. controller

구매 내역 조회
@GetMapping("/buyHistory")
public String buyHistory(Model model, Authentication authentication) {

    memberId
    User user = (User)authentication.getPrincipal();
    String memberId = user.getUsername();

    아코디언 제목 부분
    model.addAttribute("buyList", buyService.buyList(memberId));

    내용(구매상세)
    model.addAttribute("buyHistory", buyService.buyHistory(memberId));

    return "content/buy/buyHistory";
}

 

3. html

<div class="row justify-content-center mt-4">
  <div class="col-11 mb-5">
    <h4>구매내역 조회</h4>
<th:block th:if="${#lists.size(buyList) == 0}">
    <div class="row mt-4">
     <div class="col mt-4 text-center">
     주문 내역이 없습니다.
     </div>
    </div>
</th:block>
<th:block th:each=" list : ${buyList}">
<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
        th:data-bs-target="|#panelsStayOpen-collapseOne_${listStat.count}|" 
        aria-expanded="false" aria-controls="panelsStayOpen-collapseOne">
        <span th:text="${#lists.size(buyList) - listStat.index}" 
        style="width: 2rem; font-size: 1.2rem; font-weight: bold; font-style:italic; 
            display: inline-block;"></span> 
         <span style="margin-left: 2rem;">
         <span th:text="${list.buyDate}" style="font-weight: bold; font-size: 1.1rem;
            display: inline-block;"></span>   
         총 <span th:text="${list.buyCnt}" style="font-weight: bold; font-size: 1.1rem; 
            display: inline-block;"></span>건 주문
        <span th:text="${#numbers.formatCurrency(list.totalPrice)}" 
        style="font-weight: bold; font-size: 1.1rem; display: inline-block;"></span>이 결제되었습니다.
         </span>
      </button>
    </h2>
    <div th:id="|panelsStayOpen-collapseOne_${listStat.count}|"
    	class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        <strong>구매목록</strong> 
        <table class="table align-middle">
            <colgroup>
             <col width="5%">
             <col width="5%">
             <col width="15%">
             <col width="30%">
             <col width="15%">
             <col width="15%">
             <col width="15%">
           </colgroup>
          <thead>
            <tr>
              <th scope="col">No.</th>
              <th scope="col" colspan="3">상품정보</th>
              <th scope="col">가격</th>
              <th scope="col">수량</th>
              <th scope="col">총가격</th>
            </tr>
          </thead>
          <!-- 쿼리 하나로 했을 때는 th:each ="buyDetail : ${buy.buyDetailList}"-->
          <tbody>
            <th:block th:each="buy : ${buyHistory}">
                <th:block th:if="${buy.buyCode eq list.buyCode}">
                    <tr>
                      <th scope="row" th:text="${buyStat.count}"></th>
                      <td><img th:src="|@{/image/}${buy.itemInfo.imgList[0].attachedName}|" width="100px" height="100px"></td>
                      <td>[<span th:text="${buy.itemInfo.cateInfo.cateName}"></span>]</td> 
                      <td th:text="${buy.itemInfo.itemName}">이름</td>
                      <td th:text="${#numbers.formatCurrency(buy.itemInfo.itemPrice)}">가격</td>
                      <td th:text="${buy.buyAmount}">수량</td>
                        <td th:text="${#numbers.formatCurrency(buy.buyPrice)}">총금액</td>
                    </tr> 
                </th:block>
            </th:block>
          </tbody>
        </table>
      </div>
    </div>
  </div>
 </div>
</th:block> 
  </div>
</div>