[Spring][쇼핑몰 프로젝트][11] gnb 영역(로그인,비로그인,관리자)

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

목표

gnb 영역 구현

 

 GNB(Global Navigation Bar)란 웹디자인 용어로써 어느 페이지를 들어가든지 공통적으로 사용할 수 있는 메뉴를 의미합니다. 예를 들면 교보문고 홈페이지 상단에 있는 '로그인', '회원가입', '출석체크' 등의 버튼이 잇는 영역이 이에 해당합니다. 어느 페이지를 들어가든 해당 영역은 존재합니다.

 

그림 1

 

그림 2

 

그림 3

 

 따라서 이번 포스팅에선 GNB 영역을 구현하고자합니다. 더불어 관리자 계정으로 로그인하였을 때 관리자 페이지로 이동할 수 있도록 GNB영역에 '관리자 페이지 이동' 버튼을 제작할 것입니다.

 

 

순서

0. 관리자 계정 생성

1. gnb_area

2. 로그인 X 메뉴

3. 로그인 O 메뉴

4. 관리자 계정 메뉴

 

 

0. 관리자 계정 생성

 일반계정과 관리자 계정을 구분 하기위해서 "book_member" 테이블을 초기에 생성할때 "admiCk"컬럼을 추가했었습니다. "adminCk"가 0인 경우는 일반계정, 1인 경우는 관리자 계정으로 구분하기 위해서입니다. 홈페이지를 통해 회원가입을 할때 기본적으로 "adminCk"에 0이 입력되도록 하였습니다. 따라서 관리자 계정을 만들기 위해서 기존 생성되어져 있는 일반계정 중에 관리자계정으로 전환을 원하는 계정의 "adminCk" 데이터를 1로 변경하면 됩니다. (현재 프로젝트에 회원가입 기능과 로그인 기능에 비밀번호 암호화 기능이 적용되어 있기 때문에 INSERT문을 통해 계정을 생성한 것이 아니라, 암호화된 비밀번호가 저장된 계정의 "adminCk" 데이터를 변환함으로써 관리자계정을 만들었습니다.)

 

 
    UPDATE book_member SET adminck = 1 where memberid = '';
 

 

그림 4 MySQL

 

그림 5 Oracle

 

 

1. gnb_area 

 [목표]에서 말했듯이 gnb영역은 어떤 페이지를 이동하든 공통적으로 사용할 수 있는 메뉴가 있는 영역입니다. 공통적으로 사용할 수 있는 메뉴이지만 매번 같은 메뉴만 있어야 되는 것은 아닙니다. 로그인을 하지 않은 상태, 로그인하지 않은 상태, 관리자 계정으로 로그인한 상태 등 각각의 상황에 따라 메뉴의 목록이 달라야 합니다. 각 상황에 따라 다른 메뉴 구현은 JSTL의 <c:if> 태그를 통해서 구현할 것입니다.

 

 현재의 프로젝트에서는 gnb영역을 만들기 위해 새로운 태그를 추가할 필요가 없습니다. 초기 설계한 메인 페이지에 gnb_area영역(class명 'top_gnb_area'인 div 태그)을 따로 만들어 두었기 때문입니다. 해당 영역에 메뉴 목록을 작성하기 앞서서 기존의 gnb_area문장을 지우고 색상을 변경하였습니다. 

 

그림 6 변경전

 

그림 7 변경후

 

변경 8 변경전

 

변경 9 변경후

 

그림 10 변경전

 

그림 11 변경후

 

2. 로그인 X 메뉴

 로그인하지 않았을 시에 표시될 목록들로 '로그인', '회원가입', '고객센터'로 구성하였습니다. 아래의 코드를 class명 top_gnb_area인 div태그 내부에 작성합니다. '로그인'과 '회원가입'의 경우 페이지가 구현이 되었기 때문에 a태그를 추가하였습니다.

 

 
            <ul class="list">
                <li >
                    <a href="/member/login">로그인</a>
                </li>
                <li>
                    <a href="/member/join">회원가입</a>
                </li>
                <li>
                    고객센터
                </li>            
            </ul>    
 

 

그림 12

 

 '로그인'과 '회원가입' 메뉴의 경우 로그인한 경우에만 보여야 하기 때문에 해당 태그를 로그인하지 않았는지를 체크하는 <c:if> 태그로 감싸줍니다. 

 

 
    <c:if test = "${member == null}">
 
    </c:if>
 

 

그림 13

 

 css는 아래와 같이 추가하였습니다.

 

 
a{
    text-decoration: none;
}
 
.top_gnb_area{
    position:relative;
}
 
.top_gnb_area .list{
    position: absolute;
    top: 0px;
    right: 0;
    
}
 
.top_gnb_area .list li{
    list-style: none;    
    float : left;
    padding: 13px 15px 0 10px;
    font-weight: 900;
    cursor: pointer;
}
 
 

 

그림 14

 

3. 로그인 O 메뉴

 로그인했을 경우 표시될 메뉴들로는 '로그아웃', '마이룸', '장바구니' 로 구성하였습니다. 해당 목록들은 로그인 했을 경우에만 표시되어야 하기 때문에 로그인했는지를 체크하는 <c:if> 태그로 감싸줍니다. ('로그아웃'의 기능 구현은 다음 포스팅에서 진행하겠습니다.)

 

 
                <c:if test="${member != null }">                    
                    <li>
                        로그아웃
                    </li>
                    <li>
                        마이룸
                    </li>
                    <li>
                        장바구니
                    </li>
                </c:if>    
 

 

그림 15

 

4. 관리자 계정 메뉴

4.1 뷰 처리

 관리자 계정 메뉴는 로그인 계정 메뉴에서 '관리자 페이지' 이동할 수 있는 메뉴만 추가해줄 것입니다. 따라서 로그인했을 경우의 <c:if> 태그 내부에 아래의 코드를 작성합니다. 

• 관리자 계정만 보이도록 하기 위해서 "adminCk"를 체크하는 <c:if> 태그로 감싸줍니다.
• 관리자 페이지 url 경로는 "/admin/main"입니다. (다음 순서에 해당 메서드를 작성할 것입니다.)

 

 
                    <c:if test="${member.adminCk == 1 }">
                        <li><a href="/admin/main">관리자 페이지</a></li>
                    </c:if>
 

 

그림 16

 

4.2 관리자 Controller 작성

 관리자와 관련된 페이지 이동, 기능 수행 메서드를 따로 관리하기 위해 AdminController.java 파일을 새로 만듭니다. 

 

그림 17

 

 클래스 선언부에 Controller로 인식시키기 위해 @Controller 어노테이션을 추가해주고 클래스 내부에 작성할 url 메서드들이 "/admin" url 경로를 타도록 @RequestMapping 어노테이션을 추가해줍니다. 추가적으로 로그 기록을 찍기 위해 @log4j 어노테이션(lombok 있는 경우 )을 선언하거나 Logger타입의 클래스 상수를 선언 및 초기화합니다.

 

 
@Controller
@RequestMapping("/admin")
public class AdminController {
 
    private static final Logger logger = LoggerFactory.getLogger(AdminController.class);
    
}
 

 

그림 18

 

 

 관리자 메인 페이지로 이동하는 url 메서드를 작성합니다.

 

 
    /* 관리자 메인 페이지 이동 */
    @RequestMapping(value="main", method = RequestMethod.GET)
    public void adminMainGET() throws Exception{
        
        logger.info("관리자 페이지 이동");
        
    }
 

 

그림 19

 

4.3 관리자 Controller 작성

 관리자 메인 페이지 이동 메서드를 만들었지만 아직 관리자 메인 페이지가 없기 때문에 관리자 메인 페이지(main.jsp)를 생성합니다. 관리자 메인 페이지 이동 url 구조("admin/main")에 맞게 jsp 파일을 생성합니다. 관리자 메인 페이지의 <body> 태그 내에는 관리자 페이지라는 것을 표시할 문구만 추가하였습니다.

 

 

그림 21

 

5. 테스트

 정상적으로 작동을 하는지 테스트를 해봅니다.

 

5.1 로그인하지 않았을 경우

 

그림 22

 

5.2 로그인했을 경우

 

그림 23

 

5.3 관리자 계정 로그인 했을 경우

 

그림 24

 

5.4 관리자 페이지 버튼 기능 확인

 

그림 25

 

 

REFERENCE

 

 

DATE

• 2020.12.28