import { vars } from './variable.js';
import { removeCountdownTooltip, resetSort, prepareRecycleBinRendering, initEditPositionMode, deletePosition, renderSizeBar, renderLog, renderEditAuthorUserList } from './pageRenderer.js';
import { formatBytes, splitBaseAndExt, splitTopPathAndTargetName, hasSpecialChar, getDataFromTreeObject } from './common.js';
import {
    createFolder,
    renameTarget,
    editAuthor,
    downloadTarget,
    removeTarget,
    deleteTarget,
    downloadTempFile,
} from './dataManager.js'
import { getUsers } from './socketManager.js';
import {
    mgmtFunc_changeProjectState,
    mgmtFunc_changeBannerNotice
} from './managementFunctions.js';
import { getList } from './userPermission.js';
import { getDefaultFilter } from './logFilter.js';
import { toggleContextFocusBox } from './eventManager.js';
import { renderManual } from './manualSwiper.js';

export async function toggleRecycleBinModal(state) {
    let modal = document.querySelector('.recycle-bin-modal');
    if (!modal) return;

    //// vars에서 마지막 선택 아이템을 저장한 속성들 초기화
    vars.lastListItem_bin = undefined;
    vars.lastSelectTarget_bin = undefined;
    vars.lastContextTarget_bin = undefined;
    vars.lastListGroupTarget_bin = undefined;
    vars.multiSelectListItemArr_bin = [];
    
    // list-item-wrap 초기화
    let listItemWrap = modal.querySelector('.list-body .list-item-wrap');
    listItemWrap.innerHTML = '';

    if (state == false) {
        modal.style.display = 'none';
    }

    if (state == true) {
        //// 모달 초기화
        modal.style.display = 'flex';

        // 정렬 초기화
        resetSort();

        let titleText = modal.querySelector('.modal-header > .title .left-wrap .title-wrap .text');
        titleText.innerHTML = '휴지통';

        await prepareRecycleBinRendering();
    }
}

export async function toggleModal(state, toggleParams) {
    let modal = document.querySelector('.archive-modal');
    if (!modal) return;

    if (state == false) {
        modal.style.display = 'none';
        modal.querySelectorAll('.modal-body > div').forEach(div => {
            div.style.display = 'none';
        })

        // 모달 닫을 때 저장공간 파이그래프 초기화
        let dom = document.querySelector('.archive-modal .modal-body .size-wrap');
        if (echarts.getInstanceByDom(dom)) {
            echarts.dispose(dom);
        }

        toggleContextFocusBox(false);
    }

    if (state == true) {
        //// 모달 초기화
        modal.style.display = 'flex';

        modal.querySelector('.modal-body').style.padding = '0.5rem 1rem';

        if (!toggleParams.title) toggleParams.title = '알림';
        let modalTitle = toggleParams.title;
        let modalText = toggleParams.text;
        let modalType = toggleParams.type;
        let resourcePath = toggleParams.resourcePath;

        let titleText = modal.querySelector('.modal-header > .title .left-wrap .title-wrap .text');
        titleText.innerHTML = modalTitle;
        
        let usersCount = modal.querySelector('.modal-header > .title .left-wrap .title-wrap .users-count');
        usersCount.style.display = 'none';

        //// 권한 바뀐 경우 어떻게 바로 유저 권한 설정 버튼 추가?
        // main.js에서 초기 설정 때 권한이 낮으면 유저 권한 설정 버튼을 삭제하기 때문에
        // if문으로 setUserPermissionBtn 있는지 체크 후 숨김
        let setUserPermissionBtn = modal.querySelector('.modal-header > .title .left-wrap .set-user-permission-btn');
        if (setUserPermissionBtn) setUserPermissionBtn.style.display = 'none';

        let headerRightWrap = modal.querySelector('.modal-header > .title .right-wrap');
        if(headerRightWrap) headerRightWrap.style.display = 'none';

        let connectedUsersWrap = modal.querySelector('.modal-body > .connected-users-wrap');
        connectedUsersWrap.style.display = 'none';
        
        let manualWrap = modal.querySelector('.modal-body > .manual-wrap');
        manualWrap.style.display = 'none';

        // let recycleBinWrap = modal.querySelector('.modal-body > .recycle-bin-wrap');
        // recycleBinWrap.style.display = 'none';

        let sizeWrap = modal.querySelector('.modal-body > .size-wrap');
        sizeWrap.style.display = 'none';

        let logWrap = modal.querySelector('.modal-body > .log-wrap');
        logWrap.style.display = 'none';

        let logFilter = modal.querySelector('.log-filter');
        logFilter.style.display = 'none';

        let textWrap = modal.querySelector('.modal-body > .text-wrap');
        textWrap.innerHTML = '';
        textWrap.style.display = 'flex';
        textWrap.innerHTML = modalText;

        let projectListWrap = modal.querySelector('.modal-body > .project-list-wrap');
        projectListWrap.innerHTML = '';
        projectListWrap.style.display = 'none';

        let inputWrap = modal.querySelector('.modal-body > .input-wrap');
        inputWrap.innerHTML = '';
        inputWrap.style.display = 'none';

        let userListWrap = modal.querySelector('.modal-body > .user-list-wrap');
        // userListWrap.innerHTML = '';
        userListWrap.style.display = 'none';

        let btnWrap = modal.querySelector('.modal-body > .btn-wrap');
        btnWrap.innerHTML = '';
        btnWrap.style.display = 'none';

        //// 취소버튼 생성
        // 취소 버튼 필요 시 btnWrap.appendChild(cancelBtn); 추가
        let cancelBtn = document.createElement('div');
        cancelBtn.textContent = '취소';
        cancelBtn.classList.add('cancel-btn');
        cancelBtn.addEventListener('click', () => {
            toggleModal(false);
        })

        //// 얼럿 모달
        if (modalType == 'alertModal') {
            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                toggleModal(false);
            })
            btnWrap.appendChild(confirmBtn);

            btnWrap.style.display = 'flex';
        }

        //// 접속자
        if (modalType == 'connectedUsers') {
            modal.querySelector('.modal-body').style.padding = '';
            textWrap.style.display = 'none';
            usersCount.style.display = 'flex';
            //// 권한 바뀐 경우 어떻게 바로 유저 권한 설정 버튼 추가?
            if (setUserPermissionBtn) setUserPermissionBtn.style.display = 'flex';
            // if (devMenuBtn) devMenuBtn.style.display = 'flex';
            // headerRightWrap.style.display = 'flex';
            connectedUsersWrap.style.display = 'flex';
        }

        //// 도움말
        if (modalType == 'manual') {
            modal.querySelector('.modal-body').style.padding = '';
            textWrap.style.display = 'none';
            manualWrap.style.display = 'flex';

            await renderManual();
        }

        //// 저장공간
        if (modalType == 'size') {
            modal.querySelector('.modal-body').style.padding = '';
            textWrap.style.display = 'none';
            sizeWrap.style.display = 'flex';
            renderSizeBar();
        }

        //// 활동로그
        if (modalType == 'log') {
            modal.querySelector('.modal-body').style.padding = '';
            textWrap.style.display = 'none';
            logWrap.style.display = 'flex';
            logWrap.style.opacity = '0';

            const { logDataArr } = await getDefaultFilter();
            
            let isInit = true;
            let addFooterLog = false;
            // addFooterLog : 푸터 로그 추가 여부
            // 기본은 true, 활동 로그 모달 열 때 실행하는 renderLog에서는 false
            await renderLog(isInit, addFooterLog, logDataArr);
            
            // await getDefaultFilter();
            logFilter.style.display = 'flex';


            // 로그 모달 최초 실행 시 vars.isLogModalOpened를 true로 변경
            if (!vars.isLogModalOpened) vars.isLogModalOpened = true;
        }

        //// 변환
        // if (modalType == 'convert') {
        //     let convertBtn = document.createElement('div');
        //     convertBtn.textContent = '변환';
        //     convertBtn.classList.add('convert-btn');
        //     convertBtn.addEventListener('click', () => {
        //         // convertPdf(resourcePath);
        //         toggleModal(false);
        //     })
        //     btnWrap.appendChild(convertBtn);

        //     btnWrap.style.display = 'flex';
        // }

        //// 새 폴더 createFolder, 새 갤러리 폴더 createFolder-gallery, 새 도면 폴더 createFolder-drawing
        if (modalType.includes('createFolder')) {
            let oldName = '';

            let folderType;
            if (modalType.includes('-')) {
                folderType = modalType.split('-').pop();
            } else { // default
                folderType = null;
            }

            let textInput = document.createElement('input');
            textInput.classList.add(`${modalType}-input`);
            textInput.classList.add('modal-text-input');
            textInput.id = `${modalType}-input`;
            textInput.type = 'text';
            textInput.value = oldName;
            textInput.spellcheck = false;

            inputWrap.appendChild(textInput);
            inputWrap.style.display = 'flex';
            textInput.focus();

            // text input 클릭할 때 경고문구 있으면 삭제
            textInput.addEventListener('click', () => {
                if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
            })
            
            // text input 타이핑 할 때 경고문구 있으면 삭제
            textInput.addEventListener('input', () => {
                if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
            })

            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                createFolder(inputWrap, resourcePath, folderType);
            })
            btnWrap.appendChild(confirmBtn);

            btnWrap.style.display = 'flex';
        }

        //// 이름 변경
        if (modalType == 'renameTarget') {
            let oldName = '';
            let data = toggleParams.data;
            let dataTypeKor = toggleParams.dataTypeKor;

            oldName = data.getElementsByClassName('name-text')[0].innerText;
            if (dataTypeKor == '파일') {
                oldName = splitBaseAndExt(oldName).base;
            }

            let input = document.createElement('input');
            input.classList.add(`${modalType}-input`);
            input.classList.add('modal-text-input');
            input.id = `${modalType}-input`;
            input.type = 'text';
            input.value = oldName;
            input.spellcheck = false;

            inputWrap.appendChild(input);
            inputWrap.style.display = 'flex';
            input.focus();

            // text input 클릭할 때 경고문구 있으면 삭제
            input.addEventListener('click', () => {
                if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
            })
            
            // text input 타이핑 할 때 경고문구 있으면 삭제
            input.addEventListener('input', () => {
                if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
            })

            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                renameTarget(toggleParams, inputWrap);
            })
            btnWrap.appendChild(confirmBtn);

            btnWrap.style.display = 'flex';
        }

        ////// 작성자 변경
        if (modalType == 'editAuthor') {
            // vars.permissionList에 직원 목록 저장
            let list = await getList();
            list.changePermission = {};
            list.deptUserCount = {};
            list.permission.forEach(p => { list.changePermission[p.user_id] = {user_id : p.user_id, lev : p.lev}})
            list.all.forEach(user => {
                const key = `${user.company}_${user.dept}`;
                if(!list.deptUserCount[key]) list.deptUserCount[key] = 0;
                list.deptUserCount[key]++;
            });
            vars.permissionList = list;

            // 작성자 변경 모달창 구성
            let editAuthorInputWrap = document.createElement('div');
            editAuthorInputWrap.classList.add('edit-author-input-wrap');

            let nameLabel = document.createElement('div');
            nameLabel.innerText = '이름';

            let separator = document.createElement('div');
            separator.classList.add('separator');

            let nameInput = document.createElement('input');
            nameInput.classList.add(`${modalType}-name-input`);
            nameInput.classList.add('modal-text-input');
            nameInput.id = `${modalType}-name-input`;
            nameInput.type = 'text';
            nameInput.value = toggleParams.authorNm?toggleParams.authorNm:'';
            nameInput.spellcheck = false;

            nameInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    let keyword = e.target.value.trim().toLowerCase();
                    renderEditAuthorUserList(inputWrap, keyword);
                }
            })

            nameInput.addEventListener('click', (e) => {
                if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
            })

            nameInput.addEventListener('input', (e) => {
                if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
                // let keyword = nameInput.value.trim().toLowerCase();
            })

            let searchBtn = document.createElement('div');
            searchBtn.classList.add('search-btn');
            let searchBtnImage = document.createElement('div');
            searchBtnImage.classList.add('image');
            searchBtn.appendChild(searchBtnImage);
            searchBtn.addEventListener('click', (e) => { 
                let keyword = nameInput.value.trim().toLowerCase();
                renderEditAuthorUserList(inputWrap, keyword);
            })

            editAuthorInputWrap.appendChild(nameLabel);
            editAuthorInputWrap.appendChild(separator);
            editAuthorInputWrap.appendChild(nameInput);
            editAuthorInputWrap.appendChild(searchBtn);

            inputWrap.appendChild(editAuthorInputWrap);
            inputWrap.style.display = 'flex';
            nameInput.focus();
            
            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.classList.add('disabled');
            confirmBtn.addEventListener('click', () => {
                if (confirmBtn.classList.contains('disabled')) return;
                // 작성자 변경 선택 결과 숨김
                // let selectedUserItem = userListWrap.querySelector('.selected-user-item-wrap .selected-user-item .user-item');
                let selectedUserItem = document.querySelector('.archive-modal .modal-body .user-list-wrap .user-item.selected');
                let newAuthorId = selectedUserItem?.dataset.userId;
                let newAuthorNm = selectedUserItem?.dataset.userNm;
                toggleParams.newAuthorId = newAuthorId;
                toggleParams.newAuthorNm = newAuthorNm;
                editAuthor(toggleParams);
            })
            btnWrap.appendChild(confirmBtn);

            btnWrap.style.display = 'flex';
        }

        ////// 다운로드
        if (modalType == 'downloadTarget') {
            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                downloadTarget(toggleParams);
                toggleModal(false);
            })
            btnWrap.appendChild(confirmBtn);

            btnWrap.style.display = 'flex';
        }

        ////// 휴지통으로 이동
        if (modalType == 'removeTarget') {
            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                removeTarget(toggleParams);
                toggleModal(false);
            })
            btnWrap.appendChild(confirmBtn);

            btnWrap.style.display = 'flex';
        }

        ////// 삭제
        if (modalType == 'deleteTarget') {
            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                deleteTarget(toggleParams);
                toggleModal(false);
            })
            btnWrap.appendChild(confirmBtn);

            btnWrap.style.display = 'flex';
        }

        ////// 위치 수정 모드
        if (modalType == 'editPosition') {
            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                initEditPositionMode();
                toggleModal(false);
            })
            btnWrap.appendChild(confirmBtn);

            btnWrap.style.display = 'flex';
        }

        ////// 위치 삭제 모드
        if (modalType == 'deletePosition') {
            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                deletePosition();
                toggleModal(false);
            })
            btnWrap.appendChild(confirmBtn);
            btnWrap.appendChild(cancelBtn);

            btnWrap.style.display = 'flex';
        }

        ////// 요약 ai버튼 (임시)
        if (modalType == 'temp_ai') {
            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                toggleModal(false);
            })
            btnWrap.appendChild(confirmBtn);

            btnWrap.style.display = 'flex';
        }

        ////// 개발자 메뉴 - 프로젝트 상태 설정
        if (modalType == 'changeProjectState') {
            projectListWrap.style.display = 'flex';
            createProjectList(projectListWrap, modalType);

            // project-list-wrap 영역 클릭할 때 경고문구 있으면 삭제
            projectListWrap.addEventListener('click', () => {
                if (projectListWrap.querySelector('.warn')) projectListWrap.removeChild(projectListWrap.querySelector('.warn'));
            })

            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                // 기존 경고문구 있으면 삭제
                if (projectListWrap.querySelector('.warn')) projectListWrap.removeChild(projectListWrap.querySelector('.warn'));

                let checkedStatePass = true;
                let checkedStateArr = Object.values(projectListWrap.querySelectorAll('.state-btn.checked'));
                if (checkedStateArr.length == 0) {
                    // 프로젝트 활성화/프로젝트 비활성화 상태를 체크하지 않고 확인 누르면 project-list-wrap에 경고 표시
                    checkedStatePass = false;
                } else {
                    toggleParams.state = checkedStateArr[0].dataset.state === 'true';
                }

                let selectedProjectPass = true;
                let selectedProjectArr = Object.values(projectListWrap.querySelectorAll('.project-item.selected'));
                if (selectedProjectArr.length == 0) {
                    // 프로젝트를 선택하지 않고 확인 누르면 project-list-wrap에 경고 표시
                    selectedProjectPass = false;
                } else {
                    let projectIdList = [];
                    for (let project of selectedProjectArr) {
                        // 이미 활성화/비활성화 설정 조건이 적용된 프로젝트는 패스
                        if (toggleParams.state && !project.querySelector('.sign').classList.contains('inactive')) continue;
                        if (!toggleParams.state && project.querySelector('.sign').classList.contains('inactive')) continue;
                        projectIdList.push(project.dataset.projectId);
                    }
                    toggleParams.projectIdList = JSON.stringify(projectIdList);
                }

                let text;
                if (toggleParams.state) text = `프로젝트 활성화 및 재시작으로 인해 자동으로 로그아웃됩니다.\n다시 로그인 후 사용해주세요.`;
                if (!toggleParams.state) text = `'${vars.project.project_nm}' 프로젝트가 비활성화되어 자동으로 로그아웃됩니다.`;
                toggleParams.text = text;
                toggleParams.type = modalType;

                if (checkedStatePass && selectedProjectPass) {
                    mgmtFunc_changeProjectState(toggleParams);
                    toggleModal(false);
                } else {
                    // project-list-wrap에 경고 표시
                    let projectListWarn = document.createElement('div');
                    projectListWarn.classList.add('warn');
                    projectListWarn.style.top = `${projectListWrap.offsetHeight}px`;
                    projectListWarn.innerHTML = ``;
                    if (!checkedStatePass) projectListWarn.innerHTML += `<span>'프로젝트 활성화/프로젝트 비활성화' 상태를 선택해주세요.</span>`;
                    if (!selectedProjectPass) projectListWarn.innerHTML += `<span>프로젝트를 1개 이상 선택해주세요.</span>`;
                    projectListWrap.appendChild(projectListWarn);
                }
            })

            btnWrap.appendChild(confirmBtn);
            btnWrap.appendChild(cancelBtn);

            btnWrap.style.display = 'flex';
        }

        ////// 개발자 메뉴 - 배너 공지 설정
        if (modalType == 'changeBannerNotice') {
            projectListWrap.style.display = 'flex';
            createProjectList(projectListWrap, modalType);

            // project-list-wrap 영역 클릭할 때 경고문구 있으면 삭제
            projectListWrap.addEventListener('click', () => {
                if (projectListWrap.querySelector('.warn')) projectListWrap.removeChild(projectListWrap.querySelector('.warn'));
            })

            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                // 기존 경고문구 있으면 삭제
                if (projectListWrap.querySelector('.warn')) projectListWrap.removeChild(projectListWrap.querySelector('.warn'));
                if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));

                let checkedStatePass = true;
                let checkedStateArr = Object.values(projectListWrap.querySelectorAll('.state-btn.checked'));
                if (checkedStateArr.length == 0) {
                    // 프로젝트 활성화/프로젝트 비활성화 상태를 체크하지 않고 확인 누르면 project-list-wrap에 경고 표시
                    checkedStatePass = false;
                } else {
                    toggleParams.state = checkedStateArr[0].dataset.state === 'true';
                }

                let selectedProjectPass = true;
                let selectedProjectArr = Object.values(projectListWrap.querySelectorAll('.project-item.selected'));
                if (selectedProjectArr.length == 0) {
                    // 프로젝트를 선택하지 않고 확인 누르면 project-list-wrap에 경고 표시
                    selectedProjectPass = false;
                } else {
                    let projectIdList = [];
                    for (let project of selectedProjectArr) {
                        projectIdList.push(project.dataset.projectId);
                    }
                    toggleParams.projectIdList = JSON.stringify(projectIdList);
                }

                let inputPass = true;
                if (inputWrap.style.display == 'flex') {
                    let noticeText = inputWrap.querySelector('input').value;
                    if (noticeText.replace(/\s/g, '') == '') {
                        inputPass = false;
                    } else {
                        toggleParams.text = noticeText;
                    }
                } else {
                    toggleParams.text = '';
                }

                if (checkedStatePass && selectedProjectPass && inputPass) {
                    mgmtFunc_changeBannerNotice(toggleParams);
                    toggleModal(false);
                } else {
                    // project-list-wrap에 경고 표시
                    let projectListWarn = document.createElement('div');
                    projectListWarn.classList.add('warn');
                    projectListWarn.style.top = `${projectListWrap.offsetHeight}px`;
                    projectListWarn.innerHTML = ``;
                    if (!checkedStatePass) projectListWarn.innerHTML += `<span>'배너 공지 표시/배너 공지 해제' 상태를 선택해주세요.</span>`;
                    if (!selectedProjectPass) projectListWarn.innerHTML += `<span>프로젝트를 1개 이상 선택해주세요.</span>`;
                    // checkedStatePass, selectedProjectPass 둘 중 하나라도 false일 때 projectListWarn 표시
                    if (!checkedStatePass || !selectedProjectPass) projectListWrap.appendChild(projectListWarn);

                    let inputWarn = document.createElement('div');
                    inputWarn.classList.add('warn');
                    inputWarn.style.top = `${inputWrap.offsetHeight}px`;
                    inputWarn.innerHTML = '공지 내용을 입력해주세요.';
                    if (!inputPass) inputWrap.appendChild(inputWarn);
                }
            })

            btnWrap.appendChild(confirmBtn);
            btnWrap.appendChild(cancelBtn);

            btnWrap.style.display = 'flex';
        }

        ////// 개발자 메뉴 - 팝업 공지
        if (modalType == 'popupNotice') {
            let textarea = document.createElement('textarea');
            textarea.classList.add(`${modalType}-textarea`);
            textarea.spellcheck = false;
            inputWrap.appendChild(textarea);
            inputWrap.style.display = 'flex';
            textarea.focus();

            // textarea 클릭할 때 경고문구 있으면 삭제
            textarea.addEventListener('click', () => {
                if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
            })
            
            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                let noticeText = textarea.value;
                if (noticeText.replace(/\s/g, '') == '') {
                    // 기존 경고문구 있으면 삭제
                    if (inputWrap.querySelector('.warn')) {
                        inputWrap.removeChild(inputWrap.querySelector('.warn'));
                    }

                    // 빈 내용으로 확인 누르면 경고 표시
                    let warn = document.createElement('div');
                    warn.classList.add('warn');
                    warn.style.top = `${inputWrap.offsetHeight}px`;
                    warn.innerHTML = '내용을 입력해주세요.';
                    inputWrap.appendChild(warn);
                    return;
                } else {
                    vars.socket.emit('popupNotice', {
                        text: noticeText
                    });
                    toggleModal(false);
                }
            })
            
            btnWrap.appendChild(confirmBtn);
            btnWrap.appendChild(cancelBtn);
            
            btnWrap.style.display = 'flex';
        }

        ////// 개발자 메뉴 - 강제 로그아웃
        if (modalType == 'forcedLogout') {
            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                vars.socket.emit('forcedLogout');
                toggleModal(false);
            })

            btnWrap.appendChild(confirmBtn);
            btnWrap.appendChild(cancelBtn);

            btnWrap.style.display = 'flex';
        }

        if (modalType == 'sendMessage') {
            let { targetClientId, sender } = toggleParams;
            let textarea = document.createElement('textarea');
            textarea.classList.add(`${modalType}-textarea`);
            textarea.spellcheck = false;
            inputWrap.appendChild(textarea);
            inputWrap.style.display = 'flex';
            textarea.focus();

            // textarea 클릭할 때 경고문구 있으면 삭제
            textarea.addEventListener('click', () => {
                if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
            })
            
            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', () => {
                let noticeText = textarea.value;
                if (noticeText.replace(/\s/g, '') == '') {
                    // 기존 경고문구 있으면 삭제
                    if (inputWrap.querySelector('.warn')) {
                        inputWrap.removeChild(inputWrap.querySelector('.warn'));
                    }

                    // 빈 내용으로 확인 누르면 경고 표시
                    let warn = document.createElement('div');
                    warn.classList.add('warn');
                    warn.style.top = `${inputWrap.offsetHeight}px`;
                    warn.innerHTML = '내용을 입력해주세요.';
                    inputWrap.appendChild(warn);
                    return;
                } else {
                    vars.socket.emit('sendMessage', {
                        targetClientId: targetClientId,
                        sender: sender,
                        text: noticeText
                    });
                    toggleModal(false);
                }
            })
            
            btnWrap.appendChild(confirmBtn);
            btnWrap.appendChild(cancelBtn);
            
            btnWrap.style.display = 'flex';
        }

        ////// (개발자) 만료 기간 변경
        if (modalType == 'devRenewExpiryDate') {
            let textInput = document.createElement('input');
            textInput.classList.add(`${modalType}-input`);
            textInput.classList.add('modal-text-input');
            textInput.id = `${modalType}-input`;
            textInput.type = 'text';
            textInput.spellcheck = false;
            textInput.addEventListener('input', (e) => {
                // 숫자만 남기기
                let value = e.target.value.replace(/[^0-9]/g, '');

                // 12자리까지만 허용
                if (value.length > 12) value = value.slice(0, 12);

                e.target.value = value;
            })

            inputWrap.appendChild(textInput);
            inputWrap.style.display = 'flex';
            textInput.focus();

            let confirmBtn = document.createElement('div');
            confirmBtn.textContent = '확인';
            confirmBtn.classList.add('confirm-btn');
            confirmBtn.addEventListener('click', async () => {
                let inputSeconds = (textInput.value == '') ? 1296000 : textInput.value;

                let renewExpiryDateParams = {
                    userInfoString: vars.userInfoString,
                    storageType: vars.storageType,
                    resourcePath: toggleParams.resourcePath,
                    dataId: toggleParams.dataId,
                    depth3DataIdArr: toggleParams.depth3DataIdArr,
                    folderName: toggleParams.folderName,
                    inputSeconds: inputSeconds
                }
                let renewExpiryDateRes = await axios.post(`${vars.path_name}/renewExpiryDate`, { params: renewExpiryDateParams });
                if (renewExpiryDateRes.data.message == 'renewExpiryDate_success') {
                    console.log('renewExpiryDate_success');

                    // renewExpiryDateBtn을 클릭하면 countdownTooltip dom 제거 및 툴팁타이머, 트리아이템타이머 제거
                    removeCountdownTooltip();
                    clearInterval(document.querySelector(`.tree-item-wrap[data-resource-path="${renewExpiryDateParams.resourcePath}"]`).countdownTimer);
                    document.querySelector(`.tree-item-wrap[data-resource-path="${renewExpiryDateParams.resourcePath}"]`).countdownTimer = null;

                    let toggleParams = {
                        text: `'${renewExpiryDateParams.folderName}' 폴더의 만료 기간이 ${inputSeconds}초로 변경되었습니다.`,
                        type: 'alertModal'
                    };
                    toggleModal(true, toggleParams);
                }
            })
            btnWrap.appendChild(confirmBtn);

            btnWrap.style.display = 'flex';
        }
    }
}

export function toggleDevMenuModal(state) {
    let devMenuModal = document.querySelector('.dev-menu-modal');
    if (!devMenuModal) return;

    if (state == false) {
        devMenuModal.style.display = 'none';
    }

    if (state == true) {
        devMenuModal.style.display = 'flex';
        getUsers();

        let toggleWrap = devMenuModal.querySelector('.modal-body .left .toggle-wrap');
        let btnWrap = devMenuModal.querySelector('.modal-body .left .btn-wrap');

        toggleWrap.innerHTML = '';
        btnWrap.innerHTML = '';

        //// 토글

        // 프로젝트 상태 설정 토글 버튼
        let projectStateToggle = document.createElement('div');
        projectStateToggle.classList.add('btn');
        projectStateToggle.classList.add('project-state-toggle');
        
        // 프로젝트 상태 설정 토글 버튼 내부 텍스트 및 상태
        let projectStateToggleText = document.createElement('div');
        projectStateToggleText.classList.add('text');
        projectStateToggleText.innerHTML = '프로젝트 상태 설정';
        if (vars.project.is_active) {
            projectStateToggle.classList.remove('inactive');
        } else {
            projectStateToggle.classList.add('inactive');
        }

        // 프로젝트 상태 설정 토글 버튼 내부 스위치
        let projectStateToggleSwitch = document.createElement('div');
        projectStateToggleSwitch.classList.add('project-state-toggle-switch');
        projectStateToggleSwitch.classList.add('toggle-switch');
        
        // 프로젝트 상태 설정 토글 버튼 내부 스위치 트랙
        let projectStateToggleSwitchTrack = document.createElement('div');
        projectStateToggleSwitchTrack.classList.add('project-state-toggle-switch-track');
        projectStateToggleSwitchTrack.classList.add('toggle-switch-track');
        
        // 프로젝트 상태 설정 토글 버튼 내부 스위치 썸
        let projectStateToggleSwitchThumb = document.createElement('div');
        projectStateToggleSwitchThumb.classList.add('toggle-switch-thumb');
        
        // 프로젝트 상태 설정 토글 버튼 클릭 이벤트 추가
        projectStateToggle.addEventListener('click', () => {
            let toggleParams = {
                title: '프로젝트 상태 설정',
                text: `<span>'프로젝트 활성화/프로젝트 비활성화' 상태를 선택해주세요.</span>`,
            };
            toggleParams.type = 'changeProjectState';
            toggleModal(true, toggleParams);
        });
        
        projectStateToggleSwitchTrack.appendChild(projectStateToggleSwitchThumb);

        projectStateToggleSwitch.appendChild(projectStateToggleSwitchTrack);

        projectStateToggle.appendChild(projectStateToggleText);
        projectStateToggle.appendChild(projectStateToggleSwitch);
        
        // 배너 공지 설정 토글 버튼
        let bannerNoticeToggle = document.createElement('div');
        bannerNoticeToggle.classList.add('btn');
        bannerNoticeToggle.classList.add('banner-notice-toggle');

        // 배너 공지 설정 토글 버튼 내부 텍스트 및 상태
        let bannerNoticeToggleText = document.createElement('div');
        bannerNoticeToggleText.classList.add('text');
        bannerNoticeToggleText.innerHTML = '배너 공지 설정';
        if (vars.project.banner_notice == '') {
            bannerNoticeToggle.classList.add('inactive');
        } else {
            bannerNoticeToggle.classList.remove('inactive');
        }

        // 배너 공지 설정 토글 버튼 내부 스위치
        let bannerNoticeToggleSwitch = document.createElement('div');
        bannerNoticeToggleSwitch.classList.add('banner-notice-toggle-switch');
        bannerNoticeToggleSwitch.classList.add('toggle-switch');

        // 배너 공지 설정 토글 버튼 내부 스위치 트랙
        let bannerNoticeToggleSwitchTrack = document.createElement('div');
        bannerNoticeToggleSwitchTrack.classList.add('banner-notice-toggle-switch-track');
        bannerNoticeToggleSwitchTrack.classList.add('toggle-switch-track');
        
        // 배너 공지 설정 토글 버튼 내부 스위치 썸
        let bannerNoticeToggleSwitchThumb = document.createElement('div');
        bannerNoticeToggleSwitchThumb.classList.add('toggle-switch-thumb');

        // 배너 공지 설정 토글 버튼 클릭 이벤트 추가
        bannerNoticeToggle.addEventListener('click', () => {
            let toggleParams = {
                title: '배너 공지 설정',
                text: `<span>'배너 공지 표시/배너 공지 해제' 상태를 선택해주세요.</span>`,
            };
            // useInput: true
            toggleParams.type = 'changeBannerNotice';
            toggleModal(true, toggleParams);
        });
        
        bannerNoticeToggleSwitchTrack.appendChild(bannerNoticeToggleSwitchThumb);

        bannerNoticeToggleSwitch.appendChild(bannerNoticeToggleSwitchTrack);

        bannerNoticeToggle.appendChild(bannerNoticeToggleText);
        bannerNoticeToggle.appendChild(bannerNoticeToggleSwitch);

        //// 버튼

        // Queue 대시보드 버튼
        let queueBtn = document.createElement('div');
        queueBtn.classList.add('btn');
        queueBtn.classList.add('queue');
        queueBtn.innerHTML = 'Queue 대시보드';
        queueBtn.addEventListener('click', async () => {
            window.open(`/admin/queues/`, '_blank');
        });

        // 사용자 통계 버튼 (개발예정)
        let userStatsBtn = document.createElement('div');
        userStatsBtn.classList.add('btn');
        userStatsBtn.classList.add('user-stats');
        userStatsBtn.innerHTML = '사용자 통계 (개발예정)';
        userStatsBtn.addEventListener('click', async () => {
            console.log('사용자 통계 (개발예정)');
        });

        // 데이터 통계 버튼 (개발예정)
        let dataStatsBtn = document.createElement('div');
        dataStatsBtn.classList.add('btn');
        dataStatsBtn.classList.add('data-stats');
        dataStatsBtn.innerHTML = '데이터 통계 (개발예정)';
        dataStatsBtn.addEventListener('click', async () => {
            console.log('데이터 통계 (개발예정)');
        });

        // 팝업 공지 버튼
        let popupNoticeBtn = document.createElement('div');
        popupNoticeBtn.classList.add('btn');
        popupNoticeBtn.classList.add('popup-notice');
        popupNoticeBtn.innerHTML = '팝업 공지';
        popupNoticeBtn.addEventListener('click', async () => {
            let toggleParams = {
                title: '팝업 공지',
                text: `
                    <span>공지할 내용을 입력한 후 확인을 눌러주세요.</span>
                    <span class="warn">확인을 누르면 접속중인 모든 사용자에게 팝업 공지가 발송됩니다. 주의해주세요.</span>
                `,
                type: 'popupNotice',
            };
            toggleModal(true, toggleParams);
        });

        // 강제 로그아웃 버튼
        let forcedLogoutBtn = document.createElement('div');
        forcedLogoutBtn.classList.add('btn');
        forcedLogoutBtn.classList.add('forcedLogout');
        forcedLogoutBtn.innerHTML = '강제 로그아웃';
        forcedLogoutBtn.addEventListener('click', async () => {
            let toggleParams = {
                title: '강제 로그아웃',
                // text: `
                //     <span>강제 로그아웃을 진행 하시겠습니까?</span>
                //     <span class="warn">
                //         확인을 누르면 모든 사용자가 로그아웃됩니다. 주의해주세요.<br>
                //         (개발자는 alert만 표시되고 로그아웃은 진행되지 않습니다.)
                //     </span>
                // `,
                text: `
                    <span>강제 로그아웃을 진행 하시겠습니까?</span>
                    <span class="warn">확인을 누르면 모든 사용자가 로그아웃됩니다. 주의해주세요.</span>
                    <span class="warn">(개발자는 alert만 표시되고 로그아웃은 진행되지 않습니다.)</span>
                `,
                type: 'forcedLogout',
            };
            toggleModal(true, toggleParams);
        });

        // 오브젝트 스토리지 정리 버튼 (개발예정)
        let cleanUpBtn = document.createElement('div');
        cleanUpBtn.classList.add('btn');
        cleanUpBtn.classList.add('clean-up');
        cleanUpBtn.innerHTML = '오브젝트 스토리지 정리 (개발예정)';
        cleanUpBtn.addEventListener('click', async () => {
            console.log('오브젝트 스토리지 정리 (개발예정)');
        });

        // 강제 동시접속자 로그 기록
        let insertLogBtn = document.createElement('div');
        insertLogBtn.classList.add('btn');
        insertLogBtn.classList.add('insert-log');
        insertLogBtn.innerHTML = '최대 동시접속자 로그 기록';
        insertLogBtn.addEventListener('click', async () => {
            vars.socket.emit('insertLog', {
                text: 'insertLog',
            });
            console.log('동시접속자수 로그 기록');
        });


        //// toggle-wrap, btn-wrap에 추가
        toggleWrap.appendChild(projectStateToggle);
        toggleWrap.appendChild(bannerNoticeToggle);

        btnWrap.appendChild(queueBtn);
        btnWrap.appendChild(userStatsBtn);
        btnWrap.appendChild(dataStatsBtn);
        btnWrap.appendChild(popupNoticeBtn);
        btnWrap.appendChild(forcedLogoutBtn);
        btnWrap.appendChild(cleanUpBtn);
        btnWrap.appendChild(insertLogBtn);
    }
}

function createProjectList(projectListWrap, modalType) {
    let textWrap = document.querySelector('.archive-modal .modal-body .text-wrap');
    let inputWrap = document.querySelector('.archive-modal .modal-body .input-wrap');

    let topWrap = document.createElement('div');
    topWrap.classList.add('top-wrap');
    topWrap.classList.toggle(modalType);

    let topBtnWrap = document.createElement('div');
    topBtnWrap.classList.add('btn-wrap');

    let stateTrue = document.createElement('div');
    stateTrue.classList.add('state-true');
    stateTrue.classList.add('state-btn');
    stateTrue.classList.add('btn');
    stateTrue.dataset.state = true;
    
    let stateTrueRadio = document.createElement('input');
    stateTrueRadio.classList.add('radio');
    stateTrueRadio.type = 'radio';
    stateTrueRadio.name = 'state';

    let stateTrueText = document.createElement('div');
    stateTrueText.classList.add('text');
    if (modalType == 'changeProjectState') stateTrueText.innerHTML = '프로젝트 활성화';
    if (modalType == 'changeBannerNotice') stateTrueText.innerHTML = '배너 공지 표시';

    stateTrue.appendChild(stateTrueRadio);
    stateTrue.appendChild(stateTrueText);

    stateTrue.addEventListener('click', function(e) {
        projectListWrap.querySelectorAll('.top-wrap .btn').forEach(btn => {
            btn.classList.remove('checked');
        })
        e.target.classList.add('checked');
        e.target.querySelector('.radio').checked = true;

        if (modalType == 'changeProjectState') {
            textWrap.innerHTML = `<span>'프로젝트 활성화/프로젝트 비활성화' 상태와 프로젝트를 선택한 후 확인을 눌러주세요.</span>`;
        }

        if (modalType == 'changeBannerNotice') {
            textWrap.innerHTML = `
                <span>'배너 공지 표시/배너 공지 해제' 상태와 프로젝트를 선택하고, 공지 내용을 입력한 후 확인을 눌러주세요.</span>
                <span class="warn">배너 공지를 표시 상태로 설정하면 해당 프로젝트에서 배너 공지가 표시됩니다. 주의해주세요.</span>
            `;

            let inputTitle = document.createElement('div');
            inputTitle.classList.add('input-title');
            inputTitle.innerHTML = '공지 내용';

            let input = document.createElement('input');
            input.classList.add(`${modalType}-input`);
            input.classList.add('modal-text-input');
            input.id = `${modalType}-input`;
            input.type = 'text';
            input.spellcheck = false;

            let projectListWrapWidth = projectListWrap.offsetWidth;
            input.style.width = `${projectListWrapWidth}px`;

            inputWrap.innerHTML = '';
            inputWrap.appendChild(inputTitle);
            inputWrap.appendChild(input);
            inputWrap.style.display = 'flex';
            input.focus();

            // text input 클릭할 때 경고문구 있으면 삭제
            input.addEventListener('click', () => {
                if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
            })
            
            // text input 타이핑 할 때 경고문구 있으면 삭제
            input.addEventListener('input', () => {
                if (inputWrap.querySelector('.warn')) inputWrap.removeChild(inputWrap.querySelector('.warn'));
            })
        }
    })
    
    let stateFalse = document.createElement('div');
    stateFalse.classList.add('state-false');
    stateFalse.classList.add('state-btn');
    stateFalse.classList.add('btn');
    stateFalse.dataset.state = false;
    
    let stateFalseRadio = document.createElement('input');
    stateFalseRadio.classList.add('radio');
    stateFalseRadio.type = 'radio';
    stateFalseRadio.name = 'state';

    let stateFalseText = document.createElement('div');
    stateFalseText.classList.add('text');
    if (modalType == 'changeProjectState') stateFalseText.innerHTML = '프로젝트 비활성화';
    if (modalType == 'changeBannerNotice') stateFalseText.innerHTML = '배너 공지 해제';

    stateFalse.appendChild(stateFalseRadio);
    stateFalse.appendChild(stateFalseText);

    stateFalse.addEventListener('click', function(e) {
        projectListWrap.querySelectorAll('.top-wrap .btn').forEach(btn => {
            btn.classList.remove('checked');
        })
        e.target.classList.add('checked');
        e.target.querySelector('.radio').checked = true;

        if (modalType == 'changeProjectState') {
            textWrap.innerHTML = `
                <span>'프로젝트 활성화/프로젝트 비활성화' 상태와 프로젝트를 선택한 후 확인을 눌러주세요.</span>
                <span class="warn">프로젝트를 비활성화 상태로 설정하면 해당 프로젝트의 모든 사용자가 로그아웃됩니다. 주의해주세요.</span>
                <span class="warn">(개발자는 alert만 표시되고 로그아웃은 진행되지 않습니다.)</span>
            `
        }

        if (modalType == 'changeBannerNotice') {
            textWrap.innerHTML = `<span>'배너 공지 표시/배너 공지 해제' 상태와 프로젝트를 선택한 후 확인을 눌러주세요.</span>`;

            inputWrap.style.display = 'none';
        }
    })

    let info = document.createElement('div');
    info.classList.add('info');

    let activeText, inactiveText;
    if (modalType == 'changeProjectState') activeText = '프로젝트 활성화 상태', inactiveText = '프로젝트 비활성화 상태';
    if (modalType == 'changeBannerNotice') activeText = '배너 공지 표시 상태', inactiveText = '배너 공지 해제 상태';
    info.innerHTML = `
        <div class="legend">
            <div class="legend-item">
                <div class="sign"></div>
                <div class="text">${activeText}</div>
            </div>
            <div class="legend-item">
                <div class="sign inactive"></div>
                <div class="text">${inactiveText}</div>
            </div>
        </div>
    `;
    info.innerHTML += '<div class="notice-text">※ 현재 접속중인 프로젝트는 <span>파란색</span>으로 표시됩니다.</div>';

    topBtnWrap.appendChild(stateTrue);
    topBtnWrap.appendChild(stateFalse);

    topWrap.appendChild(topBtnWrap);
    topWrap.appendChild(info);

    projectListWrap.appendChild(topWrap);
    


    let bottomWrap = document.createElement('div');
    bottomWrap.classList.add('bottom-wrap');
    bottomWrap.classList.toggle(modalType);

    let bottomBtnWrap = document.createElement('div');
    bottomBtnWrap.classList.add('btn-wrap');

    let selectAll = document.createElement('div');
    selectAll.classList.add('select-all');
    selectAll.classList.add('btn');
    selectAll.innerHTML = '전체 선택';
    selectAll.addEventListener('click', function() {
        projectListWrap.querySelectorAll('.project-item').forEach(projectItem => {
            projectItem.classList.add('selected');
        })
    })
    let clearAll = document.createElement('div');
    clearAll.classList.add('clear-all');
    clearAll.classList.add('btn');
    clearAll.innerHTML = '전체 해제';
    clearAll.addEventListener('click', function() {
        projectListWrap.querySelectorAll('.project-item').forEach(projectItem => {
            projectItem.classList.remove('selected');
        })
    })

    bottomBtnWrap.appendChild(selectAll);
    bottomBtnWrap.appendChild(clearAll);

    let categoryArr = Object.values(vars.allProject).map(project => 
        project.category
    );
    categoryArr = [...new Set(categoryArr)];

    // categoryArr.length가 1보다 클 때 (onpremise) -> categoryArr 순서 재배치
    if (categoryArr.length > 1) {
        if (vars.serviceName == 'PM_ver4_LOCAL' || vars.serviceName == 'PM_ver4_ONPREMISE') {
            categoryArr = ['task', 'gpd', 'tdc', 'overseas', 'bimproject'];
        }

        if (vars.serviceName == 'PM_ver4_CLOUD_OVERSEAS') {
            categoryArr = ['overseas', 'bimproject', 'jangheon' , 'jangheonindustry'];
        }
    }

    let categoryKor = {
        'task': '과업',
        'gpd': '총괄기획실',
        'tdc': '기술개발센터',
        'overseas': '해외사업',
        'bimproject': 'BIM지원사업',
        'jangheon': '장헌',
        'jangheonindustry' : '장헌산업'
    };

    let categoryWrap = document.createElement('div');
    categoryWrap.classList.add('category-wrap');

    for (let category of categoryArr) {
        let categoryItem = document.createElement('div');
        categoryItem.classList.add('category-item');
        categoryItem.classList.add(category);

        let projectItemWrap = document.createElement('div');
        projectItemWrap.classList.add('project-item-wrap');
        projectItemWrap.classList.add('btn-wrap');
        projectItemWrap.classList.add('scrollbar');

        // categoryArr.length가 1보다 클 때 (onpremise) -> categoty-item에 타이틀 추가
        if (categoryArr.length > 1) {
            let title = document.createElement('div');
            title.classList.add('title');
            title.innerHTML = `${category.toUpperCase()} - ${categoryKor[category]}`;
            
            categoryItem.appendChild(title);
        }

        categoryItem.appendChild(projectItemWrap);

        categoryWrap.appendChild(categoryItem);
    }

    bottomWrap.appendChild(bottomBtnWrap);
    bottomWrap.appendChild(categoryWrap);
    projectListWrap.appendChild(bottomWrap);

    // let keep = [];
    for (let project of Object.values(vars.allProject)) {
        let projectItem = document.createElement('div');
        projectItem.classList.add('project-item');
        projectItem.classList.add('btn');
        if (project.project_id == vars.project.project_id) {
            projectItem.classList.add('current-project');
        }
        projectItem.dataset.projectId = project.project_id;
        
        let text = document.createElement('div');
        text.classList.add('text');
        text.innerHTML = project.project_nm;

        let sign = document.createElement('div');
        sign.classList.add('sign');

        if (modalType == 'changeProjectState' && !project.is_active
            || modalType == 'changeBannerNotice' && project.banner_notice == '') sign.classList.add('inactive');

        projectItem.appendChild(sign);
        projectItem.appendChild(text);
        
        // // categoryArr.length가 1보다 클 때 (onpremise) -> 카테고리가 overseas인 project-item들은 keep 배열에 보관
        // if (categoryArr.length > 1 && project.category == 'overseas') {
        //     keep.push(projectItem);
        // } else {
        //     projectListWrap.querySelector(`.category-item.${project.category} .project-item-wrap`).appendChild(projectItem);
        // }

        projectListWrap.querySelector(`.category-item.${project.category} .project-item-wrap`).appendChild(projectItem);

        projectItem.addEventListener('click', function(e) {
            e.target.classList.toggle('selected');
            // if (e.target.classList.contains('selected') && inputWrap.style.display == 'flex') {
            //     inputWrap.querySelector('input').value = project.banner_notice;
            // }
        })
    }

    // 카테고리 아이템에 포함된 프로젝트 개수가 0개인 경우 카테고리 아이템 삭제
    document.querySelectorAll('.category-wrap .category-item').forEach(item => {
        if (item.querySelector('.project-item-wrap').children.length == 0) item.remove();
    })

    // // categoryArr.length가 1보다 클 때 (onpremise) -> keep 배열에 보관해둔 project-item들을 국내사업 카테고리에 추가
    // if (categoryArr.length > 1) {
    //     keep.forEach(projectItem =>{
    //         projectListWrap.querySelector(`.domestic .project-item-wrap`).appendChild(projectItem);
    //     })
    // }
}