Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

거니의 velog

(3) 회원 조회 페이지 본문

대덕인재개발원_2nd project

(3) 회원 조회 페이지

Unlimited00 2023. 10. 20. 10:24

[empListView.jsp]

<%@page import="kr.or.ddit.vo.EmployeeVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	EmployeeVO loginSession = (EmployeeVO) session.getAttribute("loginSession");
	System.out.println("loginSession : " + loginSession.toString());

	List<EmployeeVO> empList = (List<EmployeeVO>) request.getAttribute("empList");
	System.out.println("화면단 empList : " + empList.toString());
%>
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="author" content="four guys" />
        <meta name="copyright" content="대덕인재개발원_306호" />
        <meta name="description" content="전사적 자원 관리 시스템, ERP 입니다." />
        <meta name="keywords"  content="StockERP, Stock, ERP, 전사적자원관리시스템" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
		<title>StockERP 사원정보 리스트</title>
		<link href="<%= request.getContextPath() %>/css/common.css" rel="stylesheet" />
        <link href="<%= request.getContextPath() %>/images/favicon.ico" rel="shortcut icon" />
		<script src="<%= request.getContextPath() %>/js/jquery-3.7.1.min.js"></script>
        <script defer src="<%= request.getContextPath() %>/js/script.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
        <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
		<script>
        	$(function(){
        		// 사원 이미지 종횡비
    	        var mainEmpBox = $(".empWel>div:first-of-type");
    	        var mainEmpImg = $(".empWel img")
    	        $.ratioBoxH(mainEmpBox, mainEmpImg);
    	     	// 이미지가 변경될 때 실행
    		    $(mainEmpImg).on("load", function() {
    		        // 이미지가 로드될 때마다 함수 실행
    		        $.ratioBoxH(mainEmpBox, mainEmpImg);
    		    });
    	        
    	     	// mainIcon 클릭 이벤트
    	        var slideMenuClickToken = 0; // 처음에는 서브 메뉴가 숨겨진 상태
    	        var slideMenuIdx = 0;
    	        $(".slideMenu").click(function(){
    	            
    	            var thisIs = $(this);
    	            slideMenuIdx = thisIs.index();
    	            var subNav = thisIs.parents("#mainPageContainerBox").find(".subNav");
    	            
    	            subNav.stop().animate({
    	                "left" : "-140px"
    	            }, 200);
    	            
    	            if(slideMenuClickToken == 0){ // 서브 메뉴가 숨겨진 상태
    	                subNav.eq(slideMenuIdx-3).stop().animate({
    	                    "left" : "60px"
    	                }, 200, function(){
    	                	slideMenuClickToken = 1; // 서브 메뉴가 보여진다고 표시
    	                });
    	            }else if(slideMenuClickToken == 1){ // 서브 메뉴가 보여진 상태
    	                subNav.eq(slideMenuIdx-3).stop().animate({
    	                    "left" : "-140px"
    	                }, 200, function(){
    	                	slideMenuClickToken = 0; // 서브 메뉴가 안보여진다고 표시
    	                });
    	            }
    	            
    	            console.log("slideMenuClickToken : " + slideMenuClickToken);
    	            console.log("slideMenuIdx : " + slideMenuIdx);
    	            
    	        });
    	        
    	        $(".mainIcon:first-of-type").click(function(){
    	            location.href = "<%= request.getContextPath() %>/main/mainPage.jsp";
    	        });
    	        
    	        $("#logoutBtn").click(function(){
    	        	location.href = "<%= request.getContextPath() %>/LogoutServlet.do";
    	        });
    	        
    	        $(".empAdd").click(function(){
    	        	location.href = "<%= request.getContextPath() %>/main/empRegister.jsp";
    	        });
    	        
    	     	// 사원 리스트 페이지 추가 스크립트
    	        
    	     	// 슬라이드 기능
    	        function slickSlideHeight(){
    	            var slickSlideH = $(".slickSlide").height();
    	            //console.log("slickSlideH : " + slickSlideH);
    	            $(".slideEl").height(slickSlideH);
    	        }
    	        
    	        slickSlideHeight();
    	        
    	        $(window).resize(function(){
    	            slickSlideHeight();
    	        });
    	        
    	        $(".slickSlide").slick({
    	            prevArrow: "<button type='button' class='slick-prev'>&lt;</button>",
    	            nextArrow: "<button type='button' class='slick-next'>&gt;</button>",
    	            dots: true,
    	            infinite: true,
    	            speed: 500
    	        });
    	        
    	        $(".empList li[role=presentation] button").text("");
    	        
    	        // 멀티 이미지 종횡비 맞추기
    	        $(".empCard").each(function(i, v) {
				    var thisIs = $(this);
				    var multiEmpListBox = thisIs.find(".cardLeft>div"); // 이미지를 감싸는 요소
				    var multiEmpListImg = thisIs.find(".cardLeft>div>img"); // 이미지 자체
				
				    var img = new Image();
				    img.src = multiEmpListImg.attr('src');
				    img.onload = function() {
				        var imgW = img.width;
				        var imgH = img.height;
				        var imgRatio = imgH / imgW;
				
				        var listBoxW = multiEmpListBox.width();
				        var listBoxH = multiEmpListBox.height();
				        var listBoxRatio = 1; // 박스의 종횡비를 1로 유지하여 정사각형으로 만듭니다.
				
				        if (imgRatio < listBoxRatio) {
				            // 이미지의 종횡비가 더 작으므로 이미지를 가득 채우고 높이를 조정
				            multiEmpListImg.height(listBoxH);
				            multiEmpListImg.width("auto");
				        } else {
				            // 박스의 종횡비가 더 작으므로 이미지를 가득 채우고 너비를 조정
				            multiEmpListImg.width(listBoxW);
				            multiEmpListImg.height("auto");
				        }
				
				        // 이미지와 박스를 원 모양으로 자르기 위한 CSS 속성 설정
				        multiEmpListImg.css({
				            "border-radius": "50%",
				            "clip-path": "circle(50% at 50% 50%)"
				        });
				        multiEmpListBox.css({
				            "border-radius": "50%",
				            "overflow": "hidden"
				        });
				    };
				});
    	        
    	        // 사원 카드를 클릭했을 때 사원 모달창 띄우기
    	        $(".empCard>div").click(function(){
    	        	var thisIs = $(this);
    	        	var empno = thisIs.find("#getEmpno").val();
    	        	var empname = thisIs.find("#getEmpname").val();
    	        	var empemail = thisIs.find("#getEmpemail").val();
    	        	
    	        	var empjob = thisIs.find("#getEmpjob").val();
    	        	var empjobTxt = "";
    	        	switch(empjob){
	    	        	case "10" : 
	    	        		empjobTxt = "인사팀";
	    	        		break;
	    	        	case "20" :
	    	        		empjobTxt = "개발팀";
	    	        		break;
	    	        	case "30" :
	    	        		empjobTxt = "사업관리팀";
	    	        		break;
	    	        	default :
	    	        		empjobTxt = "잘못된 부서 기입";
    	        	}
    	        	
    	        	var emppos = thisIs.find("#getEmppos").val();
    	        	var empposTxt = "";
    	        	switch(emppos){
    	        		case "10" : 
	    	        		empposTxt = "사원";
	    	        		break;
    	        		case "20" : 
	    	        		empposTxt = "대리";
	    	        		break;
    	        		case "30" : 
	    	        		empposTxt = "과장";
	    	        		break;
    	        		case "40" : 
	    	        		empposTxt = "차장";
	    	        		break;
    	        		case "50" : 
	    	        		empposTxt = "부장";
	    	        		break;
    	        		case "60" : 
	    	        		empposTxt = "임원";
	    	        		break;
	    	        	default:
	    	        		empposTxt = "잘못된 직급 기입";
		        	}
    	        	
    	        	var emphp = thisIs.find("#getEmphp").val();
    	        	var empphoto = thisIs.find("#getEmpphoto").val();
    	        	var emppercol = thisIs.find("#getEmppercol").val();
    	        	
    	            $("#empCardModal").fadeIn();
    	            $("#empCardModal .empPrevCont").animate({
    	                "marginTop" : "0px",
    	                "opacity" : "1"
    	            }, 400, "linear");
    	            
    	            var findEmpPreAuto = $(".empPreview").find(".empPreAuto");
    	            findEmpPreAuto.eq(0).find("span").eq(1).text("");
    	            findEmpPreAuto.eq(0).find("span").eq(1).text(empno);
    	            findEmpPreAuto.eq(1).find("span").eq(1).text("");
    	            findEmpPreAuto.eq(1).find("span").eq(1).text(empname);
    	            findEmpPreAuto.eq(2).find("span").eq(1).text("");
    	            findEmpPreAuto.eq(2).find("span").eq(1).text(empemail);
    	            findEmpPreAuto.eq(3).find("span").eq(1).text("");
    	            //findEmpPreAuto.eq(3).find("span").eq(1).text(empjob);
    	            findEmpPreAuto.eq(3).find("span").eq(1).text(empjobTxt);
    	            findEmpPreAuto.eq(4).find("span").eq(1).text("");
    	            //findEmpPreAuto.eq(4).find("span").eq(1).text(emppos);
    	            findEmpPreAuto.eq(4).find("span").eq(1).text(empposTxt);
    	            findEmpPreAuto.eq(5).find("span").eq(1).text("");
    	            findEmpPreAuto.eq(5).find("span").eq(1).text(emphp);
    	            $(".empPreview").find("img").attr("src", "<%= request.getContextPath() %>/images/imgView.do?fileno=" + empphoto);
    	            
    	            var empCardBox = $(".empPreview .empPrevCont>div:first-of-type>div");
        	        var empCardImg = $(".empPreview .empPrevCont>div:first-of-type>div img");
    	            $.ratioBoxH(empCardBox, empCardImg);
    	         	// 이미지가 변경될 때 실행
    			    $(empCardImg).on("load", function() {
    			        // 이미지가 로드될 때마다 함수 실행
    			        $.ratioBoxH(empCardBox, empCardImg);
    			    });
    	            
    	            var tempClass = $(".empPreview").find(".empPrevCont").attr("class");
    	            tempClass = tempClass.split(" ");
    	            tempClass = tempClass[0].trim();
    	            //console.log("tempClass : " + tempClass);
    	            //console.log("emppercol : " + emppercol);
    	            $(".empPreview>div>div").removeClass();
    	            $(".empPreview>div>div").addClass(tempClass).addClass(emppercol);
    	        });
    	        
    	        $(".closeBtn").click(function(){
    	            $("#empCardModal").fadeOut();
    	            $("#empCardModal .empPrevCont").animate({
    	                "marginTop" : "30px",
    	                "opacity" : "0"
    	            }, 400, "linear");
    	        });
    	        
    	        $(window).keyup(function(e){
    	        	//console.log("키코드 : " + e.keyCode);
    	        	if(e.keyCode == 27) { // esc 키를 눌렀을 때
    	        		$(".closeBtn").trigger("click");
    	        	}
    	        });
    	        
        	});
        </script>
	</head>
	<body>
		<div id="mainPageContainerBox">
            <!-- gnb -->
            <header>
                <a href="<%= request.getContextPath() %>/main/mainPage.jsp">
                    <img src="<%= request.getContextPath() %>/images/logo.png" alt="로고 이미지" />
                </a>
                <div>
                    <div class="empWel">
                        <div>
                            <%-- <img src="<%= request.getContextPath() %>/images/<%= loginSession.getEmpno() %>/emp_<%= loginSession.getEmpno() %>.jpg" alt="사원 이미지" /> --%>
                            <img src="<%= request.getContextPath() %>/images/imgView.do?fileno=<%= loginSession.getEmpphoto() %>" alt="사원 이미지" />
                        </div>
                        <p>
                            [<%= loginSession.getEmpname() %>] 님 환영합니다!
                        </p>
                    </div>
                    <div class="logoutCont">
                        <button id="logoutBtn" class="btn btn-info btn-sm" type="button">LOGOUT</button>
                    </div>
                </div>
            </header>

            <!-- lnb -->
            <nav class="mainNav">
                <ul class="mainIcon">
                    <li class="main">
                        <i class="fas fa-home"></i>
                        <span>HOME</span>
                    </li>
                </ul>
                <ul class="mainIcon empAdd">
                    <li class="main">
                        <i class="material-icons" style="font-size: 2.2em;">person_add</i>
                        <span>ADD</span>
                    </li>
                </ul>
                <ul class="mainIcon">
                    <li class="main">
                        <i class="fa fa-volume-up"></i>
                        <span>NOTI</span>
                    </li>
                </ul>
                <ul class="mainIcon slideMenu">
                    <li class="main">
                        <i class="fa fa-id-card"></i>
                        <span>INFO</span>
                    </li>
                </ul>
                <ul class="mainIcon slideMenu">
                    <li class="main">
                        <i class="fas fa-clipboard"></i>
                        <span>SIGN</span>
                    </li>
                </ul>
                <ul class="mainIcon slideMenu">
                    <li class="main">
                        <i class="fa fa-list-alt"></i>
                        <span>DOCU</span>
                    </li>
                </ul>
            </nav>
            
            <nav class="subNav">
                <ul>
                    <li>사원정보 확인</li>
                    <li><a href="<%= request.getContextPath() %>/empList.do">사원 리스트</a></li>
                    <li><a href="<%= request.getContextPath() %>/main/empUpdate.jsp">사원 정보 수정</a></li>
                    <li><a href="<%= request.getContextPath() %>/main/empResign.jsp">회원 탈퇴</a></li>
                </ul>
            </nav>
            <nav class="subNav">
                <ul>
                    <li>전자결재</li>
                    <li><a href="javascript:void(0)">소메뉴 1</a></li>
                    <li><a href="javascript:void(0)">소메뉴 2</a></li>
                    <li><a href="javascript:void(0)">소메뉴 3</a></li>
                    <li><a href="javascript:void(0)">소메뉴 4</a></li>
                </ul>
            </nav>
            <nav class="subNav">
                <ul>
                    <li>결재서류 확인</li>
                    <li><a href="javascript:void(0)">소메뉴 1</a></li>
                    <li><a href="javascript:void(0)">소메뉴 2</a></li>
                    <li><a href="javascript:void(0)">소메뉴 3</a></li>
                    <li><a href="javascript:void(0)">소메뉴 4</a></li>
                </ul>
            </nav>

            <!-- mainPage -->
            <section class="empList">
                <div class="bgContainer">
                    <div class="slickSlide">
                    	<% 
                    		// 6개씩 1페이지 갯수 구하기
                    		int cardLen = empList.size(); // 총 카드 갯수
                    		//System.out.println("총 카드 갯수 : " + cardLen);
                    		int empCardLen = 6; // 한 페이지에 보여줄 카드 갯수
                    		//System.out.println("한 페이지에 보여줄 카드 갯수 : " + empCardLen);
                    		int slideLoc = cardLen / empCardLen; // 슬라이드 위치
                    		//System.out.println("슬라이드 위치 : " + slideLoc);
                    		int modCardLen = cardLen % empCardLen; ; // 페이지당 카드를 집어 넣고 남은 갯수
                    		//System.out.println("남은 카드 갯수 : " + modCardLen);
                    		int slideLen = slideLoc;
                    		if(modCardLen > 0) { // 남은 카드 갯수가 있으면 슬라이드 갯수를 하나 증가시킴
                    			slideLen++;
                    		}
                    		//System.out.println("남은 카드 갯수를 계산한 슬라이드 갯수 : " + slideLen);
                    	%>
                    	<%
                    	int empLoc = 0; // 사원의 위치
                    	for(int i=0; i<slideLen; i++) { // 슬라이드 처리 
                    	%>
                        <div class="slideEl">
                        	<% 
                        	if(slideLoc == i) { // i번째 슬라이드와 마지막 페이지 위치가 일치할 경우...
                				for(int j=0; j<modCardLen; j++) { // 페이지당 남은 카드 주기
                        	%>
                            <article class="empCard">
                                <div class="<%= empList.get(empLoc).getEmppercol() %>">
                                    <div class="cardLeft">
                                        <div>
                                            <img src="<%= request.getContextPath() %>/images/imgView.do?fileno=<%= empList.get(empLoc).getEmpphoto() %>" alt="사원 이미지" />
                                        </div>
                                    </div>
                                    <div class="cardRight">
                                        <div>
                                            <span><%= empList.get(empLoc).getEmpno() %></span>
                                        </div>
                                        <div>
                                            <span><%= empList.get(empLoc).getEmpname() %></span>
                                        </div>
                                        <input id="getEmpno" type="hidden" value="<%= empList.get(empLoc).getEmpno() %>" />
                                        <input id="getEmpname" type="hidden" value="<%= empList.get(empLoc).getEmpname() %>" />
                                        <input id="getEmpemail" type="hidden" value="<%= empList.get(empLoc).getEmpemail() %>" />
                                        <input id="getEmpjob" type="hidden" value="<%= empList.get(empLoc).getEmpjob() %>" />
                                        <input id="getEmppos" type="hidden" value="<%= empList.get(empLoc).getEmppos() %>" />
                                        <input id="getEmphp" type="hidden" value="<%= empList.get(empLoc).getEmphp1() %>-<%= empList.get(empLoc).getEmphp2() %>-<%= empList.get(empLoc).getEmphp3() %>" />
                                        <input id="getEmpphoto" type="hidden" value="<%= empList.get(empLoc).getEmpphoto() %>" />
                                        <input id="getEmppercol" type="hidden" value="<%= empList.get(empLoc).getEmppercol() %>" />
                                    </div>
                                </div>
                            </article>
                            <% 
                           			empLoc++;
                				}
                			}else {
                				for(int j=0; j<empCardLen; j++) { // 페이지당 6개씩 카드 주기
                            %>
                            <article class="empCard">
                                <div class="<%= empList.get(empLoc).getEmppercol() %>">
                                    <div class="cardLeft">
                                        <div>
                                            <img src="<%= request.getContextPath() %>/images/imgView.do?fileno=<%= empList.get(empLoc).getEmpphoto() %>" alt="사원 이미지" />
                                        </div>
                                    </div>
                                    <div class="cardRight">
                                        <div>
                                            <span><%= empList.get(empLoc).getEmpno() %></span>
                                        </div>
                                        <div>
                                            <span><%= empList.get(empLoc).getEmpname() %></span>
                                        </div>
                                        <input id="getEmpno" type="hidden" value="<%= empList.get(empLoc).getEmpno() %>" />
                                        <input id="getEmpname" type="hidden" value="<%= empList.get(empLoc).getEmpname() %>" />
                                        <input id="getEmpemail" type="hidden" value="<%= empList.get(empLoc).getEmpemail() %>" />
                                        <input id="getEmpjob" type="hidden" value="<%= empList.get(empLoc).getEmpjob() %>" />
                                        <input id="getEmppos" type="hidden" value="<%= empList.get(empLoc).getEmppos() %>" />
                                        <input id="getEmphp" type="hidden" value="<%= empList.get(empLoc).getEmphp1() %>-<%= empList.get(empLoc).getEmphp2() %>-<%= empList.get(empLoc).getEmphp3() %>" />
                                        <input id="getEmpphoto" type="hidden" value="<%= empList.get(empLoc).getEmpphoto() %>" />
                                        <input id="getEmppercol" type="hidden" value="<%= empList.get(empLoc).getEmppercol() %>" />
                                    </div>
                                </div>
                            </article>
                            <% 
                            		empLoc++;
                				}
                			}
                            %>
                        </div>
                        <% } %>
                    </div>
                </div>
            </section>
        </div>
        
        <section id="empCardModal">
            <div class="closeBtn">
                <div></div>
                <div></div>
            </div>
            <article class="empPreview">
                <div>
                    <div class="empPrevCont perColPri">
                        <div>
                            <div>
                                <img src="images/default_profile.png" alt="기본 프로필 이미지" />
                            </div>
                        </div>
                        <div class="empPreAuto">
                            <span>사원번호</span>
                            <span>2023101001</span>
                        </div>
                        <div class="empPreAuto">
                            <span>사원명</span>
                            <span>홍길동</span>
                        </div>
                        <div class="empPreAuto">
                            <span>이메일</span>
                            <span>test01@test.com</span>
                        </div>
                        <div class="empPreAuto">
                            <span>담당부서</span>
                            <span>인사팀</span>
                        </div>
                        <div class="empPreAuto">
                            <span>직급</span>
                            <span>사원</span>
                        </div>
                        <div class="empPreAuto">
                            <span>전화번호</span>
                            <span>
                                <span class="empno1">010-</span>
                                <span class="empno2">0000-</span>
                                <span class="empno3">0000</span>
                            </span>
                        </div>
                    </div>
                </div>
            </article>
        </section>
	</body>
</html>

[EmpList.java]

package kr.or.ddit.controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import kr.or.ddit.service.CommonServiceImpl;
import kr.or.ddit.service.ICommonService;
import kr.or.ddit.vo.EmployeeVO;


@WebServlet("/empList.do")
public class EmpList extends HttpServlet {
	
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		
		// 사원 리스트 파라미터 전달
		ICommonService service = CommonServiceImpl.getInstance();
		List<EmployeeVO> empList = service.getAllEmpList();
		System.out.println("서블릿 단 empList : " + empList.toString());
		request.setAttribute("empList", empList);
		
		request.getRequestDispatcher("/main/empListView.jsp").forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

카드 리스트 게시판 형식으로 구성했다. 페이징 기능과 draggable 이벤트를 구현하여 마우스로 페이지를 끌어다 넘기거나 키보드 좌우 버튼을 눌러 화면 전환이 가능하다.
카드를 클릭하면 모달창이 뜨면서 카드의 상세 내용을 볼 수 있다.

'대덕인재개발원_2nd project' 카테고리의 다른 글

(6) common.css  (0) 2023.10.20
(5) 회원 삭제 페이지  (0) 2023.10.20
(4) 회원 수정 페이지  (0) 2023.10.20
(2) 회원 가입 페이지  (0) 2023.10.20
(1) 로그인 페이지  (0) 2023.10.20
'대덕인재개발원_2nd project' Related Articles more