스프링 쇼핑몰 만들기 #21. 카트 담기, 카트 리스트 기능 구현

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

상품이 마음에 들면 카트에 담아둔뒤 잠시 고민하는척(!) 하다가 구입하게됩니다.

굳이 담아두지 않고 바로 구입하는 방법도 있지만, 2개 이상의 상품을 구입하게될 때면 바로바로 구입하는것보다 카트에 담아놓고 한번에 구입하는게 사용자나 관리자나 여러모로 편하죠.

먼저 카트 테이블을 생성합니다.

create table tbl_cart (
    cartNum     number          not null,
    userId      varchar2(50)    not null,
    gdsNum      number          not null,
    cartStock   number          not null,
    addDate     date            default sysdate,
    primary key(cartNum, userId) 
);

카트 번호(cartNum)은 값을 구분하는 고유 번호, 카트 수량(cartStock)은 상품별 담은 갯수입니다. 상품 번호(gdsNum)와 아이디(userId)는 다른 테이블에서 참조하는 컬럼입니다.

create sequence tbl_cart_seq;

카트 번호를 생성할 시퀀스입니다.

카트 번호는 시퀀스만 사용하는것보다 날짜와 조합하여 사용하는것이 보다 좋습니다.

alter table tbl_cart
    add constraint tbl_cart_userId foreign key(userId)
    references tbl_member(userId);

alter table tbl_cart
    add constraint tbl_cart_gdsNum foreign key(gdsNum)
    references tbl_goods(gdsNum);

카트 테이블과 맴버 테이블, 상품 테이블을 참조하는 쿼리입니다.

테이블을 생성하였다면, 카트 담기 코드를 테스트해봅니다.

테스트를 끝낸 후 꼭 commit; 을 해주도록합니다.

새로운 테이블을 생성했으니, 테이블을 기반으로한 VO를 생성합니다.

테스트했던 쿼리를 매퍼에 추가합니다.

<!-- 카트 담기 -->
<insert id="addCart">
 insert into tbl_cart (cartNum, userId, gdsNum, cartStock)
     values (tbl_cart_seq.nextval, #{userId}, #{gdsNum}, #{cartStock})
</insert>

DAO와 Service를 추가합니다.

컨트롤러에도 카트 담기용 메서드를 추가합니다.

// 카트 담기
@ResponseBody
@RequestMapping(value = "/view/addCart", method = RequestMethod.POST)
public void addCart(CartListVO cart, HttpSession session) throws Exception {
 
 MemberVO member = (MemberVO)session.getAttribute("member");
 cart.setUserId(member.getUserId());

 service.addCart(cart);
 
}

첫부분의 어노테이션 @ResponseBody 를 보면 알 수 있듯, 에이젝스(Ajax)를 사용하겠습니다.

view.jsp의 카트에 담기 버튼에 클래스 addCart_btn을 추가하고, 바로 아래에 스크립트를 추가합니다.

<p class="addToCart">
 <button type="button" class="addCart_btn">카트에 담기</button>
 
 <script>
  $(".addCart_btn").click(function(){
   var gdsNum = $("#gdsNum").val();
   var cartStock = $(".numBox").val();
      
   var data = {
     gdsNum : gdsNum,
     cartStock : cartStock
     };
   
   $.ajax({
    url : "/shop/view/addCart",
    type : "post",
    data : data,
    success : function(result){
     alert("카트 담기 성공");
     $(".numBox").val("1");
    },
    error : function(){
     alert("카트 담기 실패");
    }
   });
  });
 </script>
</p>

CartVO형태의 제이슨(Json) 데이터를 만들어서 에이젝스를 이용해 지정한 URL로 보낸 뒤, 전송에 성공하면 success 함수를 실행, 실패하면 error 함수를 실행합니다.

실패할 경우는 세션이 다 되어서 로그인이 자동으로 풀렸거나, 로그인을 안한 사용자입니다.

수량을 적절히 조정하여 카트에 담기 버튼을 클릭하면, 이렇게 메시지가 출력됩니다.

로그인하지 않은 사용자에게 로그인하라는 메시지를 보낼 수 있도록, 컨트롤러를 약간 수정했습니다.

// 카트 담기
@ResponseBody
@RequestMapping(value = "/view/addCart", method = RequestMethod.POST)
public int addCart(CartListVO cart, HttpSession session) throws Exception {
 
 int result = 0;
 
 MemberVO member = (MemberVO)session.getAttribute("member");
 
 if(member != null) {
  cart.setUserId(member.getUserId());
  service.addCart(cart);
  result = 1;
 }
 
 return result;
}

result값을 이용해 사용자가 로그인되었는지 안되었는지 확인할 수 있습니다.

에이젝스의 success 함수도 살짝 수정합니다.

<script>
 $(".addCart_btn").click(function(){
  var gdsNum = $("#gdsNum").val();
  var cartStock = $(".numBox").val();
           
  var data = {
    gdsNum : gdsNum,
    cartStock : cartStock
    };
  
  $.ajax({
   url : "/shop/view/addCart",
   type : "post",
   data : data,
   success : function(result){
    
    if(result == 1) {
     alert("카트 담기 성공");
     $(".numBox").val("1");
    } else {
     alert("회원만 사용할 수 있습니다.")
     $(".numBox").val("1");
    }
   },
   error : function(){
    alert("카트 담기 실패");
   }
  });
 });
</script>

컨트롤러에서 반환받는 result값에 의해 로그인이 안된 사용자에겐 다른 메시지를 출력합니다.

로그인하지 않은 상태에서 카트에 담기 버튼을 클릭하면 의도한대로 다른 메시지가 출력됩니다.

다음은 카트 리스트입니다. 카트 리스트는 사용자의 아이디(userId)로 구분할 수 있습니다. 이때 카트 테이블만 사용하게되면 상품 정보를 가져올 수 없으므로, 상품 테이블과 조인하여 상품 정보를 가져왔습니다.

또 처음보는 row_number() over(order by c.cartNum desc) as num 가 있는데, 이는 출력된 결과에 순서를 표시하는 기능이라고 생각하시면 됩니다.

:

CartVO를 복사/붙여넣기 한뒤 CartListVO로 이름을 변경하고, 새로운 요소를 추가합니다.

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

<!-- 카트 리스트 -->
<select id="cartList" resultType="com.kubg.domain.CartListVO">
 select
     row_number() over(order by c.cartNum desc) as num,
     c.cartNum, c.userId, c.gdsNum, c.cartStock, c.addDate,
     g.gdsName, g.gdsPrice, g.gdsThumbImg
 from tbl_cart c
     inner join tbl_goods g
         on c.gdsNum = g.gdsNum   
     where c.userId = #{userId}
</select>

DAO와 Service를 작성하고

컨트롤러에 카트 목록용 메서드를 추가합니다.

// 카트 목록
@RequestMapping(value = "/cartList", method = RequestMethod.GET)
public void getCartList(HttpSession session, Model model) throws Exception {
 logger.info("get cart list");
 
 MemberVO member = (MemberVO)session.getAttribute("member");
 String userId = member.getUserId();
 
 List<CartListVO> cartList = service.cartList(userId);
 
 model.addAttribute("cartList", cartList);
 
}

list.jsp를 복사/붙여넣기 한뒤 이름을 cartList.jsp로 변경한 뒤 <section id="content"> ~ </section> 의 코드를 수정합니다.

<section id="content">
 
 <ul>
  <c:forEach items="${cartList}" var="cartList">
  <li>
   <div class="thumb">
    <img src="${cartList.gdsThumbImg}" />
   </div>
   <div class="gdsInfo">
    <p>
     <span>상품명 : </span>${cartList.gdsName}<br />
     <span>개당 가격 : </span><fmt:formatNumber pattern="###,###,###" value="${cartList.gdsPrice}" /><br />
     <span>구입 수량 : </span>${cartList.cartStock}<br />
     <span>최종 가격 : </span><fmt:formatNumber pattern="###,###,###" value="${cartList.gdsPrice * cartList.cartStock}" />
    </p>    
   </div>
   
   
  </li>
  </c:forEach>
 </ul>
</section>

nav.jsp에 카트 리스트 페이지로 이동할 수 있는 링크를 추가합니다.

실행해보면, 상품 목록(list.jsp)과 비슷한 형태로 출력됩니다. 스타일을 수정해야할 필요가 있고, 카트 목록중 특정 상품을 지울 버튼도 필요하겠네요.

가격에 '원'을 붙이거나 수량에 '개'를 붙이거나하는 자잘한 수정사항과, 버튼을 하나 추가했습니다.

<section id="content">
 <ul>
  <c:forEach items="${cartList}" var="cartList">
  <li>
   <div class="thumb">
    <img src="${cartList.gdsThumbImg}" />
   </div>
   <div class="gdsInfo">
    <p>
     <span>상품명</span>${cartList.gdsName}<br />
     <span>개당 가격</span><fmt:formatNumber pattern="###,###,###" value="${cartList.gdsPrice}" /> 원<br />
     <span>구입 수량</span>${cartList.cartStock} 개<br />
     <span>최종 가격</span><fmt:formatNumber pattern="###,###,###" value="${cartList.gdsPrice * cartList.cartStock}" /> 원
    </p>
    
    <div class="delete">
     <button type="button" class="delete_btn">삭제</button>
    </div>
   </div>   
  </li>
  </c:forEach>
 </ul>
</section>

기존에 사용하던 스타일에 주석을 걸고, 새로운 스타일을 추가합니다.

<style>
 /*
 section#content ul li { display:inline-block; margin:10px; }
 section#content div.goodsThumb img { width:200px; height:200px; }
 section#content div.goodsName { padding:10px 0; text-align:center; }
 section#content div.goodsName a { color:#000; }
 */
 section#content ul li { margin:10px 0; }
 section#content ul li img { width:250px; height:250px; }
 section#content ul li::after { content:""; display:block; clear:both; }
 section#content div.thumb { float:left; width:250px; }
 section#content div.gdsInfo { float:right; width:calc(100% - 270px); }
 section#content div.gdsInfo { font-size:20px; line-height:2; }
 section#content div.gdsInfo span { display:inline-block; width:100px; font-weight:bold; margin-right:10px; }
 section#content div.gdsInfo .delete { text-align:right; }
 section#content div.gdsInfo .delete button { font-size:22px;
            padding:5px 10px; border:1px solid #eee; background:#eee;}
 
</style>

상품 목록과 다르게 한줄에 한개의 상품만 있으며, 상품에 필요한 간단한 정보와 삭제 버튼이 보입니다.