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

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

 

목표

검색 필터링 기능 구현

 

 이전 포스팅에서 Servcei 메서드와 Controller 측 작업을 완료했습니다. 이번 포스팅에선 Controller로부터 전달받은 '필터 정보'를 활용해 사용자가 사용할 수 있도록 인터페이스를 만들 차례입니다. 전달받은 데이터를 연계시키기 이전에 데이터가 담길 기본 틀을 만들어 보겠습니다. 

 

 

 

순서

 

1. 서버 전송 데이터 확인

2. 틀 작성

 

 

1. 서버 전송 데이터 확인

 바로 직전 포스팅에서 Controller에서 Model객체를 통해 '검색 필터링'정보를 뷰로 전송하는 처리를 하였습니다. search.jsp의 아무 장소에 ${filter_info}를 잠시 작성을 하여 데이터가 정상적으로 전송되는지 확인을 해봅니다.

 

그림 1-1

 

 

그림 1-2

 

 

2. 틀 작성

 이제 전달 받은 데이터를 활용하여 사용자가 보기 편하고 필터링 기능을 이용할 수 있도록 인터페이스를 추가할 차례입니다. 데이터를 적용하기 전 이 데이터가 담길 틀을 만들어 주겠습니다.

 

 카테고리의 큰 범주가 "국내", "국외"이기 때문에 먼저 "국내", "국외" 버튼을 두개 두고 "국내" 버튼을 누르게 되면 "국내" 필터링 정보가, "국외" 버튼을 누르면 "국외" 필터링 정보가 출력돼 되도록 만들겠습니다.

 

 상품 목록 정보들 윗 공간에 필터정보가 출력되도록 할 생각 이기 때문에 클랙스 속성이 "list_search_result"인 <div> 태그 윗 공간에 작업을 하겠습니다.

 

 

 

HTML

 

 먼저 필터 관련 인터페이스를 감싸는 <div>태그, 버튼을 감싸는 <div> 태그와 <button> 태그를 추가해줍니다.

 

				<div class="search_filter">
					<div class="filter_button_wrap">
						<button class="filter_button filter_active" id="filter_button_a">국내</button>
						<button class="filter_button" id="filter_button_b">외국</button>
					</div>					
				</div>

 

그림 2-2

 

 

 그 아래 태그 공간에 각 버튼을 눌렀을대 등장해야 할 <div> 태그들을 추가해줍니다. <div> 태그 내엔 '필터링 정보'들이 출력되어야 하는데 우선 의미 없는 <a> 태그들을 추가해주었습니다.

 

				<div class="search_filter">
					<div class="filter_button_wrap">
						<button class="filter_button filter_active" id="filter_button_a">국내</button>
						<button class="filter_button" id="filter_button_b">외국</button>
					</div>
					
					<div class="filter_content filter_a">
						<a>테스트용1</a>
						<a>테스트용2</a>
						<a>테스트용3</a>
						<a>테스트용4</a>
						<a>테스트용5</a>
						<a>테스트용6</a>
					</div>
					<div class="filter_content filter_b">
						<a>테스트용1</a>
						<a>테스트용2</a>
						<a>테스트용3</a>
						<a>테스트용4</a>
						<a>테스트용5</a>
						<a>테스트용6</a>					
					</div>										
				</div>

 

그림 2-3

 

 

 필터링 요청을 <a>태그의 주소를 통해 제어하는 것이 아니라 <form> 태그를 통해 제어할 것이기 때문에 <form> 태그와 <input> 태그를 추가해주었습니다.

 

				<div class="search_filter">
					<div class="filter_button_wrap">
						<button class="filter_button filter_active" id="filter_button_a">국내</button>
						<button class="filter_button" id="filter_button_b">외국</button>
					</div>
					
					<div class="filter_content filter_a">
						<a>테스트용1</a>
						<a>테스트용2</a>
						<a>테스트용3</a>
						<a>테스트용4</a>
						<a>테스트용5</a>
						<a>테스트용6</a>
					</div>
					<div class="filter_content filter_b">
						<a>테스트용1</a>
						<a>테스트용2</a>
						<a>테스트용3</a>
						<a>테스트용4</a>
						<a>테스트용5</a>
						<a>테스트용6</a>					
					</div>		
					
					<form id="filter_form" action="/search" method="get" >
						<input type="hidden" name="keyword">
						<input type="hidden" name="cateCode">
						<input type="hidden" name="type">
					</form>						
													
				</div>

 

 

CSS

 

 이번엔 css 설정을 위해 search.css에 코드를 추가해주겠습니다. 먼저 필터 정보가 화면의 주앙에 배치 될 수 있도록 전체를 감싸는 ".search_filter" <div> 태그에 대한 설정과 버튼이 ".search_filter"<div>태그 내에서 1/2씩 자리를 차지하도록 코드를 추가해주었습니다.

 

/* 필터정보 */
.search_filter {
    width: 85%;
    margin: auto;
	margin-top: 30px;
    margin-bottom: 50px;    
} 
.filter_button_wrap {
    width: 100%;
}

.filter_button_wrap button {
    width: 50%;
}

 

 

 

 그다음 버튼(.filter_button)들에 색상, 테투리 색, float 속성을 주었습니다. 버튼(.fitler_buttton)에 float속성을 주었기 때문에 그 뒤의 태그들에 float 속성 영향을 받지 않도록 해주어야 합니다. 따라서 버튼을 감싸고 잇는 ".filter_button_wrap"<div>태그 끝 가상요소(".filter_button_wrap:after")가 추가되도록 하여 clear 속성을 추가해줍니다.

 

 추가적으로 버튼 두 개다 가장자리에 색을 주었기 때문에 버튼이 겹치는 가장자리는 찐해지게 됩니다. 이것을 방지하기 위해 버튼(.filter_button_wrap button)들 중 첫 번째 버튼(.filter_button_wrap button(:first-child)에 오른쪽 가장자리는 색을 갖지 않도록 코드를 추가해주었습니다.

 

.filter_button{
	background-color: #04AA6D;
	border: 1px solid green;
	color: white;
	padding: 10px 24px;
	cursor: pointer;
	float: left;
} 
.filter_button_wrap:after {
    content: "";
    clear: both;
    display: table;
}  	
.filter_button_wrap button:not(:last-child) {
    border-right: none;
}

 

그림 2-5

 

 

 버튼에 마우스를 올렸을 때 색이 변하도록 버튼에 hover 속성도 주었습니다.

 

.filter_button:hover {
    background-color: #3e8e41;
}

 

그림 2-6

 

 

 버튼이 선택되어 있는 상황을 사용자가 직관적으로 알 수 있도록 해주겠습니다. ".filter_active" 식별자를 가질 땐 색상이 변하도록 코드를 추가해주었습니다. 현재는 "국내" 버튼에 ".filter_active"속성을 기본적으로 가지도록 설정을 하였습니다. 

 

.filter_active{
	background-color: #045d3c;
}

 

 

 

 필터링 정보가 출력될 ".search_content" <div> 태그에 padding 속성과 가장자리 색상을 주는 코드를 추가하였습니다.

 

.filter_content{
	padding:20px 50px 20px 50px;
	border: 1px solid gray;
}

 

그림 2-8

 

 

 ".search_content"<div> 태그 내에 있는 <a>태그 들 중 첫 번째 <a> 태그를 제외한 모든 <a> 태그가 왼쪽 공간을 주도록 코드를 추가해주었습니다.

 

.filter_content a:not(:first-child){
	margin-left: 10px;
}

 

그림 2-9

 

 

 현재 ".search_content"<div> 태그 들 중 국내 영역을 표시할 <div> 태그엔 "filter_a" 클래스 속성을, "국외 영역을 표시 할 <div> 태그엔 "filter_b" 클래스 속성을 주어져 있습니다. 현재 "국내" 버튼이 기본적으로 선택되어 있도록 했기 때문에 ".filter_a"<div> 태그는 보이고, ".filter_b"<div> 태그는 보이지 않도록 코드를 추가해주었습니다.

 

.filter_a{
	display: block;
}

.filter_b{
	display: none;
}

 

그림 2-10

 

 

 

Javascript

 

 이번엔 "국내", "국외" 버튼을 눌렀을 때 필터링 정보들이 담겨 있는 <div> 태그가 보여지고 숨겨지도록  해줄 것입니다.

 

 '필터링 정보'가 담긴 <div>태그가 보이거나 혹은 숨겨질 때는 사용자가 "국내", "국외"버튼을 눌렀을 때입니다. 따라서 각 버튼의 이벤트를 등록해주어서 우리가 원하는 형태로 변하도록 설정해 보겠습니다.

 

 "search.jsp"의 <script> 태그에서 버튼 객체를 편히 사용하기 위해서 변수를 선언해주고 초기화해줍니다.

 

	/* 검색 필터 */
	let buttonA = $("#filter_button_a");
	let buttonB = $("#filter_button_b");

 

 

 buttonA는 "국내"입니다. 사용자가 buttonA를 클릭했을대는 다음과 같은 변화가 있어야 합니다.

 

1. "filter_a"<div> 태그는 보여지고, "filter_b" <div>태그는 숨겨져야 한다.
2.  "국내" 버튼 태그에 "fitler_active" 클래스 속성이 추가되고, "국외"에는 "filter_active" 속성이 없어져야 한다.

 

 위의 2가지 처리를 하는 이벤트를 buttonA에 부여하기 위해 아래의 코드를 추가해주었습니다.

 

	buttonA.on("click", function(){
		$(".filter_b").css("display", "none");
		$(".filter_a").css("display", "block");		
		buttonA.attr("class", "filter_button filter_active");
		buttonB.attr("class", "filter_button");
	});

 

 

buttonB는 buttonA와는 반대로 동작해야 합니다. 따라서 코드를 아래와 같이 추가해주었습니다.

 

	buttonB.on("click", function(){
		$(".filter_a").css("display", "none");
		$(".filter_b").css("display", "block");
		buttonB.attr("class", "filter_button filter_active");
		buttonA.attr("class", "filter_button");		
	});

 

 

추가해준 이벤트가 정상적으로 동작하는지 확인해봅니다.

 

 

 

 

 다음 포스팅에선 이번 포스팅에서 만들어둔 틀 안에 Controller로부터 전달받은 '필터링 정보'들이 출력되도록 하고 클릭 시 '필터링된' 상품 페이지로 이동할 수 있도록 구현하겠습니다.

 

REFERENCE

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

 

 

DATE

• 2020.10.06