초기 PM 소스 전체 업로드

views/main/jsm/archive/ai_prompt/prompt.json

@@ -0,0 +1,11 @@
+{
+  "title": "DocumentSummary",
+  "type": "object",
+  "properties": {
+    "파일제목": { "type": "string" },
+    "파일내용요약": { "type": "string" }
+  },
+  "required": [
+    "파일제목", "파일내용요약"
+  ]
+}

views/main/jsm/archive/ai_prompt/prompt.txt

@@ -0,0 +1,7 @@
+오타나 줄바꿈 오류가 있을 수 있으니 의미를 유추하여 정확한 정보를 추출해주세요.
+정확성이 매우 중요하므로 반드시 파일에 포함된 텍스트만 사용하여 작성해주세요. 추론하거나 임의로 보충하지 마세요.
+불필요한 설명 문구(예: "다음은 문서에 작성된 내용입니다", "문서 기반으로 요약해 드립니다" 등)와 특수문자(*등)는 포함하지 마세요.
+한 문장이 끝나면 다음줄에서 문장을 시작해주세요. 가독성 좋게 표출해주세요.
+모든 문서는 꼭 개조식으로 정리해서 표출해주세요.
+
+1. 파일 내용 요약: 파일 내용을 요약해주세요. 반드시 한글로 작성합니다.

views/main/jsm/archive/ai_prompt/rpsm_prompt.txt

@@ -0,0 +1,5 @@
+project_name 값을 실제 프로젝트명으로 사용하고, "project_name"이라는 단어를 그대로 쓰지 마.
+project_name 값이 null 이면 'err: project name is null' 이라는 단어가 출력되게 해줘 
+project_name에 대한 온라인 반응을 최신 보도와 공식 문서 중심으로 정리해줘. 추측은 금지야 . 
+아래 예제 형식처럼 글만 나오게 해줘. '결과입니다' 같은 불필요한 말은 하지마.
+글 정리는 개조식으로 진행해줘.

views/main/jsm/archive/common.js

@@ -0,0 +1,503 @@
+import { vars } from './variable.js';
+
+// 파일 사이즈 변환
+export function formatBytes(bytes) {
+    const abs = Math.abs(bytes);
+    let size, unit;
+    
+    if (abs < 1024) {
+        size = addCommasToNumber(bytes);
+        unit = ' Bytes';
+    } else if (abs < 1048576) {
+        size = addCommasToNumber((bytes / 1024).toFixed(2));
+        unit = ' KB';
+    } else if (abs < 1073741824) {
+        size = addCommasToNumber((bytes / 1048576).toFixed(2));
+        unit = ' MB';
+    } else if (abs < 1099511627776) {
+        size = addCommasToNumber((bytes / 1073741824).toFixed(2));
+        unit = ' GB';
+    } else {
+        size = addCommasToNumber((bytes / 1099511627776).toFixed(2));
+        unit = ' TB';
+    }
+    
+    if (size != 0) {
+        let decimalPointNum = size.split('.')[1];
+        if (decimalPointNum) {
+            // 소수점 아래 숫자가 00인 경우
+            if (decimalPointNum == '00') size = size.split('.')[0];
+            // 소수점 아래 두번째 숫자가 0인 경우
+            else if (decimalPointNum[1] == '0') size = `${size.split('.')[0]}.${decimalPointNum[0]}`;
+        }
+    }
+    
+    return size + unit;
+}
+
+// 1000 단위 콤마 추가
+// export function addCommasToNumber(num) {
+//     return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+// }
+
+export function addCommasToNumber(num) {
+    const isNegative = Number(num) < 0;
+    const parts = Math.abs(Number(num)).toString().split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+    const formatted = parts.join('.');
+    return isNegative ? `-${formatted}` : formatted;
+}
+
+export function getDepth(path) {
+    path = path.startsWith('/') ? path.slice(1) : path;
+    let pathSplit = path.split('/');
+    let result = pathSplit.length;
+    return result;
+}
+
+export function updatePartialPath(sourcePath, targetPath) {
+    let sourcePathSplit = sourcePath.split('/');
+    let targetPathSplit = targetPath.split('/');
+    for (let i = 0; i < sourcePathSplit.length; i++) {
+        targetPathSplit[i] = sourcePathSplit[i];
+    }
+
+    return targetPathSplit.join('/');
+}
+
+// 파일명, 확장자 분리
+export function splitBaseAndExt(target, isLowerExt) {
+    let targetSplit = target.split('.');
+    let ext = targetSplit.pop();
+    if (isLowerExt) ext = ext.toLowerCase();
+    let base = targetSplit.join('.');
+    return { ext: ext, base: base }
+}
+
+// 선택한 대상이 포함된 상위 폴더 경로 추출
+export function splitTopPathAndTargetName(resourcePath) {
+    let resourcePathSplit = resourcePath.split('/');
+    let targetName = resourcePathSplit.pop();
+    let topPath = resourcePathSplit.join('/');
+    if (!topPath || topPath == '' || topPath == null) topPath = '/';
+    return { targetName: targetName, topPath: topPath };
+}
+
+export function extractPathByLength(target, count) {
+    if (!Array.isArray(target)) {
+        target = target.split('/');
+    }
+    const parts = target.filter(Boolean).slice(0, count);
+    return '/' + parts.join('/');
+}
+
+// 특수문자를 체크하는 정규표현식
+export function hasSpecialChar(target) {
+    // const pattern = /[\/\\;:?`'"<>|#%&*]/;
+    const pattern = /[\/\\:*?'"`<>|#]/;
+    return pattern.test(target);
+}
+
+// 동일한 폴더명/파일명 존재 여부 확인
+export function existEqualName(type, comparisonPath, targetName) {
+    let result;
+    if (comparisonPath != '' && comparisonPath != undefined) {
+        result = getTypeDataFromFolderData(type, comparisonPath)[targetName];
+    } else {
+        // result = vars.currentTreeObject[type][targetName];
+        result = vars.allTreeObject[type][targetName];
+    }
+
+    // 헤더 버튼 이름 변경 시 페이지 버튼과 이름 같은 경우 변경 불가
+    let pageBtnNameArr = ['과업개요', '공문'];
+    if (comparisonPath == '/' && result == undefined) result = pageBtnNameArr.includes(targetName);
+
+    return result;
+
+    // folderData에서 타입(폴더/파일)과 경로를 사용해서 해당 경로의 타입별 데이터 가져오기
+    function getTypeDataFromFolderData(type, path) {
+        let data;
+        if (type == 'folder') data = vars.allTreeObject[type];
+        if (type == 'file') data = vars.currentTreeObject[type];
+
+        let pathSplit = path.split('/');
+        pathSplit.shift();
+        // if (pathSplit[0] == '') return data;
+        
+        for (let i = 0; i < pathSplit.length; i++) {
+            if (data[pathSplit[i]]) {
+                if (type == 'folder') data = data[pathSplit[i]]['child'][type];
+                if (type == 'file') data = data;
+            } else {
+                data = data;
+            }
+        }
+
+        return data;
+    }
+}
+
+export function getNextFileName(nameArr, newName) {
+    const dotIdx = newName.lastIndexOf('.');
+    const base = dotIdx !== -1 ? newName.slice(0, dotIdx) : newName;
+    const ext = dotIdx !== -1 ? newName.slice(dotIdx) : '';
+    const set = new Set(nameArr);
+
+    let maxNum = 0;
+    const regex = new RegExp(`^${escapeRegExp(base)}(?: \\((\\d+)\\))?${escapeRegExp(ext)}$`);
+    for (const name of set) {
+        const match = name.match(regex);
+        if (match) {
+            const num = match[1] ? parseInt(match[1], 10) : 0;
+            if (num > maxNum) maxNum = num;
+        }
+    }
+
+    if (maxNum === 0 && !set.has(newName)) return newName;
+    return `${base} (${maxNum + 1})${ext}`;
+
+    function escapeRegExp(str) {
+        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+}
+
+export function getDataFromTreeObject(path, type, data) {
+    let parentData;
+    if (!data) data = vars.allTreeObject;
+    let pathSplit = path.split('/');
+    pathSplit.shift();
+    
+    for (let i = 0; i < pathSplit.length; i++) {
+        if (i != pathSplit.length - 1) {
+            if (data['folder'][pathSplit[i]]) {
+                data = data['folder'][pathSplit[i]]['child'];
+            }
+        } else {
+            if (type == 'folder') {
+                parentData = data;
+                data = data['folder'][pathSplit[i]];
+            }
+            if (type == 'file') {
+                if (data['file'][pathSplit[i]]) {
+                    parentData = data;
+                    data = data['file'][pathSplit[i]];
+                }
+            }
+        }
+    }
+    return { parentData: parentData, data: data };
+}
+
+export function getCurrentTreeObject(path) {
+    let data = vars.allTreeObject;
+    let pathSplit = path.split('/');
+    pathSplit.shift();
+    for (let i = 0; i < pathSplit.length; i++) {
+        if (i != pathSplit.length - 1) {
+            if (data['folder'][pathSplit[i]]) {
+                data = data['folder'][pathSplit[i]]['child'];
+            }
+        } else {
+            if (data['folder'][pathSplit[i]]) data = data['folder'][pathSplit[i]]['child'];
+        }
+    }
+    return data;
+}
+
+export function targetFocus(target, behavior = 'smooth') {
+    target.scrollIntoView({
+        behavior: behavior, // 부드럽게
+        block: 'center', // 화면 중앙에 위치하도록 (start, end, nearest 도 가능)
+        inline: 'center'
+    });
+    target.focus();
+}
+
+export function pxToRem(px) {
+    let remPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return px / remPx;
+}
+
+export function buildResourcePathFromSegments(rows) {
+    if (!Array.isArray(rows)) rows = [rows];
+    let result = [];
+    rows.map(row => {
+        let resourcePath = '/';
+        let maxDepth = 8;
+        let arr = [];
+        for (let i = 0; i < maxDepth; i++) {
+            let num = i+1;
+            let segment = row[`path${num}`];
+            if (segment) arr.push(segment);
+        }
+        if (arr.length != 0) resourcePath += arr.join('/');
+        result.push(resourcePath);
+    })
+
+    return result;
+}
+
+export function headerBtnForceClick(headerBtn) {
+    headerBtn.click();
+}
+
+export function treeBtnForceClick(treeBtn) {
+    treeBtn.click();
+}
+
+export function closeInitProgress() {
+    document.querySelector('.init-progress').style.display = 'none';
+}
+
+export async function getMyDownloadList(){
+    let res = await axios.get(`${vars.path_name}/getMyDownloadList`, {params : {user_id : JSON.parse(vars.userInfoString).user_id}});
+    // console.log(res.data);
+    if(res.data.length > 0){
+        if(document.querySelector('.download-btn .download-reddot')){
+            document.querySelector('.download-btn .download-reddot').style.display = 'block';
+        }
+    }else{
+        if(document.querySelector('.download-btn .download-reddot')){
+            document.querySelector('.download-btn .download-reddot').style.display = 'none';
+        }
+    }
+
+    let ul = document.querySelector('.download-modal__body_list');
+    ul.innerHTML = '';
+    for(let i = 0; i < res.data.length; i++){
+        let li = document.createElement('li');
+        li.classList.add('download-modal__body_list_item');
+
+        let expireDate = new Date(res.data[i].expire_date);
+        let now = new Date();
+        let yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+
+        let state = (expireDate < yesterday)? `<img class="--button__xsmall-icon --disable" src="/main/img/archive/icon__download--111.svg" alt="/" />`: (!res.data[i].made)?`준비중`:`<img class="--button__xsmall-icon downloadFolder__btn__icon" src="/main/img/archive/icon__download--111.svg" alt="/" />`
+        let expire =(state == '준비중')?state :(expireDate < yesterday)? '만료됨': formatDateTime(expireDate);
+
+        li.innerHTML = `
+            <img class="--icon" src="/main/img/header/header-folder-icon.svg" alt="/" />
+            <div class="download-modal__body_list_item_text">
+            <h4 class="download-modal__body_list_item_text_title">
+                ${res.data[i].name}
+            </h4>
+            <p class="download-modal__body_list_item_text_subtitle">
+                ${res.data[i].project_nm}${res.data[i].path}
+            </p>
+            </div>
+            <h6 class="download-modal__body_list_item_time">
+            ${expire}
+            </h6>
+            <div class="download-modal__body_list_item_status">${state}</div>
+        `;
+
+        ul.appendChild(li);
+
+        li.querySelector('.downloadFolder__btn__icon')?.addEventListener('click', () => {
+            window.location.href = res.data[i].url;
+        })
+    }
+
+    function formatDateTime(date) {
+        const padZero = (num) => String(num).padStart(2, '0');
+
+        const year = date.getFullYear();
+        const month = padZero(date.getMonth() + 1); // getMonth()는 0부터 시작하므로 +1
+        const day = padZero(date.getDate());
+        const hours = padZero(date.getHours());
+        const minutes = padZero(date.getMinutes());
+
+        return `${year}-${month}-${day} ${hours}:${minutes}`;
+    }
+}
+
+export async function openNewWindowViewer() {
+    let isRecycleBinModal = document.querySelector('.recycle-bin-modal').style.display == 'flex';
+    let lastListItem = (isRecycleBinModal) ? vars.lastListItem_bin : vars.lastListItem;
+    
+    let resourcePath = lastListItem.dataset.resourcePath;
+    let dataId = lastListItem.dataset.id;
+    let isLowerExt = true, ext = splitBaseAndExt(resourcePath, isLowerExt).ext;
+
+    let thumbnail_key = getDataFromTreeObject(resourcePath, 'file', vars.currentTreeObject).data?.thumbnailKey;
+
+    //Presigned URL
+    let PresignedUrl = undefined;
+    let getDataInfoParams = {
+        userInfoString: vars.userInfoString,
+        storageType: vars.storageType,
+        dataIdArr: [dataId],
+        isRemoved: isRecycleBinModal,
+        debug: "'우측 미리보기 새 창으로 열기 버튼 클릭 이벤트'에서 실행"
+    }
+    let getDataInfoRes = await axios.post(`${vars.path_name}/getDataInfo`, { params: getDataInfoParams } );
+    if (getDataInfoRes.data.message == 'getDataInfo_success') {
+        let objectKey = getDataInfoRes.data.result.popup_key;
+        if(objectKey == undefined || objectKey == `` || objectKey == null){
+            return;
+        }
+        let generateDownloadUrlParams = {
+            objectKey: objectKey,
+            resourcePath: resourcePath
+        }
+        let generateDownloadUrlRes = await axios.post(`${vars.path_name}/generateDownloadUrl`, generateDownloadUrlParams);
+        if (generateDownloadUrlRes.data.message == 'generateDownloadUrl_success') {
+            PresignedUrl = generateDownloadUrlRes.data.url;
+        }
+    }
+    //Presigned URL end
+
+    
+    thumbnail_key = encodeURIComponent(thumbnail_key);
+    resourcePath = encodeURIComponent(resourcePath);
+    let fullPath = encodeURIComponent(PresignedUrl);
+
+    // 뷰어 기본 width값은 현재 화면 width값의 절반
+    let denominator = 2;
+    // url 뷰어는 현재 화면 width값과 동일하게 설정
+    if (ext == 'url') denominator = 1;
+
+    let width = screen.width / denominator;
+    let height = screen.height;
+    let left = screen.width * 2 + 10;
+
+    let open_ext = `pdf`;
+    switch(ext){
+        case 'pdf' : 
+        case 'hwp' : 
+        case 'hwpx' : 
+        case 'xls' : 
+        case 'xlsm' : 
+        case 'ppt' : 
+        case 'pptx' : 
+        case 'doc' : 
+        case 'docx' : 
+        case 'dwg' : 
+        case 'dxf' : 
+        case 'grm' : 
+            open_ext = 'pdf';
+            break
+        case 'gsim' : 
+            open_ext = 'gsim';
+            break
+        case 'ifc' : 
+            open_ext = 'ifc';
+            break
+        case 'png' : 
+        case 'jpg' : 
+        case 'jpeg' : 
+        case 'webp' : 
+        case 'gif' : 
+            open_ext = 'png';
+            break
+        case 'mp4' : 
+        case 'mov' : 
+        case 'webm' : 
+            open_ext = 'mp4';
+            break
+        case 'log' : 
+        case 'txt' : 
+        case 'md' :
+            open_ext = 'txt';
+            break
+        case 'url' : 
+            open_ext = 'url';
+            break;
+        case 'zip' : 
+            open_ext = 'zip';
+            break
+        case 'glb':
+        case 'gltf':
+        case 'obj':
+        case 'stl':
+        case 'fbx':
+        case '3dm':
+            open_ext = 'glb';
+            break;
+        case 'html':
+            open_ext = 'html';
+            break;
+    }
+
+    //presigned url은 ext를 읽을수 없엉...
+    const jsonData = JSON.stringify({$ext : open_ext});
+    const encodedData = btoa(jsonData);
+
+    // 3d모델뷰어 썸네일 생성을 위해 dataId, path_name 추가
+    // let popup = window.open(`/popup?path=${fullPath}&data=${encodedData}`, '', `width=${width}, height=${height}, left=${left},`);
+    let popup = window.open(`/popup?thumbnail_key=${thumbnail_key}&path_name=${vars.path_name}&resourcePath=${resourcePath}&dataId=${dataId}&path=${fullPath}&data=${encodedData}`, '', `width=${width}, height=${height}, left=${left},`);
+}
+
+export function initFileAreaUI(fileAreaMode) {
+    let listContainer = document.querySelector('.archive-main .archive-main-center .list-container');
+    let isRecycleBinModal = document.querySelector('.recycle-bin-modal').style.display == 'flex';
+    if (isRecycleBinModal) listContainer = document.querySelector('.recycle-bin-modal .recycle-bin-wrap .list-container');
+
+    let listHeader = listContainer.querySelector('.list-header');
+    let listBody = listContainer.querySelector('.list-body');
+    let listBodyItemWrap = listBody.querySelector('.list-item-wrap');
+    let mapContainer = listBody.querySelector('.map-container');
+
+    let archiveMainRight = document.querySelector('.archive-main-right');
+    let viewerHeader = archiveMainRight.querySelector('.viewer-header');
+
+    if (fileAreaMode == 'map') {
+        listHeader.style.display = 'none';
+        listBody.style.height = '100%';
+        listBody.style.overflowY = 'hidden';
+        listBodyItemWrap.style.display = 'none';
+        if (mapContainer) mapContainer.style.display = 'flex';
+
+        archiveMainRight.style.minWidth = '36rem';
+        archiveMainRight.style.maxWidth = '36rem';
+        archiveMainRight.style.height = 'calc(100% - 2.75rem)';
+        archiveMainRight.style.position = 'absolute';
+        archiveMainRight.style.right = '0.625rem';
+        archiveMainRight.style.top = '0.5rem';
+        archiveMainRight.style.background = '#fffa';
+        archiveMainRight.style.backdropFilter = 'blur(0.2rem)';
+        archiveMainRight.style.webkitBackdropFilter = 'blur(0.2rem)';
+        archiveMainRight.style.borderRadius = '0.25rem';
+        archiveMainRight.style.boxShadow = '#ccc 0 0 0rem 0.0625rem, #0c0c0db3 0rem 0.5rem 1rem -0.25rem';
+        viewerHeader.style.borderRadius = '0.25rem 0.25rem 0 0';
+    } else {
+        listHeader.style.display = 'flex';
+        listBody.style.height = 'calc(100% - 2.25rem)';
+        listBody.style.overflowY = 'scroll';
+        listBodyItemWrap.style.display = 'flex';
+        if (mapContainer) mapContainer.style.display = 'none';
+
+        archiveMainRight.style.minWidth = '41rem';
+        archiveMainRight.style.maxWidth = '41rem';
+        archiveMainRight.style.height = '100%';
+        archiveMainRight.style.position = 'relative';
+        archiveMainRight.style.right = 'unset';
+        archiveMainRight.style.top = 'unset';
+        archiveMainRight.style.background = '#fff';
+        archiveMainRight.style.backdropFilter = 'none';
+        archiveMainRight.style.webkitBackdropFilter = 'none';
+        archiveMainRight.style.borderRadius = 'unset';
+        archiveMainRight.style.boxShadow = 'none';
+        viewerHeader.style.borderRadius = 'unset';
+    }
+}
+
+export function syncGroupStyle() {
+    let listContainer = document.querySelector('.archive-main .archive-main-center .list-container');
+    let isRecycleBinModal = document.querySelector('.recycle-bin-modal').style.display == 'flex';
+    if (isRecycleBinModal) listContainer = document.querySelector('.recycle-bin-modal .recycle-bin-wrap .list-container');
+
+    listContainer.querySelectorAll('.main-list-item').forEach(item => {
+        if (listContainer.querySelectorAll(`.list-item.selected[data-main-file-name="${item.dataset.mainFileName}"]`).length > 0) {
+            listContainer.querySelectorAll(`.list-item[data-main-file-name="${item.dataset.mainFileName}"]`).forEach(item => {
+                item.classList.add('group-style');
+                item.classList.remove('non-selected');
+            })
+        } else {
+            listContainer.querySelectorAll(`.list-item[data-main-file-name="${item.dataset.mainFileName}"]`).forEach(item => {
+                item.classList.remove('group-style');
+            })
+        }
+    })
+}

views/main/jsm/archive/fileDrag.js

@@ -0,0 +1,348 @@
+import { vars } from './variable.js';
+import {
+    targetFocus,
+    syncGroupStyle
+} from './common.js';
+import {
+    resetViewer,
+} from './pageRenderer.js';
+
+let archiveMain = document.querySelector('.archive-main');
+let viewerContainer = archiveMain?.querySelector('.archive-main-right .viewer-container');
+
+addFileDragEvent(document.querySelector('.archive-main-center .list-container .list-body'), 'file-area');
+addFileDragEvent(document.querySelector('.recycle-bin-modal .list-container .list-body'), 'recycle-bin');
+
+export function addFileDragEvent(listBody, target) {
+    let draggingStartTarget, draggingEndTarget;
+    let draggingStart = false, isDragging = false;
+    let isCtrl = false, isShift = false;
+    let processedItems = new Set();
+    let originalSelection = new Set();
+    
+    let multiSelectBox = document.createElement('div');
+    multiSelectBox.style.position = 'absolute';
+    multiSelectBox.style.border = '1px solid rgba(0, 120, 215, 1)';
+    multiSelectBox.style.background = 'rgba(0, 120, 215, 0.2)';
+    multiSelectBox.style.zIndex = '9999';
+    multiSelectBox.style.pointerEvents = 'none';
+    multiSelectBox.style.display = 'none';
+    listBody.appendChild(multiSelectBox);
+    
+    vars.preventNextClick = false;
+    
+    let startX = 0;
+    let startY = 0;
+    let prevClientX = 0;
+    let prevClientY = 0;
+    
+    let autoScrollDirection = null;
+    let autoScrollFrameId = null;
+    const scrollSpeed = 8;
+    const scrollMargin = 36;
+    
+    function autoScrollLoop() {
+        if (!autoScrollDirection) return;
+      
+         // 더 작으면 느리고 부드러움
+        if (autoScrollDirection === 'down') {
+            listBody.scrollTop += scrollSpeed;
+        } else if (autoScrollDirection === 'up') {
+            listBody.scrollTop -= scrollSpeed;
+        }
+      
+        autoScrollFrameId = requestAnimationFrame(autoScrollLoop);
+    }
+    
+    listBody.addEventListener('pointerdown', (e) => {
+        // 마우스 좌클릭이 아닌 경우 리턴
+        if (e.button !== 0) return;
+        // 갤러리 폴더 지도화면인 경우 리턴
+        if (target == 'file-area' && listBody.querySelector('.map-container').style.display === 'flex') return;
+    
+        draggingStartTarget = e.target;
+        draggingStart = true;
+        isDragging = false;
+        isCtrl = e.ctrlKey;
+        isShift = e.shiftKey;
+        processedItems.clear();
+        if (target == 'file-area') originalSelection = new Set(vars.multiSelectListItemArr);
+        if (target == 'recycle-bin') originalSelection = new Set(vars.multiSelectListItemArr_bin);
+        vars.preventNextClick = false;
+    
+        // if (isCtrl) {
+        //     vars.lastListItem = e.target.closest('.list-item');
+        // } else {
+        //     listBody.querySelectorAll('.list-item').forEach(listItem => {
+        //         listItem.classList.remove('selected');
+        //         listItem.classList.remove('group-style');
+        //     })
+    
+        //     vars.multiSelectListItemArr = [];
+        // }
+    
+        const dragStartListItem = e.target.closest('.list-item');
+        if (dragStartListItem && !isShift) {
+            if (target == 'file-area') vars.lastListItem = dragStartListItem;
+            if (target == 'recycle-bin') vars.lastListItem_bin = dragStartListItem;
+        }
+    
+        if (!isCtrl) {
+            // Ctrl이 아닐 경우 기존 선택 모두 해제
+            listBody.querySelectorAll('.list-item').forEach(listItem => {
+                listItem.classList.remove('selected');
+                listItem.classList.remove('group-style');
+            });
+    
+            if (target == 'file-area') vars.multiSelectListItemArr = [];
+            if (target == 'recycle-bin') vars.multiSelectListItemArr_bin = [];
+        }
+    
+        const bodyRect = listBody.getBoundingClientRect();
+        startX = e.clientX + listBody.scrollLeft - bodyRect.left;
+        startY = e.clientY + listBody.scrollTop - bodyRect.top;
+    
+        prevClientX = e.clientX;
+        prevClientY = e.clientY;
+    
+        Object.assign(multiSelectBox.style, {
+            left: `${startX}px`,
+            top: `${startY}px`,
+            width: `0px`,
+            height: `0px`,
+            display: 'none'
+        });
+    });
+    
+    listBody.addEventListener('pointermove', (e) => {
+        // 마우스 좌클릭이 아닌 경우 리턴
+        if (e.buttons !== 1) return;
+        // list-body에서 마우스 드래그가 시작된게 아닌 경우 리턴
+        if (!draggingStart) return;
+    
+        if (e.clientX === prevClientX && e.clientY === prevClientY) return;
+        prevClientX = e.clientX;
+        prevClientY = e.clientY;
+    
+        const listBodyRect = listBody.getBoundingClientRect();
+    
+        const currX = e.clientX + listBody.scrollLeft - listBodyRect.left;
+        const currY = e.clientY + listBody.scrollTop - listBodyRect.top;
+    
+        const dx = currX - startX;
+        const dy = currY - startY;
+    
+        if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
+            isDragging = true;
+            vars.preventNextClick = true;
+    
+            const left = Math.min(startX, currX);
+            const top = Math.min(startY, currY);
+            const width = Math.abs(dx);
+            const height = Math.abs(dy);
+    
+            Object.assign(multiSelectBox.style, {
+                left: `${left}px`,
+                top: `${top}px`,
+                width: `${width}px`,
+                height: `${height}px`,
+                display: 'block'
+            });
+    
+            const boxRect = multiSelectBox.getBoundingClientRect();
+    
+            listBody.querySelectorAll('.list-item .wrap').forEach(elem => {
+                const rect = elem.getBoundingClientRect();
+                const overlaps = !(
+                    rect.right < boxRect.left ||
+                    rect.left > boxRect.right ||
+                    rect.bottom < boxRect.top ||
+                    rect.top > boxRect.bottom
+                );
+    
+                let listItem = elem.parentElement;
+    
+                if (isCtrl) {
+                    if (overlaps && !processedItems.has(listItem)) {
+                        processedItems.add(listItem);
+    
+                        // ✅ 토글: 원래 선택되어 있었으면 해제, 아니면 선택
+                        if (originalSelection.has(listItem)) {
+                            listItem.classList.remove('selected');
+                            listItem.classList.remove('group-style');
+                            if (target == 'file-area') vars.multiSelectListItemArr = vars.multiSelectListItemArr.filter(item => item !== listItem);
+                            if (target == 'recycle-bin') vars.multiSelectListItemArr_bin = vars.multiSelectListItemArr_bin.filter(item => item !== listItem);
+                        } else {
+                            listItem.classList.add('selected');
+                            listItem.classList.add('group-style');
+                            if (target == 'file-area') vars.multiSelectListItemArr.push(listItem);
+                            if (target == 'recycle-bin') vars.multiSelectListItemArr_bin.push(listItem);
+                        }
+                    }
+    
+                    // ✅ 박스에서 벗어난 항목 복원
+                    if (!overlaps && processedItems.has(listItem)) {
+                        processedItems.delete(listItem);
+    
+                        if (originalSelection.has(listItem)) {
+                            listItem.classList.add('selected');
+                            listItem.classList.add('group-style');
+                            if (target == 'file-area') {
+                                if (!vars.multiSelectListItemArr.includes(listItem)) vars.multiSelectListItemArr.push(listItem);
+                            }
+                            if (target == 'recycle-bin') {
+                                if (!vars.multiSelectListItemArr_bin.includes(listItem)) vars.multiSelectListItemArr_bin.push(listItem);
+                            }
+                        } else {
+                            listItem.classList.remove('selected');
+                            listItem.classList.remove('group-style');
+                            if (target == 'file-area') vars.multiSelectListItemArr = vars.multiSelectListItemArr.filter(item => item !== listItem);
+                            if (target == 'recycle-bin') vars.multiSelectListItemArr_bin = vars.multiSelectListItemArr_bin.filter(item => item !== listItem);
+                        }
+                    }
+                } else {
+                    listItem.classList.toggle('selected', overlaps);
+                    listItem.classList.toggle('group-style', overlaps);
+        
+                    if (target == 'file-area') {
+                        if (overlaps && !vars.multiSelectListItemArr.includes(listItem)) vars.multiSelectListItemArr.push(listItem);
+                    }
+                    if (target == 'recycle-bin') {
+                        if (overlaps && !vars.multiSelectListItemArr_bin.includes(listItem)) vars.multiSelectListItemArr_bin.push(listItem);
+                    }
+                }
+            });
+    
+            if (e.clientY > listBodyRect.bottom - scrollMargin) {
+                if (autoScrollDirection !== 'down') {
+                    cancelAnimationFrame(autoScrollFrameId);
+                    autoScrollDirection = 'down';
+                    autoScrollLoop();
+                }
+            } else if (e.clientY < listBodyRect.top + scrollMargin) {
+                if (autoScrollDirection !== 'up') {
+                    cancelAnimationFrame(autoScrollFrameId);
+                    autoScrollDirection = 'up';
+                    autoScrollLoop();
+                }
+            } else {
+                if (autoScrollDirection !== null) {
+                    cancelAnimationFrame(autoScrollFrameId);
+                    autoScrollDirection = null;
+                }
+            }
+        }
+    });
+    
+    document.addEventListener('pointerup', async (e) => {
+        // list-body에서 마우스 드래그가 시작된게 아닌 경우 리턴
+        if (!draggingStart) return;
+    
+        if (target == 'file-area') {
+            if (vars.lastHeaderBtn) targetFocus(vars.lastHeaderBtn);
+            if (vars.lastMainTreeItem) targetFocus(vars.lastMainTreeItem);
+        }
+    
+        if (isShift && isDragging) {
+            const dragStartListItem = draggingStartTarget.closest('.list-item');
+            if (dragStartListItem) {
+                if (target == 'file-area') vars.lastListItem = dragStartListItem;
+                if (target == 'recycle-bin') vars.lastListItem_bin = dragStartListItem;
+            }
+        }
+    
+        multiSelectBox.style.display = 'none';
+        draggingEndTarget = e.target;
+        draggingStart = false;
+        isDragging = false;
+        isCtrl = false;
+        isShift = false;
+    
+        // 드래그가 아이템 바깥 영역에서만 진행되고, 드래그에 포함된 아이템이 하나도 없을 때 뷰어 초기화
+        if (
+                (
+                    (draggingStartTarget.matches('.list-body') && draggingEndTarget.matches('.list-body'))
+                    || (draggingStartTarget.matches('.list-item-wrap') && draggingEndTarget.matches('.list-item-wrap'))
+                )
+                && 
+                (
+                    (target == 'file-area' && vars.multiSelectListItemArr.length == 0)
+                    || (target == 'recycle-bin' && vars.multiSelectListItemArr_bin.length == 0)
+                )
+            )
+        {
+            // 모든 아이템에서 non-selected 클래스 삭제
+            document.querySelectorAll('.grid-item').forEach(gridItem => {
+                gridItem.classList.remove('non-selected')
+            })
+            // if (viewerContainer.style.display == 'flex') resetViewer();
+            resetViewer();
+    
+            vars.lastContextTarget = undefined;
+            if (target == 'file-area') {
+                vars.lastListGroupTarget = undefined;
+                vars.lastListItem = undefined;
+                // vars.lastContextTarget = undefined;
+            }
+            if (target == 'recycle-bin') {
+                vars.lastListGroupTarget_bin = undefined;
+                vars.lastListItem_bin = undefined;
+                // vars.lastContextTarget_bin = undefined;
+            }
+    
+            // userSelected 삭제
+            let me = JSON.parse(vars.userInfoString);
+            me.selected = undefined;
+            vars.socket.emit('fileSelect',{me : me});
+        } else {
+            if (target == 'file-area') {
+                // 모든 아이템에 non-selected 클래스 추가
+                document.querySelectorAll('.grid-item').forEach(gridItem => {
+                    gridItem.classList.add('non-selected')
+                })
+            }
+        }
+    
+        // 드래그 시작한 대상과 종료된 대상이 다르면 뷰어 초기화
+        if (draggingStartTarget != draggingEndTarget) {
+            if (target == 'file-area') {
+                vars.lastListItem = undefined;
+                vars.lastListGroupTarget = undefined;
+            }
+            if (target == 'recycle-bin') {
+                vars.lastListItem_bin = undefined;
+                vars.lastListGroupTarget_bin = undefined;
+            }
+            if (viewerContainer.style.display == 'flex') resetViewer();
+        }
+    
+        // 드래그가 끝나고 pointerup 이벤트가 발생하는 시점에 selected 클래스가 있는 listItem만 필터링
+        if (target == 'file-area') vars.multiSelectListItemArr = vars.multiSelectListItemArr.filter(item => item.classList.contains('selected'));
+        if (target == 'recycle-bin') vars.multiSelectListItemArr_bin = vars.multiSelectListItemArr_bin.filter(item => item.classList.contains('selected'));
+    
+        // vars.multiSelectListItemArr/vars.multiSelectListItemArr_bin에 포함된 아이템에서 non-selected 클래스 삭제
+        if (target == 'file-area') {
+            vars.multiSelectListItemArr.forEach(item => {
+                item.classList.remove('non-selected');
+            })
+        }
+        if (target == 'recycle-bin') {
+            vars.multiSelectListItemArr_bin.forEach(item => {
+                item.classList.remove('non-selected');
+            })
+        }
+    
+        await syncGroupStyle();
+    
+        // 드래그 시작한 대상의 부모요소와 종료된 대상의 부모요소가 다르면 뷰어 초기화
+        // if (draggingStartTarget.parentElement != draggingEndTarget.parentElement) {
+        //     if (viewerContainer.style.display == 'flex') resetViewer();
+        // }
+    
+        if (target == 'file-area') vars.lastSelectTarget = vars.multiSelectListItemArr[0];
+        if (target == 'recycle-bin') vars.lastSelectTarget_bin = vars.multiSelectListItemArr_bin[0];
+    
+        cancelAnimationFrame(autoScrollFrameId);
+        autoScrollDirection = null;
+    });
+}

views/main/jsm/archive/index.js

@@ -0,0 +1,59 @@
+import { vars } from './variable.js';
+import * as socketManager from './socketManager.js';
+import * as eventManager from './eventManager.js';
+import * as fileDrag from './fileDrag.js';
+
+import { 
+    preparePageRendering,
+    renderSizeBar,
+    renderLog
+} from './pageRenderer.js'; 
+
+export let isLoaded = false;
+export function loadArchive() {
+    isLoaded = true;
+}
+
+//// 뷰어 요약 ai버튼 삭제
+// document.querySelector('.ai-btn').remove();
+
+//// archive controller에 useEncrypt 변수 설정
+// let setUseEncryptRes = await axios.put(`${vars.path_name}/setUseEncrypt`, {useEncrypt: vars.convertOption.useEncrypt});
+
+let pageRanderingOption = {
+    isInit: true,
+    // favorite: 즐겨찾기 한 경로
+    scope: 'headerBtn'
+}
+await preparePageRendering(pageRanderingOption);
+
+//// 폴더 사용 용량 표시
+await renderSizeBar();
+
+//// 활동 정보 
+let isInit = true;
+await renderLog(isInit);
+
+// ol.map = undefined;
+// ol.map = new ol.Map({
+//     target: 'map-container',
+//     layers: [vars.baseLayer],
+//     // layers: [vars.roadLayer, vars.satelliteLayer, vars.hybridLayer],
+//     view: new ol.View({
+//         projection: 'EPSG:3857',
+//         center: ol.proj.fromLonLat([127.8, 35.9]),
+//         zoom: 7,
+//         constrainResolution: true,
+//         smoothResolutionConstraint: true
+//     })
+// });
+
+// proj4.defs([
+//     ['EPSG:5185', '+proj=tmerc +lat_0=38 +lon_0=125 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs'],
+//     ['EPSG:5186', '+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs'],
+//     ['EPSG:5187', '+proj=tmerc +lat_0=38 +lon_0=129 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs'],
+//     ['EPSG:5188', '+proj=tmerc +lat_0=38 +lon_0=131 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs'],
+//     ['EPSG:4978', '+proj=geocent +datum=WGS84 +units=m +no_defs'],
+//     ['EPSG:4326', '+proj=longlat +datum=WGS84 +no_defs'],
+// ])
+// ol.proj.proj4.register(proj4);

views/main/jsm/archive/logFilter.js

@@ -0,0 +1,241 @@
+import { vars } from './variable.js';
+import { renderLog } from './pageRenderer.js';
+
+const modal = document.querySelector('.log-filter'); 
+const customDisplay = modal.querySelector('.custom-select-display');
+const customList = modal.querySelector('.custom-select-list');
+const userSelect = document.querySelector('#log-user-select');
+
+// 기본 로그필터 정보 불러오기
+export async function getDefaultFilter() {
+    // 해당 프로젝트에 존재하는 모든 사용자 
+    let userLogRes = await axios.get(`${vars.path_name}/getUserLog`); 
+    if (userLogRes.data.message == 'getUserLog_success') {
+        const userLogDataArr = Object.values(userLogRes.data.logData);
+
+        // user_id -> user_nm 매핑 (중복 제거) 
+        const userMap = new Map();
+        userLogDataArr.forEach(data => {
+            if(!userMap.has(data.user_id)) {
+                userMap.set(data.user_id, data.user_nm);
+            }
+        });
+
+        // selectbox 사용자 리스트 추가 
+        userSelect.innerHTML = '';
+        userSelect.insertAdjacentHTML('beforeend', '<option value="allUser">모든 사용자</option>');
+
+        // Map -> Array로 변환 후 user_id로 정렬
+        const sortedUsers = [...userMap.entries()].sort((a, b) => {
+            const userIdA = a[0];
+            const userIdB = b[0];
+            return userIdA.localeCompare(userIdB, 'ko-KR');
+        });
+
+        // 정렬된 사용자 추가
+        sortedUsers.forEach(([userId, userNm]) => {
+            let option = document.createElement('option');
+            option.value = userId;
+            option.textContent = `${userId} (${userNm})`;
+            userSelect.appendChild(option);
+        });
+
+        // custom select 리스트에도 반영
+        customList.innerHTML = '';
+        Array.from(userSelect.options).forEach(opt => {
+            const li = document.createElement('li');
+            li.dataset.value = opt.value;
+            li.textContent = opt.textContent;
+            customList.appendChild(li);
+        });
+
+        // 기본값으로 설정
+        customDisplay.textContent = "모든 사용자";
+        userSelect.value = "allUser";
+        customList.style.display = "none"; // 혹시 열려있으면 닫기
+    }
+
+    // 활동유형 초기화 
+    let activityCheckbox = modal.querySelectorAll('.body .log-activity label input[type="checkbox"]');
+    activityCheckbox.forEach(checkbox => {
+        checkbox.checked = true;
+    }) 
+
+    // 활동로그에 존재하는 '오늘 ~ 일주일' 간의 로그 기록 
+    let logRes = await axios.get(`${vars.path_name}/getLog`);
+    if (logRes.data.message == 'getLog_success') {
+        const logDataArr = Object.values(logRes.data.logData);
+
+        // 기본 활동시간 - 오늘 ~ 일주일로 설정
+        const dateInputs = modal.querySelectorAll('.log-date .log-date-wrap input[type="date"]');
+    
+        const toDateStr = (d) => d.toISOString().slice(0, 10);
+        
+        const today = new Date();
+        const weekAgo = new Date(today)
+        weekAgo.setDate(today.getDate() - 7);
+        
+        let startDate = toDateStr(weekAgo);
+        let endDate = toDateStr(today);
+    
+        // 달력창 UI 
+        dateInputs[0].value = startDate;
+        dateInputs[1].value = endDate;
+
+        return { logDataArr }
+    }
+}
+
+// custom select 동작
+customDisplay.addEventListener('click', () => {
+    customList.style.display = customList.style.display === 'flex' ? 'none': 'flex';
+});
+
+// 항목 선택 시 
+customList.addEventListener('click', (e) => {
+    if (e.target.tagName === 'LI') {
+        const value = e.target.dataset.value;
+        const text = e.target.textContent; 
+
+        // 표시 UI 업데이트
+        customDisplay.textContent = text;
+
+        // 실제 select 값도 변경 
+        userSelect.value = value;
+
+        // 리스트 닫기
+        customList.style.display = 'none';
+    }
+})
+
+
+// 로그필터 저장 버튼 클릭 이벤트 
+modal.querySelector('.foot ._button-medium').addEventListener('click', async() => {
+    // date 불러오기
+    let { startDate, endDate } = getLogFilterDate();
+
+    // user 불러오기
+    let { user } = getLogFilterUser();
+
+    // activity 불러오기
+    let { activity } = getLogFilterActivity();
+
+    // 서버로 전달한 파라미터 
+    const logFilterParams = {
+        startDate: startDate, 
+        endDate: endDate, 
+        user: user, 
+        activity: activity
+    };
+    
+    let filterLogRes = await axios.get(`${vars.path_name}/getFilterLog`, { params: logFilterParams });
+    if (filterLogRes.data.message == 'getFilterLog_success') {
+        const isInit = true;
+        const addFooterLog = false;
+
+        const archiveModalLogList = document.querySelector('.archive-modal > .wrap .modal-wrap .modal-body .log-wrap .log-item-wrap.log-body');
+        archiveModalLogList.scrollTop = 0;
+
+        renderLog(isInit, addFooterLog, filterLogRes.data.logData)
+    }
+
+    
+});
+
+document.querySelector('.archive-modal').addEventListener('click', async(e) => {
+    if (modal.style.display == 'flex') { 
+        // 로그 필터 켜져있을 때에만 이벤트 작동
+        if (e.target.classList.contains('custom-select-display') || e.target.classList.contains('custom-select-list') || e.target.closest('.custom-select-list')) {
+            // 사용자 셀렉트 박스 또는 옵션 영역 클릭했을 때
+        } else {
+            // 사용자 셀렉트 박스 또는 옵션 영역을 제외한 나머지 모달 영역 클릭했을 때
+            customList.style.display = 'none';
+        }
+    }
+})
+
+// date 불러오기 
+function getLogFilterDate() {
+    // 날짜 선택 (start, end) 
+    const dateInputs = modal.querySelectorAll('.log-date .log-date-wrap input[type="date"]');
+    let startDate = dateInputs[0].value; // 시작일
+    let endDate = dateInputs[1].value; // 종료일
+
+    return { startDate, endDate };
+}
+
+// user 불러오기 
+function getLogFilterUser() {
+    // 선택한 사용자 user에 추가 
+    const userSelect = modal.querySelector('.body .log-user select');
+    const selectValue = userSelect.value;
+    let user = [];
+
+    if(selectValue == 'allUser') {
+        // 전체 사용자 선택
+        user = Array.from(userSelect.options)
+            .map(opt => opt.value)
+            .filter(value => value !== 'allUser' && value !== '');
+    } else {
+        user.push(selectValue);
+    }
+
+   
+    return { user };
+}
+
+// activity 불러오기 
+function getLogFilterActivity() {
+    // 체크한 활동유형 activity에 추가 
+    const activityMapping = {
+        'uploadData_file' : ['uploadData_file', 'addOn_version', 'addOn_attachment'], 
+        'renameTarget' : ['renameTarget_folder', 'renameTarget_file'], 
+        'removeTarget' : ['removeTarget_folder', 'removeTarget_file', 'removeTarget_folder_expired'], 
+        'downloadTarget': ['downloadTarget_folder', 'downloadTarget_file'], 
+        'addPermission': ['addPermission_worker', 'addPermission_viewer', 'addPermission_subMaster', 'addPermission_securityWorker'],
+        'deletePermission': ['deletePermission_worker', 'deletePermission_viewer', 'deletePermission_subMaster', 'deletePermission_securityWorker']
+    }
+
+    const activity = Array.from(modal.querySelectorAll('.body .log-activity label input[type="checkbox"]:checked')).flatMap(check => activityMapping[check.value] || [check.value]);
+
+    return { activity };
+}
+
+// 초기화 / 전체해제 버튼 클릭 이벤트 
+const logFilterBtn = modal.querySelectorAll('._button-xsmall'); 
+logFilterBtn.forEach(btn => {
+    btn.addEventListener('click', (e) => {
+        if(e.target.classList.contains('reset')) {
+            // 활동시간 초기화- '오늘~일주일'
+            const dateInputs = modal.querySelectorAll('.log-date .log-date-wrap input[type="date"]');
+            const toDateStr = (d) => d.toISOString().slice(0, 10);
+            
+            const today = new Date();
+            const weekAgo = new Date(today);
+            weekAgo.setDate(today.getDate() - 7);
+            
+            let startDate = toDateStr(weekAgo);
+            let endDate = toDateStr(today);
+
+            dateInputs[0].value = startDate;
+            dateInputs[1].value = endDate;
+
+            // 사용자 초기화 - '모든 사용자'
+            customDisplay.textContent = '모든 사용자';
+            userSelect.value = 'allUser';
+            customList.style.display = 'none';
+        }
+
+        const inputs = modal.querySelectorAll('.body .log-activity label input[type="checkbox"]');
+
+        inputs.forEach(input => {
+            if(e.target.classList.contains('reset')) {
+                input.checked = true;
+            } else if (e.target.classList.contains('select-all')) {
+                input.checked = true;
+            } else if (e.target.classList.contains('clear-all')) {
+                input.checked = false;
+            }
+        })
+    })
+})

views/main/jsm/archive/managementFunctions.js

@@ -0,0 +1,32 @@
+import { vars } from './variable.js';
+import { toggleContextmenu, toggleContextFocusBox } from './eventManager.js'
+
+export async function mgmtFunc_changeProjectState(toggleParams) {
+    if (toggleParams.type == 'changeProjectState') toggleParams.targetColumn = 'is_active';
+    await axios.post('/common/mgmtFunc_updateProject', { params: toggleParams });
+}
+
+export async function mgmtFunc_changeBannerNotice(toggleParams) {
+    if (toggleParams.type == 'changeBannerNotice') toggleParams.targetColumn = 'banner_notice';
+    await axios.post('/common/mgmtFunc_updateProject', { params: toggleParams });
+}
+
+export async function mgmtFunc_resetConvert(resourcePath, dataId) {
+    let resetConvertParams = {
+        resourcePath: resourcePath,
+        dataId: dataId
+    }
+
+    let resetConvertRes = await axios.post(`${vars.path_name}/mgmtFunc_resetConvert`, { params: resetConvertParams });
+    if (resetConvertRes.data.message == 'mgmtFunc_resetConvert_success') {
+        toggleContextmenu(false);
+        toggleContextFocusBox(false);
+    }
+}
+
+export async function mgmtFunc_addClickLog(params) {
+    // params.dataId -> 컨트롤러에서 숫자형으로 형변환해서 db추가
+    // project_id, activity, user_id, user_ip는 컨트롤러에서 params에 추가 (user_id는 params.userInfoString 사용)
+    let addClickLogRes = await axios.post(`${vars.path_name}/mgmtFunc_addClickLog`, { params: params });
+    // console.log(addClickLogRes.data.message);
+}

views/main/jsm/archive/manualSwiper.js

@@ -0,0 +1,72 @@
+let archiveManualSwiper = undefined;
+export async function renderManual() {
+    await createManualSwiperArea();
+
+    archiveManualSwiper = new Swiper('.modal-body > .manual-wrap .manual-swiper', {
+        slidesPerView: 1,
+        spaceBetween: 0,
+        centeredSlides: true,
+        speed: 400,
+        loop: true,
+        navigation: {
+            nextEl: '.swiper.manual-swiper .button-next',
+            prevEl: '.swiper.manual-swiper .button-prev',
+        },
+        pagination: {
+            el: '.swiper.manual-swiper .swiper-pagination',
+            clickable: true,
+            renderBullet: function (index, className) {
+                return '<span class="' + className + '">' + (index + 1) + "</span>";
+            },
+        },
+    });
+}
+
+/** swiper area
+ *  [div] manual-wrap
+ *      [div] manual-swiper (v) <-- swiper
+ *           [ul] manual-swiper-wrap <-- swiper-wrapper
+ *                [li] manual-swiper-item <-- swiper-slide
+ *                      [img] manual-img
+ *           [div] button-prev
+ *           [div] button-next
+ *           [div] swiper-pagination
+ */
+
+export async function createManualSwiperArea() {
+    const manualWrap = document.querySelector('.modal-body > .manual-wrap');
+    manualWrap.innerHTML = ''; // swiper 초기화
+
+    const manualSwiper = document.createElement('div');
+    manualSwiper.classList.add('swiper', 'manual-swiper');
+    const manualSwiperWrap = document.createElement('ul');
+    manualSwiperWrap.classList.add('swiper-wrapper', 'manual-swiper-wrap');
+    manualSwiper.appendChild(manualSwiperWrap);
+    manualWrap.appendChild(manualSwiper);
+
+    // swiper 동적 생성
+    for (let i = 0; i < 5; i++) {
+        const manualSwiperItem = document.createElement('li');
+        manualSwiperItem.classList.add('swiper-slide', 'manual-swiper-item');
+        manualSwiperItem.dataset.save = true;
+        manualSwiperItem.dataset.fileName = `${[i+1]}.jpg`;
+
+        const manualImg = document.createElement('img');
+        manualImg.classList.add('manual-img');
+        manualImg.src = `/main/img/manual/${[i+1]}.jpg`;
+
+        manualSwiperItem.appendChild(manualImg);
+        manualSwiperWrap.appendChild(manualSwiperItem);
+    }
+
+    // 이전버튼, 다음버튼, 페이지네이션버튼 생성
+    const swiperButtonPrev = document.createElement('div');
+    swiperButtonPrev.classList.add('button-prev');
+    const swiperButtonNext = document.createElement('div');
+    swiperButtonNext.classList.add('button-next');
+    const swiperPagination = document.createElement('div');
+    swiperPagination.classList.add('swiper-pagination');
+    manualSwiper.appendChild(swiperButtonPrev);
+    manualSwiper.appendChild(swiperButtonNext);
+    manualSwiper.appendChild(swiperPagination);
+}

views/main/jsm/archive/olPmtiles.js

@@ -0,0 +1,754 @@
+import { PMTiles } from 'https://esm.sh/pmtiles@3.0.7';
+
+const MAX_LEVEL = 20;
+const CLICK_HIGHLIGHT_OUTER_WIDTH = 10;  // 바깥쪽 흰색 테두리 두께
+const CLICK_HIGHLIGHT_INNER_WIDTH = 5;   // 안쪽 선 두께
+const HOVER_HIGHLIGHT_OUTER_WIDTH = 6;  // 바깥쪽 흰색 테두리 두께
+const HOVER_HIGHLIGHT_INNER_WIDTH = 2;   // 안쪽 선 두께
+
+// 선택/호버 상태 추적
+let selectedFeature = null;
+let hoveredFeature = null;
+let selectLayer = null;
+let hoverLayer = null;
+// 현재 선택된 feature 저장
+let currentSelectedFeature = null;
+ // 선택된 feature의 레이어 키 추가
+let currentSelectedLayerKey = null;
+
+// ---- OpenLayers VectorTile Layer ----
+class OLVectorLayer {
+    constructor(olMap, layerId) {
+        this.olMap = olMap;
+        this.layerId = layerId;
+        this.type = null;
+        this.templateUrl = null;
+        this.pmtilesInstance = null;
+        this.maxLevel = MAX_LEVEL;
+        this.vectorLayer = null;
+    }
+
+    async setTileSource(source, type, zoomRange = null) {
+        this.type = type;
+
+        if (type === 'pbf') {
+            this.templateUrl = source;
+            
+            try {
+                const baseUrl = source.replace('/{z}/{x}/{y}.pbf', '');
+                const metadataUrl = `${baseUrl}/metadata.json`;
+                const response = await fetch(metadataUrl);
+                const metadata = await response.json();
+                
+                if (metadata.maxzoom) {
+                    this.maxLevel = parseInt(metadata.maxzoom);
+                }
+            } catch (error) {
+                console.warn(`[${this.layerId}] Could not read metadata.json`);
+            }
+
+            this.vectorLayer = new ol.layer.VectorTile({
+                source: new ol.source.VectorTile({
+                    format: new ol.format.MVT(),
+                    url: source,
+                    maxZoom: this.maxLevel
+                }),
+                style: styleFunction,
+                renderMode: 'vector',
+                zIndex: 1,
+                // 줌 범위 설정
+                minZoom: zoomRange ? zoomRange.min : undefined,
+                maxZoom: zoomRange ? zoomRange.max : undefined
+            });
+
+            this.olMap.addLayer(this.vectorLayer);
+            const zoomInfo = zoomRange ? ` (zoom ${zoomRange.min}-${zoomRange.max})` : '';
+            console.log(`[${this.layerId}] PBF Vector layer initialized${zoomInfo}`);
+
+        } else if (type === 'pmtiles') {
+            this.pmtilesInstance = source;
+            
+            try {
+                const metadata = await this.pmtilesInstance.getMetadata();
+                if (metadata.maxzoom) {
+                    this.maxLevel = parseInt(metadata.maxzoom);
+                }
+                // console.log(`[${this.layerId}] PMTiles metadata:`, metadata);
+            } catch (error) {
+                console.warn(`[${this.layerId}] Could not read PMTiles metadata`);
+            }
+
+            this.vectorLayer = new ol.layer.VectorTile({
+                source: new ol.source.VectorTile({
+                    format: new ol.format.MVT(),
+                    tileUrlFunction: (tileCoord) => {
+                        const z = tileCoord[0];
+                        const x = tileCoord[1];
+                        const y = tileCoord[2];
+                        return `pmtiles://${this.layerId}/${z}/${x}/${y}`;
+                    },
+                    tileLoadFunction: async (tile, url) => {
+                        const urlParts = url.split('/');
+                        const z = parseInt(urlParts[urlParts.length - 3]);
+                        const x = parseInt(urlParts[urlParts.length - 2]);
+                        const y = parseInt(urlParts[urlParts.length - 1]);
+
+                        // console.log(`Loading PMTiles tile: ${z}/${x}/${y}`);
+
+                        try {
+                            const tileData = await this.pmtilesInstance.getZxy(z, x, y);
+                            if (tileData && tileData.data) {
+                                // console.log(`PMTiles tile ${z}/${x}/${y} loaded, size: ${tileData.data.byteLength} bytes`);
+                                
+                                const format = new ol.format.MVT();
+                                
+                                const tileGrid = ol.tilegrid.createXYZ({maxZoom: this.maxLevel});
+                                const tileExtent = tileGrid.getTileCoordExtent([z, x, y]);
+                                
+                                const features = format.readFeatures(tileData.data, {
+                                    extent: tileExtent,
+                                    featureProjection: 'EPSG:3857'
+                                });
+                                
+                                // console.log(`PMTiles tile ${z}/${x}/${y} features: ${features.length}`);
+                                
+                                if (tile.setFeatures) {
+                                    tile.setFeatures(features);
+                                } else {
+                                    tile.setLoader(() => Promise.resolve(features));
+                                }
+                            } else {
+                                // console.log(`PMTiles tile ${z}/${x}/${y} - no data`);
+                                if (tile.setFeatures) {
+                                    tile.setFeatures([]);
+                                } else {
+                                    tile.setLoader(() => Promise.resolve([]));
+                                }
+                            }
+                        } catch (error) {
+                            // console.error(`Failed to load PMTiles tile ${z}/${x}/${y}:`, error);
+                            if (tile.setFeatures) {
+                                tile.setFeatures([]);
+                            } else {
+                                tile.setLoader(() => Promise.resolve([]));
+                            }
+                        }
+                    },
+                    maxZoom: this.maxLevel
+                }),
+                style: styleFunction,
+                zIndex: 1,
+                updateWhileAnimating: false,
+                updateWhileInteracting: false,
+                renderBuffer: 50,
+                declutter: false,
+                // 줌 범위 설정
+                minZoom: zoomRange ? zoomRange.min : undefined,
+                maxZoom: zoomRange ? zoomRange.max : undefined
+            });
+
+            this.olMap.addLayer(this.vectorLayer);
+
+            
+
+            // this.pmtilesInstance = source;
+
+            // try {
+            // const metadata = await this.pmtilesInstance.getMetadata();
+            // if (metadata.maxzoom) this.maxLevel = parseInt(metadata.maxzoom, 10);
+            // } catch (e) {
+            // console.warn(`[${this.layerId}] Could not read PMTiles metadata`);
+            // }
+
+            // // PMTiles가 512 기준이면 512 권장
+            // const tileSize = 256;
+            // const tileGrid = ol.tilegrid.createXYZ({
+            // maxZoom: this.maxLevel,
+            // tileSize
+            // });
+
+            // // 기존 styleFunction 그대로 사용
+            // const styleFn = styleFunction;
+
+            // // 벡터 → 래스터 변환용 레이어
+            // this.rasterLayer = new ol.layer.Tile({
+            // source: new ol.source.TileImage({
+            //     tileGrid,
+            //     tileUrlFunction: (tileCoord) => {
+            //     const [z, x, y] = tileCoord;
+            //     return `pmtiles://${this.layerId}/${z}/${x}/${y}`;
+            //     },
+            //     tileLoadFunction: async (imageTile, url) => {
+            //     const parts = url.split('/');
+            //     const z = parseInt(parts[parts.length - 3], 10);
+            //     const x = parseInt(parts[parts.length - 2], 10);
+            //     const y = parseInt(parts[parts.length - 1], 10);
+
+            //     // 타일 extent (EPSG:3857)
+            //     const tileExtent = tileGrid.getTileCoordExtent([z, x, y]);
+            //     const resolution = tileGrid.getResolution(z);
+
+            //     // 해상도/부하 트레이드오프
+            //     const pixelRatio = 1; // 필요시 window.devicePixelRatio
+
+            //     const canvas = document.createElement('canvas');
+            //     canvas.width = tileSize * pixelRatio;
+            //     canvas.height = tileSize * pixelRatio;
+            //     const ctx = canvas.getContext('2d');
+
+            //     // ★ extent 반영하여 벡터 컨텍스트 생성
+            //     const vectorCtx = ol.render.toContext(ctx, {
+            //         size: [tileSize * pixelRatio, tileSize * pixelRatio],
+            //         pixelRatio,
+            //         extent: tileExtent   // ← 중요: 지도좌표 → 픽셀 변환 기준
+            //     });
+
+            //     try {
+            //         const tileData = await this.pmtilesInstance.getZxy(z, x, y);
+
+            //         if (tileData && tileData.data) {
+            //         // MVT 파싱 (extent는 featureProjection과 동일 좌표계여야 함)
+            //         const format = new ol.format.MVT();
+            //         const features = format.readFeatures(tileData.data, {
+            //             extent: tileExtent,              // EPSG:3857
+            //             featureProjection: 'EPSG:3857'
+            //         });
+
+            //         // zIndex 반영을 위해 (feature, style) 쌍 정렬
+            //         const drawQueue = [];
+            //         for (const f of features) {
+            //             let s = styleFn ? styleFn(f, resolution) : null;
+            //             if (!s) continue;
+            //             const styles = Array.isArray(s) ? s : [s];
+            //             for (const one of styles) {
+            //             if (one && typeof one.getZIndex === 'function') {
+            //                 const zi = one.getZIndex() ?? 0;
+            //                 drawQueue.push({ f, style: one, z: zi });
+            //             }
+            //             }
+            //         }
+
+            //         drawQueue.sort((a, b) => a.z - b.z);
+            //         for (const { f, style } of drawQueue) {
+            //             vectorCtx.drawFeature(f, style);
+            //         }
+            //         } else {
+            //         // 데이터 없음 → 투명 타일
+            //         ctx.clearRect(0, 0, canvas.width, canvas.height);
+            //         }
+
+            //         imageTile.getImage().src = canvas.toDataURL('image/png');
+            //     } catch (err) {
+            //         console.warn(`PMTiles raster tile load failed ${z}/${x}/${y}`, err);
+            //         const empty = document.createElement('canvas');
+            //         empty.width = tileSize;
+            //         empty.height = tileSize;
+            //         imageTile.getImage().src = empty.toDataURL();
+            //     }
+            //     },
+            //     // crossOrigin: 'anonymous',
+            // }),
+            // zIndex: 100000,
+            // minZoom: zoomRange ? zoomRange.min : undefined,
+            // maxZoom: zoomRange ? zoomRange.max : undefined
+            // });
+
+            // this.olMap.addLayer(this.rasterLayer);
+
+            
+            const zoomInfo = zoomRange ? ` (zoom ${zoomRange.min}-${zoomRange.max})` : '';
+            console.log(`[${this.layerId}] PMTiles Vector layer initialized${zoomInfo}`);
+            
+            try {
+                const metadata = await this.pmtilesInstance.getMetadata();
+                // PMTiles metadata에서 bounds 정보 확인
+                if (metadata && (metadata.bounds || metadata.antimeridian_adjusted_bounds || metadata.center)) {
+                    let extent;
+                    let bounds;
+                    if (metadata.bounds) bounds = metadata.bounds;
+                    if (metadata.antimeridian_adjusted_bounds) bounds = metadata.antimeridian_adjusted_bounds.split(',');
+                    
+                    if (bounds) {
+                        // bounds: [minLon, minLat, maxLon, maxLat]
+                        const [minLon, minLat, maxLon, maxLat] = bounds;
+                        const bottomLeft = ol.proj.fromLonLat([minLon, minLat]);
+                        const topRight = ol.proj.fromLonLat([maxLon, maxLat]);
+                        extent = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
+                    } else if (metadata.center) {
+                        // center와 zoom을 이용한 대략적인 영역 계산
+                        const [centerLon, centerLat, centerZoom] = metadata.center;
+                        const centerPoint = ol.proj.fromLonLat([centerLon, centerLat]);
+                        const resolution = this.olMap.getView().getResolutionForZoom(centerZoom || 10);
+                        const size = 1000; // 대략적인 크기
+                        extent = [
+                            centerPoint[0] - size * resolution,
+                            centerPoint[1] - size * resolution,
+                            centerPoint[0] + size * resolution,
+                            centerPoint[1] + size * resolution
+                        ];
+                    }
+
+                    let pmtilesFitBtn = document.querySelector('.map-container .control-btn-wrap .pmtiles-fit-btn');
+                    if (extent) {
+                        if (ol.map.getOverlays().getLength() == 0) {
+                            this.olMap.getView().fit(extent, {
+                                padding: [50, 50, 50, 50],
+                                // duration: 500,
+                                // constrainResolution: true,
+                                maxZoom: 18
+                            });
+                            // console.log(`[${this.layerId}] PMTiles layer fitted to bounds`);
+                        }
+
+                        pmtilesFitBtn.style.display = 'flex';
+                        pmtilesFitBtn.addEventListener('click', async() => {
+                            this.olMap.getView().fit(extent, {
+                                padding: [50, 50, 50, 50],
+                                // duration: 500,
+                                // constrainResolution: true,
+                                maxZoom: 18
+                            });
+                        })
+                    }
+                }
+            } catch (error) {
+                console.warn(`[${this.layerId}] Could not fit PMTiles bounds:`, error);
+            }
+        }
+    }
+
+    // GeoJSON/KML용 벡터 소스 설정 메서드
+    async setVectorSource(url, type, zoomRange = null) {
+        this.type = type;
+
+        if (type === 'geojson') {
+            console.log(`[${this.layerId}] Loading GeoJSON from: ${url}`);
+            
+            this.vectorLayer = new ol.layer.Vector({
+                source: new ol.source.Vector({
+                    url: url,
+                    format: new ol.format.GeoJSON()
+                }),
+                style: styleFunction,
+                zIndex: 1,
+                updateWhileAnimating: false,
+                updateWhileInteracting: false,
+                renderBuffer: 50,
+                declutter: false,
+                // 줌 범위 설정
+                minZoom: zoomRange ? zoomRange.min : undefined,
+                maxZoom: zoomRange ? zoomRange.max : undefined
+            });
+
+            this.olMap.addLayer(this.vectorLayer);
+            const zoomInfo = zoomRange ? ` (zoom ${zoomRange.min}-${zoomRange.max})` : '';
+            console.log(`[${this.layerId}] GeoJSON Vector layer initialized${zoomInfo}`);
+            
+            // GeoJSON 로드 완료 이벤트 처리
+            const source = this.vectorLayer.getSource();
+            source.once('change', () => {
+                if (source.getState() === 'ready') {
+                    const features = source.getFeatures();
+                    const featureCount = features.length;
+                    console.log(`[${this.layerId}] GeoJSON loaded: ${featureCount} features`);
+                    
+                    // feature 수에 따른 경고
+                    if (featureCount > 10000) {
+                        console.warn(`⚠️ Large dataset detected (${featureCount} features). Performance may be affected.`);
+                    }
+                    
+                    // 로드된 features가 있으면 해당 영역으로 자동 줌 (단독 레이어인 경우만)
+                    if (features.length > 0 && !zoomRange) {
+                        const extent = source.getExtent();
+                        this.olMap.getView().fit(extent, {
+                            padding: [50, 50, 50, 50],
+                            maxZoom: 18
+                        });
+                    }
+                }
+            });
+        } else if (type === 'kml') {
+            console.log(`[${this.layerId}] Loading KML from: ${url}`);
+            
+            this.vectorLayer = new ol.layer.Vector({
+                source: new ol.source.Vector({
+                    url: url,
+                    format: new ol.format.KML({
+                        extractStyles: false,
+                        showPointNames: false
+                    })
+                }),
+                style: styleFunction,
+                zIndex: 1,
+                updateWhileAnimating: false,
+                updateWhileInteracting: false,
+                renderBuffer: 50,
+                declutter: false,
+                // 줌 범위 설정
+                minZoom: zoomRange ? zoomRange.min : undefined,
+                maxZoom: zoomRange ? zoomRange.max : undefined
+            });
+
+            this.olMap.addLayer(this.vectorLayer);
+            const zoomInfo = zoomRange ? ` (zoom ${zoomRange.min}-${zoomRange.max})` : '';
+            console.log(`[${this.layerId}] KML Vector layer initialized${zoomInfo}`);
+            
+            // KML 로드 완료 이벤트 처리
+            const source = this.vectorLayer.getSource();
+            source.once('change', () => {
+                if (source.getState() === 'ready') {
+                    const features = source.getFeatures();
+                    console.log(`[${this.layerId}] KML loaded: ${features.length} features`);
+                    
+                    if (features.length > 0 && !zoomRange) {
+                        const extent = source.getExtent();
+                        this.olMap.getView().fit(extent, {
+                            padding: [50, 50, 50, 50],
+                            maxZoom: 18
+                        });
+                    }
+                }
+            });
+        }
+    }
+
+    clear() {
+        if (this.vectorLayer) {
+            this.olMap.removeLayer(this.vectorLayer);
+            this.vectorLayer = null;
+            console.log(`[${this.layerId}] Layer cleared`);
+        }
+    }
+}
+
+// ---- 통합 멀티 레이어 관리자 (OpenLayers) ----
+export class OLMultiLayerManager {
+    constructor(olMap) {
+        this.olMap = olMap;
+        this.layerMap = new Map();
+        this.pmtilesInstances = new Map();
+        
+        console.log('OLMultiLayerManager initialized');
+    }
+
+    async toggleLayer(layerId, format) {
+        const key = `${format}_${layerId}`;
+        
+        if (this.layerMap.has(key)) {
+            // 레이어 제거
+            // PMTiles 제거 시 연결된 detail GeoJSON도 함께 제거
+            
+            const layer = this.layerMap.get(key);
+            layer.clear();
+            this.layerMap.delete(key);
+            
+            if (this.pmtilesInstances.has(key)) {
+                this.pmtilesInstances.delete(key);
+            }
+            
+            console.log(`[${key}] Layer removed`);
+            return false;
+        } else {
+            // 레이어 추가 로직
+            if (format === 'pbf') {
+                const layer = new OLVectorLayer(this.olMap, key);
+                const templateUrl = `http://172.16.41.52:3003/vector_tile_pbf/${layerId}/{z}/{x}/{y}.pbf`;
+                await layer.setTileSource(templateUrl, 'pbf');
+                this.layerMap.set(key, layer);
+                
+            } else if (format === 'pmtiles') {
+                // console.log(`🚀 Creating hybrid PMTiles + GeoJSON layers for: ${layerId}`);
+                
+                // // 1. PMTiles 레이어 추가 (zoom 0-17만 표시)
+                // const pmtilesLayer = new OLVectorLayer(this.olMap, key);
+                // const pmtilesPath = `http://172.16.41.52:3003/vector_tile_pmtiles/${layerId}.pmtiles`;
+                // const pmtiles = new PMTiles(pmtilesPath);
+                // this.pmtilesInstances.set(key, pmtiles);
+                // await pmtilesLayer.setTileSource(pmtiles, 'pmtiles', { min: 0, max: 18.1 });
+                // this.layerMap.set(key, pmtilesLayer);
+                // console.log(`✅ [${key}] PMTiles layer added (zoom 0-17)`);
+                
+                // // 2. GeoJSON 레이어 추가 (zoom 18-24만 표시)
+                // const detailGeojsonKey = `geojson_detail_${layerId}`;
+                // const detailGeojsonLayer = new OLVectorLayer(this.olMap, detailGeojsonKey);
+                // const geojsonUrl = `http://172.16.41.52:3003/vector_tile_geojson/${layerId}.geojson`;
+                // await detailGeojsonLayer.setVectorSource(geojsonUrl, 'geojson', { min: 17.9, max: 24 });
+                // this.layerMap.set(detailGeojsonKey, detailGeojsonLayer);
+                // console.log(`✅ [${detailGeojsonKey}] Detail GeoJSON layer added (zoom 18-24)`);
+                
+                // console.log(`🎯 Hybrid layer setup complete. PMTiles will show at zoom 0-17, GeoJSON at zoom 18+`);
+
+                
+                const pmtilesLayer = new OLVectorLayer(this.olMap, key);
+
+                // const pmtilesPath = `http://172.16.41.52:3003/vector_tile_pmtiles/${layerId}.pmtiles`;
+                let pmtilesPath = `https://gsim-model.digitalarchive.work/pmtiles/vector/${layerId}.pmtiles`;
+                if (layerId == 'testbim') pmtilesPath = `https://gsim-model.digitalarchive.work/pmtiles/vector/dsdj2.pmtiles`;
+
+                // let mapName = layerId;
+                // if (layerId == 'testbim') mapName = 'dsdj2';
+                // let pmtilesPath = `https://gsim-model.digitalarchive.work/pmtiles/vector/${mapName}.pmtiles`;
+                
+                let checkUrlExistsResult = await checkUrlExists(pmtilesPath);
+                if (checkUrlExistsResult == true) {
+                    const pmtiles = new PMTiles(pmtilesPath);
+                    this.pmtilesInstances.set(key, pmtiles);
+                    await pmtilesLayer.setTileSource(pmtiles, 'pmtiles');
+                    this.layerMap.set(key, pmtilesLayer);
+                } else {
+                    let pmtilesFitBtn = document.querySelector('.map-container .control-btn-wrap .pmtiles-fit-btn');
+                    pmtilesFitBtn.style.display = 'none';
+                    return;
+                }
+            } else if (format === 'geojson') {
+                const layer = new OLVectorLayer(this.olMap, key);
+                const geojsonUrl = `http://172.16.41.52:3003/vector_tile_geojson/${layerId}.geojson`;
+                await layer.setVectorSource(geojsonUrl, 'geojson');
+                this.layerMap.set(key, layer);
+                
+            } else if (format === 'kml') {
+                const layer = new OLVectorLayer(this.olMap, key);
+                const kmlUrl = `http://172.16.41.52:3003/vector_tile_kml/${layerId}.kml`;
+                await layer.setVectorSource(kmlUrl, 'kml');
+                this.layerMap.set(key, layer);
+            }
+            
+            // console.log(`[${key}] Layer added`);
+            return true;
+        }
+    }
+
+    clearAll() {
+        this.layerMap.forEach(layer => layer.clear());
+        this.layerMap.clear();
+        this.pmtilesInstances.clear();
+        console.log('All OpenLayers layers cleared');
+    }
+
+    getActiveLayers() {
+        return Array.from(this.layerMap.keys());
+    }
+}
+
+// ---- 피처별 스타일 함수 ----
+function styleFunction(feature, resolution) {
+    const props = feature.getProperties();
+
+    const entityType = props?.EntityType;
+    let color = props.Color || '#ff0000';
+    const constWidth = props.constWidth || 0;
+    const ltscale = props.ltscale || 1.0;
+
+    // let dashPattern = props.dashPattern;
+    // if (dashPattern && typeof dashPattern === 'string') {
+    //     try {
+    //         // "[0.5,-0.25]" → [0.5, -0.25]
+    //         dashPattern = JSON.parse(dashPattern);
+    //     } catch (e) {
+    //         console.warn('dashPattern 파싱 실패:', dashPattern, e);
+    //         dashPattern = null;
+    //     }
+    // }
+    
+    // ⭐ constWidth에 따른 선 두께 결정
+    let strokeWidth = 1;  // 기본값
+    // if (constWidth === 0) {
+    //     strokeWidth = 1;
+    // } else if (constWidth === 1) {
+    //     strokeWidth = 5;
+    // } else {
+    //     // 향후 다른 값 대비
+    //     // strokeWidth = 2 + (constWidth * 2);
+    //     // strokeWidth = 1 + (constWidth * 5);
+    //     strokeWidth = constWidth * 5;
+    // }
+
+    // if (constWidth === 0) {
+    //     strokeWidth = 1;
+    // } else {
+    //     // 향후 다른 값 대비
+    //     // strokeWidth = 2 + (constWidth * 2);
+    //     // strokeWidth = 1 + (constWidth * 5);
+    //     strokeWidth = constWidth * 10;
+    // }
+
+    // if (constWidth === 0) {
+    //     strokeWidth = 1;
+    // } else if (constWidth > 0 && constWidth <= 1) {
+    //     strokeWidth = constWidth * 10;
+    // } else {
+    //     strokeWidth = constWidth * 5;
+    // }
+    
+    // if (constWidth === 0) {
+    //     strokeWidth = 1;
+    // } else {
+    //     console.log(constWidth);
+    //     strokeWidth = constWidth*2;
+    // }
+
+    // // ⭐ dashPattern을 OpenLayers lineDash로 변환
+    // let lineDash = null;
+    // if (dashPattern && Array.isArray(dashPattern) && dashPattern.length > 0) {
+    //     // const zoomFactor = Math.min(1 / resolution, 1.0);
+    //     const scaleFactor = 10;  // 조정 가능 (0.3 ~ 1.0 추천)
+    //     lineDash = dashPattern.map(value => 
+    //         Math.abs(value) * ltscale * scaleFactor
+    //     );
+    // }
+    
+    // 투명도 처리
+    const hexToRgba = (hex, alpha = 1) => {
+        if (!hex || hex.length < 7) return `rgba(255, 0, 0, ${alpha})`;
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    };
+    
+    const geomType = feature.getGeometry().getType();
+    if (entityType) {
+        if (entityType === 'TEXT_POLYGON' || entityType === 'LINETYPE_PATTERN_TEXT') {
+            return new ol.style.Style({
+                fill: new ol.style.Fill({
+                    color: hexToRgba(color, 1.0)
+                }),
+                zIndex: 40
+            });
+        } else if (entityType === 'LINETYPE_PATTERN_SHAPE') {
+            return new ol.style.Style({
+                fill: new ol.style.Fill({
+                    color: hexToRgba(color, 0.4)
+                }),
+                stroke: new ol.style.Stroke({
+                    color: hexToRgba(color, 1.0),
+                    width: strokeWidth,
+                    // lineDash: lineDash,
+                    lineCap: 'butt',
+                    lineJoin: 'miter'
+                }),
+                zIndex: 20
+            });
+        } else if (entityType === 'HATCH') {
+            return new ol.style.Style({
+                fill: new ol.style.Fill({
+                    color: hexToRgba(color, 0.4)
+                }),
+                stroke: new ol.style.Stroke({
+                    color: hexToRgba(color, 1.0),
+                    width: strokeWidth,
+                    // lineDash: lineDash,
+                    lineCap: 'butt',
+                    lineJoin: 'miter'
+                }),
+                zIndex: 10
+            });
+        } else if (entityType === 'SOLID_LINE_POLYGON' || entityType === 'DASHED_LINE_POLYGON') {
+            return new ol.style.Style({
+                fill: new ol.style.Fill({
+                    color: hexToRgba(color, 1)
+                }),
+                stroke: new ol.style.Stroke({
+                    color: hexToRgba(color, 1.0),
+                    width: strokeWidth,
+                    // lineDash: lineDash,
+                    lineCap: 'butt',
+                    lineJoin: 'miter'
+                }),
+                zIndex: 10
+            });
+        } else if (entityType === 'LINETYPE_PATTERN_SHAPE_LINE') {
+            return new ol.style.Style({
+                stroke: new ol.style.Stroke({
+                    color: hexToRgba(color, 1.0),
+                    width: strokeWidth,
+                    // lineDash: lineDash,
+                    lineCap: 'butt',
+                    lineJoin: 'miter'
+                }),
+                zIndex: 30
+            });
+        } else if (entityType === 'LWPOLYLINE' || entityType === 'LINE') {
+            return new ol.style.Style({
+                stroke: new ol.style.Stroke({
+                    color: hexToRgba(color, 1.0),
+                    width: strokeWidth,
+                    // lineDash: lineDash,
+                    lineCap: 'butt',
+                    lineJoin: 'miter'
+                }),
+                zIndex: 30
+            });
+        }
+    } else {
+        if (geomType === 'Polygon' || geomType === 'MultiPolygon') {
+            return new ol.style.Style({
+                fill: new ol.style.Fill({
+                    color: hexToRgba(color, 0.4)
+                }),
+                stroke: new ol.style.Stroke({
+                    color: hexToRgba(color, 1.0),
+                    width: strokeWidth,
+                    // lineDash: lineDash,
+                    lineCap: 'butt',
+                    lineJoin: 'miter'
+                }),
+                zIndex: 20
+            });
+        } else if (geomType === 'LineString' || geomType === 'MultiLineString') {
+            // let strokeWidth, color;
+            // if (props.DIVI == '주곡선') {
+            //     strokeWidth = 2;
+            //     color = '#cccccc';
+            // } else {
+            //     strokeWidth = 1;
+            //     color = '#777777';
+            // }
+            return new ol.style.Style({
+                stroke: new ol.style.Stroke({
+                    color: hexToRgba(color, 1.0),
+                    width: strokeWidth,
+                    // lineDash: lineDash,
+                    lineCap: 'butt',
+                    lineJoin: 'miter'
+                }),
+                zIndex: 30
+            });
+        } else if (geomType === 'Point' || geomType === 'MultiPoint') {
+            return new ol.style.Style({
+                image: new ol.style.Circle({
+                    radius: 4,
+                    fill: new ol.style.Fill({
+                        color: hexToRgba(color, 1.0)
+                    })
+                }),
+                zIndex: 30
+            });
+        }
+    }
+}
+
+// async function checkUrlExists(url) {
+//     try {
+//         const res = await fetch(url, { method: "HEAD" });
+
+//         if (res.ok) {
+//             return true; // 200~299 → 정상 URL
+//         }
+//         return false;  // 404, 403 등
+//     } catch (e) {
+//         return false;  // 네트워크 오류, CORS 오류 포함
+//     }
+// }
+
+async function checkUrlExists(url) {
+    try {
+        const res = await fetch(url, { method: "HEAD" });
+
+        // 200~299
+        return res.ok;
+    } catch (e) {
+        // 여기서 swallow(삼키기)
+        return false;
+    }
+}

views/main/jsm/archive/projectSetting.js

@@ -0,0 +1,710 @@
+import { typeStep2Kor } from '../main.js';
+
+let projectTypeBtn;
+let projectTypeCapsule;
+let projectTypeList = null; 
+let projectStepList = null; 
+let mainLayerState = null; // 메인 레이어 상태
+
+// 프로젝트 설정 저장 버튼 클릭 이벤트 
+document.getElementById('project-save-btn').addEventListener('click', async () => {
+    const projectSaveBtn = document.getElementById('project-save-btn'); 
+    const projectStepBtn = document.getElementById('project-step-btn');
+    const projectNameInput = document.getElementById('project-name-input');
+
+        if (projectSaveBtn.textContent === '저장') {
+            // type 
+            let typeVal = projectTypeBtn.children[0].textContent;
+            let typeValResult = stepTypeEng(typeVal);
+
+            // step
+            let stepVal = projectStepBtn.children[0].textContent;
+            let stepValResult = stepTypeEng(stepVal);
+
+            // project_name
+            let nameVal = projectNameInput.value;
+
+            let projectInfoParams = {
+                projectId : vars.project.project_id, 
+                category : vars.project.category, 
+                project_type : typeValResult, 
+                step : stepValResult,
+                project_nm : nameVal,
+            }
+            
+            let res = await axios.post('/common/updateProjectInfo', {params: projectInfoParams});
+            if (res.data.message == 'updateProjectInfo_success') {
+                // 수정된 프로젝트 정보 가져와서 전역변수에 저장
+                let projectRes = await axios.get('/common/getProject');
+                for (let project of projectRes.data.data) {
+                    vars.allProject[project.project_id] = project;
+                }
+                vars.project = vars.allProject[vars.project_id];
+
+                setReadOnlyMode(vars.project.category);
+            }
+        }
+});
+
+// 프로젝트 설정 취소 클릭 이벤트 
+document.querySelector('#project-cancel-btn').addEventListener('click', () => {
+    const projectSaveBtn = document.getElementById('project-save-btn');
+    if (projectSaveBtn.textContent === '저장') projectSaveBtn.textContent = '수정';
+
+    const list = document.querySelector('#project-type-wrap-overseas .project-type__list');
+    list.classList.remove('--project-list__open');
+    
+    setReadOnlyMode(vars.project.category);
+});
+
+export function initProjectSetting(param) {
+    const projectSaveBtn = document.getElementById('project-save-btn');
+    const projectCancelBtn = document.getElementById('project-cancel-btn');
+    const projectLocationBtn = document.getElementById('project-location-btn');
+    let projectTypeWrap = document.getElementById('project-type-wrap');
+    let projectTypeWrapOverseas = document.getElementById('project-type-wrap-overseas');
+
+    if (param === undefined) {
+        // overseas, bim 아닌 경우
+        projectTypeWrap.style.display = 'none';
+        projectTypeWrapOverseas.style.display = 'none';
+
+        projectTypeBtn = document.getElementById('project-type-btn');
+        projectTypeCapsule = document.getElementById('project-type-capsule');
+
+    } else {
+        if (param === 'overseas') {
+            // overseas
+            projectTypeWrap.style.display = 'none';
+            projectTypeWrapOverseas.style.display = 'flex';
+
+            projectTypeBtn = document.getElementById('project-type-btn-overseas');
+            projectTypeCapsule = document.getElementById('project-type-capsule-overseas');
+
+        } else {
+            //bim
+            projectTypeWrap.style.display = 'flex';
+            projectTypeWrapOverseas.style.display = 'none';
+
+            projectTypeBtn = document.getElementById('project-type-btn');
+            projectTypeCapsule = document.getElementById('project-type-capsule');
+        }
+
+        adjustSelectBoxWidth(projectTypeBtn);      
+    }
+    
+    setReadOnlyMode(param);
+
+    // 권한이 있는 경우 저장 버튼 이벤트 추가
+    if (vars.permission.checkPermission('change-project-btn')) {
+        // 기존 리스너 제거 후 추가 (중복 방지)
+        projectSaveBtn.textContent = '수정';
+        projectSaveBtn.removeEventListener('click', handleProjectSaveClick);
+        projectSaveBtn.addEventListener('click', () => handleProjectSaveClick(param));
+    } else {
+        // 권한 없으면 버튼 제거
+        projectSaveBtn.remove();
+        projectCancelBtn.remove();
+        projectLocationBtn.remove();
+    }
+
+    // 이벤트 리스너 초기화
+    initEventListeners();
+}
+
+function handleProjectSaveClick(param) {
+    const projectSaveBtn = document.getElementById('project-save-btn');
+    
+    if (projectSaveBtn.textContent === '저장') {
+        // 저장 버튼 클릭 : 읽기 모드로 전환 
+        projectSaveBtn.textContent = '수정';
+        setReadOnlyMode(param);
+    } else {
+        // 수정 버튼 클릭: 편집 모드로 전환
+        projectSaveBtn.textContent = '저장';
+        setEditMode(param);
+    }
+}
+
+
+// 읽기 모드 : 관리자 이상이면서 읽기모드 or 일반유저
+function setReadOnlyMode(param) {
+
+    const projectStepBtn = document.getElementById('project-step-btn');
+    const projectStepCapsule = document.getElementById('project-step-capsule');
+    const projectNameView = document.getElementById('project-name-view');
+    const projectNameInput = document.getElementById('project-name-input');
+    const projectSaveBtn = document.getElementById('project-save-btn');
+    const projectCancelBtn = document.getElementById('project-cancel-btn');
+
+    // step - 버튼 숨기고 캡슐 표시
+    projectStepBtn.style.display = 'none';
+    projectStepCapsule.style.display = 'flex';
+    projectStepCapsule.innerHTML = typeStep2Kor(vars.project.step);
+    projectStepCapsule.className = `project-step-capsule --step-capsule__${vars.project.step}`;
+
+    // type - 버튼 숨기고 캡슐 표시
+    projectTypeBtn.style.display = 'none';
+    projectTypeCapsule.style.display = 'flex';
+    projectTypeCapsule.innerHTML = typeStep2Kor(vars.project.project_type);
+
+    // name - input 숨기고 view 표시
+    projectNameInput.style.display = 'none';
+    projectNameView.style.display = 'flex';
+    projectNameView.innerHTML = vars.project.short_nm;
+
+    if(param !== 'overseas' && param !== 'bimproject') {
+        projectStepCapsule.style.display = 'none';
+        projectTypeCapsule.style.display = 'none';
+        
+        projectNameView.innerHTML = vars.project.project_nm;
+        projectSaveBtn.style.display = 'none';
+        projectCancelBtn.style.display = 'none';
+    }
+
+    // location - 관리자이상:버튼 o , 관리자이하: 버튼x
+    if (vars.permission.checkPermission('change-project-btn')) {
+        document.querySelector('#project-location-btn').style.display = 'flex';
+    }
+    const lat = document.querySelector('.archive-modal .wrap .modal-wrap .modal-body .project-setting-wrap .project-location-wrap .project-location-lat');
+    lat.innerHTML =`<div class="project-location-lat">위도 ${vars.project.lat}</div>`
+    const lon = document.querySelector('.archive-modal .wrap .modal-wrap .modal-body .project-setting-wrap .project-location-wrap .project-location-lon');
+    lon.innerHTML =`<div class="project-location-lon">경도 ${vars.project.lon}</div>`
+}
+
+// 편집모드 : 관리자 이상이면서 편집모드
+function setEditMode(param) {
+
+    const projectStepBtn = document.getElementById('project-step-btn');
+    const projectStepCapsule = document.getElementById('project-step-capsule');
+    const projectNameView = document.getElementById('project-name-view');
+    const projectNameInput = document.getElementById('project-name-input');
+    
+    // step - 캡슐 숨기고 버튼 표시
+    projectStepCapsule.style.display = 'none';
+    projectStepBtn.style.display = 'flex';
+    projectStepBtn.innerHTML = `
+        <h5 class="project-step__label --step__${vars.project.step}">${typeStep2Kor(vars.project.step)}</h5>
+        <i class="project-step__icon"></i>
+    `;
+
+    // type - 캡슐 숨기고 버튼 표시
+    projectTypeCapsule.style.display = 'none';
+    projectTypeBtn.style.display = 'flex';
+    projectTypeBtn.innerHTML = `
+        <h5 class="project-type__label --type__${vars.project.project_type}">${typeStep2Kor(vars.project.project_type)}</h5>
+        <i class="project-type__icon"></i>
+    `;
+    
+    // name - view 숨기고 input 표시
+    projectNameView.style.display = 'none';
+    projectNameInput.style.display = 'flex';
+    projectNameInput.value = projectNameView.textContent;
+
+    if(param !== 'overseas' && param !== 'bimproject') {
+        projectStepBtn.style.display = 'none';
+        projectTypeBtn.style.display = 'none';
+    }
+
+    // location - 수정 버튼, 위경도 위치 표시 
+    document.querySelector('#project-location-btn').style.display = 'flex';
+    const lat = document.querySelector('.archive-modal .wrap .modal-wrap .modal-body .project-setting-wrap .project-location-wrap .project-location-lat');
+    lat.innerHTML =`<div class="project-location-lat">위도 ${vars.project.lat}</div>`
+    const lon = document.querySelector('.archive-modal .wrap .modal-wrap .modal-body .project-setting-wrap .project-location-wrap .project-location-lon');
+    lon.innerHTML =`<div class="project-location-lon">경도 ${vars.project.lon}</div>`
+}
+
+// 접속 인원 모달 - 프로젝트 type, step 변경 이벤트
+function initEventListeners() {
+    // project-type-btn 클릭 이벤트
+    if (projectTypeBtn) {
+        // 기존 이벤트 제거 후 추가 (중복 방지)
+        const newBtn = projectTypeBtn.cloneNode(true);
+        projectTypeBtn.parentNode.replaceChild(newBtn, projectTypeBtn);
+        projectTypeBtn = newBtn;
+        
+        projectTypeList = projectTypeBtn.parentElement.querySelector('.project-type__list');
+        
+        projectTypeBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            projectTypeList?.classList.toggle('--project-list__open');
+        });
+    }
+
+    // project-step-btn 클릭 이벤트
+    const projectStepBtn = document.getElementById('project-step-btn');
+    if (projectStepBtn) {
+        projectStepList = document.querySelector('.project-step__list');
+        
+        projectStepBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            projectStepList?.classList.toggle('--project-list__open');
+        });
+    }
+
+    // modal-wrap 클릭 이벤트
+    if (projectTypeBtn) {
+        const modalWrap = projectTypeBtn.closest('.modal-wrap');
+        if (modalWrap) {
+            modalWrap.addEventListener('click', (e) => {
+                projectTypeList?.classList.remove('--project-list__open');
+                projectStepList?.classList.remove('--project-list__open');
+            });
+        }
+    }
+
+    // project-type__list_item 클릭 이벤트
+    if (projectTypeList) {
+        projectTypeList.querySelectorAll('.project-type__list_item').forEach(item => {
+            item.addEventListener('click', async(e) => {
+                e.stopPropagation();
+                projectTypeList.classList.remove('--project-list__open');
+                let type = e.target.classList[1].split('__')[1];
+                let kor = e.target.textContent;
+                projectTypeBtn.innerHTML = `
+                    <h5 class="project-type__label --type__${type}">${kor}</h5>
+                    <i class="project-type__icon"></i>`;
+            });
+        });
+    }
+
+    // project-step__list_item 클릭 이벤트
+    if (projectStepList) {
+        projectStepList.querySelectorAll('.project-step__list_item').forEach(item => {
+            item.addEventListener('click', async(e) => {
+                e.stopPropagation();
+                projectStepList.classList.remove('--project-list__open');
+                let step = e.target.classList[1].split('__')[1];
+                let btn = document.getElementById('project-step-btn');
+                let kor = typeStep2Kor(step);
+                if (btn) {
+                    btn.innerHTML = `
+                        <h5 class="project-step__label --step__${step}">${kor}</h5>
+                        <i class="project-step__icon"></i>`;
+                }
+            });
+        });
+    }
+}
+
+function stepTypeEng(param) {
+    let result = param;
+    switch(param) {
+        case '완료':
+            result = 'done';
+            break;
+        case '진행':
+            result = 'active'; 
+            break;
+        case '중지':
+            result = 'stop';
+            break;
+        case '대기':
+            result = 'wait';
+            break;
+
+        case '시공':
+            result = 'construction';
+            break;
+        case '설계':
+            result = 'design'; 
+            break;
+        case '제안':
+            result = 'surgest';
+            break;
+        case '연구':
+            result = 'research'; 
+            break;
+        case '지원':
+            result = 'support';
+            break;
+        case '센터':
+            result = 'center';
+            break;
+        case '측량':
+            result = 'survey';
+            break;
+
+        case 'MP (기본계획)':
+            result = 'MP'; 
+            break;
+        case 'DD (실시설계)':
+            result = 'DD'; 
+            break;
+        case 'FS (타당성조사)':
+            result = 'FS'; 
+            break;
+        case 'PD (기본설계)':
+            result = 'PD'; 
+            break;
+        case 'DS (설계감리)':
+            result = 'DS'; 
+            break;
+        case 'CS (시공감리)':
+            result = 'CS';
+            break;
+        case 'PMC (실시설계)':
+            result = 'PMC'; 
+            break;
+        case 'IDC (타당성조사)':
+            result = 'IDC'; 
+            break;
+        case 'DR (설계검토)':
+            result = 'DR';
+            break;
+        case 'BD (수주영업)':
+            result = 'BD';
+            break;
+        case 'ETC (기타)':
+            result = 'ETC';
+            break;
+
+        default:
+            result = '없음';
+            break;
+    }
+    return result;
+}
+
+// 셀렉트박스 크기 조정 
+function adjustSelectBoxWidth(button) {
+    if (!button) return;
+
+    const list = button.parentElement.querySelector('.project-type__list');
+    if (!list) return;
+
+    // canvas를 사용한 텍스트 너비 측정
+    const canvas = document.createElement('canvas'); 
+    const context = canvas.getContext('2d');
+
+    // 현재 폰트 스타일 가져오기 
+    const computedStyle = window.getComputedStyle(button); 
+    context.font  =`${computedStyle.fontSize} ${computedStyle.fontFamily}`; 
+
+    let maxWidth = 0; 
+    const items = list.querySelectorAll('.project-type__list_item'); 
+    
+    items.forEach(item => {
+        const text = item.textContent.trim();
+        const metrics = context.measureText(text);
+        const width = metrics.width;
+
+        if (width > maxWidth) {
+            maxWidth = width;
+        }
+    });
+
+    // 적용
+    if (maxWidth > 0) {
+        const finalWidth = maxWidth + 25; 
+
+        // 버튼에 적용
+        button.style.minWidth = `${finalWidth}px`;
+        button.style.textAlign = 'center'; // 가운데 정렬
+        button.style.justifyContent = 'center'; // flex인 경우
+        button.style.display = 'flex'; // flex 적용
+        button.style.alignItems = 'center'; // 세로 가운데 정렬
+
+        // 캡슐에 적용
+        const capsule = button.parentElement.querySelector('.--type-capsule');
+        if (capsule) {
+            capsule.style.minWidth = `${finalWidth}px`; 
+            capsule.style.textAlign = 'center'; // 가운데 정렬
+            capsule.style.justifyContent = 'center'; // flex인 경우
+            capsule.style.display = 'flex'; // flex 적용
+            capsule.style.alignItems = 'center'; // 세로 가운데 정렬
+            
+        }
+
+        // 리스트에 적용
+        list.style.minWidth = `${finalWidth}px`; 
+
+        // 리스트 글씨 정렬
+        items.forEach(item => {
+            item.style.paddingLeft = '5px'; 
+            item.style.paddingRight = '5px'; 
+        })
+
+    }
+}
+
+// 프로젝트 위치 수정 버튼 클릭 이벤트 
+document.getElementById('project-location-btn').addEventListener('click', () => {
+    document.querySelector('.project-location-modal').style.display = 'flex';
+    openLocationModal();
+})
+
+// 지도 모달창 닫기 버튼, 취소 버튼 클릭 이벤트 
+document.querySelector('.project-location-modal .modal-wrap .modal-head .close').addEventListener('click', () => {
+    closeLocationModal();
+});
+document.querySelector('.project-location-modal .modal-wrap .modal-foot .button').addEventListener('click', () => {
+    closeLocationModal();
+});
+
+// 기본 지도 모달창 버튼 클릭 이벤트 
+document.querySelector('.project-location-modal .modal-wrap .modal-body .map-wrap .xs-button').addEventListener('click', () => {
+    document.querySelector('.project-location-modal .modal-wrap .modal-body .map-wrap .base-map').style.display = 'flex'; 
+});
+// 기본 지도 모달창 닫기 버튼 클릭 이벤트 
+document.querySelector('.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .text-wrap .close').addEventListener('click', () => {
+    document.querySelector('.project-location-modal .modal-wrap .modal-body .map-wrap .base-map').style.display = 'none';
+});
+
+// 지도 모달창 저장 버튼 클릭 이벤트
+document.querySelector('.project-location-modal .modal-wrap .modal-foot .primary-button').addEventListener('click', async() => {
+    if(!ol.locationMap || !ol.locationMap.clickCoord) {
+        alert('위치를 선택해주세요');
+        return;
+    }
+
+    let updateLocationParams = {
+        projectId: vars.project.project_id, 
+        category: vars.project.category, 
+        project_nm: vars.project.project_nm, 
+        lon: ol.locationMap.clickCoord.lon, 
+        lat: ol.locationMap.clickCoord.lat
+    };
+
+    let res = await axios.post('/common/updateLocationInfo', {params: updateLocationParams}); 
+    if (res.data.message == 'updateLocationInfo_success') {
+        vars.project.lon = res.data.data.lon; 
+        vars.project.lat = res.data.data.lat;
+
+        closeLocationModal();
+
+        const lat = document.querySelector('.archive-modal .wrap .modal-wrap .modal-body .project-setting-wrap .project-location-wrap .project-location-lat');
+        lat.innerHTML = `<div class="project-location-lat">위도 ${res.data.data.lat}</div>`; 
+
+        const lon = document.querySelector('.archive-modal .wrap .modal-wrap .modal-body .project-setting-wrap .project-location-wrap .project-location-lon');
+        lon.innerHTML = `<div class="project-location-lon">경도 ${res.data.data.lon}</div>`;
+    }
+})
+
+// 프로젝트 위치 수정
+function openLocationModal() {
+    // 메인 지도 레이어 상태 백업
+    if (vars.roadLayer && vars.satelliteLayer && vars.hybridLayer) {
+        mainLayerState = {
+            road: vars.roadLayer.getVisible(), 
+            satellite: vars.satelliteLayer.getVisible(), 
+            hybrid: vars.hybridLayer.getVisible()
+        };
+    }
+
+    initLocationMap();
+
+    // 기존  좌표가 있을 때만 블루 마커 생성
+    if (vars.project.lon && vars.project.lat) {
+        if (!ol.locationMap.blueMarkerOverlay) {
+            // 블루 마커 (저장된 위치)
+            let blueMarker = document.createElement('div');
+            blueMarker.style.width = '1rem';
+            blueMarker.style.height = '1rem'; 
+            blueMarker.style.backgroundColor = '#0D8DF2'; 
+            blueMarker.style.borderRadius = '50%'; 
+            blueMarker.style.border = '0.1875rem solid #fff'; 
+            blueMarker.style.boxShadow = '0 0.25rem 0.5rem rgba(0, 0, 0, 0.05)';
+
+            ol.locationMap.blueMarkerOverlay = new ol.Overlay({
+                element: blueMarker, 
+                positioning: 'center-center', 
+                stopEvent: false, 
+                zIndex: 9998
+            });
+            ol.locationMap.addOverlay(ol.locationMap.blueMarkerOverlay);
+        }
+
+        if (!ol.locationMap.blueLabelOverlay) {
+            let blueLabel = document.createElement('div');
+
+            ol.locationMap.blueLabelOverlay = new ol.Overlay({
+                element: blueLabel, 
+                positioning: 'bottom-center', 
+                offset: [0, -10],
+                stopEvent: false, 
+                zIndex: 9998,
+            });
+            ol.locationMap.addOverlay(ol.locationMap.blueLabelOverlay);
+        }
+
+        const position3857 = ol.proj.fromLonLat([vars.project.lon, vars.project.lat]);
+
+        ol.locationMap.blueMarkerOverlay.setPosition(position3857);
+        ol.locationMap.blueLabelOverlay.setPosition(position3857); 
+        ol.locationMap.blueLabelOverlay.element.innerHTML = `
+            <div style="background: #fff; color: #111; padding: 0.25rem 0.5rem; border-radius: 0.25rem; border: 0.1875rem solid #0D8DF2; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem;">
+                저장된 위치 <br>
+                경도 : ${vars.project.lon}<br>
+                위도 : ${vars.project.lat}
+            </div>
+        `;
+    }
+}
+
+// 지도 초기화 
+function initLocationMap() {
+    // 위치 모달 지도만 삭제
+    if (ol.locationMap) {
+        ol.locationMap.getOverlays()?.clear();
+        ol.locationMap.getLayers()?.forEach(l => {
+            const src = l.getSource?.();
+            if (src && src instanceof ol.source.Vector) src.clear(true);
+        });
+        ol.locationMap.getLayers()?.clear();
+        if (typeof ol.locationMap.dispose === 'function') {
+            ol.locationMap.dispose();
+        }
+        ol.locationMap = null;
+    }
+
+    // 위치 설정 모달용 임시 레이어 생성
+    const tempRoadLayer = new ol.layer.Tile({
+        source: new ol.source.XYZ({
+            url: vars.roadLayer.getSource().getUrls()[0]
+        }),
+        visible: mainLayerState?.road ?? true
+    });
+    const tempSatelliteLayer = new ol.layer.Tile({
+        source: new ol.source.XYZ({
+            url: vars.satelliteLayer.getSource().getUrls()[0]
+        }),
+        visible: mainLayerState?.satellite ?? false
+    });
+    const tempHybridLayer = new ol.layer.Tile({
+        source: new ol.source.XYZ({
+            url: vars.hybridLayer.getSource().getUrls()[0]
+        }),
+        visible: mainLayerState?.hybrid ?? false
+    });
+
+    ol.locationMap = new ol.Map({
+        target: 'map-location', 
+        layers: [tempRoadLayer, tempSatelliteLayer, tempHybridLayer],
+        view: new ol.View({
+            projection: 'EPSG:3857', 
+            center: ol.proj.fromLonLat([127.8, 35.9]), 
+            zoom: 7, 
+            constrainResolution: true, 
+            smoothResolutionConstraint: true
+        })
+    });
+
+    // 임시 레이어 참조 저장
+    ol.locationMap.tempRoadLayer = tempRoadLayer;
+    ol.locationMap.tempSatelliteLayer = tempSatelliteLayer; 
+    ol.locationMap.tempHybridLayer = tempHybridLayer;
+
+    // proj4 설정
+    proj4.defs([
+        ['EPSG:5185', '+proj=tmerc +lat_0=38 +lon_0=125 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs'],
+        ['EPSG:5186', '+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs'],
+        ['EPSG:5187', '+proj=tmerc +lat_0=38 +lon_0=129 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs'],
+        ['EPSG:5188', '+proj=tmerc +lat_0=38 +lon_0=131 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs'],
+        ['EPSG:4978', '+proj=geocent +datum=WGS84 +units=m +no_defs'],
+        ['EPSG:4326', '+proj=longlat +datum=WGS84 +no_defs'],
+    ]);
+    ol.proj.proj4.register(proj4);
+
+    // 레드 마커 생성
+    let marker = document.createElement('div');
+    marker.classList.add('marker');
+    marker.style.width = '1rem'; 
+    marker.style.height = '1rem'; 
+    marker.style.backgroundColor = '#F21D0D'; 
+    marker.style.borderRadius = '50%'; 
+    marker.style.border = '0.1875rem solid #fff'; 
+    marker.style.boxShadow = '0 0.25rem 0.5rem rgba(0, 0, 0, 0.05)';
+
+    ol.locationMap.redMarkerOverlay = new ol.Overlay({
+        element: marker, 
+        positioning: 'center-center', 
+        stopEvent: false, 
+        zIndex: 9999
+    });
+    ol.locationMap.addOverlay(ol.locationMap.redMarkerOverlay);
+
+    let label = document.createElement('div'); 
+    
+    ol.locationMap.redLabelOverlay = new ol.Overlay({
+        element: label, 
+        positioning: 'bottom-center', 
+        offset: [0, -10],
+        stopEvent: false, 
+        zIndex: 9999, 
+    });
+    ol.locationMap.addOverlay(ol.locationMap.redLabelOverlay);
+
+    // 클릭 이벤트 
+    ol.locationMap.on('click', function(e) {
+        const lonLat = ol.proj.toLonLat(e.coordinate); 
+        const lon = lonLat[0].toFixed(6); 
+        const lat = lonLat[1].toFixed(6);
+
+        ol.locationMap.clickCoord = {
+            lon: Number(lon), 
+            lat: Number(lat), 
+            coordinate3857: e.coordinate
+        };
+
+        ol.locationMap.redMarkerOverlay.setPosition(e.coordinate); 
+
+        ol.locationMap.redLabelOverlay.element.innerHTML = `
+            <div style="background: #fff; color: #111; padding: 0.25rem 0.5rem; border-radius: 0.25rem; border: 0.1875rem solid #F21D0D; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05); font-size: 0.875rem; font-weight:500; line-height: 1.25rem; letter-spacing: -0.0175rem;">
+                선택한 위치 <br>
+                경도 : ${lon} <br>
+                위도 : ${lat}
+            </div>
+        `;
+
+        ol.locationMap.redLabelOverlay.setPosition(e.coordinate);
+    }); 
+}
+
+// 기본지도 타입 라디오 버튼 클릭 이벤트 
+document.querySelectorAll('.project-location-modal input[name="location-base-map"]').forEach(radio => {
+    radio.addEventListener('change', function() {
+        if (!ol.locationMap) return;
+
+        const type = this.value;
+
+        // 위치 설정 모달의 임시 레이어만 변경
+        ol.locationMap.tempRoadLayer.setVisible(false);
+        ol.locationMap.tempSatelliteLayer.setVisible(false);
+        ol.locationMap.tempHybridLayer.setVisible(false);
+
+        switch(type) {
+            case 'road':
+                ol.locationMap.tempRoadLayer.setVisible(true);
+                break;
+            case 'hybrid':
+                ol.locationMap.tempHybridLayer.setVisible(true);
+                break;
+            case 'satellite':
+                ol.locationMap.tempSatelliteLayer.setVisible(true);
+                break;
+        }
+    });
+});
+
+// 모달 닫기 함수
+function closeLocationModal() {
+    document.querySelector('.project-location-modal').style.display = 'none'; 
+
+    if (ol.locationMap) {
+        ol.locationMap.setTarget(null);
+        if (typeof ol.locationMap.dispose === 'function') {
+            ol.locationMap.dispose();
+        }
+        ol.locationMap = null;
+    }
+
+    // 메인 지도 레이어 상태 복원
+    if (mainLayerState) {
+        vars.roadLayer.setVisible(mainLayerState.road);
+        vars.satelliteLayer.setVisible(mainLayerState.satellite);
+        vars.hybridLayer.setVisible(mainLayerState.hybrid);
+        mainLayerState = null;
+    }
+}
+

views/main/jsm/archive/userPermission.js

@@ -0,0 +1,663 @@
+import { vars } from './variable.js';
+
+//설정창 close 25-08-18 권한 설정 모달 사용 중에 모달이 꺼지는일이 많아 주석처리로 꺼지는 기능을 막음
+// document.querySelector('.permission-modal').addEventListener('click', (e) => {
+//     if (e.target.className.includes('permission-modal')) document.querySelector('.permission-modal').style.display = 'none';
+// })
+document.querySelector('.permission-modal img[alt="닫기"]').addEventListener('click', () => {
+    // 이름 검색 결과창 초기화
+    searchResultInit();
+    document.querySelector('.permission-modal').style.display = 'none';
+})
+
+//설정창 저장
+document.getElementById('permission-submit').addEventListener('click', () => {
+    if(vars.permissionList.changed && Object.keys(vars.permissionList.changed).length > 0){
+        if (confirm(`${Object.keys(vars.permissionList.changed).length}개의 변경사항을 저장하시겠습니까?`)) {
+            upsertAuthList();
+        }
+    } else {
+        searchResultInit();
+        document.querySelector('.permission-modal').style.display = 'none';
+    }
+    
+});
+
+//설정창 취소
+document.getElementById('permission-cancel').addEventListener('click', () => {
+    if (vars.permissionList.changed && Object.keys(vars.permissionList.changed).length > 0) {
+        if (!confirm(`${Object.keys(vars.permissionList.changed).length}개의 변경사항을 저장하지 않고 취소하시겠습니까?`)) {
+            return;
+        }
+    }
+    // 이름 검색 결과창 초기화
+    searchResultInit();
+    document.querySelector('.permission-modal').style.display = 'none';
+});
+
+//tab 변경
+document.querySelectorAll('.permission-modal input[type="radio"]').forEach(ele => {
+    ele.addEventListener('click', (e) => {
+        document.querySelector('.permission-modal .modal-wrap .left .search-result-container').style.display = 'none';
+        document.querySelector('.permission-modal .modal-wrap .left ul').style.display = 'block';
+        
+        let id = e.target.id;
+        let tab = document.querySelector('.permission-modal .select-list-' + id);
+
+        drawUserPermissionList(vars.permissionList, id);
+
+        [...tab.parentElement.children].forEach(element => {
+            if (element.classList.contains('select-list')) element.style.display = 'none';
+        });
+        tab.style.display = 'block';
+    })
+});
+
+export async function getList() {
+    let param = {
+        // project_id : JSON.parse(localStorage.getItem('data')).id
+        project_id: vars.project_id
+    }
+    let res = await axios.get('/auth/getMemberList', { params: param });
+    return res.data;
+}
+
+// 유저권한설정창
+export async function drawUserPermissionList(list, rightId = 'sub-master') {
+    document.querySelector('.permission-modal .left ul').innerHTML = '';
+    document.querySelectorAll(`.permission-modal .select-list ul`).forEach(ul => ul.innerHTML = '');
+
+    // DB에 저장횐 company-list가 6개 외에 더 있어서 회사 리스트 고정
+    const companyList = [ '한맥기술', '삼안', '장헌산업', `(주)장헌` , '피티씨' , '한라산업개발', '바론컨설턴트' , '기타'];
+    // 기존 권한을 가진 인원(key-value)들을 배열화
+    const permission = Object.values(list.changePermission);
+
+    try {
+        // changePermission에는 user_id - lev만 있기때문에 배열을 DB로 보내 유저 정보를 가져온다
+        const usersInfoRes = await axios.post('/auth/getPermissionUserInfo', {permission : permission});
+        const userInfoArr = usersInfoRes.data.result;
+        const rightUl = document.querySelector(`.permission-modal .select-list.select-list-${rightId} ul`);
+
+        userInfoArr.forEach(user => {
+            if (findPermission(user.user_id, permission) !== rightId) return;
+    
+            if (rightUl.querySelector(`#_${user.user_id}`)) return;
+            // 유저 리스트 DOM 생성
+            const userLi = drawUserList(user, rightId, permission, true);
+            rightUl.appendChild(userLi);
+            // 클릭 이벤트
+            bindUserLiClick(userLi, user, rightId, permission, true);
+        });
+        // 유저 수 체크
+        checkPermissionUserNum(rightId);
+    } catch (err) {
+        console.error('getPermissionUserInfo', err);
+    }
+
+    // 회사 리스트 생성
+    companyList.forEach(company => {
+        const companyTitle = drawCompanyTitle(company);
+        const companyToggleImg = companyTitle.querySelector('.company-toggle img');
+
+        // 회사 리스트 클릭시 부서명 생성
+        companyTitle.addEventListener('click', async () => {
+            let deptTitle = companyTitle.nextElementSibling;
+
+            // 부서명 최초 1회 DOM 생성 이후에 토글
+            if (!deptTitle || !deptTitle.classList.contains('dept-container')) {
+                companyToggleImg.src = '/main/img/permission/down.svg';
+                deptTitle = document.createElement('ul');
+                deptTitle.className = 'dept-container _scrollbar';
+                deptTitle.dataset.company = company;
+                companyTitle.insertAdjacentElement('afterend', deptTitle);
+
+                try {
+                    // 회사명을 통해 부서리스트 조회
+                    const deptRes = await axios.get('/auth/getDeptList', { params: { company } });
+                    if (deptRes.data.message === '200') {
+                        const deptList = deptRes.data.result;
+
+                        // 한글 정렬
+                        deptList.sort((a, b) => {
+                            if (!a.dept || !b.dept) return 0;
+                            return a.dept.localeCompare(b.dept, 'ko');
+                        });
+                            
+                        // 부서 리스트 생성
+                        for (const depts of deptList) {
+                            if (!depts.dept) continue;
+
+                            const deptLi = drawDeptTitle(company, depts.dept);
+                            const deptToggleImg = deptLi.querySelector('.dept-toggle img');
+                            const deptCheckBox = deptLi.querySelector('input[type="checkbox"]');
+                            const deptToggelWrap = deptLi.querySelector('.toggle-wrap');
+
+                            // 부서 개별 체크 박스 change 이벤트 
+                            deptCheckBox.addEventListener('change', async (e) => {
+                                const isChecked = deptCheckBox.checked;
+                                const rightUl = document.querySelector(`.permission-modal .right .select-list.select-list-${rightId} ul`);
+                                try {
+                                    // 회사명 - 부서를 통해 부서의 유저를 전부 조회
+                                    const userRes = await axios.get('/auth/getUserList', { params: { company, dept: depts.dept }});
+
+                                    const userList = userRes.data.result;
+                                    // 부서 전체 선택시에 이미 권한이 있어 권한을 부여할 수 없는 인원 수를 체크하는 배열
+                                    const diffGroupArr = [];
+
+                                    // 유저 리스트 생성
+                                    for (let user of userList) {
+                                        const existingRight = rightUl.querySelector(`#_${user.user_id}`);
+                                        const existingLeft = document.querySelector(`.permission-modal .left ul li#_${user.user_id} .user-wrap`);
+                                        const lev = findPermission(user.user_id, Object.values(vars.permissionList.changePermission));
+                                        // 전체 선택시
+                                        if (isChecked) {
+                                            // 이미 오른쪽(권한이 있던)에 있는 인원과 권한이 다른 인원은 continue로 건너뛰기
+                                            if (existingRight) continue;
+                                            if (lev && lev !== rightId){
+                                                diffGroupArr.push(user);
+                                                continue;
+                                            }
+
+                                            // 부관리자 10명 제한
+                                            if (rightId === 'sub-master' && rightUl.children.length >= 10) {
+                                                updateCheckboxState(user.company, user.dept);
+                                                return alert('부관리자는 최대 10명까지 선택 가능합니다.');
+                                            }
+                                            // 전체선택으로 권한 변경된 유저 권한 변경
+                                            changePermission(user.user_id, rightId, undefined);
+                                            // 오른쪽 리스트에 생성
+                                            const copy = drawUserList(user, rightId, permission, true);
+                                            rightUl.appendChild(copy);
+                                            // 클릭이벤트 추카
+                                            bindUserLiClick(copy, user, rightId, permission, true);
+
+                                            // 왼쪽 유저리스트에 권한 뱃지 생성
+                                            if (existingLeft) {
+                                                const roleDiv = createRoleDiv(rightId);
+                                                existingLeft.insertAdjacentHTML('beforeend', roleDiv);
+                                                existingLeft.classList.add('selected_' + rightId);
+                                                existingLeft.style.display = 'flex';
+                                            }
+                                        } else {
+                                            // 전체 선택해제
+                                            if (existingRight) {
+                                                // 오른쪽 DOM 삭제와 권한 해제
+                                                existingRight.remove();
+                                                changePermission(user.user_id, undefined, rightId);
+                                            }
+                                            // 왼쪽 유저 리스트에 권한 뱃지 삭제
+                                            existingLeft?.querySelector(`.user-permission-${rightId}`)?.remove();
+                                            existingLeft?.classList.remove(`selected_${rightId}`);
+                                        }
+                                    }
+                                    // 체크 박스 상태 변화 감지
+                                    updateCheckboxState(company, depts.dept);
+                                    if (diffGroupArr.length > 0){
+                                        alert(`이미 권한을 가진 ${diffGroupArr.length}명은 ${{'sub-master' : '부관리자', 'security-worker' : '보안참여자', 'worker' : '일반참여자', 'viewer' : '참관자'}[rightId]} 권한을 부여할 수 없습니다.`);
+                                        deptCheckBox.checked = true;
+                                    }
+                                } catch (err) {
+                                    console.error('getUserList Error (checkbox): ', err);
+                                }
+                            });
+
+                            // 체크 박스 상태 변화 감지
+                            updateCheckboxState(company, depts.dept);
+
+                            // 부서명 클릭 이벤트
+                            deptToggelWrap.addEventListener('click', async () => {
+                                let userTitle = deptLi.nextElementSibling;
+                                // 유저 최초 1회 생성 이후에 토글
+                                if (!userTitle || !userTitle.classList.contains('user-container')) {
+                                    deptToggleImg.src = '/main/img/permission/down.svg';
+                                    userTitle = document.createElement('ul');
+                                    userTitle.className = 'user-container _scrollbar';
+                                    deptLi.insertAdjacentElement('afterend', userTitle);
+                                    
+                                    // 회사명,부서명으로 유저리스트 조회
+                                    const userRes = await axios.get('/auth/getUserList', { params: { company, dept: depts.dept }});
+
+                                    if (userRes.data.message === '200') {
+                                        const userList = userRes.data.result;
+                                        // 유저리스트 생성
+                                        userList.forEach(user => {
+                                            // 유저 DOM 생성
+                                            const userLi = drawUserList(user, rightId, permission);
+                                            userTitle.appendChild(userLi);
+                                            // 유저 클릭 이벤트
+                                            bindUserLiClick(userLi, user, rightId, permission);
+                                        });
+                                    }
+                                }
+                                // 유저 토글 처리
+                                userTitle.style.display = userTitle.style.display === 'block' ? 'none' : 'block';
+                                deptToggleImg.src = userTitle.style.display === 'block' ? '/main/img/permission/down.svg' : '/main/img/permission/up.svg';
+                            });
+                        }
+                    }
+                } catch (error) {
+                    console.error('getDeptList Error', error);
+                }
+            }
+            // 부서 토글처리
+            deptTitle.style.display = deptTitle.style.display === 'block' ? 'none' : 'block';
+            companyToggleImg.src = deptTitle.style.display === 'block' ? '/main/img/permission/down.svg' : '/main/img/permission/up.svg';
+        });
+    });
+}
+
+// 유저 검색 기능 엔터 이벤트
+document.getElementById('permission-search').addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+        // input 값 추출 이후 DOM 생성
+        const keyword = e.target.value.trim().toLowerCase();
+        searchResultUser(keyword);
+    }
+});
+
+// 유저 검색 기능 클릭 이벤트
+document.querySelector('.permission-modal .modal-wrap .left .search-box .wrap .search-image').addEventListener('click', () => {
+    const keyword = document.querySelector('.permission-modal .modal-wrap .left .search-input').value.trim().toLowerCase();
+    searchResultUser(keyword);
+});
+
+// 유저 검색 기능(엔터, 검색바 클릭)
+function searchResultUser(keyword) {
+    // 프로젝트 관리자를 제외하고 검색하기 위해 필터링
+    const users = vars.permissionList.all.filter(user => user.user_id !== vars.project.user_id);
+    const searchResult = document.querySelector('.permission-modal .modal-wrap .left .search-result-container');
+    const permissionLeftUl = document.querySelector('.permission-modal .modal-wrap .left ul');
+    const permission = Object.values(vars.permissionList.changePermission);
+    const rightId = document.querySelector('.permission-modal .modal-wrap .tab-input:checked').id;
+    const positionMap = {'회장': 1, '부회장':2, '사장':3, '상임고문':4, '기술위원':5, '부사장':6, '고문':7, '전무이사':8, '수석연구원':9, '상무이사':10, '이사':11, '책임연구원':12, '부장':13, '차장':14, '선임연구원':15, '과장':16, '연구원':17, '대리':18, '사원':19};
+    if (keyword !== '') {
+        // 이름으로 필터링 이후 직급으로 정렬
+        const result = users.filter(user => user.user_nm?.toLowerCase().includes(keyword)).sort((a,b) => {
+            const aPosition = positionMap[a.position] ?? 99;
+            const bPosition = positionMap[b.position] ?? 99;
+
+            if(aPosition !== bPosition) return aPosition - bPosition;
+            return a.user_id.localeCompare(b.user_id);
+        })
+        
+        if (result.length === 0) {
+            searchResult.style.display = 'none';
+            permissionLeftUl.style.display = 'block';
+            return alert('일치하는 사용자가 없습니다.');
+        }
+
+        searchResult.innerHTML = '';
+        // 조회된 유저 있을때
+        result.forEach(user => {
+            //유저 DOM 생성
+            const userLi = drawUserList(user, rightId, permission);
+            searchResult.appendChild(userLi);
+            //클릭이벤트
+            bindUserLiClick(userLi, user, rightId, permission, false);
+        });
+        // 검색결과창 띄우기
+        searchResult.style.display = 'block';
+        permissionLeftUl.style.display = 'none';
+    } else {
+        // 빈 값 입력시 검색결과창 내리기
+        searchResult.style.display = 'none';
+        permissionLeftUl.style.display = 'block';
+    }
+}
+
+// 유저 검색결과 초기화(닫기버튼, X버튼 클릭시 실행)
+function searchResultInit(){
+    const searchResult = document.querySelector('.search-result-container');
+    searchResult.innerHTML = '';
+    searchResult.style.display = 'none';
+    document.querySelector('.permission-modal .modal-wrap .left ul').style.display = 'block';
+    document.querySelector('.permission-modal .left .search-input').value = '';
+}
+
+// 회사명 DOM 생성
+function drawCompanyTitle(company){
+    if(company == '(주)장헌') company = '장헌';
+    if(company == '피티씨') company = 'PTC'; 
+
+    const companyTitle = document.createElement('li');
+    companyTitle.className = 'company-title';
+    companyTitle.innerHTML += `
+        <img class="" src="/main/img/permission/s-icon__${company}-large-logo.svg" alt="" />
+        <div class="toggle-wrap">
+            <span class="company-name">${(company == '기타')? '' :"(주)"}${company}</span>
+            <div class="company-toggle">
+                <img src="/main/img/permission/up.svg" alt="방향표">
+            </div>        
+        </div>
+    `
+    document.querySelector('.permission-modal .left ul').append(companyTitle);
+
+    return companyTitle;
+}
+
+// 부서명 DOM 생성
+function drawDeptTitle(company, dept){
+    const deptLi = document.createElement('li');
+    deptLi.className = 'dept-title';
+    deptLi.dataset.company = company;
+    deptLi.dataset.dept = dept;
+    deptLi.innerHTML = `
+        <label class="custom-checkbox">
+            <input type="checkbox">
+            <span class="checkmark"></span>
+        </label>
+        <div class="toggle-wrap">
+            <span class="dept-name">${dept}</span>
+            <div class="dept-toggle">
+                <img src="/main/img/permission/up.svg" alt="방향표">
+            </div>
+        </div>
+        `;
+
+    document.querySelector(`.permission-modal .left ul .dept-container[data-company="${company}"]`).appendChild(deptLi)
+
+    return deptLi;
+}
+// 유저리스트 DOM 생성
+function drawUserList(user, rightId, permissionList, isRightSide = false) {
+    const li = document.createElement('li');
+    li.className = 'user-li';
+    li.id = `_${user.user_id}`;
+    li.dataset.company = user.company;
+    li.dataset.dept = user.dept;
+
+    const userWrap = document.createElement('div');
+    userWrap.className = `user-wrap${isRightSide ? ` selected_${rightId} _scrollbar` : ''}`;
+
+
+    userWrap.innerHTML += `
+        <div class="user-img">
+            <img draggable="false" src="http://erp.${(user.company === '장헌산업' ? 'jangheon' : 'hanmaceng')}.co.kr/erpphoto/${user.user_id}.jpg" alt="이미지" onerror="this.onerror=null; this.src='/main/img/archive/empty-profile.svg'">
+        </div>
+        <div class="user-info">
+            <div class="user-path">
+                <img class="user-logo" src="/main/img/permission/s-icon__${(user.company == '피티씨')?'PTC':user.company}-small-logo.svg" alt="" />
+                <span class="user-team">${user.dept}</span>
+            </div>
+            <div class="user-top">
+                <span class="user-name">${user.user_nm}</span>
+                <span class="user-position">${user.position ?? ''}</span>
+            </div>
+        </div>
+    `;
+    // 유저 권한 확인
+    const lev = findPermission(user.user_id, Object.values(vars.permissionList.changePermission));
+    const role = isRightSide ? rightId : lev;
+    // 유저권한 생성
+    if (role) {
+        const roleDiv = createRoleDiv(role);
+        userWrap.insertAdjacentHTML('beforeend', roleDiv);
+        if (!isRightSide && lev !== rightId) userWrap.classList.add('disabled');
+        if (!isRightSide) userWrap.classList.add(`selected_${lev}`);
+    }
+
+    li.appendChild(userWrap);
+    return li;
+}
+
+// 유저 권한 뱃지 생성
+function createRoleDiv(role){
+    return `<div class="user-permission-${role}">
+                <h6>${{'sub-master' : '부관리', 'security-worker' : '보안', 'worker' : '일반', 'viewer' : '참관'}[role]}</h6>
+            </div>`;
+}
+
+// 유저 클릭이벤트 바인딩
+function bindUserLiClick(userLi, user, rightId, permissionList, isRightSide = false) {
+    const userWrap = userLi.querySelector('.user-wrap');
+    const rightUl = document.querySelector(`.permission-modal .select-list.select-list-${rightId} ul`);
+
+    userLi.addEventListener('click', () => {
+        const rightUser = rightUl.querySelector(`li#_${user.user_id}`);
+        const leftUserWrap = document.querySelector(`.permission-modal .left ul li#_${user.user_id} .user-wrap`);
+        const leftUserPermission = leftUserWrap?.querySelector(`.user-permission-${rightId}`);
+
+        if (userWrap.classList.contains('disabled')) return alert('다른 그룹에 등록된 인원입니다.');
+
+        const alreadySelected = userWrap.classList.contains(`selected_${rightId}`);
+        // 이미 권한을 가진 인원 클릭했을때 해제 이벤트
+        if (alreadySelected) {
+            changePermission(user.user_id, undefined, rightId);
+            // 오른쪽 유저 삭제(오른쪽 리스트 유저 삭제)
+            rightUser.remove();
+            // 왼쪽 유저 삭제(뱃지삭제 -> userWrap 클래스 삭제) 리스트가 펼쳐지지않아 아직 DOM 생성전에는 삭제가 불가능하기 때문에 옵셔널체이닝 추가
+            leftUserPermission?.remove();
+            leftUserWrap?.classList.remove(`selected_${rightId}`);
+        } else {
+            // 권한 부여 이벤트
+            if (rightId === 'sub-master' && rightUl.children.length >= 10) return alert('부관리자는 최대 10명까지 선택 가능합니다.');
+
+            changePermission(user.user_id, rightId, undefined);
+            userWrap.classList.add(`selected_${rightId}`);
+            userWrap.insertAdjacentHTML('beforeend', createRoleDiv(rightId));
+
+            // 왼쪽 유저리스트 클릭시 오른쪽에 복사하여 생성+이벤트 추가
+            const copy = drawUserList(user, rightId, permissionList, true);
+            rightUl.appendChild(copy);
+            bindUserLiClick(copy, user, rightId, permissionList, true);
+        }
+        updateCheckboxState(user.company, user.dept);
+        // 유저 수 조회 이후 갱신
+        checkPermissionUserNum(rightId);
+    });
+}
+
+document.querySelector('.permission-modal #help-btn').addEventListener('click', () => toggleHelp(true));
+
+document.querySelector('.permission-modal .modal-permission-help .modal-permission-help__head img').addEventListener('click', ()=>toggleHelp(false));
+
+function toggleHelp(show){
+    const helpModal = document.querySelector('.permission-modal .modal-permission-help');
+    const modalBack = document.querySelector('.permission-modal .modal-background');
+
+    helpModal.style.display = show ? 'block' : 'none';
+    modalBack.style.display = show ? 'block' : 'none';
+}
+
+// 권한을 통해 유저 수 체크
+function checkPermissionUserNum(rightId){
+    // 오른쪽 리스트에 몇명이 있는지 체크
+    const userNum = document.querySelector(`.permission-modal .modal-wrap .right .select-list.select-list-${rightId} ul`).children.length;
+    // 유저 수를 나타낼 dom
+    const headerUserNum = document.querySelector('.permission-modal .modal-header .header-user-num-wrap .user-num');
+    // 부관리자 10명이 넘을때 강조효과
+    let text = `현재 ${userNum}명`;
+    let color = '#111';
+
+    if(rightId === 'sub-master'){
+        text += ' (최대 10명)';
+        if(userNum >= 10) color = '#F21D0D';
+    }
+
+    headerUserNum.innerText = text;
+    headerUserNum.style.color = color;
+}
+
+// 체크박스 DOM, 회사명, 부서를 통해 체크박스 상태 반영 함수
+async function updateCheckboxState(company, dept){
+    const deptUsers = document.querySelectorAll(`.permission-modal .modal-wrap .right ul li[data-company="${company}"][data-dept="${dept}"]`);
+    const checkbox = document.querySelector(`.permission-modal .modal-wrap .left li[data-company="${company}"][data-dept="${dept}"] input[type=checkbox]`);
+    const checkmark = document.querySelector(`.permission-modal .modal-wrap .left li[data-company="${company}"][data-dept="${dept}"] label .checkmark`);
+    const rightId = document.querySelector('.permission-modal .modal-wrap .tab-input:checked').id;
+    const key = `${company}_${dept}`;
+    //permissionList.deptUserCount와 현재 권한 부여된 유저의 길이를 비교해 체크박스 상태변화
+    if(vars.permissionList.deptUserCount[key]){
+        if(!checkbox) return;
+
+        if(deptUsers.length === 0){
+            checkbox.checked = false;
+            checkmark.classList.remove('indeterminate');
+        } else if(deptUsers.length === vars.permissionList.deptUserCount[key]) {
+            checkbox.checked = true;
+            checkmark.classList.remove('indeterminate');
+        } else {
+            checkbox.checked = false;
+            checkmark.classList.add('indeterminate');
+        }        
+    } 
+    checkPermissionUserNum(rightId);
+}
+
+function findPermission(id, permissionList) {
+    for (let i = 0; i < permissionList.length; i++) {
+        if (permissionList[i].user_id.toUpperCase() == id.toUpperCase()) return permissionList[i].lev;
+    }
+    return undefined;
+}
+
+function getUserInfo(id) {
+    for (let i = 0; i < vars.permissionList.all.length; i++) {
+        if (vars.permissionList.all[i].user_id == id) return vars.permissionList.all[i];
+    }
+}
+
+function changePermission(id, group, rightId) {
+    if (!vars.permissionList.changed) vars.permissionList.changed = [];
+    if (!vars.permissionList.changePermission) vars.permissionList.changePermission = {};
+    id = id.toUpperCase();
+    /* 
+    vars.permissionList.changed => 변화객체
+    vars.permissionList.permission => 원본 permission
+    vars.permissionList.changePermission => 변화후 permission
+    */
+    if (group) {
+        //그룹에 넣을때 key, value 형태로 저장
+        vars.permissionList.changePermission[id] = {user_id : id, lev : group}
+    } else {
+        //그룹에서 제외
+        delete vars.permissionList.changePermission[id];
+    }
+
+    // 기존 permission에서 이전 Lev 가져오기
+    const original = vars.permissionList.permission?.find(p => p.user_id.toUpperCase() === id);
+    const originalLev = original?.lev;
+
+    // 기존 permission과 새로운 permission을 비교해 변화 감지
+    if(group === originalLev || (!group && !originalLev)){
+        delete vars.permissionList.changed[id];
+        return;
+    }
+
+    // 변화감지하여 변화객체 저장 (중복성 피하기 위해)
+    vars.permissionList.changed[id] = {user_id : id, lev : group, before : originalLev, user_nm : getUserInfo(id)?.user_nm}
+}
+
+async function upsertAuthList() {
+    //lev undefined는 deleteAuthList
+    let upsertArr = [];
+    let deleteArr = [];
+
+    //key-value 형태로 만들었던 changed를 배열로 전환
+    const changedArr = Object.values(vars.permissionList.changed);
+    if (changedArr.length > 0) {
+        for (let i = 0; i < changedArr.length; i++) {
+            if (changedArr[i].lev == undefined) {
+                deleteArr.push(changedArr[i]);
+            } else {
+                upsertArr.push(changedArr[i]);
+            }
+        }
+
+        let upsertMessage = (upsertArr.length > 0) ? false : true;
+        let deleteMessage = (deleteArr.length > 0) ? false : true;
+        console.log(upsertArr);
+        console.log(deleteArr);
+        
+        if (upsertArr.length > 0) {
+            let upsertRes = await axios.post('/auth/upsertPermission', { project_id: vars.project_id, targetArr: upsertArr, userInfoString: vars.userInfoString });
+            if (upsertRes.data.message == 'upsert success'){
+                const logs = upsertRes.data.logs;
+                if(logs.length > 0){ 
+                    try{ // upsert 이후 로그 추가
+                        const logRes = await axios.post(`${vars.path_name}/addPermissionLog`, {logs});
+                        if(logRes.data.message === 'addPermissionLog success') upsertMessage = true;
+                    } catch(err) {
+                        console.error('upsert addPermissionLog Error', err);
+                    }
+                }
+            }
+        }
+        if (deleteArr.length > 0) {
+            let deleteRes = await axios.post('/auth/deletePermission', { project_id: vars.project_id, targetArr: deleteArr, userInfoString: vars.userInfoString });
+            if (deleteRes.data.message == 'delete success'){
+                const logs = deleteRes.data.logs;
+                if(logs.length > 0){
+                    try{ // delete 이후 로그 추가 
+                        const logRes = await axios.post(`${vars.path_name}/addPermissionLog`, {logs});
+                        if(logRes.data.message === 'addPermissionLog success') deleteMessage = true;
+                    } catch(err) {
+                        console.error('delete addPermssionLog Error', err);
+                    }
+                }
+            }
+        }
+        if (upsertMessage && deleteMessage) {
+            alert(`${Object.keys(vars.permissionList.changed).length}개의 변경사항이 저장되었습니다.`);
+        }
+    }
+    searchResultInit();
+    document.querySelector('.permission-modal').style.display = 'none';
+}
+
+export class Permission {
+    constructor(){
+        //permission 정의
+        this.permissionDef = {
+            1535 : '개발자',
+            255 : '관리자',
+            191 : '부관리자',
+            15 : '보안참여자',
+            7 : '일반참여자',
+            1 : '참관자'
+        }
+        //기능 정의 -'기능명': 허용 권한 code -> ex) 'headerPlusBtn' : 191
+        this.funcDef = {
+            'dev-menu' : 1535,
+            'permission-btn' : 191,
+            'overview-left-edit' : 191,
+            'overview-middle-edit' : 191,
+            'overview-task-history-add' : 191,
+            'overview-task-history-save' : 191,
+            'overview-task-history-delete' : 191,
+            'overview-schedule-add' : 7,
+            'overview-schedule-edit' : 7,
+            'overview-issue-edit' : 191,
+            'header-menu-add' : 191,
+            'memo-ai' : 7,
+            'memo-edit' : 7,
+            'memo-text' : 7,
+            'set-user-permission' : 191,
+            'context-menu-viewer' : 7,
+            'context-menu-sub-master' : 191,
+            'add-badge-master' : 255,
+            'add-badge-sub-master' : 191,
+            'add-badge-security-worker': 15,
+            'add-badge-worker': 7,
+            'add-badge-viewer': 1,
+            'convert-btn-viewer': 7,
+            'project-inactive-sign' : 1535,
+            'createFolder-gallery' : 1535,
+            'download-folder' : 255,
+            'change-project-btn' : 255,
+            
+        }
+
+
+        this.user = (vars.userInfoString)?JSON.parse(vars.userInfoString) : undefined;
+        this.permission = this.user.permission;
+        this.permissionString = this._toPermissionString();
+    }
+
+    _toPermissionString(){
+        return this.permissionDef[`${this.permission}`];
+    }
+
+    checkPermission(func){
+        return this.permission >= this.funcDef[func];
+    }
+}

views/main/jsm/archive/variable.js

@@ -0,0 +1,213 @@
+let path_name = decodeURIComponent(window.location.pathname);
+let project_id = path_name.split('/')[1];
+
+//////// pm-bcmf 연결용 테스트 코드 - project_id가 pm-bcmf일 때 project_id는 dsdj2, path_name은 /dsdj2/archive로 변경
+if (project_id == 'pm-bcmf') {
+    project_id = 'dsdj2';
+    path_name = '/dsdj2/archive';
+}
+
+//세종안성(sjas)(gtb.) and 청용천교(cheongyong)(cheongyong.) 연결용 테스트 코드 
+if(project_id == '' || project_id == undefined) {
+    if(window.location.origin.includes('gtb.')){
+        project_id = 'sjas';
+        path_name = '/sjas/archive';
+    }/* else if(window.location.origin.includes('cheongyong.')){
+        project_id = 'cheongyong';
+        path_name = '/cheongyong/archive';
+    } */
+}
+
+export const vars = {
+    // 아카이브 라우터 연결을 위한 변수
+    path_name: path_name,
+
+    // 프로젝트 id
+    project_id: project_id,
+
+    // 오브젝트 스토리지 타입 (ONPREMISE / CLOUD)
+    storageType: undefined,
+
+    // 클라우드 타입 (ONPREMISE / CLOUD)
+    cloudType: undefined,
+
+    // 버킷 (프로젝트 id와 동일)
+    bucket: project_id,
+
+    // 현재 로그인 한 유저 정보
+    userInfoString: undefined,
+
+    // 현재 로그인 한 유저의 permission 관리 객체
+    permission: undefined,
+
+    // 현재 로그인 한 유저의 마우스커서 정보를 담는 객체
+    cursors: {},
+
+    // 전체 프로젝트 정보
+    allProject: {},
+    
+    // 현재 프로젝트 정보
+    project: undefined,
+
+    // 최상위 폴더 사용 용량 / 남은 용량 / 저장 가능한 최대 용량 (50 GB) -> DB에서 가져오기 / 폴더별 사이즈 (아카이브, 공문, 과업개요, GSIM 모델)
+    bucketSize: undefined, remainingSize: undefined, bucketMaxSize: 50*1024*1024*1024, foldersSize: undefined,
+    
+    // 최상위 폴더 아래에 있는 모든 폴더/파일 데이터
+    allTreeObject: undefined,
+
+    // 현재 선택된 폴더 아래에 있는 모든 폴더/파일 데이터
+    currentTreeObject: undefined,
+
+    // 휴지통에 있는 모든 파일 데이터
+    recycleBinObject: undefined,
+    
+    // 마지막으로 선택한 header-btn/tree-item/list-item -> 스타일 변경에 사용 - changeListItemStyle(listItem)
+    lastHeaderBtn: undefined, lastMainTreeItem: undefined, lastModalTreeItem: undefined, lastListItem: undefined, lastListGroupTarget: undefined,
+    // lastMainTreeDepth2Item: undefined, lastModalTreeDepth2Item: undefined,
+    // lastMainTreeDepth3Item: undefined, lastModalTreeDepth3Item: undefined,
+
+    // 마지막으로 우클릭한 타겟 -> 컨텍스트 메뉴에 사용
+    lastContextTarget: undefined,
+
+    // 마지막으로 선택한 header/tree/list item
+    lastSelectTarget: undefined,
+
+    // 드래그가 시작된 list-item
+    dragStartListItem: undefined,
+
+    // 클릭, 더블클릭 구분을 위한 시간
+    clickDuration: 500,
+
+    // 업로드, 다운로드 완료 후 프로그레스 종료 전 완료 후 잠깐 대기하는 시간
+    progressDuration: 500,
+    
+    // 현재 변환중인 파일 정보를 저장하는 배열
+    convertingDataArr: [],
+
+    // 현재 요약중인 파일 정보를 저장하는 배열
+    summarizeAiDataArr: [],
+
+    // file area list에서 다중 선택된 item 배열
+    multiSelectListItemArr: [],
+
+    // 휴지통에서 사용할 lastListItem, lastListGroupTarget, lastContextTarget, lastSelectTarget, multiSelectListItemArr
+    // 휴지통에서 다중 선택된 item 배열
+    lastListItem_bin: undefined,
+    lastListGroupTarget_bin: undefined,
+    lastContextTarget_bin: undefined,
+    lastSelectTarget_bin: undefined,
+    multiSelectListItemArr_bin: [],
+    
+    // 로그 데이터 -> 활동 정보 activity-info-item(로그 데이터)에 사용 (활동 정보 아이템 클릭 시 상세 정보 표시에 사용)
+    logData: undefined,
+
+    // 로그 모달창이 열렸는지 안열렸는지 판단하는 변수 -> 최초에만 false이고 한 번이라도 열리면 true로 유지
+    isLogModalOpened: false,
+
+    // 새로 추가되는 로그 아이템을 저장하는 배열
+    newLogItemArr: [],
+
+    // 일반아이템리스트/휴지통아이템리스트 구분에 사용
+    listItemWrap: document.querySelector('.archive-main-center .list-container .list-body .list-item-wrap'),
+
+    // 미리보기 뷰어
+    viewer: undefined,
+
+    // 메모 임시 저장
+    tempMemo: [],
+
+    // 파일 리스트 sort용 현재 컬럼, 현재 정렬순
+    curSortCol : 'name',
+    curSortOrder : 'asc',
+    
+    // 휴지통 모달창 sort용 현재 컬럼, 현재 정렬순
+    curSortCol_bin : 'remove-date',
+    curSortOrder_bin : 'desc',
+
+    // 리스트/그리드 파일 목록에서 파일 선택했을 때 뷰어에 연결중 표시에 사용할 시간
+    viewerConnectingTime: 0, viewerConnectingTimeValue: 700,
+
+    // 트리 영역에서 마지막으로 선택한 폴더 타입
+    lastFolderType: undefined,
+
+    // 컨트롤 박스에서 마지막으로 선택한 파일 영역 모드
+    // lastFileAreaMode: undefined,
+    lastFileAreaMode: 'list',
+
+    // 지도 모드 (normal <-> edit)
+    mapMode: 'normal',
+
+    // 배경지도 url (일반, 위성, 하이브리드)
+    road: 'https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&hl=ko&&apistyle=s.e:l.i|p.v:off',
+    satellite: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&hl=ko&apistyle=s.e:l.i|p.v:off',
+    hybrid: 'https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}&hl=ko&apistyle=s.e:l.i|p.v:off',
+
+    // 클러스터 거리 (픽셀 기준)
+    clusterDistance: 1,
+
+    // 마지막으로 선택한 클러스터
+    lastSelectCluster: undefined,
+
+    // 모든 오버레이를 표시하는 줌 레벨
+    allOverlayVisibleZoom: 19,
+
+    // 클러스터 레이어, 포인트 레이어
+    olClusterLayer: undefined,
+    olPointLayer: undefined,
+
+    listOrder: [],
+
+    countdownTimer: undefined,
+}
+
+// 오픈레이어스 타일 레이어
+vars.baseLayer = new ol.layer.Tile({
+    source: new ol.source.XYZ({
+        url: vars.road,
+        crossOrigin: 'anonymous',
+        transition: 0
+    })
+});
+
+vars.roadLayer = new ol.layer.Tile({
+    source: new ol.source.XYZ({
+        url: vars.road,
+        crossOrigin: 'anonymous',
+        transition: 0
+    }),
+    visible: true
+});
+vars.satelliteLayer = new ol.layer.Tile({
+    source: new ol.source.XYZ({
+        url: vars.satellite,
+        crossOrigin: 'anonymous',
+        transition: 0
+    }),
+    visible: false
+});
+vars.hybridLayer = new ol.layer.Tile({
+    source: new ol.source.XYZ({
+        url: vars.hybrid,
+        crossOrigin: 'anonymous',
+        transition: 0
+    }),
+    visible: false
+});
+
+// 구성 popup ver 위한 전역 함수
+// vars.navigateToPath = function(path) {
+    // const resourcePath = `/${path}`;
+
+    // // 헤더 버튼 클릭 (탭 선택)
+    // const tabPath = resourcePath.split('/')[1]; // '모델뷰어테스트/모델/3dm' -> '모델뷰어테스트'
+    // const headerBtn = document.querySelector(`[data-resource-path="/${tabPath}"]`); 
+    // if (headerBtn) headerBtn.click();
+
+    // // 트리 아이템 클릭 (폴더 선택)
+    // setTimeout(() => {
+    //     const treeItem = document.querySelector(`.tree-item-wrap[data-resource-path="${resourcePath}"] .tree-item`);
+    //     if (treeItem) treeItem.click();
+    // },  500);
+// }
+
+window.vars = vars;

views/main/jsm/main.js

@@ -0,0 +1,856 @@
+import { AntiDebug } from '../../anti_debugging.js';
+let antiDebug = new AntiDebug();
+
+import { vars } from './archive/variable.js';
+import { Permission } from './archive/userPermission.js';
+import { docVars } from './officialDoc/docVariable.js';
+import { overviewVars } from './overview/overviewVariable.js';
+import {getMyDownloadList} from './archive/common.js';
+// import iconv from 'https://cdn.jsdelivr.net/npm/iconv-lite@0.6.3/lib/index.min.js';
+import { initProjectSetting } from './archive/projectSetting.js';
+
+document.addEventListener('DOMContentLoaded', async function() {
+    //// .env파일에 저장된 배포 타입, 클라우드 타입 가져와서 전역변수에 storageType, cloudType 으로 저장
+    let getEnvDataRes = await axios.get('/common/getEnvData');
+    vars.storageType = getEnvDataRes.data.deploymentType;
+    vars.cloudType = getEnvDataRes.data.cloudType;
+    vars.serviceName = getEnvDataRes.data.serviceName;
+    docVars.storageType = getEnvDataRes.data.deploymentType;
+
+    //// 프로젝트 정보 가져와서 전역변수에 저장
+    let projectRes = await axios.get('/common/getProject');
+    for (let project of projectRes.data.data) {
+        vars.allProject[project.project_id] = project;
+    }
+    vars.project = vars.allProject[vars.project_id];
+
+    //// 타이틀 설정
+    await setTitle();
+
+    //// 프로젝트별 최대 용량 설정
+    vars.bucketMaxSize = (vars.project) ? parseInt(vars.project.storage_byte) * 1024 * 1024 * 1024 : 0;
+
+    //// 유저 정보 객체 가져와서 스트링으로 전역 변수에 저장
+    let authStatusRes = await axios.get('/auth/status',{ params: { project_id: vars.project_id } });
+    let userInfo = authStatusRes.data.user;
+    vars.userInfoString = JSON.stringify(userInfo);
+
+    //////// pm-bcmf 연결용 테스트 코드 - BCMF 유저 정보 생성, 타이틀 커서 스타일 변경, 자동 경로 이동용 변수 설정
+    let getBcmfUrlQueryRes = await axios.get('/auth/getBcmfUrlQuery');
+    if (getBcmfUrlQueryRes.data.bcmfId && getBcmfUrlQueryRes.data.bcmfId.includes('bcmf-')) {
+        // BCMF 유저 정보 생성
+        let permission = (getBcmfUrlQueryRes.data.bcmfId.split('-')[1] == 'viewer') ? 1 : 7
+        userInfo = {
+            user_id: getBcmfUrlQueryRes.data.bcmfId,
+            user_nm: "BCMF",
+            company: "BCMF",
+            dept: "대산당진 2공구",
+            position: "",
+            group: "bcmf",
+            is_resigned: false,
+            permission: permission,
+            bookmark: null,
+        }
+        vars.userInfoString = JSON.stringify(userInfo);
+
+        // 타이틀에 마우스 올렸을 때 기본 커서로 표시
+        document.querySelector('body > .header .left .title').style.cursor = 'default';
+
+        // bcmf에서 iframe으로 pm 화면 연결하는 경우 헤더, 푸터 숨김
+        document.querySelector('body > .header').style.display = 'none';
+        document.querySelector('body > .footer').style.display = 'none';
+        // 헤더가 숨겨져 있으므로 높이에서 footer height(2.25rem)만 빼고, top은 0으로 설정
+        document.querySelectorAll('body > .main').forEach(main => {
+            main.style.height = '100dvh';
+            main.style.top = '0';
+        })
+
+        // 시작경로를 파라미터로 전달한 경우 해당 경로로 자동 이동을 위한 변수 설정
+        if (getBcmfUrlQueryRes.data.startPath) {
+            let startPath = getBcmfUrlQueryRes.data.startPath;
+            let startPathSplit = startPath.split('/');
+            vars.startPathDepth1 = startPathSplit[0];
+            vars.startPathDepth2 = startPathSplit[1];
+            vars.startPathDepth3 = startPathSplit[2];
+        }
+    }
+
+    if (checkProjectInactive()) setProjectInactive('lock');
+
+    // vars.allProject에서 각 프로젝트별 배너 공지(banner_notice) 사용해서 배너 공지 표시/해제 설정
+    toggleBannerNoticeArea();
+
+    //// 접속 인원 모달창에 프로젝트 담당자 표시
+    // let projectManagerName = document.querySelector('.archive-modal .modal-header > .title .right-wrap .project-manager-name');
+    let projectManagerName = document.querySelector('.archive-modal .modal-wrap .modal-body .connected-users-wrap .project-setting-wrap .project-manager-wrap .project-manager-name');
+    projectManagerName.textContent = (vars.project) ? `${vars.project.user_nm} ${vars.project.position}` : '-';
+    if (vars.project && !vars.project.user_nm) projectManagerName.textContent = '-';
+
+    // 유저 정보로 permission 객체 생성
+    vars.permission = new Permission();
+    //permission 객체 수정 못하도록 freeze
+    Object.freeze(vars.permission);
+    Object.freeze(Object.prototype);
+
+    // 조건 위치를 permission 객체 함수를 사용하기 위해 객체 생성 이후로 위치 조정 main.js/33 -> main.js/47
+    // 개발자 계정인 경우
+    if (vars.permission.checkPermission('project-inactive-sign')) {
+        // 프로젝트가 비활성화 상태이면 project-inactive-sign on
+        if (!vars.project.is_active) {
+            document.querySelector('.project-inactive-sign').style.display = 'flex';
+        }
+    }
+
+    //// 각 페이지별 index.js 임포트
+    const archiveIndex = await import(`./archive/index.js`);
+    if (!archiveIndex.isLoaded) {
+        archiveIndex.loadArchive();
+    }
+    
+    // 과업개요 index.js 임포트
+    if(vars.project && vars.project.overview) await import(`./overview/index.js`);
+
+    //// 유저 권한에 따라 초기 dom객체 표시 or 삭제
+    await removeDomByPermission(userInfo);
+    
+    //// 컴포넌트 초기 설정
+    await componentsInit();
+
+    //// 실시간 마우스 표시
+    document.addEventListener('mousemove', throttle((event) => {
+        vars.socket.emit('setMouseInfo', {
+            x: event.clientX / window.innerWidth,
+            y: event.clientY / window.innerHeight,
+        });
+    }, 10));
+
+    vars.socket.on('setMouse', (data) => {
+        // 자신의 커서는 생성하거나 업데이트하지 않음
+        if (data.clientId === vars.socket.id) {
+            return;
+        }
+
+        if (!vars.cursors[data.clientId]) {
+            // 새로운 클라이언트 ID에 대한 커서 생성
+            let cursor = document.createElement('div');
+            cursor.className = 'cursor';
+
+            let wrap = document.createElement('div');
+            wrap.className = 'wrap';
+
+            let userInfo = data;
+            let userColor = data.userColor;
+            let userText = document.createElement('div');
+            userText.className = 'user-text';
+            userText.textContent = `${userInfo.user_nm} ${userInfo.position}`;
+            // userText.style.color = userColor;
+            userText.style.background = userColor;
+
+            let cursorSvg = `
+                <svg width="30" height="30" viewBox="0 0 50 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M14.6279 2L14.611 43.1659L26.1686 30.0568L43.605 31.2398L14.6279 2Z"
+                        stroke="#cccccc" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M15.7041 4.61523L15.6894 40.3646L25.7263 28.9804L40.8684 30.0077L15.7041 4.61523Z"
+                        fill="${userColor}" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+            `;
+            // let cursorSvg = `
+            //     <svg width="30" height="30" viewBox="0 0 50 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+            //         <path d="M15.7041 4.61523L15.6894 40.3646L25.7263 28.9804L40.8684 30.0077L15.7041 4.61523Z"
+            //             fill="${userColor}"/>
+            //     </svg>
+            // `;
+            cursor.innerHTML = cursorSvg;
+
+            wrap.appendChild(userText);
+            cursor.appendChild(wrap);
+            document.body.appendChild(cursor);
+            vars.cursors[data.clientId] = cursor;
+            vars.cursors[data.clientId].id = data.clientId;
+            vars.cursors[data.clientId].timer = setTimeout(() => {
+                if (vars.cursors[clientId]) {
+                    vars.cursors[clientId].remove();
+                    delete vars.cursors[clientId];
+                }
+            }, 3000);
+        }
+
+        // 커서 위치 업데이트
+        vars.cursors[data.clientId].style.left = (data.x * window.innerWidth - 7) + 'px';
+        vars.cursors[data.clientId].style.top = data.y * window.innerHeight + 'px';
+        //타이머 재설정
+        if (vars.cursors[data.clientId].timer) {
+            clearTimeout(vars.cursors[data.clientId].timer);
+        }
+        vars.cursors[data.clientId].timer = setTimeout(() => {
+            if (vars.cursors[data.clientId]) {
+                vars.cursors[data.clientId].remove();
+                delete vars.cursors[data.clientId];
+            }
+        }, 3000);
+    });
+    vars.socket.on('userDisconnected', (clientId) => {
+        // 연결이 끊긴 클라이언트의 커서 제거
+        if (vars.cursors[clientId]) {
+            vars.cursors[clientId].remove();
+            delete vars.cursors[clientId];
+        }
+    });
+
+    save_user();
+});
+
+// ** 권한 관련
+async function removeDomByPermission(userInfo) {
+    if (userInfo.permission != undefined || userInfo.permission != null || userInfo.permission != '') {
+        // 기능별 권한이 변경될 경우를 고려해서 각자 개별 분리 시켜주었습니다.
+        // 개발자도구 모달
+        const devMenuModal = document.querySelector('.dev-menu-modal');
+        // 개발자도구 모달은 키는 함수가 따로 있기 때문에 권한이 없다면 DOM 삭제만 진행
+        if(devMenuModal){
+            if(!vars.permission.checkPermission('dev-menu')) devMenuModal.remove();
+        }
+        
+        // 헤더 폴더 추가 버튼 (부관리자 이상)
+        const headerMenuAddBtn = document.querySelector('.menu-add');
+        if(headerMenuAddBtn){
+            if(vars.permission.checkPermission('set-user-permission')){
+                headerMenuAddBtn.style.setProperty('display', 'flex', 'important');
+            } else {
+                headerMenuAddBtn.remove();
+            }
+        }
+
+        // 유저 권한 설정 버튼 (부관리자 이상)
+        const setUserPermissionBtn = document.querySelector('.set-user-permission-btn');
+        if(setUserPermissionBtn){
+            if(vars.permission.checkPermission('set-user-permission')){
+                setUserPermissionBtn.style.setProperty('display', 'flex', 'important');
+            } else {
+                setUserPermissionBtn.remove();
+            }
+        }
+
+        // 과업개요 왼쪽 영역 수정 버튼  (부관리자 이상)
+        const overviewSectionLeftBtn = document.querySelector('.overview .section-left-edit');
+        if(overviewSectionLeftBtn){
+            if(vars.permission.checkPermission('overview-left-edit')){
+                overviewSectionLeftBtn.style.setProperty('display', 'flex', 'important');
+            } else {
+                overviewSectionLeftBtn.remove();
+            }
+        }
+        
+        // 과업개요 가운데 영역 수정 버튼 (부관리자 이상)
+        const overviewSectionMiddleBtn = document.querySelector('.overview .section-middle-edit');
+        if(overviewSectionMiddleBtn){
+            if(vars.permission.checkPermission('overview-middle-edit')){
+                overviewSectionMiddleBtn.style.setProperty('display', 'flex', 'important');
+            } else {
+                overviewSectionMiddleBtn.remove();
+            }
+        }
+
+        // 과업개요 주요 현안 및 이슈 수정 버튼 (부관리자 이상)
+        const overviewIssueBtn = document.querySelector('.overview .issue-edit');
+        if(overviewIssueBtn){
+            if(vars.permission.checkPermission('overview-issue-edit')){
+                overviewIssueBtn.style.setProperty('display', 'flex', 'important');
+            } else {
+                overviewIssueBtn.remove();
+            }
+        }
+
+        // 과업개요 - 과업기간 - 변동내역 모달 - 리스트 추가 버튼 (부관리자 이상)
+        const overviewTaskHistoryAddBtn = document.querySelector('.overview-modal .task-history-add');
+        if(overviewTaskHistoryAddBtn){
+            if(vars.permission.checkPermission('overview-task-history-add')){
+                overviewTaskHistoryAddBtn.style.setProperty('display', 'flex', 'important');
+            } else {
+                overviewTaskHistoryAddBtn.remove();
+            }
+        }
+
+        // 과업개요 - 과업기간 - 변동내역 모달 - 저장 버튼 (부관리자 이상)
+        const overviewTaskHistorySaveBtn = document.querySelector('.overview-modal .task-history-save');
+        if(overviewTaskHistorySaveBtn){
+            if(vars.permission.checkPermission('overview-task-history-save')){
+                overviewTaskHistorySaveBtn.style.setProperty('display', 'flex', 'important');
+            } else {
+                overviewTaskHistorySaveBtn.remove();
+            }
+        }
+
+        // 과업개요 - 주요일정 - 일정 추가버튼 (일반 참여자 이상)
+        const overviewScheduleAddBtn = document.querySelector('.overview .add-schedule-btn');
+        if(overviewScheduleAddBtn){
+            if(vars.permission.checkPermission('overview-schedule-add')){
+                overviewScheduleAddBtn.style.setProperty('display', 'flex', 'important');
+            } else {
+                overviewScheduleAddBtn.remove();
+            }
+        }
+
+        // 아카이브 - 메모 - AI버튼 (일반 참여자 이상)
+        const memoAiBtn = document.querySelector('.memo .ai-btn');
+        if(memoAiBtn){
+            if(vars.permission.checkPermission('memo-ai')){
+                memoAiBtn.style.setProperty('display', 'flex', 'important');
+            } else {
+                memoAiBtn.remove();
+            }
+        }
+
+        // 아카이브 - 메모 - 수정버튼 (일반 참여자 이상)
+        const memoEditBtn = document.querySelector('.memo .edit-btn');
+        if(memoEditBtn){
+            if(vars.permission.checkPermission('memo-edit')){
+                memoEditBtn.style.setProperty('display', 'flex', 'important');
+            } else {
+                memoEditBtn.remove();
+            }
+        }
+
+        // 폴더 다운로드 버튼 - 관리자 이상
+        const downloadFolderBtn = document.querySelector('.header .download-btn');
+        if(downloadFolderBtn){
+            if(vars.permission.checkPermission('download-folder')){
+                await getMyDownloadList();
+                downloadFolderBtn.style.setProperty('display', 'flex', 'important');
+            } else {
+                downloadFolderBtn.remove();
+            }
+        }
+
+        // 프로젝트 step, type, name 변경 - 관리자 이상
+        const projectStepBtn = document.getElementById('project-step-btn');
+        const projectStepCapsule = document.getElementById('project-step-capsule');
+        const projectTypeBtn = document.getElementById('project-type-btn');
+        const projectTypeCapsule = document.getElementById('project-type-capsule');
+        if(projectStepBtn && projectStepCapsule && projectTypeBtn && projectTypeCapsule) {
+            
+            if(vars.project.category === 'overseas') {
+                initProjectSetting('overseas');
+            } else if (vars.project.category === 'bimproject') {
+                initProjectSetting('bimproject');
+            } else {
+                initProjectSetting();          
+            }
+                
+        }
+        // if(projectStepBtn && projectStepCapsule && projectTypeBtn && projectTypeCapsule && (window.location.href.toLowerCase().includes('bim.') || window.location.href.toLowerCase().includes('overseas.'))){
+        // if(projectStepBtn && projectStepCapsule && projectTypeBtn && projectTypeCapsule && (window.location.href.toLowerCase().includes('172.') || window.location.href.toLowerCase().includes('overseas.'))){
+            // initProjectSetting();
+        // }
+
+        //#임시# 프로젝트 step, type 변경 - 관리자 이상
+        //step
+        // const projectStepBtn = document.getElementById('project-step-btn');
+        // const projectStepCapsule = document.getElementById('project-step-capsule');
+        // if(projectStepBtn && projectStepCapsule && (window.location.href.toLowerCase().includes('bim.') || window.location.href.toLowerCase().includes('overseas.'))){
+        //     if(vars.permission.checkPermission('change-project-step')) {
+        //         projectStepCapsule.remove();
+        //         projectStepBtn.innerHTML = `
+        //             <h5 class="project-step__label --step__${vars.project.step}">${typeStep2Kor(vars.project.step)}</h5>
+        //             <i class="project-step__icon"></i>`;
+        //     } else {
+        //         projectStepBtn.remove();
+        //         projectStepCapsule.innerHTML = typeStep2Kor(vars.project.step);
+        //         projectStepCapsule.classList.add(`--step-capsule__${vars.project.step}`);
+        //     }
+        // }else{
+        //     projectStepCapsule.remove();
+        //     projectStepBtn.remove();
+        // }
+        // //type
+        // const projectTypeBtn = document.getElementById('project-type-btn');
+        // const projectTypeCapsule = document.getElementById('project-type-capsule');
+        // if(projectTypeBtn && projectTypeCapsule && window.location.href.toLowerCase().includes('bim.')){
+        //     if(vars.permission.checkPermission('change-project-type')) {
+        //         projectTypeCapsule.remove();
+        //         projectTypeBtn.innerHTML = `
+        //             <h5 class="project-type__label --type__${vars.project.project_type}">${typeStep2Kor(vars.project.project_type)}</h5>
+        //             <i class="project-type__icon"></i>`;
+        //     } else {
+        //         projectTypeBtn.remove();
+        //         projectTypeCapsule.innerHTML = typeStep2Kor(vars.project.project_type);
+        //     }
+        // }else{
+        //     projectTypeCapsule.remove();
+        //     projectTypeBtn.remove();
+        // }
+
+        // //// 권한이 개발자인 경우
+        // document.querySelectorAll('.permission-min-dev').forEach(elem => {
+        //     if (vars.permission.checkPermission('dev-menu')) { // 나중에 개발자 코드 변경될 예정 // Permission Class Test 250621
+        //         if (elem.classList.contains('dev-menu-modal')) return; // 개발자 메뉴 모달은 바로 flex로 설정할 필요 없으므로 제외
+        //         elem.style.setProperty('display', 'flex', 'important');
+        //     } else {
+        //         elem.remove();
+        //     }
+        // })
+
+        //// 권한이 부관리자 이상인 경우
+        // document.querySelectorAll('.permission-min-sub-master').forEach(elem => {
+        //     if (vars.permission.checkPermission('permission-btn') || vars.permission.checkPermission('overview-left-edit')) {
+        //         elem.style.setProperty('display', 'flex', 'important');
+        //     } else {
+        //         elem.remove();
+        //     }
+        // })
+
+
+        // //// 권한이 보안참여자 미만인 경우
+        // document.querySelectorAll('.permission-min-security-worker').forEach(elem => {
+        //     if (userInfo.permission < 15) {
+        //         elem.remove();
+        //     } else {
+        //         elem.style.setProperty('display', 'flex', 'important');
+        //     }
+        // })
+        
+        // //// 권한이 일반참여자 미만인 경우
+        // document.querySelectorAll('.permission-min-worker').forEach(elem => {
+        //     // 현재 main.html에서 .ai-btn, .edit-btn (메모 ai, 수정 버튼)클래스에 permission-min-worker 추가
+        //     if (userInfo.permission < 7) {
+        //         elem.remove();
+        //     } else {
+        //         elem.style.setProperty('display', 'flex', 'important');
+        //     }
+        // })
+    }
+}
+
+//type, step 한글화
+export function typeStep2Kor(param){
+    let result = undefined;
+    switch(param){
+        case 'done':
+            result = '완료';
+            break;
+        case 'active':
+            result = '진행';
+            break;
+        case 'stop':
+            result = '중지';
+            break;
+        case 'wait':
+            result = '대기';
+            break;
+
+        case 'construction':
+            result = '시공';
+            break;
+        case 'design':
+            result = '설계';
+            break;
+        case 'surgest':
+            result = '제안';
+            break;
+        case 'research':
+            result = '연구';
+            break;
+        case 'support':
+            result = '지원';
+            break;
+        case 'center':
+            result = '센터';
+            break;
+        case 'survey':
+            result = '측량';
+            break;
+        // case 'ETC':
+        //     result = '기타';
+        //     break;
+
+        case 'MP':
+            result = 'MP (기본계획)'; 
+            break;
+        case 'DD':
+            result = 'DD (실시설계)'; 
+            break;
+        case 'FS':
+            result = 'FS (타당성조사)'; 
+            break;
+        case 'PD':
+            result = 'PD (기본설계)';
+            break;
+        case 'DS': 
+            result = 'DS (설계감리)'; 
+            break;
+        case 'CS':
+            result = 'CS (시공감리)';
+            break;
+        case 'PMC':
+            result = 'PMC (실시설계)'; 
+            break;
+        case 'IDC':
+            result = 'IDC (타당성조사)'; 
+            break;
+        case 'DR':
+            result = 'DR (설계검토)';
+            break;
+        case 'ETC':
+            result = 'ETC (기타)'; 
+            break;
+
+        default:
+            result = '없음';
+            break;
+    }
+    return result;
+}
+
+async function setTitle() {
+    // 타이틀 카테고리 이미지 및 프로젝트명 설정 후 마르퀴효과 적용
+    // document.querySelector('.header .left .title .marquee-track .category').src = `/main/img/header/header-logo-${vars.project.category}.svg`;
+    let category = '-';
+    let projectNm = '-';
+    if (vars.project) {
+        category = vars.project.category.toUpperCase();
+        projectNm = vars.project.project_nm;
+    }
+    document.querySelector('.header .left .title .marquee-track .category').innerHTML = category;
+    document.querySelector('.header .left .title .marquee-track .project-name').innerHTML = projectNm;
+    if (vars.project) await startMarquee('title');
+}
+
+async function componentsInit() {
+    // 헤더 - 프로젝트에 포함되지 않은 계정인 경우 헤더 버튼 삭제
+    // 헤더 - 프로젝트 db에서 과업개요, 공문, 위치기반모델 사용 여부에 따라 헤더 버튼 삭제
+    // 푸터 - 프로젝트에 포함되지 않은 계정인 경우 푸터 저장공간/활동로그 삭제
+    
+    // 프로젝트가 비활성화 상태면 리턴
+    if (checkProjectInactive()) return;
+
+    let overviewMain = document.querySelector('.overview-main');
+    let overviewBtn = document.querySelector('.header .overview-btn');
+    let overviewModalWrapper = document.querySelector('.overview-modal-wrapper');
+
+    let officialDocMain = document.querySelector('.official-doc-main');
+    let officialDocBtn = document.querySelector('.header .official-doc-btn');
+    let officialDocModalBackground = document.querySelector('.official-doc-modal-background');
+    let officialDocModalAll = document.querySelectorAll('.official-doc-modal');
+
+    let modelBtn = document.querySelector('.header .model-btn');
+
+    let mainNotice = document.querySelector('.main-notice');
+
+    let userInfo = JSON.parse(vars.userInfoString);
+    if ((userInfo.permission == null && typeof userInfo.permission != 'number')) {
+        // 프로젝트에 포함되어 있지 않은 사용자는 프로젝트 비활성화
+        setProjectInactive('permission');
+    } else {
+        // ** 권한 관련
+        // 참관자 권한일 때 활동로그 삭제
+        // if (userInfo.permission == 1) logWrap.remove();
+
+        // 프로젝트 db에서 과업개요, 공문, 위치기반모델 사용 여부에 따라 버튼 삭제
+        if (vars.project.overview) {
+            overviewBtn.style.display = 'flex';
+        } else {
+            if (overviewMain) overviewMain.remove();
+            if (overviewBtn) overviewBtn.remove();
+            if (overviewModalWrapper) overviewModalWrapper.remove();
+        }
+        
+        if (vars.project.official_doc) {
+            officialDocBtn.style.display = 'flex';
+        } else {
+            if (officialDocMain) officialDocMain.remove();
+            if (officialDocBtn) officialDocBtn.remove();
+            if (officialDocModalBackground) officialDocModalBackground.remove();
+            if (officialDocModalAll.length != 0) {
+                officialDocModalAll.forEach(elem => {
+                    elem.remove();
+                })
+            }
+        }
+        
+        if (vars.project.gsim) modelBtn.style.display = 'flex';
+        else modelBtn.remove();
+    }
+}
+
+async function startMarquee(type) {
+    let trackContainer;
+    if (type == 'title') trackContainer = document.querySelector('body > .header .left .title');
+    if (type == 'bannerNotice') trackContainer = document.querySelector('body > .banner-notice-area .content');
+
+    let originalTrack = trackContainer.querySelector('.marquee-track');
+    if(window.location.origin.includes('gtb.')){
+        // gtb 임시코드
+        // document.querySelectorAll('.marquee-track-wrap .pm, .marquee-track-wrap .symbol, .marquee-track-wrap .category').forEach(e=>e.style.display='none');
+        originalTrack.querySelector('.pm').style.display = 'none';
+        originalTrack.querySelectorAll('.symbol').forEach(e => e.style.display = 'none');
+        originalTrack.querySelector('.category').style.display = 'none';
+    }
+
+    const createMarqueeInstance = async (container, originalTrack) => {
+        const wrap = document.createElement('div');
+        wrap.classList.add('marquee-track-wrap');
+
+        const cloneTrack1 = originalTrack.cloneNode(true);
+        const cloneTrack2 = originalTrack.cloneNode(true);
+
+        wrap.appendChild(originalTrack.cloneNode(true));
+        wrap.appendChild(cloneTrack1);
+        wrap.appendChild(cloneTrack2);
+
+        container.innerHTML = '';
+        container.appendChild(wrap);
+
+        const setMarquee = (entries, wrap) => {
+            const pixelsPerSecond = 40;
+            const firstTrack = wrap.querySelector('.marquee-track:first-child');
+            if (!firstTrack) return;
+
+            const trackWidth = firstTrack.getBoundingClientRect().width;
+            if (trackWidth === 0) return;
+
+            const duration = trackWidth / pixelsPerSecond;
+            
+            wrap.style.setProperty('--duration', `${duration}s`);
+            wrap.style.setProperty('--translateX', `-${trackWidth}px`);
+        };
+        
+        // 초기 마르퀴 설정
+        // setTimeout(async function () {
+        //     await setMarquee(null, wrap);
+        // }, 500);
+
+        // 타이틀/배너 공지 크기 변화 감지되면 다시 마르퀴 설정
+        setTimeout(async function () {
+            let observer = new ResizeObserver(async (entries, observer) => {
+                await setMarquee(entries, wrap);
+            });
+            observer.observe(container);
+        }, 500);
+
+        //// 초기 마르퀴 설정 안해도 정상 작동?
+    };
+
+    createMarqueeInstance(trackContainer, originalTrack);
+}
+
+//user정보 저장
+function save_user() {
+    if (vars.lastHeaderBtn) {
+        let me = JSON.parse(vars.userInfoString);
+        me.project_id = vars.project_id;
+        me.userColor = getRandomColor();
+        me.curPath = vars.lastHeaderBtn.dataset.resourcePath;
+        me.origin = window.location.origin;
+        vars.socket.emit('setUser', { me: me, stat: 'first', origin: window.location.origin});
+    }
+}
+
+export function checkProjectInactive() {
+    // vars.project.is_active는 프로젝트가 활성화 되어 있으면 true, 비활성화 되어 있으면 false
+
+    // checkProjectInactive() 함수는 프로젝트가 비활성화 상태인지를 체크하는 함수이므로
+    // 활성화 되어 있으면 true, 비활성화 되어 있으면 false를 리턴해야됨 (vars.project.is_active와 반대)
+
+    // 비활성화 된 프로젝트 배열 안에 현재 프로젝트 아이디가 포함되어 있으면 비활성화 상태(true)로 리턴
+    let result = (vars.project) ? !vars.project.is_active : false;
+
+    // 관리자 계정인 경우 무조건 활성화 상태(false)로 리턴
+    if (JSON.parse(vars.userInfoString).group == 'dev') result = false;
+    
+    return result;
+}
+
+export async function toggleBannerNoticeArea() {
+    let userInfo = JSON.parse(vars.userInfoString);
+    let userId = userInfo.user_id;
+
+    // if (userId.includes('bcmf-')) {
+
+    // } else {
+        let bannerNoticeArea = document.querySelector('body > .banner-notice-area');
+        let bannerNoticeContent = bannerNoticeArea.querySelector('.content');
+        let header = document.querySelector('body > .header');
+        let mainAll = document.querySelectorAll('body > .main');
+        
+        bannerNoticeArea.style.justifyContent = 'center';
+        bannerNoticeContent.innerHTML = '';
+    
+        let textWrap = document.createElement('div');
+        textWrap.classList.add('text-wrap');
+        let text = document.createElement('div');
+        text.classList.add('text');
+    
+        textWrap.appendChild(text);
+        bannerNoticeContent.appendChild(textWrap);
+    
+        let noticeText = (vars.project) ? vars.project.banner_notice : '';
+        
+        if (noticeText == '' || noticeText == undefined || noticeText == null) {
+            bannerNoticeArea.style.display = 'none';
+            text.innerHTML = '';
+            header.style.top = '0';
+            mainAll.forEach(main => {
+                if (userId.includes('bcmf-')) {
+                    // bcmf에서 iframe으로 pm 화면 연결하는 경우 헤더, 푸터가 숨겨져 있으므로 높이는 100dvh로, top은 0으로 설정
+                    main.style.height = '100dvh';
+                    main.style.top = '0';
+                } else {
+                    main.style.height = 'calc(100dvh - 2.25rem - 2.25rem)';
+                    main.style.top = '2.25rem';
+                }
+            })
+        } else {
+            bannerNoticeArea.style.display = 'flex';
+            text.innerHTML = noticeText;
+            header.style.top = '2.25rem';
+            mainAll.forEach(main => {
+                if (userId.includes('bcmf-')) {
+                    // bcmf에서 iframe으로 pm 화면 연결하는 경우 헤더, 푸터가 숨겨져 있으므로 높이에서 banner-notice-area height(2.25rem) 빼고, top은 2.25rem으로 설정
+                    main.style.height = 'calc(100dvh - 2.25rem)';
+                    main.style.top = '2.25rem';
+                } else {
+                    main.style.height = 'calc(100dvh - 2.25rem - 2.25rem - 2.25rem)';
+                    main.style.top = '4.5rem';
+                }
+            })
+    
+            if (textWrap.getBoundingClientRect().width > bannerNoticeArea.getBoundingClientRect().width - 10) {
+                textWrap.classList.add('marquee-track');
+                bannerNoticeArea.style.justifyContent = 'flex-start';
+                await startMarquee('bannerNotice');
+            }
+        }
+    // }
+}
+
+export function setProjectInactive(type, text) {
+    // 프로젝트 비활성화 된 경우 초기 프로그레스 종료
+    document.querySelector('.init-progress').style.display = 'none';
+
+    let archiveMain = document.querySelector('.archive-main');
+
+    let permissionModal = document.querySelector('.permission-modal');
+
+    let overviewMain = document.querySelector('.overview-main');
+    let overviewBtn = document.querySelector('.header .overview-btn');
+    let overviewModalWrapper = document.querySelector('.overview-modal-wrapper');
+
+    let officialDocMain = document.querySelector('.official-doc-main');
+    let officialDocBtn = document.querySelector('.header .official-doc-btn');
+    let officialDocModalBackground = document.querySelector('.official-doc-modal-background');
+    let officialDocModalAll = document.querySelectorAll('.official-doc-modal');
+
+    let headerCenterLeft = document.querySelector('.header > .center .left.wrap');
+    let headerCenterRight = document.querySelector('.header > .center .right.wrap');
+    let sizeWrap = document.querySelector('.footer .size-wrap');
+    let logWrap = document.querySelector('.footer .log-wrap');
+    let setUserPermissionBtn = document.querySelector('.archive-modal .set-user-permission-btn');
+
+    let mainNotice = document.querySelector('.main-notice');
+
+    if (archiveMain) archiveMain.remove();
+
+    if (permissionModal) permissionModal.remove();
+
+    if (overviewMain) overviewMain.remove();
+    if (overviewBtn) overviewBtn.remove();
+    if (overviewModalWrapper) overviewModalWrapper.remove();
+
+    if (officialDocMain) officialDocMain.remove();
+    if (officialDocBtn) officialDocBtn.remove();
+    if (officialDocModalBackground) officialDocModalBackground.remove();
+    if (officialDocModalAll.length != 0) {
+        officialDocModalAll.forEach(elem => {
+            elem.remove();
+        })
+    }
+
+    if (headerCenterLeft) headerCenterLeft.remove();
+    if (headerCenterRight) headerCenterRight.remove();
+    if (sizeWrap) sizeWrap.remove();
+    if (logWrap) logWrap.remove();
+    if (setUserPermissionBtn) setUserPermissionBtn.remove();
+
+    let mainNoticeText = '';
+    if (type == 'permission') {
+        // mainNoticeText = `
+        //     <div>${JSON.parse(vars.userInfoString).user_nm} 님은 ${vars.project.project_nm} 프로젝트에 포함되어 있지 않습니다.</div>
+        //     <div>프로젝트 참가 신청 또는 문의사항은 프로젝트 담당자에게 연락해 주시기 바랍니다.</div>
+        //     <div>프로젝트 담당자 : ${vars.project.user_nm} ${vars.project.position}</div>
+        // `;
+        mainNoticeText = `
+            <div>${JSON.parse(vars.userInfoString).user_nm} 님은 프로젝트에 포함되어 있지 않습니다.</div>
+        `;
+    }
+    if (type == 'lock') {
+        if (text) {
+            mainNoticeText = text;
+        } else {
+            mainNoticeText = `
+                <div>프로젝트가 비활성화 상태입니다.</div>
+            `;
+        }
+    }
+
+    mainNotice.style.display = 'flex';
+    mainNotice.innerHTML = mainNoticeText;
+}
+
+export function getRandomColor() {
+    let r, g, b;
+    let brightness;
+  
+    while (true) {
+        r = Math.floor(Math.random() * 256);
+        g = Math.floor(Math.random() * 256);
+        b = Math.floor(Math.random() * 256);
+    
+        // 밝기 계산 (0 ~ 255)
+        brightness = (r * 299 + g * 587 + b * 114) / 1000;
+    
+        // 너무 밝거나 어두운 색상 필터링
+        if (brightness > 0 && brightness < 150) {
+            // 각 색상 채널의 차이가 너무 작으면 필터링
+            if (Math.abs(r - g) > 20 || Math.abs(r - b) > 20 || Math.abs(g - b) > 20) {
+                break; // 조건을 만족하면 루프 종료
+            }
+        }
+    }
+  
+    // 16진수 문자열로 변환
+    const hexR = r.toString(16).padStart(2, '0');
+    const hexG = g.toString(16).padStart(2, '0');
+    const hexB = b.toString(16).padStart(2, '0');
+  
+    return `#${hexR}${hexG}${hexB}`;
+}
+
+// 임시 스로틀
+export function throttle(func, limit) {
+    let lastFunc;
+    let lastRan;
+    return function (...args) {
+        const context = this;
+        if (!lastRan) {
+            func.apply(context, args);
+            lastRan = Date.now();
+        } else {
+            clearTimeout(lastFunc);
+            lastFunc = setTimeout(function () {
+                if ((Date.now() - lastRan) >= limit) {
+                    func.apply(context, args);
+                    lastRan = Date.now();
+                }
+            }, limit - (Date.now() - lastRan));
+        }
+    };
+}
+
+window.dtest = async function() {
+    let res = await axios.post(`${vars.path_name}/dtest`);
+    console.log(res.data.message);
+}
+window.otest = async function() {
+    let res = await axios.post(`${vars.path_name}/otest`);
+    console.log(res.data.message);
+}

views/main/jsm/officialDoc/docSocketManager.js

@@ -0,0 +1,44 @@
+import { vars } from '../archive/variable.js';
+import { docVars } from './docVariable.js';
+import { renderDocViewer } from './docPageRenderer.js';
+
+let socket = vars.socket;
+
+// 변환시작, 변환완료 등 상태에 따른 실시간 UI 변경 처리는 socket.on에서 처리
+// 서버에 현재 변환중인 파일 경로를 보내는 등 로직 처리는 working
+
+//// 변환 시작
+socket.on('convertDoc_start', (resultData) => {
+    let resourcePath = resultData.resourcePath;
+
+    let state = document.querySelector(`.attach-item[data-resource-path="${resourcePath}"] .state`);
+    if (!state) return;
+    state.classList.remove('convert');
+    state.classList.add('working');
+
+    let convertBtnText = state.querySelector('.convert-btn-text');
+    if (convertBtnText) convertBtnText.innerHTML = '변환중';
+});
+
+//// 변환 완료
+socket.on('convertPdf_success', async (resultData) => {
+    let resourcePath = resultData.resourcePath;
+
+    docVars.convertingPathArr = resultData.convertingPathArr;
+
+    let state = document.querySelector(`.attach-item[data-resource-path="${resourcePath}"] .state`);
+    if (!state) return;
+    state.classList.remove('working');
+    state.classList.add('viewable');
+
+    let stateText = state.querySelector('.state-text');
+    if (stateText) stateText.innerHTML = '열람가능';
+
+    let convertBtn = state.querySelector('.convert-btn');
+    if (convertBtn) convertBtn.remove();
+
+    if (docVars.lastClickedListTarget) {
+        let lastClickedListTargetPath = docVars.lastClickedListTarget.dataset.resourcePath;
+        if (resourcePath == lastClickedListTargetPath) renderDocViewer(resourcePath, resultData.dataId);
+    }
+});

views/main/jsm/officialDoc/docVariable.js

@@ -0,0 +1,63 @@
+let PathNameWindow = decodeURIComponent(window.location.pathname); // /gsimteam/archive
+let path_name = PathNameWindow.replace('archive', 'officialDoc'); // /gsimteam/officialDoc
+let project_id = PathNameWindow.split('/')[1]; // gsimteam
+
+export const docVars = {
+    // 라우터 연결을 위한 변수
+    path_name: path_name,
+
+    // 프로젝트 id
+    project_id: project_id,
+
+    // 오브젝트 스토리지 타입 (ONPREMISE / CLOUD)
+    storageType: undefined,
+
+    // 버킷 (프로젝트 id와 동일)
+    bucket: project_id,
+
+    // 마지막으로 클릭한 타켓
+    lastClickedListTarget: undefined,
+
+    // 마지막으로 우클릭한 타겟 -> 컨텍스트 메뉴에 사용
+    lastContextTarget: undefined,
+
+    // 로그 데이터 -> 활동 정보 activity-info-item(로그 데이터)에 사용 (활동 정보 아이템 클릭 시 상세 정보 표시에 사용)
+    logData: undefined,
+
+    // 변환중인 파일 경로를 저장하는 배열
+    workingFileArr: [],
+
+    // 미리보기 뷰어
+    viewer: undefined,
+
+    // 수신/발신
+    direction: undefined,
+    allRecipientListByDirection: undefined,
+    allSendingListByDirection: undefined,
+
+    // 파일 리스트 sort용 현재 컬럼, 현재 정렬순
+    curSortCol : 'number',
+    curSortOrder : 'asc',
+
+    // 
+    allDocData: [],
+    allDocOfficialData: [],
+    allDocAttachData: [],
+
+    currentDroppedFiles: [],
+    currentDocId: null,
+    currentGroupId: null,
+
+    selectedDoc: null,
+    selectedAttachItem: null,
+
+    selectParams: {
+        typeOptions: '',    // depth1: 발주처/외
+        baseOptions: '',    // depth2: 기준
+        targetOptions: '',  // depth3: 상대기관
+    },
+    groupCompanyData: {},
+    originCompanyList: [],
+};
+
+// window.docVars = docVars;

views/main/jsm/officialDoc/index.js

@@ -0,0 +1,12 @@
+import * as docSocketManager from './docSocketManager.js';
+import { initDocSlider, initCategoryClicked, initCustomSelectBoxes, activateSelectUI, showInstructions } from './docPageRenderer.js';
+
+// 셀렉트박스 클릭 이벤트
+await initCustomSelectBoxes();
+activateSelectUI();
+// 카테고리 클릭 이벤트
+initCategoryClicked();
+// 화면 위아래 슬라이드
+initDocSlider();
+// 설정모달: 초기화면 도움말
+showInstructions();

views/main/jsm/officialDoc/prompt/250425.txt

@@ -0,0 +1,21 @@
+반드시 아래 지침을 따를 것:
+- **공문에 실제로 쓰인 텍스트만** 사용해. 추정 금지.
+- 모르면 "확인필요", 없으면 "없음"이라고 써.
+- 한글로 쓰라고 한 항목은 반드시 한글로 써.
+
+1. 공문 번호: Ref. No. (reference no.는 12번 항목)
+2. 공문 일자: 날짜
+3. 수신처: 대표 기관 이름 하나만 (예:Seoyoung Engineering Co., Ltd)
+4. 수신자: 받는 사람 직책 (예: Project Director)
+5. 수신자 약자: (예: Project Director → PD)
+6. 발신처: 대표 기관 이름 
+7. 발신자: 보낸 사람 직책(예: Team Leader)
+8. 발신자 약자: (예: Team Leader → TL)
+9. 공문 제목: Subject 가장 위에 한 줄만 (bold체)
+10. 공문 제목 요약: 한글로 10~20자
+11. 공문 내용 요약: 한글로 간단하게 
+12. 공문간 연계: 관련된 다른 공문의 번호 (reference no.)
+13. 공문 종류: [행정/일반:(직원, 파견, 동원, 조직, 비용, 계약 등), 기술/성과물:(일정 협의, 작업계획, 성과물 제출, 기술적 업무 회의, 성과물 전달 등), 회의/기타:(회의록 등 위에 내용 이외의 것) 중 하나
+14. 공문 유형: [보고:사실과 계획 일방적으로 통보, 요청:회신 또는 행동 부탁, 지시:권한 있는 주체가 수행을 명령, 회신:기존 공무에 대해 응답하거나 의견을 제공, 계약:계약조건 변경과 관련] 중 하나
+15. 첨부문서 제목: Enclosures: 목록 전체
+16. 첨부문서 수: 숫자만

views/main/jsm/officialDoc/prompt/default_prompt.txt

@@ -0,0 +1,33 @@
+아래 문서에서 정보를 추출하여 JSON 객체로만 출력해주세요.  
+- 절대 ```json 등 코드블록으로 감싸지 마세요.  
+- 불필요한 설명 금지, 추론 금지, 파일에 있는 내용만 사용  
+- 값이 없는 항목은 "없음"으로 표기  
+- 숫자 값은 숫자 그대로  
+- 결과값을 **일반적인 JSON 형식**으로 그대로 출력해주세요. 
+- 이스케이프 문자 (예: \", \n 등)는 사용하지 말고, 결과값은 **그대로** JSON 형태로 출력해주세요.
+{
+  1. "공문번호": 공문 번호로 Ref. No.를 의미합니다. 없는 경우는 없음으로 표기해주세요. (예시: "Ref. No. SYJV-250031")
+  2. "공문일자": 공문에 적혀 있는 날짜입니다. 번역하지 않고 그대로 표기해주세요. (예시: "Mar / 28 / 2025")
+  3. "수신처": 공문을 받는 사람이 속한 조직명 (예시: "Department of Public Works and Highways")
+  4. "수신자": 공문을 받은 사람의 직책 (예시: "Project Director")
+  5. "수신자약자": 수신자 직책 약자 (예시: "PD")
+  6. "발신처": 공문을 보낸 사람이 속한 조직명 (예시: "SEOYOUNG JOINT VENTURE")
+  7. "발신자": 공문을 보낸 사람의 직책 (예시: "Team Leader")
+  8. "발신자약자": 발신자 직책 약자 (예시: "TL")
+  9. "공문제목": 공문의 제목으로 SUBJECT 의미합니다. 적당한 길이로 끊어야 하는데 윗 문장이 프로젝트 이름으로 판단되는 경우, 9.1 프로젝트 항목을 신설해 리턴 (예시: "Submission of Comment Matrix for Design Deliverable")
+  10. "공문제목요약": 공문 제목을 10~20자 사이로 요약해주세요. 반드시 한글로 작성합니다.
+  11. "공문내용요약": 공문 내용을 요약해주세요. 반드시 한글로 작성합니다.
+  12. "공문간연계": 연계된 공문이 있으면 공문번호를 알려주세요. 공문번호만 필요합니다. 없는 경우는 없음으로 표기해주세요.
+  13. "공문종류": 공문 종류는 공문의 내용을 분석해서 다음 3가지 중 반드시 하나를 선택합니다.
+    * 행정/일반 – 인사, 파견, 조직, 비용(예산), 계약 등 경영/행정 관련 
+    * 기술/성과물 – 일정 협의, 작업계획, 성과물 제출, 기술적 업무 회의, 성과물 전달 등 
+    * 회의/기타 – 회의록 등 위에 내용 이외의 것
+  14. "공문유형": 공문 유형은 공문의 내용을 분석해서 다음의 5가지 중 반드시 하나를 선택합니다.
+    * 보고 : 완료된 사실이나 계획을 일방적으로 알리는 공문
+    * 요청 : 상대방의 행동 또는 답변을 유도하는 공문
+    * 지시 : 권한 있는 주체가 수행을 명령하는 공문
+    * 회신 : 기존 공무에 대해 응답하거나 의견을 제공하는 공문
+    * 계약 : 계약조건 변경과 관련된 공식 공문
+  15. "첨부문서제목": 공문의 첨부 문서는 Enclosures: 를 의미합니다. 없는 경우는 없음으로 표기해주세요. (예시: "1. Comment Matrix_4.4.2 Draft Detailed Engineer Design Report (Section A)" )
+  16. "첨부문서수": 찾은 첨부문서 개수를 알려주세요.
+}

views/main/jsm/officialDoc/prompt/default_schema.json

@@ -0,0 +1,33 @@
+{
+  "title": "DocumentSummary",
+  "type": "object",
+  "properties": {
+    "공문번호": { "type": "string" },
+    "공문일자": { "type": "string" },
+    "수신처": { "type": "string" },
+    "수신자": { "type": "string" },
+    "수신자약자": { "type": "string" },
+    "발신처": { "type": "string" },
+    "발신자": { "type": "string" },
+    "발신자약자": { "type": "string" },
+    "공문제목": { "type": "string" },
+    "공문제목요약": { "type": "string" },
+    "공문내용요약": { "type": "string" },
+    "공문간연계": { "type": "string" },
+    "공문종류": {
+      "type": "string",
+      "enum": ["행정/일반", "기술/성과물", "회의/기타"]
+    },
+    "공문유형": {
+      "type": "string",
+      "enum": ["보고", "요청", "지시", "회신", "계약"]
+    },
+    "첨부문서제목": { "type": "string" },
+    "첨부문서수": { "type": "integer" }
+  },
+  "required": [
+    "공문번호", "공문일자", "수신처", "수신자", "수신자약자",
+    "발신처", "발신자", "발신자약자", "공문제목", "공문제목요약",
+    "공문내용요약", "공문간연계", "공문종류", "공문유형", "첨부문서제목", "첨부문서수"
+  ]
+}

views/main/jsm/officialDoc/prompt/해외공문 프롬프트250825(한글)_json.txt

@@ -0,0 +1,22 @@
+주의:
+- **정확성이 매우 중요합니다.**
+- **19.1 SDZR/AERA/RCM** 형태는 공문 번호가 아닙니다.
+- 한글로 쓰라고 한 항목은 반드시 한글로 작성
+- 반드시 아래 **1~13번 항목만** 출력
+- 모르면 "확인필요", 없으면 "없음"이라고 작성
+- 결과값을 **일반적인 JSON 형식**으로 그대로 출력해주세요
+- 절대 ```json 등 코드블록으로 감싸지 마세요.
+
+1. "공문번호": "영문-숫자" 형태
+2. "공문일자": YYYY-MM-DD
+3. "수신자": 수신자의 직책
+4. "수신자약자": 수신자 직책의 약자
+5. "발신자": 발신자의 직책 (예: Project Director), 조직명은 제외
+6. "발신자약자": 발신자 직책의 약자
+7. "공문제목": Subject **독립된 첫 구문만**, 프로젝트 이름/설명 등 부연 문장은 제외 
+8. "공문제목요약": **한글로** 10~20자
+9. "공문내용요약": **한글로** 간단하게   
+10. "공문간연계": 연계된 공문이 있으면 "있음", 없으면 "없음"
+11. "공문종류": '행정/일반', '기술/성과물', ‘회의/기타’ 중 하나
+12. "공문유형": 보고, 요청, 지시, 회신, 계약 중 하나
+13. "첨부문서수": 숫자만

views/main/jsm/officialDoc/prompt/해외공문 프롬프트250901(한글)_json.txt

@@ -0,0 +1,27 @@
+주의:
+- **정확성이 매우 중요합니다.**
+- **19.1 SDZR/AERA/RCM** 형태는 공문 번호가 아닙니다.
+- 한글로 쓰라고 한 항목은 반드시 한글로 작성
+- 반드시 아래 13개 항목명만 키로 사용: 
+	"공문번호", "공문일자", "수신자", "수신자약자", "발신자", "발신자약자", "공문제목", "공문제목요약", "공문내용요약", "공문간연계", "공문종류", "공문유형", "첨부문서수"
+- 키 값(항목명)에 숫자나 마크 추가 금지. 반드시 순수 텍스트(한글/영문)만 사용.
+- 모르면 "확인필요", 없으면 "없음"이라고 작성
+- 결과값을 **일반적인 JSON 형식**으로 그대로 출력해주세요
+- 절대 ```json 등 코드블록으로 감싸지 마세요.
+- 잘못된 형식이 나오면 위 조건에 맞는 JSON으로 다시 출력하세요.
+
+{
+	"공문번호": "영문-숫자" 형태
+	"공문일자": YYYY-MM-DD
+	"수신자": 수신자의 직책
+	"수신자약자": 수신자 직책의 약자
+	"발신자": 발신자의 직책 (예: Project Director), 조직명은 제외
+	"발신자약자": 발신자 직책의 약자
+	"공문제목": Subject **독립된 첫 구문만**, 프로젝트 이름/설명 등 부연 문장은 제외 
+	"공문제목요약": **한글로** 10~20자
+	"공문내용요약": **한글로** 간단하게   
+	"공문간연계": 연계된 공문이 있으면 "있음", 없으면 "없음"
+	"공문종류": '행정/일반', '기술/성과물', ‘회의/기타’ 중 하나
+	"공문유형": 보고, 요청, 지시, 회신, 계약 중 하나
+	"첨부문서수": 숫자만
+}

views/main/jsm/overview/index.js

@@ -0,0 +1,9 @@
+import { getData } from './overviewDataManager.js';
+
+await getData();
+
+// overviewCommon.js : 아래에 있는 js에서 사용하는 함수들을 모아놓은 js
+// overviewDataManager.js : 과업개요 db 통신 추가/수정/삭제
+// overviewModalManager.js : 과업개요 모달 인터랙션 js
+// overviewPageRenderer.js :  과업개요 페이지를 그리는 랜더링 js
+// overviewVariable.js : 과업개요에서 사용 되는 전역변수 js

views/main/jsm/overview/overviewCommon.js

@@ -0,0 +1,514 @@
+import { vars } from '../archive/variable.js';
+import { overviewVars } from './overviewVariable.js';
+
+//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 공용 함수 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
+
+// 공동도급 형식 자르기
+export function splitStr(data) {
+    if (data === null || data === undefined) return;
+
+    if (data.includes('^&')) {
+        const splitStr = data.split('^&');
+        return splitStr;
+    }
+}
+
+// 날짜 포맷팅
+export function sliceDate(date){
+    if(!date) return null;
+    
+    const formattedDate = date.slice(0,4) + '-' + date.slice(4,6) + '-' + date.slice(6,8);
+    return formattedDate;
+}
+
+export function overviewVarsInit() {
+    if(overviewVars.sectionTabData)overviewVars.sectionTabData = JSON.parse(JSON.stringify(overviewVars.originalSectionTabData))
+    overviewVars.deleteTaskHistory = [];
+    if (!arraysEqual(overviewVars.filesArr, overviewVars.originalFilesArr)) overviewVars.filesArr = [...overviewVars.originalFilesArr]; 
+    if (!arraysEqual(overviewVars.filesSizeArr, overviewVars.originalFilesSizeArr))overviewVars.filesSizeArr = [...overviewVars.originalFilesSizeArr];
+    if (!arraysEqual(overviewVars.filesNameArr, overviewVars.originalFilesNameArr)) overviewVars.filesNameArr = [...overviewVars.originalFilesNameArr];
+    
+    overviewDropboxInit();
+}
+
+function arraysEqual(a, b) {
+    if (!Array.isArray(a) || !Array.isArray(b)) return false;
+    if (a.length !== b.length) return false;
+    return a.every((value, index) => value === b[index]);
+}
+
+export function setOverviewType(){
+    // overseas분기용
+    if(!window.location.host.toLowerCase().includes('overseas.')){
+        document.querySelectorAll('.only-overseas').forEach(ele => {
+            ele.remove();
+        })
+        overviewVars.overseas = false;
+    } else {
+        document.querySelectorAll('.no-overseas').forEach(ele => {
+            ele.remove();
+        });
+        overviewVars.overseas = true;
+    }
+}
+//🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 공용 함수 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
+
+//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Section-Left 사용 함수 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
+
+// 이미지 중복 이름, 확장자 체크 함수
+export function checkDuplicatesFileNameAndExt(files){
+    const duplicateNameArr = [];
+    const notAllowExtArr = [];
+    const acceptExt = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']
+    files.forEach(file => {
+        const fileExt = file.name.split('.').pop().toLowerCase();
+        if(!acceptExt.includes(fileExt)){
+            notAllowExtArr.push(file);
+            return;
+        }
+
+        const isDuplicateFile = overviewVars.filesArr.some(f => f.name === file.name);
+        const isDuplicateFileName = overviewVars.filesNameArr.includes('overview/' + file.name);
+        const isDuplicateFileSize = overviewVars.filesSizeArr.some(f => f.size === file.size);
+        if(!isDuplicateFile && !isDuplicateFileName && !isDuplicateFileSize){
+           overviewVars.filesArr.push(file);
+           overviewVars.filesNameArr.push(file.name);
+           if(overviewVars.filesSizeArr[0] === 0 ) overviewVars.filesSizeArr = [];
+           overviewVars.filesSizeArr.push(file.size);
+        } else {
+            duplicateNameArr.push(file);
+        }
+    });
+
+    if(duplicateNameArr.length > 0 || notAllowExtArr.length > 0){
+        alert(`다음 확장자만 등록할 수 있습니다 : \n- ${acceptExt}\n \n` + '그 외에 확장자 또는 중복된 파일은 등록할 수 없습니다.');
+    } 
+}
+
+// DropBox에 파일 리스트 생성 함수
+export function displayFileName(){
+    const dropbox = document.querySelector('.overview-modal.section-left .dropbox');
+    if(overviewVars.filesNameArr.length > 0 ){
+        dropbox.innerHTML = '';
+        dropbox.style.backgroundColor = '#fff'
+        dropbox.style.alignItems = 'stretch';
+        dropbox.style.justifyContent = 'normal';
+    }
+
+    overviewVars.filesNameArr.forEach(file => {
+        const originalName = file;
+        const displayName = file.replace('overview/', '');
+        const wrapDiv = document.createElement('div');
+        wrapDiv.classList.add('file-wrap-div');
+        wrapDiv.dataset.filepath = file;
+        const iconImg = document.createElement('img');
+        iconImg.src = '/main/img/overview/icon-imageFile.svg';
+        iconImg.classList.add('dropbox-file-img');
+        const fileName = document.createElement('h3');
+        fileName.innerText = displayName;
+        fileName.style.width = '95%';
+        const button = document.createElement('button');
+        button.classList.add('xs-btn');
+        button.addEventListener('click', async ()=> {
+            const fileIndex = overviewVars.filesArr.findIndex(f => f.name === displayName);
+            if(fileIndex !== -1) overviewVars.filesArr.splice(fileIndex, 1);
+            const nameIndex = overviewVars.filesNameArr.findIndex(f => f === file);
+            // 배열 삭제 전 지워야될 key 값 저장
+            let key = overviewVars.filesNameArr[nameIndex];
+            if(nameIndex !== -1){
+                overviewVars.filesNameArr.splice(nameIndex, 1);
+                overviewVars.filesSizeArr.splice(nameIndex, 1);
+            }
+            // object-storage에 저장된 file만 s3 api 이용해서 삭제
+            if(document.querySelector(`.overview .swiper-slide[data-filepath="${file}"]`)){ 
+                overviewVars.deleteImgArr.push(key);
+            } 
+            overviewDropboxInit()
+            wrapDiv.remove();
+
+        });
+        const buttonimg = document.createElement('img');
+        buttonimg.src = '/main/img/overview/icon-close-111.svg';
+
+        button.appendChild(buttonimg);
+        wrapDiv.append(iconImg, fileName, button);
+        dropbox.appendChild(wrapDiv);
+    });
+}
+
+export function overviewDropboxInit(){
+    if(overviewVars.filesNameArr.length === 0){
+        const dropbox = document.querySelector('.overview-modal.section-left .dropbox');
+        dropbox.innerHTML = `<div class="dropbox-top">
+                                    <img class="icon" src="/main/img/overview/icon-imageFile.svg"
+                                        alt="icon-dropfile">
+                                    <p>
+                                        여기로 파일을 드래그하거나 <br>
+                                        <strong style="border-bottom: 0.063rem solid #777;">우측 상단에서 이미지 파일을
+                                            업로드하세요.</strong>
+                                    </p>
+                                </div>`
+        dropbox.style.justifyContent = 'center';
+        dropbox.style.alignItems = 'center';
+        dropbox.style.backgroundColor = '#eee';
+    }
+}
+
+// 접근용 presignedUrl 발급
+export async function getPresignedURL(key) {
+    const res = await axios.get(`/${vars.project_id}/overview/generateGetImgUrl`, { params: { key: key } });
+    const url = res.data;
+    return url;
+};
+
+// 삭제용 presignedUrl 발급 이후에 minIO 삭제요청
+export async function generateDeleteImgUrl(key) {
+    if (key === undefined) return;
+
+    try {
+        const res = await axios.delete(`/${vars.project_id}/overview/generateDeleteImgUrl`, { data: { key } });
+        let { url } = res.data;
+        await axios.delete(url)
+        return true;
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+// 업로드용 presignedURL 발급
+export async function uploadImgData(file) {
+    try {
+        const presignedUrlRes = await axios.post(`/${vars.project_id}/overview/generateUploadUrl`, { fileName: file.name });
+
+        let { url, key } = presignedUrlRes.data;
+
+        const bucketRes = await axios.put(url, file, { headers: { 'Content-type': file.type || 'application/octet-stream' } });
+
+        if (bucketRes.status == 200) {
+            return key;
+        }
+    } catch (error) {
+        console.error('이미지 업로드 실패: ', error)
+    }
+}
+
+//🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Section-Left 사용 함수 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
+
+//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Section-Middle 사용 함수 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
+
+// 공동도급표 구분자 추가 함수
+export function addJointContractDelimiter() {
+    let representativeCompany = document.querySelector('.overview-modal .joint-contract-company-name')?.innerText;
+    let companyName = '';
+    document.querySelectorAll('.overview-modal .joint-contract-company-name').forEach((name) => {
+        companyName += name.innerText.trim().replace(/,/g, '') + '^&';
+        if (companyName === '^&') companyName = '';
+    });
+
+    let companyShares = '';
+    document.querySelectorAll('.overview-modal .joint-contract-company-shares').forEach((shares) => {
+        companyShares += shares.innerText.trim().replace(/,/g, '') + '^&';
+        if (companyShares === '^&') companyShares = '';
+    });
+
+    let contractKrw = '';
+    document.querySelectorAll('.overview-modal .joint-contract-krw').forEach((krw) => {
+        contractKrw += krw.innerText.trim().replace(/,/g, '') + '^&';
+        if (contractKrw === '^&') contractKrw = '';
+    });
+
+    let contractUsd = '';
+    document.querySelectorAll('.overview-modal .joint-contract-usd').forEach((usd) => {
+        contractUsd += usd.innerText.trim().replace(/,/g, '') + '^&';
+        if (contractUsd === '^&') contractUsd = '';
+    });
+
+    return { representativeCompany, companyName, companyShares, contractKrw, contractUsd }
+}
+
+// 공동도급 문자열 입력 제한 함수
+export function restrictToNumber(element, event) {
+    let text = element.innerText;
+
+    const shares = element.classList.contains('joint-contract-company-shares');
+    const payment = element.classList.contains('joint-contract-krw') || element.classList.contains('joint-contract-usd');
+
+    // 지분율 소수점 허용
+    if (shares) {
+        text = text.replace(/[^0-9.]/g, '');
+        // 소수점 중복 제한 (숫자, .)
+        const parts = text.split('.');
+        let integerPart = parts[0].replace(/^0+(?=\d)/,'');
+        if(integerPart === '') integerPart = '0'
+        if (parts.length > 1) {
+            text = integerPart + '.' + parts.slice(1).join('');
+        } else {
+            text = integerPart;
+        }
+        element.innerText = text;
+    } else {
+        // 문자열 제한 (오직 숫자만)
+        text = text.replace(/[^0-9]/g, '');
+    }
+    // 계약금 , 생성
+    if (payment) {
+        //계약금 ,(콤마) 생성
+        if (isNaN(parseFloat(text))) {
+            element.innerText = '';
+        } else {
+            element.innerText = parseFloat(text).toLocaleString();
+        }
+
+        if (!(event.data >= '0' && event.data <= '9')) showToolTip(element, '숫자만 입력 가능합니다.');
+    } else {
+        element.innerText = text;
+        if (!((event.data >= '0' && event.data <= '9') || event.data == '.')) showToolTip(element, '숫자와 .만 입력 가능합니다.');
+    }
+
+
+    // 커서 맨끝으로 이동시키기
+    const range = document.createRange();
+    const sel = window.getSelection();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+}
+
+// 문자열 입력했을때 툴팁
+export function showToolTip(element, message) {
+    let tooltip = document.querySelector('.overview-modal-tooltip');
+
+    if (!tooltip) {
+        tooltip = document.createElement('div');
+        tooltip.className = 'overview-modal-tooltip';
+        document.body.appendChild(tooltip);
+    }
+
+    if (tooltip.dataset.active === 'true') return;
+
+    tooltip.textContent = message;
+    tooltip.style.opacity = '0.8';
+    tooltip.style.visibility = 'visible';
+    tooltip.dataset.active = 'true';
+
+    const rect = element.getBoundingClientRect();
+
+    tooltip.style.left = `${rect.left + window.scrollX + (rect.width / 2) - (tooltip.offsetWidth / 2)}px`;
+    tooltip.style.top = `${rect.bottom + window.scrollY + 5}px`;
+
+    setTimeout(() => {
+        tooltip.style.opacity = '0';
+        tooltip.style.visibility = 'hidden';
+        tooltip.dataset.active = 'false'
+    }, 1000);
+}
+
+// 공동도급 지분율,계약금 계산
+export function calculateTotalJointContract(element) {
+    let totalValue = 0;
+    let className = element.className;
+
+    if (className === 'joint-contract-company-name' || className === 'total-joint-contract-company-name' || className === 'total-joint-contract-company-shares' || className === 'total-joint-contract-krw'|| className === 'total-joint-contract-usd' || className === 'sticky') return;
+
+    document.querySelectorAll(`.overview-modal .${className}`).forEach(joint => {
+        let value = parseFloat(joint.innerText.replaceAll(',', '').trim());
+        if (isNaN(value)) value = 0;
+        totalValue += value;
+    });
+
+    if (isNaN(totalValue)) totalValue = 0;
+
+    if (className === 'joint-contract-company-shares') {
+        // 지분율 100%를 넘겼을 때 강제로 남은 지분율만큼만 입력되도록
+        if(totalValue > 100){
+            const excess = totalValue - 100;
+            let current = parseFloat(element.innerText);
+            element.innerText = current-excess;
+            document.querySelector(`.overview-modal .total-${className}`).innerText = 100;
+            showToolTip(element, '지분율은 100%를 넘길 수 없습니다.');
+            return;
+        }
+        document.querySelector(`.overview-modal .total-${className}`).innerText = totalValue;
+    } else {
+        document.querySelector(`.overview-modal .total-${className}`).innerText = totalValue.toLocaleString();
+    }
+
+}
+
+export function restrictDuplicatedTabName(){
+    // 중복 탭 이름 제한
+    const tabs = document.querySelectorAll('.overview-modal .section-tabs .tab');
+    const tabValues = [];
+    for(let tab of tabs){
+        const input = tab.querySelector('input');
+        const val = input ? input.value.trim() : '';
+
+        if(tabValues.includes(val)){
+            alert('중복된 탭 이름이 있습니다.')
+            return false;
+        }
+        tabValues.push(val);
+    }
+
+    return true;
+}
+
+//🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Section-Middle 사용 함수 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
+
+//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Section-Right 사용 함수 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
+
+export function formatHour(hour) {
+    const normalized = (hour + 24) % 24;
+    const h = Math.floor(normalized); // 정수 시간
+    const m = Math.round((normalized - h) * 60); // 소수점 -> 분
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+}
+
+export function parseTimeToDecimal(timeStr) {
+    const [h, m] = timeStr.split(':').map(Number);
+    return h + (m / 60);
+}
+
+// 1시간당 1.75rem 기준으로 위치 계산
+export function calculateRemPosition(currentTime) {
+    const currentHour = parseInt(currentTime.split(':')[0]);
+    const currentMinute = parseInt(currentTime.split(':')[1]);
+    const hourRem = 1.75
+    const minuteRem = 1.75 / 60;
+
+    const moveHour = currentHour * hourRem;
+    const moveMinute = currentMinute * minuteRem;
+    // left 0으로 놓았을때 00:00에 위치하도록 보정
+    const moveRem = moveHour + moveMinute - 3.5;
+
+    return moveRem
+}
+
+// 타임존 계산을 통해 어느 장소에서든 동일한 결과값을 보장
+export function getTimeToTimeZone(timeZone) {
+    const now = new Date();
+    const formatter = new Intl.DateTimeFormat('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+        timeZone: timeZone
+    });
+
+    return formatter.format(now);
+}
+
+// 연속일정 Color 변경 함수 --> 연속일정에 백그라운드 컬러를 그대로 넣었다간 일정이 보여지지 않아 투명도를 높인 색깔로 변경하여 연속일정에 적용
+export function changeColor(color) {
+    let dataColor = null;
+    switch (color) {
+        case "#F21D0D": dataColor = "#FEE9E7"; break;
+        case "#B92ED1": dataColor = "#F8EBFB"; break;
+        case "#6D3DC2": dataColor = "#F1ECF9"; break;
+        case "#0D8DF2": dataColor = "#E7F4FE"; break; 
+        case "#4DB251": dataColor = "#EEF8EE"; break;
+        case "#FFBF00": dataColor = "#FFF9E6"; break;
+        case "#A0705F": dataColor = "#F6F1EF"; break;
+        case "#7F7F7F": dataColor = "#F3F3F3"; break;
+        case "#688897": dataColor = "#F0F4F5"; break;
+        default: dataColor = "#FFFFFF";
+    }
+    return dataColor;
+}
+
+// 주요일정 모달 작동시 현재시간 적용
+export function setDefaultScheduleTime() {
+    const now = new Date();
+
+    const yyyy = now.getFullYear();
+    const mm = (now.getMonth() + 1).toString().padStart(2, '0');
+    const dd = now.getDate().toString().padStart(2, '0');
+    const hh = now.getHours().toString().padStart(2, '0');
+    const min = now.getMinutes().toString().padStart(2, '0');
+
+    const today = `${yyyy}-${mm}-${dd}`;
+    const timeNow = `${hh}:${min}`;
+
+    const oneHourLater = new Date(now.getTime() + 60 * 60 * 1000);
+    const hh2 = oneHourLater.getHours().toString().padStart(2, '0');
+    const min2 = oneHourLater.getMinutes().toString().padStart(2, '0');
+    const timeLater = `${hh2}:${min2}`;
+
+    document.querySelector('.startDate').value = today;
+    document.querySelector('.endDate').value = today;
+    document.querySelector('.startTime').value = timeNow;
+    document.querySelector('.endTime').value = timeLater;
+    document.querySelector('.startTime').disabled = false
+    document.querySelector('.endTime').disabled = false
+};
+
+export function setIssueEditMode(isEdit){
+    const editBtn = document.querySelector('.overview .xs-btn-type.issue-edit');
+    const saveBtn = document.querySelector('.overview .xs-btn-type.issue-save');
+    const cancleBtn = document.querySelector('.overview .xs-btn-type.issue-cancle');
+    const issueMessage = document.querySelector('.overview .box.issue .wrap .message')
+    const issueContent = document.querySelector('.overview .box.issue .wrap .issue-content');
+
+    editBtn.style.display = isEdit ? 'none' : 'block';
+    saveBtn.style.display = isEdit ? 'block' : 'none';
+    cancleBtn.style.display = isEdit ? 'block' : 'none';
+
+    issueContent.disabled = !isEdit;
+    issueContent.style.color = isEdit ? '#ff3d00' : '#111';
+
+    if(isEdit){
+        issueMessage.classList.add('active');
+        issueMessage.innerText = '내용을 작성/수정한 후 저장 버튼을 눌러주세요';
+        issueMessage.style.color = '#111';
+    } else {
+        issueMessage.classList.remove('active');
+        issueMessage.innerText = '수정 버턴을 눌러 내용을 작성/수정할 수 있습니다.';
+        issueMessage.style.color = '#777';
+    }
+
+    if(isEdit && issueContent.value.length > 0) issueMessage.style.color = '#ddd';
+}
+
+export function applyUtcOffsetTime(offset){
+    const now = new Date();
+    
+    const hourOffset = Math.trunc(offset/3600);
+    let minuteOffset = 0;
+    if(offset % 3600 !==0){
+        minuteOffset = (offset/3600) - hourOffset;
+        if(minuteOffset == 0.75) minuteOffset = 45;
+        if(minuteOffset == 0.5) minuteOffset = 30;
+        if(minuteOffset == 0.25) minuteOffset = 15;
+    }
+    
+    const hours = now.getUTCHours() + hourOffset;
+    const minute = now.getUTCMinutes() + minuteOffset;
+
+    const date = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), hours, minute)) 
+
+    return `${date.getUTCHours().toString().padStart(2,'0')}:${date.getUTCMinutes().toString().padStart(2,'0')}`;
+}
+
+export function fillPartialBlock(block, fraction, isStart) {
+    if (!block || fraction === 0) return;
+    const halfBlock = block.querySelectorAll('.timetable-half-block');
+    const quarterBlock = block.querySelectorAll('.timetable-quarter-block');
+    
+    if(isStart){
+        if(fraction == 0.25){
+            quarterBlock[1].classList.add('work-hour');
+            halfBlock[1].classList.add('work-hour');
+        }        
+        if(fraction == 0.5)halfBlock[1].classList.add('work-hour');
+        if(fraction == 0.75)quarterBlock[3].classList.add('work-hour');
+    } else {
+        if(fraction == 0.25)quarterBlock[0].classList.add('work-hour');
+        if(fraction == 0.5)halfBlock[0].classList.add('work-hour');
+        if(fraction == 0.75){
+            halfBlock[0].classList.add('work-hour');
+            quarterBlock[2].classList.add('work-hour');
+        }
+    }
+}
+
+//🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Section-Right 사용 함수 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼

views/main/jsm/overview/overviewDataManager.js

@@ -0,0 +1,453 @@
+import { vars } from '../archive/variable.js';
+import { checkProjectInactive } from '../main.js';
+import { drawList, generateCalendar, startTimer, updateTimeBar, makeTaskHistory } from './overviewPageRenderer.js';
+import { fileDragAndDrop } from './overviewModalManager.js';
+import { addJointContractDelimiter, restrictDuplicatedTabName, uploadImgData, setIssueEditMode, generateDeleteImgUrl, setOverviewType } from './overviewCommon.js';
+import { headerBtnForceClick, closeInitProgress } from '../archive/common.js';
+import { overviewVars } from './overviewVariable.js';
+
+// overviewDataManager.js는 db 통신처럼 데이터가 실질적으로 저장되고 삭제되는 함수 및 dom 조작을 모아놓은 js이다.
+
+// getData는 tb_overview에 데이터를 가져와서 데이터를 함수들에게 뿌려주는 역할을 한다.
+export async function getData() {
+    if (checkProjectInactive()) return;
+    
+    try {
+        const res = await axios.get(`/${vars.project_id}/overview/getData`, {
+            params: { projectId: vars.project_id },
+        });
+        if (res.data.success) {
+            const data = res.data.data;
+            await setOverviewType();
+            await drawList(data);
+
+            //위치도 개요도 드래그앤 드롭
+            fileDragAndDrop();
+            // 현재 날짜로 달력 생성
+            generateCalendar(overviewVars.currentYear, overviewVars.currentMonth);
+            
+            // 교류시간 동작
+            if(overviewVars.overseas)startTimer(data[0]?.nation_nm);
+
+            //////// pm-bcmf 연결용 테스트 코드 - 파라미터로 전달받은 시작경로로 화면 전환 (depth1)
+            if (vars.startPathDepth1) {
+                let headerBtn = document.querySelector(`body > .header .center .left.wrap .menu-tab .btn[data-resource-path="/${vars.startPathDepth1}"]`);
+                if (headerBtn) await headerBtnForceClick(headerBtn);
+            }
+
+            // 과업개요 생성 후
+            if (!vars.startPathDepth1 && !vars.startPathDepth2 && !vars.startPathDepth3) {
+                // // 시작경로가 없으면 초기 프로그레스 종료
+                // console.log('******** 과업개요 렌더링 후 초기 프로그레스 종료 (시작경로 없음)');
+                await closeInitProgress();
+            } else {
+                if (document.querySelectorAll('body > .header .center .menu-tab .folder-btn').length == 0) {
+                    // // 시작경로가 있는데 헤더폴더버튼이 없으면 초기 프로그레스 종료
+                    // console.log('******** 과업개요 렌더링 후 초기 프로그레스 종료 (시작경로 있음, 헤더폴더버튼 없음)');
+                    await closeInitProgress();
+                } else {
+                    if (JSON.parse(vars.userInfoString).user_id.includes('bcmf-') && vars.project_id == 'dsdj2') {
+                        // 시작경로, 헤더폴더버튼이 있고 현재 계정이 bcmf계정이고 현재 프로젝트가 대산당진2공구인 경우 과업개요 숨김
+                        document.querySelector('.overview-main').style.display = 'none';
+                    } else {
+                        // 시작경로, 헤더폴더버튼이 있고 현재 계정이 bcmf계정이 아니거나 현재 프로젝트가 대산당진2공구가 아닌 경우 과업개요 숨김
+                        // console.log('******** 과업개요 렌더링 후 초기 프로그레스 종료 (현재 계정이 bcmf계정이 아니거나 현재 프로젝트가 대산당진2공구가 아님)');
+                        // console.log(`현재 계정: ${JSON.parse(vars.userInfoString).user_id}`);
+                        // console.log(`현재 프로젝트: ${vars.project_id}`);
+                        closeInitProgress();
+                    }
+                }
+            }
+        } else {
+            console.error("getData error");
+        }
+    } catch (error) {
+        console.error("getData error", error);
+    }
+}
+
+//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Section-Left 저장 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
+
+// Section-left 저장
+document.querySelector('.overview-modal.section-left .section-left-save')?.addEventListener('click', async () => {
+    const modal = document.querySelector('.overview-modal.section-left');
+    const modalWrapper = document.querySelector('.overview-modal-wrapper');
+    // // 시설규모 탭 제목만 입력 후 저장할때 경고문
+    // for(const key in overviewVars.sectionTabData){
+    //     if (overviewVars.sectionTabData[key].length === 0) return alert('시설규모 탭에 입력되지 않은 항목이 있습니다. 작성 후 저장해 주세요.');
+    // }
+
+    // // 중복된 탭 이름 사용하지 못하게
+    // const duplicatedTabName = restrictDuplicatedTabName();
+    // if(!duplicatedTabName) return;
+
+    let locationImgKey;
+    let originFileSize;
+
+    try{
+        // 이미지 파일 업로드
+        for(let i = 0; overviewVars.filesArr.length > i; i++){
+            await uploadImgData(overviewVars.filesArr[i], overviewVars.filesArr.type);
+        }
+
+        // 이미지 파일 objectKey 형식으로 변환
+        for(let j = 0; overviewVars.filesNameArr.length > j; j++){
+            if(!overviewVars.filesNameArr[j].includes('overview/')) overviewVars.filesNameArr[j] = 'overview/'+ overviewVars.filesNameArr[j];
+        }
+
+        // JSON 문자화 시킨다음에 db에 삽입
+        locationImgKey = JSON.stringify(overviewVars.filesNameArr);
+        originFileSize = JSON.stringify(overviewVars.filesSizeArr);
+        // 파일 사이즈가 빈 배열일때 기본값 설정
+        if(originFileSize === '[]') originFileSize = '[0]';
+
+    } catch (err) {
+        console.error(err);
+    }
+
+    if(overviewVars.deleteImgArr.length > 0){
+        for(let i = 0; overviewVars.deleteImgArr.length > i; i++){
+            await generateDeleteImgUrl(overviewVars.deleteImgArr[i]);
+        }
+        await axios.post(`/${vars.project_id}/overview/updateOverviewImgData`, { projectId: vars.project_id, locationImgKey : locationImgKey, originFileSize : originFileSize });
+    }
+    const projectId = vars.project_id;
+    const businessPurpose = modal.querySelector('.business-purpose').value;
+    const performanceArea = modal.querySelector('.performance-area').value;
+    const referenceArea = modal.querySelector('.reference-area').value;
+    const facilityOverview = modal.querySelector('.facility-overview').value;
+    
+    let data = {projectId, businessPurpose, performanceArea, referenceArea, facilityOverview, originFileSize, locationImgKey };
+
+    //overseas용 분기 
+    if(!overviewVars.overseas){
+        data.nation = modal.querySelector('.nation').value;
+        data.continent = modal.querySelector('.continent').value;        
+    } else {
+        data.nation = modal.querySelector('.nation').innerText;
+        data.continent = modal.querySelector('.continent').innerText;
+    }
+    
+    // minIO에 저장, DB 저장이 완료되면 minIO에 기존에 있던 사진을 삭제
+    try { 
+        const res = await axios.post(`/${projectId}/overview/saveSectionLeftData`, data);
+        if (res.data.message === '200') {
+            try{
+                // 탭만 입력했을때 기본값 세팅
+                for (const title in overviewVars.sectionTabData) {
+                    if (!overviewVars.sectionTabData[title] || overviewVars.sectionTabData[title].length === 0) {
+                        // 기본값 세팅
+                        overviewVars.sectionTabData[title] = [ { key: '', value: '', id: null, projectId } ];
+                    }
+                }
+                await upsertSectionTabData();
+                const secondRes = await axios.post(`/${projectId}/overview/saveSectionLeftTabData`, overviewVars.sectionTabData);
+                if (secondRes.data.message === '200') overviewVars.sectionTabData = {};
+            } catch(err){
+                console.error(err, 'sectionLeftTabData 저장 오류')
+            }
+            alert('저장이 완료되었습니다.');
+            modal.style.display = 'none';
+            modalWrapper.style.display = 'none';
+            getData();
+            updateTimeBar();
+        } else {
+            alert('파일 저장에 실패하였습니다.');
+        }
+    }catch(err){
+        console.error('S3 이미지 삭제 오류 : ' , err);
+    }
+
+});
+
+async function upsertSectionTabData() {
+    const deleteArr = [];
+
+    // 섹션별 비교
+    for (let sectionName in overviewVars.originalSectionTabData) {
+        const originalArr = overviewVars.originalSectionTabData[sectionName];
+        const currentArr = overviewVars.sectionTabData[sectionName] || [];
+
+        // currentArr에 없는 항목만 삭제 대상으로
+        const toDelete = originalArr.filter(item => {
+            return !currentArr.some(c => c.id === item.id);
+        });
+
+        if (toDelete.length > 0) {
+            deleteArr.push(...toDelete);
+        }
+    }
+
+    // 삭제 API 호출
+    try {
+        const deleteRes = await axios.delete(`/${vars.project_id}/overview/deleteCellData`, { data: { deleteArr: deleteArr }});
+        if(deleteRes.data.message === 200)console.log('overviewSectionLeftCellData 삭제 완료');
+    } catch (err) {
+        console.error('삭제 실패', cell.id, err);
+    }
+    
+}
+
+// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Section-Left 저장 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
+
+//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Section-Middle 저장, 삭제 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
+
+// section-middle 저장
+document.querySelector('.overview-modal.section-middle .btn-active')?.addEventListener('click', async () => {
+    const modal = document.querySelector('.overview-modal.section-middle');
+    const modalWrapper = document.querySelector('.overview-modal-wrapper');
+    const projectId = vars.project_id;
+    const abbreviatedName = modal.querySelector('.abbreviated-name').value;
+    const taskNmEn = modal.querySelector('.task-nm-en').value;
+    const taskPurpose = modal.querySelector('.task-purpose').value;
+    const orderSizeUsd = modal.querySelector('.order-size-usd').value;
+    const orderSizeKrw = modal.querySelector('.order-size-krw').value;
+    const clientOrigin = modal.querySelector('.client-origin').value;
+    const financial = modal.querySelector('.financial').value;
+    const financialCountry = modal.querySelector('.financial-country').value;
+    const selectionMethod = modal.querySelector('.selection-method').value;
+    const supportDepartment = modal.querySelector('.support-department').value;
+    const supportManagerNm = modal.querySelector('.support-manager-nm').value;
+    const completionDate = modal.querySelector('.completion-date').value;
+
+    let data = {projectId, abbreviatedName, taskNmEn, taskPurpose, orderSizeUsd, orderSizeKrw, clientOrigin, financial, financialCountry, selectionMethod, supportDepartment, supportManagerNm, completionDate};
+
+    // overseas용 분기
+    if(!overviewVars.overseas){
+        data.projectNo = modal.querySelector('.project-no').value
+        data.taskType = modal.querySelector('.task-type').value
+        data.bid = modal.querySelector('.bid').value
+        data.relativeClient = modal.querySelector('.client').value
+        data.department = modal.querySelector('.department').value
+        data.taskNmKr = modal.querySelector('.task-nm-kr').value;
+        data.scheduledCommencementDate = modal.querySelector('.scheuled-commencement-date').value;
+        data.contractPeriod = modal.querySelector('.contract-period').value;
+        data.projectManagerNm = modal.querySelector('.projectmanager-nm').value;
+        data.managerNm = modal.querySelector('.manager-nm').value;
+        data.contractDate = modal.querySelector('.contract-date').value;
+        data.commencementDate = modal.querySelector('.commencement-date').value;
+        data.originalCompletionDate = modal.querySelector('.scheduled-completion-date').value;
+        // 공동도급 데이터 DB 삽입을 위한 식별자(^&)추가
+        const jointContract = addJointContractDelimiter();
+        data.jointContractComapnyName = jointContract.companyName;
+        data.jointContractShares = jointContract.companyShares;
+        data.jointContractKrw = jointContract.contractKrw;
+        data.jointContractUsd = jointContract.contractUsd;
+        data.representativeCompany = jointContract.representativeCompany;
+    } else {
+        data.projectNo = modal.querySelector('.project-no').innerText;
+        data.taskType = modal.querySelector('.task-type').innerText;
+        data.bid = modal.querySelector('.bid').innerText;
+        data.relativeClient = modal.querySelector('.client').innerText;
+        data.department = modal.querySelector('.department').innerText;
+        data.taskNmKr = modal.querySelector('.task-nm-kr').innerText;
+        data.scheduledCommencementDate = modal.querySelector('.scheuled-commencement-date').innerText;
+        data.contractPeriod = modal.querySelector('.contract-period').innerText.replace('개월', '');
+        data.projectManagerNm = modal.querySelector('.projectmanager-nm').innerText;
+        data.managerNm = modal.querySelector('.manager-nm').innerText;
+        data.contractDate = modal.querySelector('.contract-date').innerText.replaceAll('-', '');
+        data.commencementDate = modal.querySelector('.commencement-date').innerText.replaceAll('-', '');
+        data.originalCompletionDate = modal.querySelector('.scheduled-completion-date').innerText.replaceAll('-', '');
+        // 공동도급 데이터 DB 삽입을 위한 식별자(^&)추가
+        const jointContract = addJointContractDelimiter();
+        data.jointContractComapnyName = jointContract.companyName;
+        data.jointContractShares = jointContract.companyShares;
+        data.jointContractKrw = jointContract.contractKrw;
+        data.jointContractUsd = jointContract.contractUsd;
+        data.representativeCompany = jointContract.representativeCompany;
+    }
+
+    try {
+        const res = await axios.post(`/${projectId}/overview/saveSectionMiddleData`, data);
+        if (res.data.message = '200') {
+            alert('저장이 완료되었습니다.');
+            modal.style.display = 'none';
+            modalWrapper.style.display = 'none';
+            getData();
+            updateTimeBar();
+        } else {
+            alert('오류가 발생하였습니다.');
+        }
+    } catch (err) {
+        console.log(err);
+    }
+
+});
+
+// Section-Middle - 과업중지 이력 저장
+document.querySelector('.overview-modal.task-period .modal-footer .btn-active')?.addEventListener('click', async () => {
+    const liList = document.querySelectorAll('.overview-modal.task-period .overview-modal-body ul li input');
+    const modal = document.querySelector('.overview-modal.task-period');
+    const modalWrapper = document.querySelector('.overview-modal-wrapper');
+
+    const saveLiArr = [];
+
+    if(overviewVars.deleteTaskHistory.length > 0)await deleteTaskHistory();
+
+    for (let i = 0; i < liList.length; i += 6) {
+        // 과업중지이력의 Value가 전부 미입력 상태일때는 저장하지 않는다.
+        const values = [liList[i].value, liList[i+1].value, liList[i+2].value, liList[i+3].value, liList[i+4].value, liList[i+5].value];
+        if(values.every(value => value === ''))continue;
+    
+        saveLiArr.push({
+            projectId: vars.project_id,
+            order: liList[i].value,
+            suspensionDate: liList[i + 1].value,
+            suspensionReason: liList[i + 2].value,
+            resumptionDate: liList[i + 3].value,
+            consultationContent: liList[i + 4].value,
+            changeDate: liList[i + 5].value
+        });
+    }
+
+    try {
+        const res = await axios.post(`/${vars.project_id}/overview/saveTaskHistoryData`, saveLiArr);
+        if (res.data.message === '200') {
+            alert('과업중지 이력이 저장되었습니다.');
+            makeTaskHistory();
+            modal.style.display = 'none';
+            modalWrapper.style.display = 'none';
+        }
+    }
+    catch (err) {
+        alert('과업중지 이력 저장에 실패하였습니다.');
+    }
+
+});
+
+export async function deleteTaskHistory() {
+    if(overviewVars.deleteTaskHistory.length > 0){
+        try{
+            const res = await axios.delete(`/${vars.project_id}/overview/deleteTaskPeriodData`, { data: { deleteArr : overviewVars.deleteTaskHistory } }); 
+            if(res.data.message === '200') overviewVars.deleteTaskHistory = [];
+        } catch(err) {
+            console.error(err, '과업중지이력 삭제 실패');
+        }
+    }
+}
+
+// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Section-Middle 저장, 삭제 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
+
+
+//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Section-Right 저장, 삭제 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
+
+// Section-Right calendar 주요일정 저장
+document.querySelector('.overview-modal.schedule .schedule-save')?.addEventListener('click', async () => {
+    const modal = document.querySelector('.overview-modal.schedule');
+    const modalWrapper = document.querySelector('.overview-modal-wrapper');
+    
+    const projectId = vars.project_id;
+    const country = document.querySelector('.overview-modal.schedule input[type=radio]:checked').value;
+    const color = document.querySelector('.overview-modal .color .label-color.on').dataset.color;
+    const title = document.querySelector('.overview-modal.schedule .schedule-title').value;
+    const content = document.querySelector('.overview-modal.schedule .schedule-content').value;
+    const startDate = document.querySelector('.overview-modal.schedule .startDate').value;
+    const startTime = document.querySelector('.overview-modal.schedule .startTime').value;
+    const endDate = document.querySelector('.overview-modal.schedule .endDate').value;
+    const endTime = document.querySelector('.overview-modal.schedule .endTime').value;
+    const scheduleId = document.querySelector('.overview-modal.schedule').dataset.scheduleId;
+
+    if (!title) return alert('일정의 제목을 입력해주세요.')
+    
+    // 주요일정 하루종일 기능
+    const alldayChecked = document.querySelector('.overview-modal.schedule .custom-checkbox.all-day input').checked;
+
+    const startDateTimeStr = `${startDate}T${startTime}`;
+    const endDateTimeStr = `${endDate}T${endTime}`;
+
+    if(alldayChecked === true){
+        //날짜 유효성 검증 
+        const startDay = new Date(startDate);
+        const endDay = new Date(endDate);
+        if(startDay > endDay) return alert('시작일은 종료일보다 늦을 수 없습니다. 다시 설정해주십시오.'); 
+    } else {
+        //날짜 + 시간 유효성 검증
+        const startDateTime = new Date(startDateTimeStr);
+        const endDateTime = new Date(endDateTimeStr);
+        if (startDateTime > endDateTime)return alert('시작일은 종료일보다 늦을 수 없습니다. 다시 설정해주십시오.');
+    }
+
+    let data = { scheduleId, projectId, country, color, title, content, startDateTimeStr, endDateTimeStr }
+    // 기존일정 id 삽입
+    if (scheduleId !== '') data.scheduleId = scheduleId;
+
+    try {
+        const res = await axios.post(`/${projectId}/overview/saveScheduleData`, data);
+
+        if (res.data.message == '200') {
+            modal.style.display = 'none';
+            modalWrapper.style.display = 'none';
+            alert('일정 저장이 완료되었습니다.');
+            generateCalendar(overviewVars.currentYear, overviewVars.currentMonth);
+        }
+    } catch (err) {
+        console.log(err);
+    }
+});
+
+// Section-Right calendar 주요일정 삭제
+document.querySelector('.overview-modal.schedule .schedule-delete')?.addEventListener('click', async () => {
+    if (confirm('일정을 삭제하시겠습니까?')) {
+        const modal = document.querySelector('.overview-modal.schedule');
+        const modalWrapper = document.querySelector('.overview-modal-wrapper');
+
+        const scheduleId = document.querySelector('.overview-modal.schedule').dataset.scheduleId;
+        const res = await axios.delete(`/${vars.project_id}/overview/deleteScheduleData`, { data: { scheduleId } });
+
+        if (res.data.message = '200') {
+            alert('일정이 삭제되었습니다.');
+            modal.style.display = 'none';
+            modalWrapper.style.display = 'none';
+            generateCalendar(overviewVars.currentYear, overviewVars.currentMonth);
+        } else {
+            alert('삭제에 실패하였습니다.')
+        }
+    }
+});
+
+// 주요 현안 및 이슈 
+document.querySelector('.overview .xs-btn-type.issue-edit')?.addEventListener('click', () => {
+    setIssueEditMode(true)
+});
+
+// 메모 입력시 내용의 길이에 따라 
+document.querySelector('.overview .box.issue .wrap .issue-content')?.addEventListener('input', () => {
+    const issueMessage = document.querySelector('.overview .box.issue .wrap .message')
+    const issueContent = document.querySelector('.overview .box.issue .wrap .issue-content');
+    
+    if(issueContent.value.length > 0){
+        issueMessage.style.color = '#ddd';
+    } else {
+        issueMessage.style.color = '#111';
+    }
+});
+
+document.querySelector('.overview .xs-btn-type.issue-save')?.addEventListener('click', async () => {
+    const projectId = vars.project_id;
+    const issueContent = document.querySelector('.overview .box.issue .wrap .issue-content');
+    const issueData = issueContent.value;
+
+    let data = {projectId, issueData}
+    
+    try{
+        const result = await axios.post(`/${projectId}/overview/saveIssueData`, data);
+
+        if(result.data.message === '200'){
+            alert('주요 현안 및 이슈 저장 성공');
+            setIssueEditMode(false)
+            overviewVars.issueData = issueData;
+        } 
+    } catch (err) {
+        console.error(err)
+    }
+
+
+});
+
+document.querySelector('.overview .xs-btn-type.issue-cancle')?.addEventListener('click', () => {
+    const issueContent = document.querySelector('.overview .box.issue .wrap .issue-content');
+    issueContent.value = overviewVars.issueData;
+
+    setIssueEditMode(false);
+});
+// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Section-Right 저장, 삭제 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼

views/main/jsm/overview/overviewModalManager.js

@@ -0,0 +1,765 @@
+import { vars } from '../archive/variable.js';
+import { displayFileName, checkDuplicatesFileNameAndExt , restrictToNumber, calculateTotalJointContract, showToolTip, overviewVarsInit } from './overviewCommon.js';
+import { makeTaskHistory } from './overviewPageRenderer.js';
+import { overviewVars } from './overviewVariable.js';
+
+//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Overview 모달 공통 사용 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
+
+// 모달CLSOE
+const modalNames = ['facility-size', 'section-left', 'section-middle', 'schedule-list', 'schedule', 'task-period'];
+modalNames.forEach(name => {
+    const modal = document.querySelector(`.overview-modal.${name}`);
+    if (!modal) return;
+
+    const closeBtn = modal.querySelector('.overview-modal-header--end img');
+    const footerCloseBtn = modal.querySelector('.modal-footer .btn-close');
+
+    closeBtn?.addEventListener('click', () => {
+        modal.style.display = 'none';
+        document.querySelector('.overview-modal-wrapper').style.display = 'none';
+        // 변수 초기화
+        overviewVarsInit();
+        });
+
+    footerCloseBtn?.addEventListener('click', () => {
+        modal.style.display = 'none';
+        document.querySelector('.overview-modal-wrapper').style.display = 'none';
+        // 변수 초기화
+        overviewVarsInit();
+    });
+});
+
+// 모달 영역 외에 클릭했을때 모달 꺼지는 이벤트
+// document.querySelector('.overview-modal-wrapper')?.addEventListener('pointerdown', (e) => {
+//     document.querySelector('.overview-modal-wrapper').style.display = 'none';
+//     document.querySelectorAll('.overview-modal').forEach(modal => {
+//         if (!modal.contains(e.target)) {
+//             modal.style.display = 'none';
+//         }
+//     });
+// });
+
+// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Overview 모달 공통 사용 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
+
+//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Secion-Left 모달 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
+
+// 위치도/개요도 드래그앤드롭
+export function fileDragAndDrop() {
+        const dropbox = document.querySelector('.overview-modal .dropbox');
+
+        dropbox.addEventListener('dragenter', (e) => {
+            e.preventDefault();
+            dropbox.style.background = '#999';
+        });
+
+        dropbox.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropbox.style.background = '#999';
+        });
+
+        dropbox.addEventListener('dragleave', (e) => {
+            e.preventDefault();
+            dropbox.style.background = '#e6e8ea';
+        });
+
+        dropbox.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropbox.style.background = '#e6e8ea';
+            const files = Array.from(e.dataTransfer.files);
+
+            // 중복 이름과 확장자 체크
+            checkDuplicatesFileNameAndExt(files);
+            displayFileName();
+
+        });
+};
+
+// section-left 모달 열기
+document.querySelector('.overview .box-header--right.section-left-edit')?.addEventListener('click', () => {
+    const modal = document.querySelector('.overview-modal.section-left');
+    const modalWrapper = document.querySelector('.overview-modal-wrapper');
+
+    modal.querySelector('.business-purpose').value = document.querySelector('.overview .box-body.business-purpose').innerText;
+    modal.querySelector('.performance-area').value = document.querySelector('.overview .box-body.location-map-detail .performance-area').innerText;
+    modal.querySelector('.reference-area').value = document.querySelector('.overview .box-body.location-map-detail .reference-area').innerText;
+    modal.querySelector('.facility-overview').value = document.querySelector('.overview .box-body.facility-size .facility-overview').innerText;
+
+    //overseas용 분기
+    if(!overviewVars.overseas){
+        modal.querySelector('.nation').value = document.querySelector('.overview .box-body.location-map-detail .nation-nm').innerText;
+        modal.querySelector('.continent').value = document.querySelector('.overview .box-body.location-map-detail .continent').innerText;
+    } else {
+        modal.querySelector('.nation').innerText = document.querySelector('.overview .box-body.location-map-detail .nation-nm').innerText;
+        modal.querySelector('.continent').innerText = document.querySelector('.overview .box-body.location-map-detail .continent').innerText;
+    }
+    
+    
+    overviewVarsInit();
+
+    if(overviewVars.filesNameArr.length > 0) displayFileName();
+
+    modal.querySelectorAll('input[type=file]').forEach(input => { input.value = ''; })
+
+    makeTabCell(overviewVars.originalSectionTabData);
+
+    // 토글 처리
+    if (modal.style.display === 'block') {
+        modal.style.display = 'none';
+        return;
+    }
+    modal.style.display = 'block';
+    modalWrapper.style.display = 'block';
+});
+
+// section-left 모달 시설규모 탭,셀 생성 함수
+export function makeTabCell(data) {
+    const tabContainer = document.querySelector('.section-tabs');
+    const contentContainer = document.querySelector('.section-content');
+
+    // 가로 스크롤 이벤트
+    tabContainer.addEventListener('wheel', (e) => {
+        e.preventDefault();
+        tabContainer.scrollLeft += e.deltaY;
+    });
+
+    tabContainer.innerHTML = '';
+    contentContainer.innerHTML = '';
+
+    // 데이터 없을 때 기본값
+    if (Object.keys(data).length === 0) {
+        data = { '': [{ key: '', value: '', id: '' }] };
+    }
+
+    const titles = Object.keys(data);
+    titles.forEach((title, index) => {
+        const tab = createTab(title, index === 0);
+        bindTabEvents(tab, contentContainer);
+        tabContainer.appendChild(tab);
+    });
+
+    // 탭 추가 버튼
+    const addBtn = document.createElement('button');
+    addBtn.classList.add('xs-btn', 'add');
+    addBtn.innerHTML = `<img class="icon" src="/main/img/overview/icon-add.svg" alt="icon-add">`;
+    tabContainer.appendChild(addBtn);
+
+    addBtn.addEventListener('click', () => {
+        const newTab = createTab('', true);
+        bindTabEvents(newTab, contentContainer, true);
+        tabContainer.insertBefore(newTab, addBtn);
+        newTab.click();
+    });
+
+    // 첫번째 탭 클릭
+    if (titles.length > 0) {
+        tabContainer.querySelector('.tab')?.click();
+    }
+}
+
+// 탭 생성
+function createTab(title, isActive) {
+    const tab = document.createElement('div');
+    tab.className = 'tab';
+    if (isActive) tab.classList.add('click-on');
+
+    const input = document.createElement('input');
+    input.className = 'tab-style-input';
+    input.type = 'text';
+    input.value = title;
+    input.placeholder = '탭 제목 입력';
+
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'xs-btn';
+    closeBtn.innerHTML = `<img class="icon" src="/main/img/overview/icon-close-111.svg">`;
+
+    tab.appendChild(input);
+    tab.appendChild(closeBtn);
+
+    return tab;
+}
+
+// 탭 클릭, 제목입력, 삭제버튼 이벤트
+function bindTabEvents(tab, contentContainer, isNew = false) {
+    const input = tab.querySelector('input');
+    const closeBtn = tab.querySelector('button');
+
+    // 탭 클릭 이벤트
+    tab.addEventListener('click', () => {
+        document.querySelectorAll('.section-tabs .tab').forEach(t => t.classList.remove('click-on'));
+        tab.classList.add('click-on');
+        renderCells(input.value.trim(), contentContainer);
+    });
+
+    // 탭 제목 input 변경 이벤트
+    let previousSection = input.value.trim();
+    input.addEventListener('input', () => {
+        const section = String(input.value.trim());
+        // 탭 제목이 빈값 일때 삭제 처리
+        if (section === '') {
+            if (previousSection && overviewVars.sectionTabData[previousSection]) delete overviewVars.sectionTabData[previousSection];
+            showToolTip(input, '탭 제목이 없어 셀 내용이 초기화되었습니다.')
+            // 셀 초기화
+            document.querySelectorAll('.section-content .section-content--cell').forEach((cell, index) => {
+                if(index === 0){
+                    cell.querySelectorAll('input').forEach(input => input.value = '');
+                } else{
+                    // 셀 추가 버튼을 건너뜀
+                    if(cell.className === 'section-content--cell add-cell-btn') return;
+                    cell.remove();
+                }
+            });
+            previousSection = '';
+            return;
+        }
+        // 탭 제목이 같을때 처리 막기
+        if (section !== previousSection && overviewVars.sectionTabData[section]){
+            showToolTip(input, '이미 존재하는 탭 이름입니다. 다른 이름을 입력해주세요.')
+            input.value = previousSection;
+            return;
+        }
+
+        // 탭 이름이 변경될때
+        if (previousSection && previousSection !== section) {
+            if (overviewVars.sectionTabData[previousSection]) {
+                overviewVars.sectionTabData[section] = overviewVars.sectionTabData[previousSection];
+                delete overviewVars.sectionTabData[previousSection];
+            } else {
+                overviewVars.sectionTabData[section] = [];
+            }
+        } else if (!overviewVars.sectionTabData[section]) {
+            overviewVars.sectionTabData[section] = [];
+        }
+
+        previousSection = section;
+    });
+
+    // 탭 삭제 이벤트
+    closeBtn.addEventListener('click', async (e) => {
+        e.stopPropagation();
+        const title = input.value;
+        const tabLength = document.querySelectorAll('.section-tabs .tab').length;
+        const tabInput = document.querySelector('.section-tabs .tab input');
+        const cell = document.querySelectorAll('.section-content--cell input');
+        const emptyTab = !tabInput?.value.trim();
+        const emptyCell = Array.from(cell).every(input => !input.value.trim());
+
+        // 탭이 한 개 남았고 공백일 경우 삭제 막기
+        if (tabLength === 1 && emptyTab && emptyCell) return;
+
+        try {
+            if (tabLength === 1) {
+                delete overviewVars.sectionTabData[title];
+                document.querySelector('.section-tabs .tab input').value = '';
+                document.querySelectorAll('.section-content .section-content--cell').forEach((cell, index) => {
+                    if(index === 0){
+                        cell.querySelectorAll('input').forEach(input => input.value = '');
+                    } else{
+                        // 셀 추가 버튼을 건너뜀
+                        if(cell.className === 'section-content--cell add-cell-btn') return;
+                        cell.remove();
+                    }
+                });
+            } else {
+                delete overviewVars.sectionTabData[title];
+                tab.remove();
+                const allTabs = document.querySelectorAll('.section-tabs .tab');
+                const lastTab = allTabs[allTabs.length - 1];
+                if (lastTab) lastTab.click();
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    });
+}
+
+// 셀 렌더딩
+function renderCells(title, container) {
+    container.innerHTML = '';
+    let cells = overviewVars.sectionTabData[title] || [{ key: '', value: '', id: '' }];
+    // 타이틀만 있고 셀의 내용이 없을때 기본값 설정
+    if(cells.length === 0) cells = [{ key: '', value: '', id: '' }];
+    cells.forEach(cell => {
+        const row = createCell(cell);
+        bindCellEvents(row, title);
+        container.appendChild(row);
+    });
+
+    if (!container._hasInputEvent) {
+        container.addEventListener('input', (e) => {
+            if (!e.target.matches('input')) return;
+
+            const section = document.querySelector('.tab.click-on input').value.trim();
+
+            if (section === '') {
+                container.querySelectorAll('.section-content--cell input').forEach(cell => {
+                    cell.value = ''
+                });
+                showToolTip(e.target, '탭의 제목을 먼저 입력해주세요')
+                return 
+            }
+
+            const keyInputs = container.querySelectorAll('input.short-input');
+            const valueInputs = container.querySelectorAll('input.middle-input');
+
+            const keyValueList = [];
+            for (let i = 0; i < keyInputs.length; i++) {
+                const key = keyInputs[i].value;
+                const value = valueInputs[i] ? valueInputs[i].value : '';
+                const id = keyInputs[i].dataset.id ? parseInt(keyInputs[i].dataset.id) : null;
+                const projectId = vars.project_id;
+                keyValueList.push({ key, value, id, projectId });
+            }
+
+            overviewVars.sectionTabData[section] = keyValueList;
+        });
+        container._hasInputEvent = true;
+    }
+
+    // 셀 추가 버튼
+    const addCell = document.createElement('div');
+    addCell.className = 'section-content--cell add-cell-btn';
+    addCell.innerHTML = `
+        <img class="icon" src="/main/img/overview/icon-add-primary.svg" alt="icon-add-primary">
+        <h3>셀추가</h3>`;
+    addCell.addEventListener('click', () => {
+        const newCell = createCell({ key: '', value: '', id: null });
+        bindCellEvents(newCell, title);
+        container.insertBefore(newCell, addCell);
+    });
+    container.appendChild(addCell);
+}
+
+// 셀 생성
+function createCell(cell) {
+    const row = document.createElement('div');
+    row.className = 'section-content--cell';
+    row.innerHTML = `
+        <input class="short-input" type="text" value="${cell.key ?? ''}" data-id="${cell.id ?? ''}" placeholder="셀 제목 입력">
+        <input class="middle-input" type="text" value="${cell.value ?? ''}" data-id="${cell.id ?? ''}" placeholder="셀 내용 입력">
+    `;
+    const btn = document.createElement('button');
+    btn.classList.add('xs-btn', 'cell-remove');
+    btn.innerHTML = `<img src="/main/img/overview/icon-close-111.svg">`;
+    row.appendChild(btn);
+    return row;
+}
+
+// 셀 삭제 버튼 이벤트 추가
+function bindCellEvents(row, title) {
+    const btn = row.querySelector('.cell-remove');
+    const cellId = row.querySelector('input')?.dataset.id;
+    btn.addEventListener('click', async () => {
+        try {
+            // 기본생성된 셀 이벤트에서 title이 들어오지 않는 경우가 있어서 값을 직접 넣어줌
+            title = document.querySelector('.section-tabs .tab.click-on input').value;
+            const cells = document.querySelectorAll('.section-content--cell');
+
+            if (cellId) {
+                // DB 삭제 성공 시 sectionTabData 업데이트
+                const index = overviewVars.sectionTabData[title].findIndex(item => item.id == cellId);
+                if (index !== -1) overviewVars.sectionTabData[title].splice(index, 1);
+            } else {
+                // 탭 입력이 되지않고 sectionTabData에 data가 없을때 row 삭제처리
+                if(!overviewVars.sectionTabData[title]){
+                    if(cells.length > 2){
+                        return row.remove();
+                    } else {
+                        return;
+                    }
+                }
+                const index = overviewVars.sectionTabData[title].findIndex(item => item.key === row.querySelector('.short-input')?.value && item.value === row.querySelector('.middle-input')?.value);
+                if(index !== -1) overviewVars.sectionTabData[title].splice(index, 1);
+            }
+            
+            // 셀이 하나뿐이면 value 초기화, 아니면 삭제
+            if (cells.length === 2) {
+                row.querySelectorAll('input').forEach(input => input.value = '');
+            } else {
+                row.remove();
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    });
+}
+
+
+// Section-left 시설규모 모달 OPEN
+document.querySelector('.overview .box-header--right.facility-size button')?.addEventListener('click', async () => {
+    const modalWrapper = document.querySelector('.overview-modal-wrapper');
+    const modal = document.querySelector('.overview-modal.facility-size');
+
+    //토글
+    if (modal.style.display === 'block') {
+        modal.style.display = 'none';
+        modalWrapper.style.display = 'none';
+        return;
+    }
+
+    try {
+        const res = await axios.get(`/${vars.project_id}/overview/getFacilitySizeData`, { params: { projectId: vars.project_id } });
+        if (res.data.message === '200') {
+            const modalBody = modal.querySelector('.overview-modal-body');
+            modalBody.innerHTML = '';
+
+            const dataArr = res.data.data;
+            if (dataArr.length === 0) {
+                modalBody.innerHTML = `<img src="/main/img/overview/non-facilitySize-image.svg">`
+            }
+
+            let currentTitle = '';
+
+            for (let i = 0; i < dataArr.length; i++) {
+                if (dataArr[i].title !== currentTitle) {
+                    currentTitle = dataArr[i].title;
+
+                    const boxHeader = document.createElement('div');
+                    boxHeader.className = 'box-header';
+                    const h3 = document.createElement('h3');
+                    h3.textContent = currentTitle;
+                    boxHeader.appendChild(h3);
+                    modalBody.appendChild(boxHeader);
+
+                }
+
+                const typeWrap = document.createElement('div');
+                typeWrap.className = 'type--wrap';
+
+                const left = document.createElement('div');
+                left.className = 'type--wrap-left';
+                const p = document.createElement('p');
+                p.textContent = dataArr[i].key;
+                left.appendChild(p);
+
+                const right = document.createElement('div');
+                right.className = 'type--wrap-right';
+                const h4 = document.createElement('h4');
+                h4.textContent = dataArr[i].value;
+                right.appendChild(h4);
+
+                typeWrap.appendChild(left);
+                typeWrap.appendChild(right);
+
+                modalBody.appendChild(typeWrap);
+            }
+        }
+
+        modal.style.display = 'block';
+        modalWrapper.style.display = 'block';
+
+    } catch (err) {
+        console.log(err);
+    }
+
+});
+
+// section-left 위치도/개요도 이미지 저장
+document.querySelector('.overview-modal.section-left .overview-img-file-input')?.addEventListener('change', () => {
+    const files = Array.from(document.querySelector('.overview-modal.section-left .overview-img-file-input').files);
+    
+    // 중복 이름과 확장자 체크
+    checkDuplicatesFileNameAndExt(files);
+    // 등록된 파일의 이름을 추가
+    displayFileName();
+
+    // 초기화
+    document.querySelector('.overview-modal.section-left .overview-img-file-input').value = '';
+});
+
+// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Secion-Left 모달 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
+
+//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Secion-Middle 모달 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
+
+// section-middle 모달 열기
+document.querySelector('.overview .box-header--right.section-middle-edit')?.addEventListener('click', () => {
+    const modal = document.querySelector('.overview-modal.section-middle');
+    const modalWrapper = document.querySelector('.overview-modal-wrapper');
+
+    modal.querySelector('.abbreviated-name').value = document.querySelector('.overview .abbreviated-name').innerText;
+    modal.querySelector('.task-nm-en').value = document.querySelector('.overview .task-nm-en').innerText;
+    modal.querySelector('.task-purpose').value = document.querySelector('.overview .task-purpose').innerText;
+    modal.querySelector('.order-size-usd').value = document.querySelector('.overview .order-size-usd').innerText;
+    modal.querySelector('.order-size-krw').value = document.querySelector('.overview .order-size-krw').innerText;
+    modal.querySelector('.client-origin').value = document.querySelector('.overview .client-origin').innerText;
+    modal.querySelector('.financial').value = document.querySelector('.financial').innerText;
+    modal.querySelector('.financial-country').value = document.querySelector('.overview .financial-country').innerText;
+    modal.querySelector('.selection-method').value = document.querySelector('.overview .selection-method').innerText;
+    modal.querySelector('.overview-table-container').innerHTML = document.querySelector('.overview .overview-table-container ').innerHTML;
+    modal.querySelector('.support-department').value = document.querySelector('.overview .support-department').innerText;
+    modal.querySelector('.support-manager-nm').value = document.querySelector('.overview .support-manager-nm').innerText;
+    modal.querySelector('.completion-date').value = document.querySelector('.overview .completion-date').innerText;
+
+    // overseas용 분기
+    if(!overviewVars.overseas){
+        modal.querySelector('.project-no').value = document.querySelector('.overview .project-no').innerText;
+        modal.querySelector('.task-type').value = document.querySelector('.overview .task-type').innerText;
+        modal.querySelector('.bid').value = document.querySelector('.overview .bid').innerText;
+        modal.querySelector('.client').value = document.querySelector('.overview .client').innerText;
+        modal.querySelector('.department').value = document.querySelector('.overview .department').innerText;
+        modal.querySelector('.currency-code').value = document.querySelector('.overview .currency-code').innerText;
+        modal.querySelector('.task-nm-kr').value = document.querySelector('.overview .task-nm-kr').innerText;
+        modal.querySelector('.contract-period').value = document.querySelector('.overview .contract-period').innerText;
+        modal.querySelector('.projectmanager-nm').value = document.querySelector('.overview .projectmanager-nm').innerText;
+        modal.querySelector('.manager-nm').value = document.querySelector('.overview .manager-nm').innerText;
+        modal.querySelector('.contract-date').value = document.querySelector('.overview .contract-date').innerText;
+        modal.querySelector('.commencement-date').value = document.querySelector('.overview .commencement-date').innerText;
+        modal.querySelector('.scheduled-completion-date').value = document.querySelector('.overview .scheduled-completion-date').innerText;
+        modal.querySelector('.scheuled-commencement-date').value = document.querySelector('.overview .scheuled-commencement-date').innerText;
+
+        modal.querySelectorAll('.joint-contract-company-name').forEach(company => { company.contentEditable = true; company.style.color = '#FF3D00'; })
+        // 공동도급 수정, 색상변화, 숫자 제한
+        modal.querySelectorAll('.joint-contract-company-shares, .joint-contract-krw, .joint-contract-usd').forEach(joint => {
+            joint.contentEditable = true;
+            joint.style.color = '#FF3D00';
+            joint.addEventListener('input', (event) => {
+                restrictToNumber(joint, event);
+                calculateTotalJointContract(joint);
+            });
+        });
+    } else {
+        modal.querySelector('.project-no').innerText = document.querySelector('.overview .project-no').innerText;
+        modal.querySelector('.task-type').innerText = document.querySelector('.overview .task-type').innerText;
+        modal.querySelector('.bid').innerText = document.querySelector('.overview .bid').innerText;
+        modal.querySelector('.client').innerText = document.querySelector('.overview .client').innerText;
+        modal.querySelector('.department').innerText = document.querySelector('.overview .department').innerText;
+        modal.querySelector('.currency-code').innerText = document.querySelector('.overview .currency-code').innerText;
+        modal.querySelector('.task-nm-kr').innerText = document.querySelector('.overview .task-nm-kr').innerText;
+        modal.querySelector('.contract-period').innerText = document.querySelector('.overview .contract-period').innerText;
+        modal.querySelector('.projectmanager-nm').innerText = document.querySelector('.overview .projectmanager-nm').innerText;
+        modal.querySelector('.manager-nm').innerText = document.querySelector('.overview .manager-nm').innerText;
+        modal.querySelector('.contract-date').innerText = document.querySelector('.overview .contract-date').innerText;
+        modal.querySelector('.commencement-date').innerText = document.querySelector('.overview .commencement-date').innerText;
+        modal.querySelector('.scheduled-completion-date').innerText = document.querySelector('.overview .scheduled-completion-date').innerText;
+        modal.querySelector('.scheuled-commencement-date').innerText = document.querySelector('.overview .scheuled-commencement-date').innerText;
+    }    
+
+    const jointTable = modal.querySelector('.overview-table-container')
+    // 탭 컨테이너 가로스크롤 휠 이벤트 추가
+    jointTable.addEventListener('wheel', (e)=> {
+        e.preventDefault();
+        jointTable.scrollLeft += e.deltaY;
+    });
+
+    // 토글 처리
+    if (modal.style.display === 'block') {
+        modal.style.display = 'none';
+        return;
+    }
+    modal.style.display = 'block';
+    modalWrapper.style.display = 'block';
+
+});
+
+// section-middle 과업기간 모달 열기
+document.querySelector('.overview .box-header--right.task-period')?.addEventListener('click', async () => {
+    const modal = document.querySelector('.overview-modal.task-period');
+    const modalWrapper = document.querySelector('.overview-modal-wrapper');
+
+    modal.querySelector('.contract-date').innerText = document.querySelector('.overview .contract-date').innerText;
+    modal.querySelector('.commencement-date').innerText = document.querySelector('.overview .commencement-date').innerText;
+    modal.querySelector('.scheduled-completion-date').innerText = document.querySelector('.overview .scheduled-completion-date').innerText;
+    modal.querySelector('.completion-date').innerText = document.querySelector('.overview .completion-date').innerText;
+
+    // 과업 중지 이력 생성
+    makeTaskHistory();
+
+    // 토글 처리
+    if (modal.style.display === 'block') {
+        modal.style.display = 'none';
+        return;
+    }
+    modal.style.display = 'block';
+    modalWrapper.style.display = 'block';
+});
+
+// section-middle 과업중지 이력 리스트 추가
+document.querySelector('.overview-modal.task-period .box-header--right button')?.addEventListener('click', () => {
+    const ul = document.querySelector('.overview-modal.task-period .overview-modal-body ul');
+    const li = document.createElement('li');
+
+    // 차수
+    const numberDiv = document.createElement('div');
+    numberDiv.className = 'work-list-number';
+    const orderInput = document.createElement('input');
+    orderInput.type = 'text';
+    orderInput.className = 'order work-list-number';
+
+    numberDiv.appendChild(orderInput);
+
+    // 중지일자
+    const dateDiv = document.createElement('div');
+    dateDiv.className = 'work-list-date';
+    const dateInput = document.createElement('input');
+    dateInput.className = 'suspension-date work-list-date';
+    dateInput.type = 'date';
+
+    dateDiv.appendChild(dateInput);
+
+    // 중지사유
+    const reasonDiv = document.createElement('div');
+    reasonDiv.className = 'work-list-script';
+    const reasonInput = document.createElement('input');
+    reasonInput.className = 'suspension-reason work-list-script';
+    reasonInput.type = 'text';
+
+    reasonDiv.appendChild(reasonInput);
+
+    // 재개일자
+    const redateDiv = document.createElement('div');
+    redateDiv.className = 'work-list-redate';
+    const redateInput = document.createElement('input');
+    redateInput.className = 'resumption-date work-list-redate';
+    redateInput.type = 'date';
+
+    redateDiv.appendChild(redateInput);
+
+    // 협의내용
+    const detailDiv = document.createElement('div');
+    detailDiv.className = 'work-list-detail';
+    const consultInput = document.createElement('input');
+    consultInput.className = 'consuletation-content work-list-detail';
+    consultInput.type = 'text';
+
+    detailDiv.appendChild(consultInput);
+
+    // 변경 일자
+    const changeDiv = document.createElement('div');
+    changeDiv.className = 'work-list-changedate';
+    const changeInput = document.createElement('input');
+    changeInput.className = 'change-date work-list-changedate';
+    changeInput.type = 'date';
+
+    changeDiv.appendChild(changeInput);
+
+
+    const btn = document.createElement('button');
+    btn.className = 'xs-btn-type';
+    const img = document.createElement('img');
+    img.className = 'icon';
+    img.src = '/main/img/overview/icon-close-111.svg';
+    img.alt = 'icon-close-111';
+    btn.appendChild(img);
+    // 과업 중지이력 리스트 개별 삭제버튼
+    btn.addEventListener('click', async (e) => {
+        li.remove();
+    });
+
+    li.append(numberDiv, dateDiv, reasonDiv, redateDiv, detailDiv, changeDiv, btn);
+
+    ul.appendChild(li);
+
+});
+
+if(!overviewVars.overseas){
+    // section-middle 공동도급 열 추가
+    document.querySelector('.overview-modal.section-middle .joint-contract-add')?.addEventListener('click', () => {
+        const table = document.querySelector('.overview-modal.section-middle .overview-table-container table');
+        const headerRow = table.querySelector('thead tr');
+        const currentCols = headerRow.querySelectorAll('th').length;
+
+        // 총계와 주관사
+        const newIndex = currentCols - 1;
+        document.querySelector('.overview-modal .total-joint-contract-company-name').innerText = newIndex;
+        const newTh = document.createElement('th');
+        if (newIndex < 2) {
+            newTh.innerText = '주관사';
+        } else {
+            newTh.innerText = `공동도급${newIndex - 1}`;
+        }
+        headerRow.appendChild(newTh);
+
+        const tbodyRows = table.querySelectorAll('tbody tr');
+
+        const defaultValues = ['회사명', '0', '0', '0'];
+        const classList = ['joint-contract-company-name', 'joint-contract-company-shares', 'joint-contract-krw', 'joint-contract-usd'];
+
+        tbodyRows.forEach((row, idx) => {
+            const td = document.createElement('td');
+            td.className = classList[idx];
+            td.innerText = defaultValues[idx];
+            td.contentEditable = true;
+            td.style.color = '#FF3D00';
+            // 공동도급  숫자 제한
+            if (idx > 0) {
+                td.addEventListener('input', (event) => {
+                    restrictToNumber(td, event);
+                    calculateTotalJointContract(td);
+                });
+            }
+            row.appendChild(td);
+        });
+    });   
+
+    // section-middle 공동도급 열 삭제
+    document.querySelector('.overview-modal.section-middle .joint-contract-delete')?.addEventListener('click', () => {
+    const table = document.querySelector('.overview-modal.section-middle .overview-table-container table');
+        const theadRow = table.querySelector('thead tr');
+        const ths = theadRow.querySelectorAll('th');
+        // 주관사까지 삭제했을때 계산할 값이 없으므로 초기화
+        if (ths.length === 3){
+            document.querySelector('.overview-modal .total-joint-contract-company-name').innerText = 0;
+            document.querySelectorAll('.overview-modal .total-joint-contract-company-shares, .overview-modal .total-joint-contract-krw, .overview-modal .total-joint-contract-usd').forEach(el => el.innerText = 0);
+        }
+        if (ths.length <= 2) {
+            alert("삭제할 수 있는 열이 없습니다.");
+            return;
+        }
+
+        // 마지막 th 삭제
+        theadRow.removeChild(ths[ths.length - 1]);
+
+        // tbody의 마지막 td 삭제
+        const tbodyRows = table.querySelectorAll('tbody tr');
+        tbodyRows.forEach(row => {
+            const tds = row.querySelectorAll('td');
+            if (tds.length > 2) {
+                row.removeChild(tds[tds.length - 1]);
+            }
+        });
+        // 삭제시에 총계 계산
+        document.querySelectorAll('.overview-modal.section-middle .overview-table-container td').forEach(td => {
+            calculateTotalJointContract(td);
+        });
+
+        // 총 회사 수 업데이트
+        document.querySelector('.overview-modal .total-joint-contract-company-name').innerText = ths.length - 3;
+    });
+}
+
+// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Secion-Middle 모달 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼
+
+//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Secion-Right 모달 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
+
+// section-right 캘린더 주요일정 하루종일 버튼
+document.querySelector('.overview-modal.schedule .custom-checkbox.all-day')?.addEventListener('change', () => {
+    const allDay = document.querySelector('.overview-modal.schedule .custom-checkbox.all-day input');
+    const startTime = document.querySelector('.overview-modal.schedule .startTime');
+    const endTime = document.querySelector('.overview-modal.schedule .endTime');
+
+    const isChecked = allDay.checked;
+
+    startTime.disabled = isChecked;
+    endTime.disabled = isChecked;
+
+    if (isChecked) {
+        startTime.value = '';
+        endTime.value = '';
+    } else {
+        startTime.value = '00:00';
+        endTime.value = '23:59';
+    }
+
+});
+
+// section-right 주요일정 Color 클릭 효과
+document.querySelectorAll('.overview-modal .color .label-color')?.forEach(btn => {
+    btn.addEventListener('click', (e) => {
+        document.querySelectorAll('.overview-modal .color .label-color').forEach(label => {
+            label.classList.remove('on');
+        });
+        e.target.classList.add('on');
+    });
+});
+
+
+// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Secion-Right 모달 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼

views/main/jsm/overview/overviewVariable.js

@@ -0,0 +1,44 @@
+export const overviewVars = {
+    // 시설규모 탭안에 셀요소들을 담아놓은 객체    
+    sectionTabData : {},
+
+    originalSectionTabData : {},
+
+    // 캘린더 현재년도
+    currentYear : new Date().getFullYear(),
+
+    // 캘린더 현재월
+    currentMonth : new Date().getMonth(),
+
+    // 공동도급 정렬 배열
+    companyArr : [],
+    
+    // 이미지 파일들을 담은 전역변수
+    filesArr : [],
+
+    // 이미지 파일이름만을 담은 전역변수
+    filesNameArr : [],
+
+    // 이미지 파일들의 size를 담은 전역변수
+    filesSizeArr : [],
+
+    originalFilesArr : [],
+
+    originalFilesNameArr : [],
+
+    originalFilesSizeArr : [],
+
+    deleteImgArr : [],
+
+    // DB에 있는 주요 현안 및 이슈 담은 전역변수
+    issueData : {},
+
+    // 삭제할 과업중지 이력을 모아놓을 배열
+    deleteTaskHistory : [],
+}
+
+// window.overviewVars = overviewVars;
+
+
+
+

views/main/jsm/popup.js

@@ -0,0 +1,574 @@
+//형태는 ?path=fullPath(ex.http://gsim.hanmac..../1.jpg)&data=eadNadfl
+//data는 json({key:value})을 stringify한 후에 btoa로 base64로 변경해서 달기.
+//ex)
+//const jsonData = JSON.stringify({ key1: "value1", key2: "value2" });
+//const encodedData = btoa(jsonData); 
+//?path=${fullPath}&data=${encodedData}
+//넘어간 data는 모두 표출됨, 숨길 data는 key 앞에 $붙여주기(type, password는 그냥써도 무조건 표출X)
+
+//받는 형태는 pdf, img(png, jpg, jpeg, panorama), mp4, gsim(gsimViewer로 redirect), ifc, 미지원 6가지
+const searchParam = new URLSearchParams(window.location.search);
+//serchParam 비워주기 - debug off
+// window.history.replaceState(null, null, '/')
+
+const fullPath = searchParam.get('path');
+let ext = fullPath.toLowerCase().split('.').pop();//가장 마지막.이후 확장자
+
+const dataA = searchParam.get('data');
+// title filename으로 변경
+document.title = fullPath.split('/').pop();
+let data = (dataA)?JSON.parse((dataA)?decodeURIComponent(escape(atob(dataA))):'{}'):undefined;
+//data로 ext 넘어오면 무조건 변경
+ext = data.$ext;
+
+
+// 🚩3d모델뷰어 썸네일 생성을 위해 아래의 변수 추가
+const thumbnail_key = decodeURIComponent(searchParam.get('thumbnail_key'));
+const path_name = searchParam.get('path_name');
+const resourcePath = decodeURIComponent(searchParam.get('resourcePath'));
+const dataId = searchParam.get('dataId');
+
+if(data && Object.keys(data).length>0 && (data.$type == 'text'|| data.type == 'text')){
+    //type text로 넘어왔을때 무조건 text뷰어로 연결
+    _openText(fullPath);
+}else{
+    switch(ext){
+        case 'pdf':
+            _openPdf(fullPath,data);
+            break;
+        case 'mp4':
+        case 'mov':
+        case 'webm':
+            _openVideo(fullPath);
+            break;
+        case 'png':
+        case 'jpg':
+        case 'jpeg':
+        case 'webp':
+        case 'gif':
+            if(data && Object.keys(data).length>0 && (data.$type == 'panorama'||data.type == 'panorama')){
+                // data 있으면서 type이 panorama인 경우
+                _openPano(fullPath);
+            }else{
+                _openImage(fullPath);
+            }
+            break;
+        case 'gsim':
+            // gsim viewer 주소로 변경 필요
+            window.location.href = `/libs/gsimViewer/gsimViewer.html?${searchParam.toString()}`;
+            break;
+        case 'ifc':
+            _openIfc(fullPath, thumbnail_key, resourcePath, dataId, path_name);
+            break;
+        case 'txt':
+        case 'log':
+        case 'md':
+            _openText(fullPath);
+            break;
+        case 'url':
+            _openUrl(fullPath);
+            break;
+        case 'zip':
+            _openZip(fullPath);
+            break;
+        case 'glb':
+        case 'gltf':
+        case 'obj':
+        case 'stl':
+        case 'fbx':
+        case '3dm':
+            _open3d(fullPath, thumbnail_key, resourcePath, dataId, path_name);
+            break;
+        case 'html':
+            _openHtml(fullPath);
+            break;
+    }
+    if(data && Object.keys(data).length>0){
+        let keys = Object.keys(data).filter(key=>key.indexOf('$') != 0);
+        if(keys.length > 0){
+            _drawMeta(data);
+        }
+    }
+}
+
+function _openText(path){
+    // ext를 매개변수로 받아도 md파일이 txt로 넘어오기때문에 경로에서 직접 ext 추출
+    let ext = path.split('.').pop();
+    ext = ext.split('%')[0];
+    fetch(path).then(res => res.text()).then(data=>{
+        let pre;
+        // md 파일 확장자 일때 파싱 후 HTML 삽입
+        if(ext === 'md'){
+            pre = document.createElement('div');
+            pre.classList.add('markdown-wrap');
+            // mermaid 시퀀스 다이어 그램 변환
+            const renderer = new marked.Renderer();
+            const originalCode = renderer.code.bind(renderer);
+            renderer.code = (code) => {
+                if(code.lang === 'mermaid') return `<pre class="mermaid">${code.text}</pre>`
+                return originalCode(code);
+            }
+            marked.setOptions({ gfm: true, breaks: true, renderer});
+            const div = document.createElement('div');
+            div.classList.add('markdown-body');       
+            div.innerHTML = marked.parse(data);
+            // mermaid 초기화 및 생성
+            const mermaidEls = div.querySelectorAll('.mermaid');
+            if(mermaidEls.length > 0){
+                mermaid.initialize({ startOnLoad: false });
+                mermaid.init(undefined, mermaidEls);
+            }
+            pre.appendChild(div);
+        } else {
+            pre = document.createElement('pre');
+            pre.style.width = '100%';
+            pre.style.height = '100%';
+            pre.style.objectFit = 'contain';
+            pre.textContent = data;
+        }
+        document.getElementById('popup_viewer').appendChild(pre);
+        if(ext === 'md')hljs.highlightAll();
+    }).catch(err=>console.error('파일 로드 실패', err));
+}
+
+function _openZip(path){
+    fetch(path).then(async data=>{
+        let zblob = await data.blob();
+
+        const zip = new JSZip();
+        await zip.loadAsync(zblob);
+        let folderText = ``;
+        let fileText = ``;
+
+        zip.forEach((relativePath, zipEntry) => {
+            let slashIdx = relativePath.indexOf('/');
+            if(slashIdx == -1 || slashIdx == relativePath.length -1){
+                if(zipEntry.dir){
+                    folderText += `(폴더) ${zipEntry.name.split('/')[0]} \n`;
+                }else{
+                    fileText += `(파일) ${zipEntry.name} \n`
+                }
+            }
+        });
+
+        const pre = document.createElement('pre');
+        pre.style.width = '100%';
+        pre.style.height = '100%';
+        pre.style.objectFit = 'contain';
+        pre.textContent = `${folderText}${(folderText == ``)?'':'\n'}${fileText}`;
+        document.getElementById('popup_viewer').appendChild(pre);
+    })
+}
+
+function _openUrl(path){
+    fetch(path).then(res => res.text()).then(data=>{
+        let url = data.split('URL=')[1];
+        let iframe = document.createElement('iframe');
+        iframe.src = url;
+        iframe.style.width = '100%'; // 컨테이너에 맞게 너비 설정
+        iframe.style.height = '100%'; // 컨테이너에 맞게 높이 설정
+        iframe.style.border = 'none'; // 테두리 제거 (선택 사항)
+
+        document.getElementById('popup_viewer').appendChild(iframe);
+    }).catch(err=>console.error('파일 로드 실패', err));
+}
+
+function _openHtml(path){
+    fetch(path).then(res => res.text()).then(data=>{
+        let iframe = document.createElement('iframe');
+        iframe.srcdoc = data;
+        iframe.style.width = '100%'; // 컨테이너에 맞게 너비 설정
+        iframe.style.height = '100%'; // 컨테이너에 맞게 높이 설정
+        iframe.style.border = 'none'; // 테두리 제거 (선택 사항)
+
+        document.getElementById('popup_viewer').appendChild(iframe);
+    }).catch(err=>console.error('파일 로드 실패', err));
+}
+
+// function _openPdf(path,data){
+//     let pdf_options = {
+//             url: path,
+//             initialPage: 1,
+//         };
+//     if(data && Object.keys(data).length > 0 && (data.$password || data.password)){
+//         pdf_options.password = (data.$password)?data.$password:data.password;
+//     }
+
+//     let iframe = document.createElement('iframe');
+//     iframe.src = `/libs/pdfViewer/web/viewer.html`;
+//     document.getElementById('popup_viewer').appendChild(iframe);
+//     iframe.addEventListener('load', () => {
+//         // pdf 실행 시 무조건 1페이지부터 보이도록 기존 pdf 히스토리 삭제
+//         try {
+//             let appWin = iframe.contentWindow;
+//             // PDF.js의 기본 히스토리 키
+//             appWin.localStorage.removeItem('pdfjs.history');
+//             // 또는 여러 키 삭제
+//             Object.keys(appWin.localStorage).forEach(k => {
+//                 if (k.startsWith('pdfjs.history') || k.startsWith('pdfjs.preferences')) {
+//                     appWin.localStorage.removeItem(k);
+//                 }
+//             });
+//         } catch (e) { /* ignore */ }
+
+//         let app = document.querySelector('#popup_viewer iframe').contentWindow.PDFViewerApplication;
+//         app.pdfCursorTools._handTool.activate();
+        
+//         app.open(pdf_options);
+
+//         iframe.width = '100%';
+//         iframe.height = '100%';
+//     });
+// }
+
+function _openPdf(path, data) {
+    let pdf_options = {
+        url: path,
+        initialPage: 1,
+    };
+    
+    if (data && Object.keys(data).length > 0 && (data.$password || data.password)) {
+        pdf_options.password = (data.$password) ? data.$password : data.password;
+    }
+
+    let iframe = document.createElement('iframe');
+    iframe.src = `/libs/pdfViewer/web/viewer.html`;
+    document.getElementById('popup_viewer').appendChild(iframe);
+    
+    iframe.addEventListener('load', () => {
+        try {
+            let appWin = iframe.contentWindow;
+            
+            // 히스토리 삭제
+            appWin.localStorage.removeItem('pdfjs.history');
+            Object.keys(appWin.localStorage).forEach(k => {
+                if (k.startsWith('pdfjs.history') || k.startsWith('pdfjs.preferences')) {
+                    appWin.localStorage.removeItem(k);
+                }
+            });
+
+            let app = appWin.PDFViewerApplication;
+            let isRendering = false;
+            let lastScale = 1;
+            
+            app.initializedPromise.then(() => {
+                const PDFPageView = appWin.PDFPageView;
+                
+                // draw 함수를 완전히 오버라이드
+                const originalDraw = PDFPageView.prototype.draw;
+                PDFPageView.prototype.draw = function() {
+                    // 고해상도 설정
+                    this.outputScale = {
+                        sx: (window.devicePixelRatio || 1) * 2,
+                        sy: (window.devicePixelRatio || 1) * 2
+                    };
+                    return originalDraw.call(this);
+                };
+                
+                // reset 함수도 오버라이드하여 캔버스 완전 삭제
+                const originalReset = PDFPageView.prototype.reset;
+                PDFPageView.prototype.reset = function() {
+                    // 캔버스 완전히 제거
+                    if (this.canvas) {
+                        if (this.canvas.parentNode) {
+                            this.canvas.parentNode.removeChild(this.canvas);
+                        }
+                        this.canvas.width = 0;
+                        this.canvas.height = 0;
+                        this.canvas = null;
+                    }
+                    
+                    // 렌더 태스크 취소
+                    if (this.renderTask) {
+                        this.renderTask.cancel();
+                        this.renderTask = null;
+                    }
+                    
+                    return originalReset.call(this);
+                };
+                
+                if (app.pdfViewer) {
+                    app.pdfViewer.textLayerMode = 1;
+                    app.pdfViewer.useOnlyCssZoom = false;
+                }
+                
+                // 확대 시 완전 재렌더링
+                app.eventBus.on('scalechanging', function(evt) {
+                    if (isRendering) return;
+                    
+                    const newScale = evt.scale;
+                    const scaleDiff = Math.abs(newScale - lastScale);
+                    
+                    // 스케일 변화가 있을 때만 재렌더링
+                    if (scaleDiff > 0.01) {
+                        isRendering = true;
+                        
+                        setTimeout(() => {
+                            if (app.pdfViewer && app.pdfViewer._pages) {
+                                app.pdfViewer._pages.forEach(pageView => {
+                                    // 1. 렌더 태스크 강제 취소
+                                    if (pageView.renderTask) {
+                                        pageView.renderTask.cancel();
+                                        pageView.renderTask = null;
+                                    }
+                                    
+                                    // 2. 캔버스 완전 제거
+                                    if (pageView.canvas) {
+                                        const parent = pageView.canvas.parentNode;
+                                        if (parent) {
+                                            parent.removeChild(pageView.canvas);
+                                        }
+                                        pageView.canvas.width = 0;
+                                        pageView.canvas.height = 0;
+                                        pageView.canvas = null;
+                                    }
+                                    
+                                    // 3. viewport 업데이트
+                                    if (pageView.pdfPage) {
+                                        pageView.viewport = pageView.pdfPage.getViewport({
+                                            scale: newScale,
+                                            rotation: pageView.rotation || 0
+                                        });
+                                    }
+                                    
+                                    // 4. 페이지 완전 리셋
+                                    pageView.reset();
+                                    
+                                    // 5. 새로 그리기
+                                    pageView.draw();
+                                });
+                            }
+                            
+                            lastScale = newScale;
+                            isRendering = false;
+                        }, 200); // 딜레이 증가
+                    }
+                });
+                
+                // 스크롤/페이지 변경 시에도 재렌더링
+                app.eventBus.on('updateviewarea', function(evt) {
+                    if (isRendering) return;
+                    
+                    // 현재 보이는 페이지만 재렌더링
+                    const visiblePages = app.pdfViewer._getVisiblePages();
+                    if (visiblePages && visiblePages.views) {
+                        visiblePages.views.forEach(view => {
+                            if (view && view.div && view.div.classList.contains('pdfPage')) {
+                                const pageView = app.pdfViewer._pages[view.id - 1];
+                                if (pageView && !pageView.renderTask) {
+                                    pageView.draw();
+                                }
+                            }
+                        });
+                    }
+                });
+            });
+
+            app.pdfCursorTools._handTool.activate();
+            app.open(pdf_options);
+
+        } catch (e) {
+            console.error('PDF 설정 오류:', e);
+        }
+
+        iframe.width = '100%';
+        iframe.height = '100%';
+    });
+}
+
+function _openVideo(path){
+    const popupVideo = document.createElement('video');
+    popupVideo.autoplay = true;
+    popupVideo.muted = true;
+    popupVideo.playsInline = true;
+    popupVideo.controls = true;
+    popupVideo.crossOrigin = 'anonymous';
+
+    const sourceElement = document.createElement('source');
+    sourceElement.src = path;
+
+    popupVideo.style.width = '100%';
+    popupVideo.style.height = '100%';
+    popupVideo.style.objectFit = 'contain';
+
+    document.getElementById('popup_viewer').appendChild(popupVideo);
+    popupVideo.appendChild(sourceElement);
+}
+
+function _openPano(path){
+    let panorama = pannellum.viewer('popup_viewer',{
+        "type": "equirectangular",
+        "panorama": path,
+        "autoLoad": true,
+        "compass":false,
+    })
+}
+
+function _openImage(path){
+    const img = document.createElement('img');
+    img.src = path;
+    document.getElementById('popup_viewer').appendChild(img);
+    img.style.width = '100%';
+    img.style.height = '100%';
+    img.style.objectFit = 'contain';
+
+    img.addEventListener('click',()=>{
+        document.getElementById('large-img-container').style.display = 'block';
+        centerImage();
+    })
+
+    const container = document.getElementById('large-img-container');
+    const image = document.getElementById('large-image');
+    const zoomInfo = document.getElementById('large-img-zoomInfo');
+    image.src = path;
+
+    let isDragging = false;
+    let startX, startY;
+    let translateX = 0;
+    let translateY = 0;
+    let scale = 1;
+
+    // 드래그 시작
+    function dragStart(e) {
+        if (e.target !== image) return;
+        
+        isDragging = true;
+        startX = e.clientX - translateX;
+        startY = e.clientY - translateY;
+        
+        // 드래그 중일 때 transition 제거
+        image.style.transition = 'none';
+    }
+
+    // 드래그 중
+    function drag(e) {
+        if (!isDragging) return;
+        
+        e.preventDefault();
+        
+        // 현재 마우스 위치에서 시작 위치를 빼서 이동 거리 계산
+        translateX = e.clientX - startX;
+        translateY = e.clientY - startY;
+        
+        updateImageTransform();
+    }
+
+    // 드래그 종료
+    function dragEnd() {
+        if (!isDragging) return;
+        
+        isDragging = false;
+        // 드래그 종료 시 부드러운 transition 효과 복원
+        image.style.transition = 'transform 0.1s ease-out';
+    }
+
+    // 확대/축소
+    function zoom(e) {
+        e.preventDefault();
+
+        // 현재 이미지의 실제 위치와 크기
+        const imageRect = image.getBoundingClientRect();
+        
+        // 마우스 포인터의 화면상 좌표
+        const mouseX = e.clientX;
+        const mouseY = e.clientY;
+        
+        // 마우스 포인터의 이미지상 상대 좌표
+        const mouseImageX = mouseX - imageRect.left;
+        const mouseImageY = mouseY - imageRect.top;
+        
+        // 이전 스케일 저장
+        const prevScale = scale;
+        
+        // 새로운 스케일 계산
+        const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
+        const scaleFactor = 0.1;
+        
+        if (delta > 0) {
+            scale = Math.min(4, scale + scaleFactor);
+        } else {
+            scale = Math.max(0.1, scale - scaleFactor);
+        }
+        
+        // 스케일 변화율
+        const scaleRatio = scale / prevScale;
+        
+        // 새로운 translate 값 계산
+        // 마우스 포인터 위치는 고정되어야 하므로, 스케일 변화에 따른 위치 조정
+        translateX = mouseX - (((mouseX - translateX) * scaleRatio));
+        translateY = mouseY - (((mouseY - translateY) * scaleRatio));
+        
+        updateImageTransform();
+        updateZoomInfo();
+    }
+
+    // 이미지 transform 업데이트
+    function updateImageTransform() {
+        // transform의 원점을 이미지의 중심으로 설정
+        const originX = image.offsetWidth / 2;
+        const originY = image.offsetHeight / 2;
+        image.style.transformOrigin = `${originX}px ${originY}px`;
+        image.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+    }
+
+    // 줌 정보 업데이트
+    function updateZoomInfo() {
+        zoomInfo.textContent = `${Math.round(scale * 100)}%`;
+    }
+
+    // 이미지 초기 위치 설정
+    function centerImage() {
+        translateX = (container.offsetWidth - image.offsetWidth) / 2;
+        translateY = (container.offsetHeight - image.offsetHeight) / 2;
+        updateImageTransform();
+    }
+
+    // 이벤트 리스너 등록
+    container.addEventListener('mousedown', dragStart);
+    window.addEventListener('mousemove', drag);
+    window.addEventListener('mouseup', dragEnd);
+    container.addEventListener('wheel', zoom);
+    container.addEventListener('contextmenu',(e)=>{
+        e.preventDefault();
+        container.style.display = 'none';
+    })
+
+    // 더블클릭으로 원래 크기로 복원
+    container.addEventListener('dblclick', () => {
+        scale = 1;
+        updateZoomInfo();
+    });
+}
+
+function _openIfc(path, thumbnail_key, resourcePath, dataId, path_name){
+    const iframe = document.createElement('iframe');
+    iframe.onload = () => {
+        iframe.contentWindow.postMessage({ path, thumbnail_key, resourcePath, dataId, path_name }, '*');  // path 값을 iframe에 전달
+    };
+    iframe.src = `/libs/ifcViewer/index.html`;
+    iframe.width = '100%';
+    iframe.height = '100%';
+    document.getElementById('popup_viewer').appendChild(iframe);
+}
+
+function _open3d(path, thumbnail_key, resourcePath, dataId, path_name){
+    const iframe = document.createElement('iframe');
+    iframe.onload = () => {
+        iframe.contentWindow.postMessage({ path, thumbnail_key, resourcePath, dataId, path_name }, '*');  // path 값을 iframe에 전달
+    };
+    iframe.src = `/libs/3dViewer/index.html`;
+    iframe.width = '100%';
+    iframe.height = '100%';
+    document.getElementById('popup_viewer').appendChild(iframe);
+}
+
+function _drawMeta(data){
+    let container = document.getElementById('meta-data');
+    container.style.display = 'block';
+    Object.keys(data).forEach(item=>{
+        if(!item.startsWith('$') && item != 'type' && item != 'password'){
+            let line = `<span class="key">${item}</span> : <span>${data[item]}</span><br>`;
+            container.innerHTML += line;
+        }
+    })
+}