티스토리 뷰

WEB/JQuery

부서 및 사용자 관리 트리 탐색기

silverline79 2026. 1. 22. 23:09 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인사 관리 시스템 - 부서별 사용자 조회</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* [1] 기본 레이아웃 및 디자인 */
        body { font-family: 'Pretendard', 'Malgun Gothic', sans-serif; margin: 0; display: flex; height: 100vh; background: #f8f9fa; color: #333; }
        
        /* 사이드바 (부서 트리) */
        .sidebar { width: 380px; background: #fff; border-right: 1px solid #e9ecef; padding: 25px; overflow-y: auto; box-shadow: 2px 0 10px rgba(0,0,0,0.02); }
        .sidebar h2 { font-size: 1.2rem; margin-bottom: 20px; color: #007bff; display: flex; align-items: center; gap: 8px; }
        
        /* 상세 정보 영역 */
        .detail-view { flex: 1; padding: 50px; background: #fff; overflow-y: auto; display: flex; flex-direction: column; }

        /* 검색 및 컨트롤 */
        .search-box input { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #dee2e6; border-radius: 6px; outline: none; }
        .control-btns { display: flex; gap: 5px; margin-bottom: 15px; justify-content: flex-end; }
        .btn { padding: 5px 10px; font-size: 11px; cursor: pointer; border: 1px solid #dee2e6; background: #fff; border-radius: 4px; color: #666; }
        .btn:hover { background: #f1f3f5; }

        /* 트리 메뉴 스타일 */
        ul.tree, ul.tree ul { list-style: none; padding-left: 18px; margin: 0; }
        .tree li { margin: 6px 0; }
        .dept, .user { padding: 8px 12px; cursor: pointer; border-radius: 6px; display: inline-block; font-size: 14px; transition: 0.2s; }
        .dept { color: #495057; font-weight: 600; }
        .user { color: #616e7c; }
        .dept:hover, .user:hover { background-color: #e7f1ff; color: #007bff; }
        .active-item { background-color: #007bff !important; color: #fff !important; }

        /* 폴더 토글 제어 */
        .dept + ul { display: block; }
        .dept.collapsed + ul { display: none; }
        
        /* 상세 정보 카드 스타일 */
        .user-card { background: #fff; border: 1px solid #e9ecef; border-radius: 12px; padding: 35px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); max-width: 600px; }
        .profile-header { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; border-bottom: 2px solid #f8f9fa; padding-bottom: 20px; }
        .profile-img { width: 80px; height: 80px; background: #e9ecef; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; }
        .info-grid { display: grid; grid-template-columns: 100px 1fr; gap: 15px; font-size: 15px; }
        .info-label { color: #adb5bd; font-weight: bold; }
        
        .highlight { background-color: #fff3cd !important; color: #856404; }
        #no-result { display: none; text-align: center; color: #adb5bd; padding: 20px; }
    </style>
</head>
<body>

    <div class="sidebar">
        <h2>🏢 조직도 탐색기</h2>
        <div class="control-btns">
            <button id="btn-expand" class="btn">모두 펼치기</button>
            <button id="btn-collapse" class="btn">모두 접기</button>
        </div>
        <div class="search-box">
            <input type="text" id="tree-search" placeholder="부서명 또는 이름 검색...">
        </div>
        <div id="no-result">일치하는 정보가 없습니다.</div>
        <ul class="tree" id="main-tree"></ul>
    </div>

    <div class="detail-view">
        <div id="view-empty" style="text-align: center; margin-top: 150px; color: #dee2e6;">
            <p style="font-size: 80px; margin: 0;">👥</p>
            <p style="font-size: 18px;">조직도에서 임직원을 선택하시면 상세 정보가 표시됩니다.</p>
        </div>

        <div id="view-detail" style="display: none;">
            <div class="user-card">
                <div class="profile-header">
                    <div class="profile-img">👤</div>
                    <div>
                        <h1 id="user-name" style="margin:0; font-size: 24px;">이름</h1>
                        <p id="user-title" style="margin:5px 0 0; color: #007bff; font-weight: bold;">직급</p>
                    </div>
                </div>
                <div class="info-grid">
                    <div class="info-label">소속 부서</div>
                    <div id="user-dept">소속부서</div>

                    <div class="info-label">사번</div>
                    <div id="user-id">사번</div>

                    <div class="info-label">이메일</div>
                    <div id="user-email">email@company.com</div>

                    <div class="info-label">연락처</div>
                    <div id="user-phone">010-0000-0000</div>

                    <div class="info-label">담당 업무</div>
                    <div id="user-task">업무 설명이 들어갑니다.</div>
                </div>
            </div>
        </div>
    </div>

<script>
$(document).ready(function() {
    // 1. 조직도 데이터 (JSON)
    const orgData = [
        {
            "name": "경영지원본부",
            "type": "dept",
            "children": [
                {
                    "name": "인사팀",
                    "type": "dept",
                    "children": [
                        { "name": "김철수", "type": "user", "title": "팀장", "id": "HR2021001", "email": "cs.kim@company.com", "phone": "010-1234-5678", "task": "인사 기획 및 총괄" },
                        { "name": "이영희", "type": "user", "title": "대리", "id": "HR2023042", "email": "yh.lee@company.com", "phone": "010-2222-3333", "task": "채용 및 교육 운영" }
                    ]
                },
                { "name": "박민수", "type": "user", "title": "본부장", "id": "MG2018005", "email": "ms.park@company.com", "phone": "010-9999-8888", "task": "경영지원 전략 수립" }
            ]
        },
        {
            "name": "IT개발본부",
            "type": "dept",
            "children": [
                {
                    "name": "플랫폼개발팀",
                    "type": "dept",
                    "children": [
                        { "name": "최자바", "type": "user", "title": "수석", "id": "IT2019011", "email": "java.choi@company.com", "phone": "010-4444-5555", "task": "백엔드 시스템 설계" },
                        { "name": "정리액", "type": "user", "title": "선임", "id": "IT2022099", "email": "react.jung@company.com", "phone": "010-7777-6666", "task": "프론트엔드 UI 개발" }
                    ]
                }
            ]
        }
    ];

    // 2. 트리 생성 함수 (재귀)
    function buildTree(data, path = "") {
        let html = "";
        data.forEach(item => {
            if (item.type === "dept") {
                html += `<li>
                            <div class="dept">🏢 ${item.name}</div>
                            <ul>${buildTree(item.children, item.name)}</ul>
                         </li>`;
            } else {
                // 사용자 데이터를 데이터 속성에 담아 전달
                html += `<li class="user" 
                            data-name="${item.name}" 
                            data-title="${item.title}" 
                            data-id="${item.id}" 
                            data-dept="${path}" 
                            data-email="${item.email}" 
                            data-phone="${item.phone}" 
                            data-task="${item.task}">👤 ${item.name} ${item.title}</li>`;
            }
        });
        return html;
    }

    $('#main-tree').html(buildTree(orgData));

    // 3. 부서 클릭 시 토글
    $(document).on('click', '.dept', function() {
        $(this).toggleClass('collapsed');
        $(this).next('ul').slideToggle(200);
    });

    // 4. 사용자 클릭 시 상세 정보 출력
    $(document).on('click', '.user', function(e) {
        e.stopPropagation();
        $('.dept, .user').removeClass('active-item');
        $(this).addClass('active-item');

        const d = $(this).data(); // 클릭한 요소의 data-* 속성 가져오기

        $('#view-empty').hide();
        $('#view-detail').fadeIn(300);

        // 상세 카드 데이터 바인딩
        $('#user-name').text(d.name);
        $('#user-title').text(d.title);
        $('#user-dept').text(d.dept);
        $('#user-id').text(d.id);
        $('#user-email').text(d.email);
        $('#user-phone').text(d.phone);
        $('#user-task').text(d.task);
    });

    // 5. 전체 제어 버튼
    $('#btn-expand').click(() => $('.dept').removeClass('collapsed').next('ul').slideDown(200));
    $('#btn-collapse').click(() => $('.dept').addClass('collapsed').next('ul').slideUp(200));

    // 6. 검색 기능
    $('#tree-search').on('input', function() {
        const query = $(this).val().toLowerCase().trim();
        const $allLi = $('#main-tree li');
        $('.dept, .user').removeClass('highlight');

        if (!query) { $allLi.show(); $('#no-result').hide(); return; }

        $allLi.hide();
        let found = false;

        $allLi.each(function() {
            if ($(this).text().toLowerCase().indexOf(query) !== -1) {
                $(this).show().parents('li').show();
                $(this).parents('ul').show().prev('.dept').removeClass('collapsed');
                $(this).children('.dept, .user').filter(function() {
                    return $(this).text().toLowerCase().indexOf(query) !== -1;
                }).addClass('highlight');
                found = true;
            }
        });
        found ? $('#no-result').hide() : $('#no-result').show();
    });
});
</script>
</body>
</html>

 

부서 및 사용자 관리 트리 탐색기.html
0.01MB

 

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

'WEB > JQuery' 카테고리의 다른 글

인사 관리 트리 탐색기 (검색/초기화 버튼 포함)  (0) 2026.01.22
인사 관리 시스템 - 검색 제어 강화  (0) 2026.01.22
JSON 동적 트리 탐색기  (0) 2026.01.22
API 데이터 호출 및 트리 생성 로직  (0) 2026.01.22
전체 열기/닫기 & 동적 트리 통합 코드  (0) 2026.01.22
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/01   »
일 월 화 수 목 금 토
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
글 보관함