스프링 쇼핑몰 만들기 #16. 상품 조회 구현 : kuzuro

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

이번에는 상품 조회입니다. 상품 조회는 이미 관리자 모드에서 개발했으므로 이를 이용하겠습니다.

home.jsp를 shop 폴더에 복사/붙여넣기를 한 뒤, 이름을 view.jsp로 변경합니다.

view.jsp에 필요한 태그 라이브러리를 추가하고

경로도 수정합니다.

컨트롤러에 view 메서드만 덩그러니 생성해놓고, 제대로 접속할 수 있는지 확인해봅니다.

잘 나오네요.

관리자 모드를 개발할 때 사용했던 adminMapper의 상품 조회용 쿼리입니다. 사용자에게 보여질 쿼리는 이 쿼리와 똑같으므로, 이 쿼리를 그대로 사용하겠습니다.

DAO와 Service를 추가합니다.

이때 DAOImple에서는 항상 사용하던 namespace 가 아니라, 매퍼의 경로를 직접 입력해줍니다.

컨트롤러에 코드를 추가합니다.

// 상품 조회
@RequestMapping(value = "/view", method = RequestMethod.GET)
public void getView(@RequestParam("n") int gdsNum, Model model) throws Exception {
 logger.info("get view");
 
 GoodsViewVO view = service.goodsView(gdsNum);
 model.addAttribute("view", view);
}

view.jsp에 필요한 데이터가 잘 출력되는지 확인하기 위해 코드를 입력합니다.

모두 잘 나옵니다. 원본 이미지의 크기가 엄청 크네요.

이제 제대로된 코드를 추가합니다.

<form role="form" method="post">
 <input type="hidden" name="gdsNum" value="${view.gdsNum}" />
</form>

<div class="goods">
 <div class="goodsImg">
  <img src="${view.gdsImg}">
 </div>
 
 <div class="goodsInfo">
  <p class="gdsName"><span>상품명</span>${view.gdsName}</p>
  
  <p class="cateName"><span>카테고리</span>${view.cateName}</p>
  
  <p class="gdsPrice">
   <span>가격 </span><fmt:formatNumber pattern="###,###,###" value="${view.gdsPrice}" /> 원
  </p>
  
  <p class="gdsStock">
   <span>재고 </span><fmt:formatNumber pattern="###,###,###" value="${view.gdsStock}" /> EA
  </p>
  
  <p class="cartStock">
   <span>구입 수량</span>
   <input type="number" cmin="1" max="${view.gdsStock}" value="1" />  
  </p>
  
  <p class="addToCart">
   <button type="button">카트에 담기</button>
  </p>
 </div>
 
 <div class="gdsDes">${view.gdsDes}</div>
</div>

form에 상품번호(gdsNum)을 숨겨놓은 이유는, 장바구니에 추가하는 기능과 소감 남기기(댓글) 기능을 이용하기 위함입니다.

입력한대로 표시가 되는데, 이미지는 너무 크고 글씨들의 위치가 마음에 안듭니다.

스타일을 추가합니다.

<style>
 div.goods div.goodsImg { float:left; width:350px; }
 div.goods div.goodsImg img { width:350px; height:auto; }
 
 div.goods div.goodsInfo { float:right; width:330px; font-size:22px; }
 div.goods div.goodsInfo p { margin:0 0 20px 0; }
 div.goods div.goodsInfo p span { display:inline-block; width:100px; margin-right:15px; }
 
 div.goods div.goodsInfo p.cartStock input { font-size:22px; width:50px; padding:5px; margin:0; border:1px solid #eee; }
 div.goods div.goodsInfo p.cartStock button { font-size:26px; border:none; background:none; }
 div.goods div.goodsInfo p.addToCart { text-align:right; }
 div.goods div.gdsDes { font-size:18px; clear:both; padding-top:30px; }
</style>

이미지는 왼쪽, 상품 정보는 오른쪽에 위치해있고, 상품 설명은 아래에 위치해있습니다.

구입 수량은 숫자만 입력할 수 있으며, 카트에 담기 버튼을 클릭하면 해당 상품에 카트에 담길 예정입니다.

제이쿼리의 선택자 기능을 이용하므로, 제이쿼리를 <head> ~ </head> 내부에 추가해야합니다.

<script src="/resources/jquery/jquery-3.3.1.min.js"></script>

이제 구입수량 부분을 살짝 수정합니다.

<p class="cartStock">
 <span>구입 수량</span>
 <button type="button" class="plus">+</button>
 <input type="number" class="numBox" min="1" max="${view.gdsStock}" value="1" readonly="readonly"/>
 <button type="button" class="minus">-</button>
 
 <script>
  $(".plus").click(function(){
   var num = $(".numBox").val();
   var plusNum = Number(num) + 1;
   
   if(plusNum >= ${view.gdsStock}) {
    $(".numBox").val(num);
   } else {
    $(".numBox").val(plusNum);          
   }
  });
  
  $(".minus").click(function(){
   var num = $(".numBox").val();
   var minusNum = Number(num) - 1;
   
   if(minusNum <= 0) {
    $(".numBox").val(num);
   } else {
    $(".numBox").val(minusNum);          
   }
  });
 </script>
 
</p>

이제 인풋박스에 직접 입력할 수 없고 버튼을 눌러서 수량을 조절할 수 있습니다.

+ 버튼을 누르면 1씩 증가하고, - 버튼을 누르면 1씩 감소합니다. 이때 최대량은 재고보다 클 수 없으며, 최소량은 1입니다.

직접 입력하지 않는 이유는 실수로 입력하는 일을 막기 위해서 그런것도 있지만, 그냥 취향으로 넣어봤습니다.

저 버튼을 위한 스타일을 추가합니다.

div.goods div.goodsInfo p.cartStock button { font-size:26px; border:none; background:none; }

+ 버튼과 - 버튼이 잘 녹아들었습니다.

내용이 부실하긴 하지만 어느정도 모양새를 갖추었습니다.