[Spring][쇼핑몰 프로젝트][34] 검색 필터링 기능 - 4

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

 

목표

검색 필터링 기능 구현

  Controller로부터 전달받은 '필터링 정보'를 직전 포스팅에서 만들어놓은 틀에 접목시켜보겠습니다.

 

 

 

 

순서

 

1. 필터링 정보 출력

2. <a>태그 동작

 

 

1. 필터링 정보 출력

   Controller로 부터 전달받은 "filter_info" 데이터를 뷰에 만들어 놓은 태그에 의도에 맞게 출력되도록 작업을 해보겠습니다.

 

 먼저 기존에 테스트를 위해 작성해둔 <a>태그를 모두 지워줍니다.

 

그림 1-1

 

 

 "filter_info"는 현재 List 타입의 데이터입니다. List의 요소에 '필터링 정보'가 잇기 때문에 <c:forEach> 태그를 통해서 꺼내어 줄 것입니다. "filter_a"<div> 태그와 "filter_b"<div>태그 각각 아래와 같이 <c:forEach> 태그를 추가해줍니다.

 

<c:forEach items="${filter_info}" var="filter">
</c:forEach>

 

 

 

  <c:forEach>태그내에  각 '필터링 정보'를 가지는 <a> 태그가 출력되도록 코드를 작성해줍니다. <a> 태그의 href 속성 값으로 url을 부여하지 않고 카테고리 코드('cateCode') 값만 가지도록 하였습니다. 필터링 정보 <a> 태그 동작을 <form> 태그를 통해 동작하도록 하기 위함입니다. 그리고 사용자는 카테고리 이름과 자신이 검색한 상품이 카테고리에 몇 개가 속하는지에 대한 개수 정보가 출력되도록 코드를 작성하였습니다.

 

<a href="${filter.cateCode}">${filter.cateName}(${filter.cateCount})</a>

 

그림 1-3

 

 

 현재 이대로 출력을 하게된다면 두 태그 모두 "국외", "국내"가 포함된 필터링 정보를 출력되게 됩니다. 따라서 <c:if> 태그를 감싸주어서 의도에 맞는 정보만 출력되도록 코드를 추가해주었습니다. CateFilterDTO 객체가 가지고 있는 cateGropu 변수 값 이 '1'(국내)인지 '2'(국외)인지를 조건으로 하였습니다.

 

<c:if test="${filter.cateGroup eq '1'}">
</c:if>
<c:if test="${filter.cateGroup eq '2'}">
</c:if>

 

그림 1-4

 

 

 페이지로 이동을 하여 의도대로 출력이 되는지 확인합니다.

 

그림 1-5

 

그림 1-6

 

 

2. <a>태그 동작

 사용자가 '필터링 정보' <a> 태그를 클릭했을대 기존 검색 결과에 필터링된 '상품 목록' 페이지로 이동할 수 있도록 하는 기능을 구현하겠습니다.

 

 이 기능은 새로운 것이 아니라 매번 작성했던 <form>태그를 통해 페이지 이동을 구현했던 것과 동일합니다.

 

 <a>태그를 클릭했을 때 필터링된 '상품 목록(search.jsp)' 페이지로 이동시키는 동작을 위해 Javascript코드를 추가해주겠습니다. <script> 태그에 아래의 코드를 추가해줍니다. 추가해준 코드는 ".filter_content"<div>태그에 있는 <a> 태그를 클릭했을 때 동작하는 함수를 선언한 것입니다.

 

	$(".filter_content a").on("click", function(e){

	});

 

 

 

 함수 구현부에 사용자가 <a>태그를 클릭했을 때 동작할 코드를 작성해보도록 하겠습니다.

 

 먼저 <a> 태그가 클릭되어졌을 때 기본적으로 동작을 막기 위한 코드를 먼저 추가해주었습니다.

 

	$(".filter_content a").on("click", function(e){
		e.preventDefault();
		
	});

 

 

 기본적으로 '필터링 정보'가 처음 동작하게 될 때의 타입은 "A", "T"입니다. 하지만 필터링된 "상품 목록 페이지"로의 이동은 기존 "A"와 "T"에서 카테고리가 검색조건이 추가되도록 type이 "AC", "AT" 되어야 합니다. 따라서 type에 "C"문자열은 붙여주는 코드를 추가해 줍니다.

 

	$(".filter_content a").on("click", function(e){
		e.preventDefault();
		
		let type = '<c:out value="${pageMaker.cri.type}"/>';
		type = type + 'C';	
		
	});

 

 

 하지만 필터링 검색 이후, 사용자가 다른 필터링 정보를 클릭하게 된다면 "C"문자열이 한번 더 붙을 수 있습니다. 따라서 type이 "T"이거나 "A"일 때만 "C"문자열이 추가될 수 있도록 if문을 추가해주었습니다.

 

	$(".filter_content a").on("click", function(e){
		e.preventDefault();
		
		let type = '<c:out value="${pageMaker.cri.type}"/>';
		if(type === 'A' || type === 'T'){
			type = type + 'C';	
		}
		
	});

 

 

 '키워드'와 '카테고리 코드'를 담을 변수를 추가해주고 각각 해당 값으로 초기화해줍니다.

 

	$(".filter_content a").on("click", function(e){
		e.preventDefault();
		
		let type = '<c:out value="${pageMaker.cri.type}"/>';
		if(type === 'A' || type === 'T'){
			type = type + 'C';	
		}
		let keyword = '<c:out value="${pageMaker.cri.keyword}"/>';
		let cateCode= $(this).attr("href");
		
	});

 

 

 현재 'type', 'keyword', 'cateCode'에 대한 값을 얻었습니다. 해당 값들을 "#filter_form" <form> 태그에 있는 각각의 <input> 값으로 부여해줍니다.

 

	$(".filter_content a").on("click", function(e){
		e.preventDefault();
		
		let type = '<c:out value="${pageMaker.cri.type}"/>';
		if(type === 'A' || type === 'T'){
			type = type + 'C';	
		}
		let keyword = '<c:out value="${pageMaker.cri.keyword}"/>';
		let cateCode= $(this).attr("href");
		
		$("#filter_form input[name='keyword']").val(keyword);
		$("#filter_form input[name='cateCode']").val(cateCode);
		$("#filter_form input[name='type']").val(type);
		
		
	});

 

 

 <form> 태그를 사용할 준비가 완료되었기 때문에 <form>태그를 전송해줍니다.

 

	$(".filter_content a").on("click", function(e){
		e.preventDefault();
		
		let type = '<c:out value="${pageMaker.cri.type}"/>';
		if(type === 'A' || type === 'T'){
			type = type + 'C';	
		}
		let keyword = '<c:out value="${pageMaker.cri.keyword}"/>';
		let cateCode= $(this).attr("href");
		
		$("#filter_form input[name='keyword']").val(keyword);
		$("#filter_form input[name='cateCode']").val(cateCode);
		$("#filter_form input[name='type']").val(type);
		$("#filter_form").submit();
		
	});

 

 

 

3. 테스트

 이로써 완성을 하였습니다. '상품 목록' 페이지에 접속을 하여 의도한 대로 동작을 한느지 테스트해봅니다.

 

 검색을 했을 때 '필터링' 인터페이스가 잘 출력되는지.

 

그림 3-1

 

 

 '필터링 정보'를 눌렀을 때 이동이 잘 되는지.

 

그림 3-2

 

 

 필터링된 '상품 목록' 페이지에서 페이지 이동이 잘 되는지.

 

그림 3-3

 

그림 3-4

 

 

 필터링 전 인터페이스 정보와 필터링 후 인터페이스 정보가 동일한지.

 

그림 3-5

 

그림 3-6

 

 

 

REFERENCE

• 코드로배우는 스프링 웹 프로젝트(남가람북스)

 

 

DATE

• 2020.10.08