스프링 쇼핑몰 만들기 #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; }

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

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

코딩 병아리2019년 08월 24일
죄송한데요 깃허브에 전체다올려줄수있나요? 상품전부다요ㅠㅠ 없어서요 소스도 전부 중간에 헷갈리는게 많아서요.ㅈ
답글삭제
답글
Unknown2022년 01월 07일
데이터 베이스 mysql 컬럼에 데이터 입력 정상 확인하였으나 뷰 페이지에 이미지 출력이 되지 않습니다. 혹시 해결 방법을 알 수 있을까요?
답글삭제
답글

댓글에 <a>, <b>, <i> 태그를 사용할 수 있습니다.
댓글에 HTML/Javascript를 입력해야할 경우, 반드시 HTML 태그 (부등호) 변환을 이용해 변환한 뒤 입력해주세요.
댓글로 작성하기 어렵거나, 첨부 파일이 있는 경우 메일(kuzuro@gmail.com)로 보내주세요.

블로그 정보 및 규칙은 블로그 어바웃에서 확인하실 수 있습니다.