스프링 쇼핑몰 만들기 #7. 카테고리 구성

스프링 쇼핑몰 만들기

상품 등록 기능을 추가하기 전에, 카테고리를 먼저 구성하겠습니다.

다양한 상품을 다룰땐 카테고리 유동적일 수 있지만, 지금 만드는 쇼핑몰은 상품 갯수가 적고 거의 변동이 없기 때문에 미리 카테고리를 구성해두면 편리합니다.

물론 카테고리 추가, 삭제, 수정 기능도 나중에 구현할 것입니다.

테이블은 미리 준비된것을 사용합니다.

이 테이블은 cateCodeRef가 cateCode를 참조하여 계층구조로 되어있는 테이블입니다.

예시를 위해 임시 데이터를 추가하고

이런식으로 구성됩니다.

cateCodeRef의 값이 없다면(null) 그 카테고리는 최상위 카테고리이며, cateCodeRef의 값이 다른 cateCode와 같다면 그 카테고리는 cateCode의 하위 카테고리입니다.

cateCodeRef는 cateCode를 참조(foreign)하기 때문에, cateCodeRef는 존재하지 않는 cateCode를 입력할 수 없습니다.

확인했다면 임시 데이터를 모두 지워줍니다.

저는 어느 게임의 아이템을 이용한 쇼핑몰을 만들 계획이며, 이에 필요한 데이터를 미리 준비해두었습니다.

# 무기(weapon)
- 돌격소총(AR) : M16등 9개
- 기관단총(SMG) : Micro UZI등 4개
- 경기관총(LMG) : DP-28등 2개
- 산탄총(SG) : S686등 3개
- 지정사수소총(DMR) : Mini-14등 6개
- 저격소총(SR) : Kar98K등 3개
- 기타(ETC) : 프라이팬 1개

# 탄(bullet)
- 5.56mm
- 7.62mm
- 9mm
- 45ACP
- 12guage
- 300magnum

# 방어구(armor)
- 모자(helmet)
- 조끼(jacket)
- 가방(backpack)

# 회복제
- 붕대(bandage)
- 구급상자(first aid kit)
- 치료킷(mad kit)
- 에너지 드링크(energy drink)
- 진통제(painkiller)

이렇게 카테고리를 구성할 예정입니다.

무기만 2단계로 되어있고, 나머지는 1단계로 끝나는 구조입니다.

위의 구조에 맞게 데이터를 추가합니다.

insert into goods_category (cateName, cateCode) values ('무기', '100');
insert into goods_category (cateName, cateCode, cateCodeRef) values ('돌격소총', '101', '100');
insert into goods_category (cateName, cateCode, cateCodeRef) values ('기관단총', '102', '100');
insert into goods_category (cateName, cateCode, cateCodeRef) values ('경기관총', '103', '100');
insert into goods_category (cateName, cateCode, cateCodeRef) values ('산탄총', '104', '100');
insert into goods_category (cateName, cateCode, cateCodeRef) values ('지정사수소총', '105', '100');
insert into goods_category (cateName, cateCode, cateCodeRef) values ('저격소총', '106', '100');
insert into goods_category (cateName, cateCode, cateCodeRef) values ('기타', '107', '100');

insert into goods_category (cateName, cateCode) values ('탄', '200');
insert into goods_category (cateName, cateCode) values ('방어구', '300');
insert into goods_category (cateName, cateCode) values ('회복제', '400');

입력된 데이터가 잘못되지 않았나 확인합니다.

직접 작업한것이므로, 커밋까지 시켜줍니다.

관리자 화면에서 '상품 등록' 링크를 클릭하면 상품 등록 페이지로 이동하게 할 것입니다.

admin 폴더 하위에 goods 폴더를 생성하고, index.jsp파일을 복사/붙여넣기 한 뒤 register.jsp로 이름을 변경한 뒤 필요한 일부 코드를 수정합니다.

컨트롤러에 상품 등록용 메서드를 추가합니다.

// 상품 등록
@RequestMapping(value = "/goods/register", method = RequestMethod.GET)
public void getGoodsRegister() throws Exception {
 logger.info("get goods register");
}

aside.jsp에 상품 등록으로 이동할 수 있는 링크를 추가합니다.

'상품 등록' 링크를 클릭하면, 상품 등록 페이지로 이동할 수 있게 되었습니다.

카테고리를 사용하기 위해 com.kubg.domain에 CategoryVO.java를 추가합니다.

매퍼에 카테고리를 추가하기 위핸 쿼리문을 작성합니다.

하지만 이 쿼리를 그대로 사용하지 않고, 좀 더 구분하기 쉬운 쿼리를 사용할것 입니다.

level을 이용한 쿼리 결과 자체에 계층을 표시했습니다.

select level, cateName, cateCode, cateCodeRef from goods_category
    start with cateCodeRef is null connect by prior cateCode = cateCodeRef;

카테고리의 계층에 맞게 level값이 커지는 구조입니다. 이 쿼리를 이용하면 level값만 확인해도 상위/하위를 구분할 수 있습니다.

adminMapper.xml을 생성하고 코드를 추가합니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.kubg.mappers.adminMapper">
   
<!-- 카테고리 호출 -->
<select id="category" resultType="com.kubg.domain.CategoryVO">
 select
  level, cateName, cateCode, cateCodeRef
 from goods_category
     start with cateCodeRef is null connect by prior cateCode = cateCodeRef
</select>

</mapper>

매퍼에 level이 추가되었으므로, CategoryVO에 level을 추가합니다.

매퍼의 쿼리문을 호출하는 DAO와, DAO를 호출하는 Service를 생성합니다.

테이블을 호출만 하면 되기 때문에 간단합니다.

컨트롤러 작업을 하기 전에, JSON 라이브러리를 추가합니다.

이 라이브러리는 자바 데이터를 JSON형식으로 변환해줍니다.

POM.XML의 <dependencies> ~ </dependencies> 내부에 추가합니다.

<dependency>
    <groupId>net.sf.json-lib</groupId>
    <artifactId>json-lib</artifactId>
    <version>2.4</version>
   
    <classifier>jdk15</classifier>
</dependency>

<classifier>jdk15</classifier> 를 추가하지 않으면 에러가 발생합니다.

이제 컨트롤러에서 상품 등록 메서드의 코드를 추가합니다.

// 상품 등록
@RequestMapping(value = "/goods/register", method = RequestMethod.GET)
public void getGoodsRegister(Model model) throws Exception {
 logger.info("get goods register");
 
 List<CategoryVO> category = null;
 category = adminService.category();
 model.addAttribute("category", JSONArray.fromObject(category));
}

CategoryVO형태의 List변수 category를 선언하고 adminService.category() 호출한 뒤 결과값을 category에 입력, JSONArray를 이용해 category를 JSON타입으로 변경한 뒤, category라는 명칭으로 모델에 추가했습니다.

이 메서드(getGoodsRegister)가 호출 될 때 모델을 jsp에 넘겨서 사용할 수 있습니다.

register.jsp에 form을 추가합니다.

<form role="form" method="post" autocomplete="off">
 
 <label>1차 분류</label>
 <select class="category1">
  <option value="">전체</option>
 </select>
 
 <label>2차 분류</label>
 <select class="category2">
  <option value="">전체</option>
 </select>
 
</form>

아직 상품 등록을 하지 않고, 카테고리만 띄울것이기 때문에 셀렉트박스 <select> 만 넣었습니다.

1차 분류는 상위 카테고리, 2차 분류는 하위 카테고리입니다.
아무것도 넣지 않았는데, 자바스크립트와 제이쿼리를 이용하여 추가할것입니다.

먼저 1차 분류에 데이터를 넣어줄 코드를 작성합니다.

<script>
// 컨트롤러에서 데이터 받기
var jsonData = JSON.parse('${category}');
console.log(jsonData);

var cate1Arr = new Array();
var cate1Obj = new Object();

// 1차 분류 셀렉트 박스에 삽입할 데이터 준비
for(var i = 0; i < jsonData.length; i++) {
 
 if(jsonData[i].level == "1") {
  cate1Obj = new Object();  //초기화
  cate1Obj.cateCode = jsonData[i].cateCode;
  cate1Obj.cateName = jsonData[i].cateName;
  cate1Arr.push(cate1Obj);
 }
}

// 1차 분류 셀렉트 박스에 데이터 삽입
var cate1Select = $("select.category1")

for(var i = 0; i < cate1Arr.length; i++) {
 cate1Select.append("<option value='" + cate1Arr[i].cateCode + "'>"
      + cate1Arr[i].cateName + "</option>"); 
}

</script>

컨트롤러에서 모델에 보낸 값인 category를 jsonData에 저장합니다. 이때 JSON.parse('${category}');가 아닌 JSON.parse("${category}"); 로, 즉 쌍따옴표를 사용하게 되면 에러가 발생하니 주의합니다.

jsondata에서 level값이 1인 경우에만 cate1Obj에 추가하고, 이 추가한 데이터를 cate1Arr에 추가합니다. 이렇게 추가한 값을 cate1Select에 추가합니다.

프로젝트를 실행하여 상품 등록 페이지로 이동해보면, 1차 분류에 데이터가 들어가있는걸 확인할 수 있습니다.

2차 분류는 아직 작업하지 않았기 때문에 아무것도 없습니다.

이제 2차 분류에 데이터를 추가하기 위한 코드를 작성합니다.

$(document).on("change", "select.category1", function(){

 var cate2Arr = new Array();
 var cate2Obj = new Object();
 
 // 2차 분류 셀렉트 박스에 삽입할 데이터 준비
 for(var i = 0; i < jsonData.length; i++) {
  
  if(jsonData[i].level == "2") {
   cate2Obj = new Object();  //초기화
   cate2Obj.cateCode = jsonData[i].cateCode;
   cate2Obj.cateName = jsonData[i].cateName;
   cate2Obj.cateCodeRef = jsonData[i].cateCodeRef;
   
   cate2Arr.push(cate2Obj);
  }
 }
 
 var cate2Select = $("select.category2");

 for(var i = 0; i < cate2Arr.length; i++) {
   cate2Select.append("<option value='" + cate2Arr[i].cateCode + "'>"
        + cate2Arr[i].cateName + "</option>");
 } 
});

가장 먼저 $(document).on("change", "select.category1", function() { }); 는 select.category1 이 변경되었다면 실행되는 함수입니다.

2차 분류이기 때문에 level이 2인 조건을 넣어두었고, 2차 분류에만 있는 참조코드명인 cateCodeRef도 있습니다. 그외엔 1차 분류와 똑같습니다.

이제 2차 분류까지 나오긴 하는데...

다른 1차 분류를 선택했을 경우, 2차 분류가 중복출력되는 문제가 있습니다. 1차 분류를 다른걸로 선택했을 때, 2차 분류의 내용을 모두 지운뒤 1차 분류에 맞는 2차 분류를 추가하는 방식으로 변경해야겠습니다.

$(document).on("change", "select.category1", function(){

 var cate2Arr = new Array();
 var cate2Obj = new Object();
 
 // 2차 분류 셀렉트 박스에 삽입할 데이터 준비
 for(var i = 0; i < jsonData.length; i++) {
  
  if(jsonData[i].level == "2") {
   cate2Obj = new Object();  //초기화
   cate2Obj.cateCode = jsonData[i].cateCode;
   cate2Obj.cateName = jsonData[i].cateName;
   cate2Obj.cateCodeRef = jsonData[i].cateCodeRef;
   
   cate2Arr.push(cate2Obj);
  }
 }
 
 var cate2Select = $("select.category2");
 
 /*
 for(var i = 0; i < cate2Arr.length; i++) {
   cate2Select.append("<option value='" + cate2Arr[i].cateCode + "'>"
        + cate2Arr[i].cateName + "</option>");
 }
 */
 
 cate2Select.children().remove();

 $("option:selected", this).each(function(){
  
  var selectVal = $(this).val();  
  cate2Select.append("<option value=''>전체</option>");
  
  for(var i = 0; i < cate2Arr.length; i++) {
   if(selectVal == cate2Arr[i].cateCodeRef) {
    cate2Select.append("<option value='" + cate2Arr[i].cateCode + "'>"
         + cate2Arr[i].cateName + "</option>");
   }
  }
  
 });
 
});

기존 데이터를 추가하는 코드는 주석 /* */ 을 걸어서 실행되지 않도록 합니다.

cate2Select.children().remove(); 를 이용해 기존에 있던 데이터를 삭제해주고 $("option:selected", this).each(function(){ }); 를 실행합니다.

변수 selectVal에 현재 선택된(:selected) 1차 분류값인 $(this).val(); 를 저장하고, 셀렉트 박스에 '전체'라고 표시될 데이터를 추가합니다.

1차 분류값인 selectVal과 cate2Arr[i].cateCodeRef를 비교하여 동일할 경우, 즉 상위 카테고리에 맞는 하위 카테고리일 경우에만 데이터를 추가합니다.

이제 1차 분류를 선택하면 그에 맞는 2차 분류가 나올것 입니다.

예상대로 1차 분류에 맞는 2차 분류가 잘 출력됩니다.

1차 분류를 변경할 경우, 그에 맞는 2차 분류가 나오게됩니다. 현재 '탄'에 대한 2차 분류가 없기 때문에 아무것도 표시되지 않습니다.