Spring Boot - 관리자 페이지 (1)

관리자 페이지는 회원 관리, 공지사항 작성 및 수정, 질문 관리 등의 기능을 통해 사이트 운영을 효율적으로 관리할 수 있는 역할을 담당합니다. 이번 글에서는 이러한 기능들을 구현하는 과정을 설명하고, 어떤 방식으로 작동하는지를 공유하려고 합니다. 부족하더라도 좋게 봐주세요 :)

 

1. 관리자 로그인 페이지 (Html)

<div class="admin-login-container">
	<h1>관리자 로그인</h1>
	<div class="login-box">
		<form id="admin-login-form" method="post">
			<input type="text" id="id" name="id" placeholder="Admin ID">
			<input type="password" name="pwd" id="pwd" placeholder="Password">
		</form>
		<button class="admin-login-btn" type="button" onclick="admin_login()">로그인</button>
		<button class="mainpage-btn" type="button" onclick="window.location.href='/main'">메인으로 이동</button>
	</div>
</div>
<script th:inline="javascript">
	/*<![CDATA[*/
	var message = [[${message}]];
	var messageType = [[${messageType}]];
	var text = [[${text}]];
	/*]]>*/
	$(document).ready(function() {
	    if (message && messageType) {
	        Swal.fire({
	            title: message,
	            text: text,
	            icon: messageType
	        });
	    }
	}); 
</script>

관리자용 ID와 Password를 입력한 후 로그인 버튼onclick="admin_login()"을 클릭하면 admin_login() 함수 호출.

 

2. admin_login() 함수 작성

function admin_login() {
    if($("#id").val() == "") {
        swal.fire({
            title: 'ID를 입력해 주세요.',
            icon: 'warning'
        });
        return false;
    } else if($("#pwd").val() == "") {
        swal.fire({
            title: 'Password를 입력해 주세요',
            icon: 'warning'
        });
        return false;
    }
    $("#admin-login-form").attr("action", "/admin_ok").submit();
}

필수 입력항목을 입력했는지 확인하고 모두 입력했을 경우 /admin_ok로 controller에 요청.

 

3. url이 /admin_ok인 Controller 작성

// 관리자 로그인 처리
@PostMapping("/admin_ok")
public String adminMainView(HttpSession session, Member vo, Model model) {
    int result = memberService.adminId(vo);
    model.addAttribute("message", null); // 초기화

    if(result == 1) {
        Member admin = memberService.getMember(vo.getId());
        session.setAttribute("admin", admin);	// 세션에 로그인 사용자 정보 저장
        model.addAttribute("admin", admin);
        return "redirect:/adminMain"; // 리다이렉션을 사용하여 URL 변경
    } else {
        // 로그인 실패 처리
        if(result == 2) {
            model.addAttribute("message", "관리자 권한이 없습니다.");
            model.addAttribute("messageType", "warning");
        } else if(result == -1) {
            model.addAttribute("message", "비밀번호가 틀립니다.");
            model.addAttribute("messageType", "error");
        } else {
            model.addAttribute("message", "ID가 존재하지 않습니다.");
            model.addAttribute("messageType", "warning");
        }
    }
    return "admin/admin_login";
}

 + memberService의 adminId 메서드

@Override
public int adminId(Member vo) {
    int result = -1;
    // 회원 조회
    Member member = memberRepo.findByLoginId(vo.getId());

    if(member != null) { // 아이디 존재
        if(member.getPwd().equals(vo.getPwd())) { // pwd 일치
            if(member.getMembercode() == 1) { // 관리자 코드 1
                result = 1;
            } else {
                result = 2;
            }
        } else { // pwd 불일치
            result =-1;
        }
    } else { // id 없음
        result = 0;
    }
    return result;
}

• memberService.adminId(vo) : 호출하여 로그인하려는 사용자의 ID와 권한을 확인합니다.
• if(result == 1) {... : 반환된 result가 1이면, 사용자는 관리자 권한을 가진 것으로 간주하고, Member admin = memberService.getMember(vo.getId()); 해당 관리자의 정보를 가져오고, session.setAttribute("admin", admin); 이 정보를 세션에 저장하여 로그인 상태를 유지합니다.
• model.addAttribute("admin", admin);를 통해 관리자 정보를 모델에 추가하고, return "redirect:/adminMain";으로 리다이렉트하여 관리 메인 페이지로 이동합니다.
• adminId 메서드 : result는 로그인 처리의 결과로, 1 (관리자), 2 (권한 없음), -1 (비밀번호 불일치), 0 (ID 없음) 중 하나의 값을 반환합니다.
• if(result == 2) {... : 권한이 없는 일반 사용자이므로 "관리자 권한이 없습니다."라는 메시지와 함께 messageType을 "warning"으로 설정합니다.
• else if(result == -1) {... : 비밀번호 불일치로 "비밀번호가 틀립니다."라는 오류 메시지를 추가합니다.
• else {... : 해당 ID가 존재하지 않으므로 "ID가 존재하지 않습니다."라는 메시지를 설정합니다.
• 모든 실패 경우에 대해 return "admin/admin_login";페이지로 다시 이동해 메시지를 표시합니다.

Id, Pwd 입력 확인

로그인 처리의 결과

4. adminMain.html

 + Controller

@GetMapping("/adminMain")
public String adminMainPage(HttpSession session, Model model) {
    Member admin = (Member)session.getAttribute("admin");
    if(admin == null) {
        model.addAttribute("message", "로그인 페이지로 이동..");
        model.addAttribute("messageType", "info");

        return "admin/admin_login";
    }
    model.addAttribute("admin", admin);
    return "admin/adminMain";
}

<div class="admin-main-container">
	<h1><a th:href="@{/adminMain}">관리자 페이지</a></h1>
	 <!-- 관리자 정보 및 로그아웃 버튼 -->
	 <div class="admin-section">
	 	<h3>관리자 정보</h3>
	 	<p>이름 : [[${admin.name}]]</p>
	 	<p>이메일 : [[${admin.email}]]</p>
	 	<button type="button" class="logout-btn" onclick="logout()">로그아웃</button>
	 </div>
	<!-- 공지사항 섹션 -->
	<div class="admin-section">
	    <h3 class="clickable" onclick="toggleContent(this)">공지사항 관리</h3>
	    <div class="content-list" style="display: none;">
	        <a th:href="@{/admin-notice-list}">전체리스트</a><br>
	        <a th:href="@{/admin-notice-write}">작성</a><br>
	    </div>
	</div>
	
	<!-- 회원관리 섹션 -->
	<div class="admin-section">
	    <h3 class="clickable" onclick="toggleContent(this)">회원 관리</h3>
	    <div class="content-list" style="display: none;">
	        <a th:href="@{/admin-customer-list}">회원리스트</a><br>
	    </div>
	</div>
	
	<!-- 질문관리 섹션 -->
	<div class="admin-section">
	    <h3 class="clickable" onclick="toggleContent(this)">질문 관리</h3>
	    <div class="content-list" style="display: none;">
	        <a th:href="@{/admin-fix-qna}">고정 질문</a><br>
	        <a th:href="@{/admin-customer-qna}">회원 질문</a><br>
	    </div>
	</div>
</div>

로그인 성공

5. 로그아웃 구현 <button type="button" class="logout-btn" onclick="logout()">로그아웃</button>버튼클릭 시 logout()함수 호출.

function logout() {
    swal.fire({
        icon: 'info',
        title: '로그아웃',
        text: '정말록 로그아웃 하시겠습니까?',
        showCancelButton: true,
        confirmButtonText: '예',
        cancelButtonText: '아니요'
    }).then((result) => {
        if (result.isConfirmed) {
            // 로그아웃 요청
            fetch('/admin-logout', {
                method: 'GET', // GET 요청
                headers: {
            		'Content-Type': 'application/json'
                }
            })
            .then(response => {
                if (response.ok) {
                    // 성공적으로 로그아웃된 경우 메인 페이지로 이동
                    window.location.href = '/main'; // 또는 사용하고자 하는 메인 페이지 URL
                } else {
                	Swal.fire('오류', '로그아웃에 실패했습니다.', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire('오류', '로그아웃 중 오류가 발생했습니다.', 'error');
            });
        }
    });
}

• 사용자가 확인(isConfirmed)을 선택하면 로그아웃 요청이 실행됩니다.
• fetch메서드를 사용해 admin-logout 경로로 method: 'GET' GET 요청을 보냅니다. 'Content-Type': 'application/json' 을 통해 JSON 형식으로 통신을 요청.
• 로그아웃이 성공하면 window.location.href = '/main';을 통해 메인 페이지로 이동합니다.

 - 로그아웃 처리

// 관리자 로그아웃
@GetMapping("/admin-logout")
public String adminLogout(HttpSession session) {
    session.invalidate(); // 현재 세션을 무효화
    return "main";
}