[Spring][쇼핑몰 프로젝트][33] 메인화면 네비 기능

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

 

목표

메인 페이지 상품 이동 네비 구현

 

 이전 포스팅에서 상품 검색 기능을 구현을 하였는데, 그중 서버 측 구현한 코드를 활용해서 메인 페이지 상품 이동 네비 구현을 목표로 합니다. 

 

 

 

 

순서

1. 구현 방향

2. 네비 태그(main.jsp)

3. 카테고리 <a>태그 

 

 

 

1. 구현 방향

 이번 포스팅에서 구현하고자 하는 기능은 상품 네비 기능입니다. 예를 들어 '교보문고' 홈페이지에 들어가면 첫 페이지에 카테고리들이 나열되어 있고, 사용자가 원하는 카테고리 이름을 클릭하였을 때 해당 카테고리들로만 구성된 상품의 목록 페이지로 이동하도록 해주는 기능을 말합니다.

 

그림 1-1

 

 이 기능을 구현하기 위해 '서버' 측과 '뷰'측 이 처리해주어야 할 것들은 다음과 같습니다.

 

 '뷰' 

 - 사용자가 메인 페이지에 들어 갔을 때 상품의 카테고리 데이터들이 나열되어 있어야 한다.

 - 사용자가 원하는 카테고리를 클릭을 하면 해당 카테고리 정보를 서버로 전송하여 관련 상품들의 리스트를 요청한다.

 - 서버가 관련 데이터를 반환해주면 해당 데이터를 사용자가 보기 편하도록 출력 한다.

 

'서버'

 - 뷰에서 전송한 카테고리 정보를 활용하여 DB에 관련 상품 데이터를 요청한다.

 - DB로부터 요청한 정보를 반환받으면 이를 뷰로 전송한다.

 

 위의 두 측면 중 '서버'의 경우 우리가 이전 포스팅에서 구현한 검색 기능 코드를 그대로 사용하면 됩니다. 우리가 작성한 "/serarch" url은 뷰로부터 'type', 'cateCode', 'keyword'(, 'pageNum', 'amount') 데이터를 전달받고 이를 활용하여 DB로부터 검색을 한 뒤  그 리스트를 뷰로 반환해주는데 'type'에 "C"를 'cateCode'에 해당 카테고리 코드 숫자를 보내주기만 하면 원하는 형태의 데이터를 전달받을 수 있게 됩니다. 따라서 새롭게 작성하지 않고 "/search" url 매핑 메서드를 그대로 사용할 것입니다.

 

 '뷰'에서는 '메인 페이지'와 '검색 후 페이지' 두 가지를 처리해 주어야 합니다. '검색 후 페이지'의 경우 일반적인 검색 후 이동하는 페이지인 "search.jsp"를 그대로 사용할 것입니다. 따라서 이번 포스팅에서 중점적으로 할 작업은 기존 작성된 메인 페이지(main.jsp)에 사용자가 카테고리를 선택할 수 있도록 인터페이스를 추가해주고 서버에 적절한 형태의 요청을 하도록 코드를 작성하는 것입니다. 

 

 

2. 네비 태그(main.jsp)

 

 사용자가 카테고리를 볼 수 있도록 카테고리 데이터를 출력하기 전에 해당 데이터들이 담길 틀을 먼저 만들어보겠습니다. 어떠한 효과 없이 출력시킬 수도 있겠지만 우리가 흔히 홈페이지 볼 수 있는 hover DropDown 스타일로 틀을 만들어보겠습니다.

 

 Hover DropDown의 경우 마우스를 특정 영역에 올려 두었을 때 숨겨진 태그가 등장하여 사용자가 숨겨진 영역을 사용할 수 있는 방식입니다. 

 

 지금 구현할 방식은 W3 schools를 참고하여 만들었습니다.

https://www.w3schools.com/howto/howto_css_dropdown.asp

How To Create a Hoverable Dropdown Menu

 

 클래스 속성명이 "navi_bar_area"인 <div> 태그 속성에 태그내에서 작업을 할 것입니다. 먼저 기존의 <h1>태그를 제거해줍니다.

 

그림 2-1

 

 큰 범주의 카테고리는 국내 국외 이기 때문에 아래의 <div>태그 2개를 추가해줍니다.

 

		<div class="navi_bar_area">
			<div class="dropdown">
			</div>
			<div class="dropdown">
			</div>
		</div>

 

그림 2-2

 

 추가해준 각 <div> 태그에 <button>태그를 작성하고 추가해준 <button>태그에 마우스를 올렸을때 보여질 <div>태그를 추가해줍니다. 그리고 <div>태그 내에는 테스트용으로 6개 정도의 의미 없는 <a> 태그를 추가해주겠습니다.

 

		<div class="navi_bar_area">
			<div class="dropdown">
			    <button class="dropbtn">국내 
			      <i class="fa fa-caret-down"></i>
			    </button>
			    <div class="dropdown-content">
			    	<a href="#">테스트1</a>
			    	<a href="#">테스트2</a>
			    	<a href="#">테스트3</a>
			    	<a href="#">테스트4</a>
			    	<a href="#">테스트5</a>
			    	<a href="#">테스트6</a>	      		      		      
			    </div>			
			</div>
			<div class="dropdown">
			    <button class="dropbtn">국외 
			      <i class="fa fa-caret-down"></i>
			    </button>
			    <div class="dropdown-content">
			    	<a href="#">테스트1</a>
			    	<a href="#">테스트2</a>
			    	<a href="#">테스트3</a>
			    	<a href="#">테스트4</a>
			    	<a href="#">테스트5</a>
			    	<a href="#">테스트6</a>	      		      		      
			    </div>			
			</div>
		</div>

 

 

그림 2-4

 

 먼저 추가한 태그들에게 기본적인 틀의 css 설정을 해주겠습니다. 먼저 기존 '. navi_bar_area' 선택자의 css 설정을 제거해줍니다.

 

그림 2-5 기존 css 설정 제거

 

 아래의 css 설정 코드를 main.css 파일에 추가해줍니다.

 

.navi_bar_area {
  overflow: hidden;
  background-color: #5e6b9e;
}

.navi_bar_area a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  margin-left: 10px;
}

.dropdown .dropbtn {
  font-size: 16px;
  font-weight: bold;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  width:140px;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  width: 466px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: inline-block;
  text-align: left;
  width: 80px;
}

 

그림 2-6

 

그림 2-7

 

 기본적인 틀을 잡아주었기 때문에 '.dropdwon-content'에 "display:none;"속성을 추가해서 '.dropdown-content' <div> 태그를 숨겨줍니다.

 

.dropdown-content {
  display:none;
  position: absolute;
  background-color: #f9f9f9;
  width: 466px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

 

그림 2-8

 

그림 2-9

 

 큰 카테고리를 감싸고 잇는 '. drpodown'태그에 hover 이벤트가 발생했을  때 숨겨진 <div> 태그가 보여야 합니다. 따라서 아래의 코드를 추가해줍니다. 선택자를 해석하면 '.dropdown'태그에 hover 이벤트가 발생했을 때 '.dropdown-content' 태그는 "display:block;"속성을 가져야 한다는 의미입니다.

 

.dropdown:hover .dropdown-content {
  display: block;
}

 

 

 

 a태그에 사용자가 마우스를 올렸을 때 직관적으로 선택되고 있다는 것을 표현하기 위해 아래의 css코드를 main.css에 추가했습니다.

 

.navi_bar_area a:hover, .dropdown:hover .dropbtn {
  background-color: #475382;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

 

그림 2-12

 

 

그림 2-13

 

 이로써 기본적인 틀은 완성되었습니다.

 

 

3. 카테고리 <a> 태그

 카테고리 <a> 태그를 모두 추가해주기 전, 테스트를 위해 하나의 카테고리를 선택하여 해당 카테고리의 상품 목록 페이지로 이동하도록 해주는 <a>태그를 추가해주겠습니다. 사용자에게는 카테고리 이름이 보이고 "href"속성은 'search?type=C&cateCode=000000'인 <a>태그를 추가해줍니다.

 

<a href="/search?type=C&cateCode=202001">교양</a>

 

그림 3-1

 

 정상적으로 동작하는지 확인해봅니다.

 

그림 3-2

 

그림 3-3

 

 정상적으로 동작을 하는 것을 확인하였다면 모든 카테고리 태그를 추가해줄 차례입니다. 하지만 추가해주어야 할 카테고리 코드를 모두 추가해주기에는 너무 번거롭고 카테고리 범주에 변동이 있다면 매번 수정을 해주어야 합니다. 이러한 번거로움을 해결하기 위해서 서버로부터 카테고리 리스트 정보를 요청하고 메인 페이지(main.jsp)가 렌더링 될 때 동적으로 카테고리 <a> 태그들이 추가되도록  할것입니다. 이 기능의 구현은 다음 포스팅에서 진행하겠습니다. 

 

 

REFERENCE

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

 

 

DATE

• 2020.09.27