feat: 메일 관리 UI 개편 및 시스템 구조 최적화

- UI/UX: 메일 관리 레이아웃 고도화 및 미리보기 토글 핸들 도입
- 기능: 주소록 CRUD 기능 추가 및 모달 인터페이스 개선
- 구조: CSS 파일 기능별 분리 및 Jinja2 템플릿 엔진 도입
- 백엔드: OCR 비동기 처리 및 CSV 파싱(BOM) 안정화
- 데이터: 2026.03.04 기준 최신 프로젝트 현황 업데이트

js/common.js

@@ -0,0 +1,9 @@
+// 공통 네비게이션 및 유틸리티 로직
+function navigateTo(path) {
+    location.href = path;
+}
+
+// 상단바 클릭 시 홈으로 이동 등 공통 이벤트 설정
+document.addEventListener('DOMContentLoaded', () => {
+    // 필요한 경우 공통 초기화 로직 추가
+});

js/dashboard.js

@@ -0,0 +1,267 @@
+let rawData = [];
+
+const continentMap = {
+    "라오스": "아시아", "미얀마": "아시아", "베트남": "아시아", "사우디아라비아": "아시아",
+    "우즈베키스탄": "아시아", "이라크": "아시아", "캄보디아": "아시아",
+    "키르기스스탄": "아시아", "파키스탄": "아시아", "필리핀": "아시아",
+    "아르헨티나": "아메리카", "온두라스": "아메리카", "볼리비아": "아메리카", "콜롬비아": "아메리카",
+    "파라과이": "아메리카", "페루": "아메리카", "엘살바도르": "아메리카",
+    "가나": "아프리카", "기니": "아프리카", "우간다": "아프리카", "에티오피아": "아프리카", "탄자니아": "아프리카"
+};
+
+const continentOrder = {
+    "아시아": 1,
+    "아프리카": 2,
+    "아메리카": 3,
+    "지사": 4
+};
+
+async function init() {
+    const container = document.getElementById('projectAccordion');
+    if (!container) return; 
+
+    // 서버에서 최신 sheet.csv 데이터 가져오기 (캐시 방지 위해 timestamp 추가)
+    try {
+        const response = await fetch(`/project-data?t=${new Date().getTime()}`);
+        rawData = await response.json();
+        console.log("Loaded rawData:", rawData);
+        if (rawData.error) throw new Error(rawData.error);
+    } catch (e) {
+        console.error("데이터 로드 실패:", e);
+        alert("데이터를 가져오는 데 실패했습니다.");
+        return;
+    }
+
+    container.innerHTML = ''; // 초기화
+    const groupedData = {};
+
+    rawData.forEach((item, index) => {
+        const projectName = item[0];
+        let continent = "";
+        let country = "";
+
+        if (projectName.endsWith("사무소")) {
+            continent = "지사";
+            country = projectName.split(" ")[0];
+        } else if (projectName.startsWith("메콩유역")) {
+            country = "캄보디아";
+            continent = "아시아";
+        } else {
+            country = projectName.split(" ")[0];
+            continent = continentMap[country] || "기타";
+        }
+
+        if (!groupedData[continent]) groupedData[continent] = {};
+        if (!groupedData[continent][country]) groupedData[continent][country] = [];
+
+        groupedData[continent][country].push({ item, index });
+    });
+
+    const sortedContinents = Object.keys(groupedData).sort((a, b) => (continentOrder[a] || 99) - (continentOrder[b] || 99));
+
+    sortedContinents.forEach(continent => {
+        const continentGroup = document.createElement('div');
+        continentGroup.className = 'continent-group';
+
+        let continentHtml = `
+            <div class="continent-header" onclick="toggleGroup(this)">
+                <span>${continent}</span>
+                <span class="toggle-icon">▼</span>
+            </div>
+            <div class="continent-body">
+        `;
+
+        const sortedCountries = Object.keys(groupedData[continent]).sort((a, b) => a.localeCompare(b));
+
+        sortedCountries.forEach(country => {
+            continentHtml += `
+                <div class="country-group">
+                    <div class="country-header" onclick="toggleGroup(this)">
+                        <span>${country}</span>
+                        <span class="toggle-icon">▼</span>
+                    </div>
+                    <div class="country-body">
+                        <div class="accordion-container">
+                            <div class="accordion-list-header">
+                                <div>프로젝트명</div>
+                                <div>담당부서</div>
+                                <div>담당자</div>
+                                <div style="text-align:center;">파일수</div>
+                                <div>최근로그</div>
+                            </div>
+            `;
+
+            const sortedProjects = groupedData[continent][country].sort((a, b) => a.item[0].localeCompare(b.item[0]));
+
+            sortedProjects.forEach(({ item, index }) => {
+                const projectName = item[0];
+                const dept = item[1];
+                const admin = item[2];
+                const recentLogRaw = item[3];
+                const fileCount = item[4];
+
+                const recentLog = recentLogRaw === "X" ? "기록 없음" : recentLogRaw;
+                const logTime = recentLog !== "기록 없음" ? recentLog.split(',')[0] : "기록 없음";
+
+                let statusClass = "";
+                if (fileCount === 0) statusClass = "status-error";
+                else if (recentLog === "기록 없음") statusClass = "status-warning";
+
+                continentHtml += `
+                    <div class="accordion-item ${statusClass}">
+                        <div class="accordion-header" onclick="toggleAccordion(this)">
+                            <div class="repo-title" title="${projectName}">${projectName}</div>
+                            <div class="repo-dept">${dept}</div>
+                            <div class="repo-admin">${admin}</div>
+                            <div class="repo-files ${fileCount === 0 ? 'warning-text' : ''}">${fileCount}</div>
+                            <div class="repo-log ${recentLog === '기록 없음' ? 'warning-text' : ''}" title="${recentLog}">${recentLog}</div>
+                        </div>
+                        <div class="accordion-body">
+                            <div class="detail-grid">
+                                <div class="detail-section">
+                                    <h4>참여 인원 상세</h4>
+                                    <table class="data-table">
+                                        <thead><tr><th>이름</th><th>소속</th><th>사용자권한</th></tr></thead>
+                                        <tbody>
+                                            <tr><td>${admin}</td><td>${dept}</td><td>관리자</td></tr>
+                                            <tr><td>김철수</td><td>${dept}</td><td>부관리자</td></tr>
+                                            <tr><td>박지민</td><td>${dept}</td><td>일반참여자</td></tr>
+                                            <tr><td>최유리</td><td>${dept}</td><td>참관자</td></tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <div class="detail-section">
+                                    <h4>최근 문의사항 및 파일 변경 로그</h4>
+                                    <table class="data-table">
+                                        <thead><tr><th>유형</th><th>내용</th><th>일시</th></tr></thead>
+                                        <tbody>
+                                            <tr><td><span class="badge">로그</span></td><td>데이터 동기화 완료</td><td>${logTime}</td></tr>
+                                            <tr><td><span class="badge" style="background:var(--hover-bg); border: 1px solid var(--border-color); color:var(--primary-color);">문의</span></td><td>프로젝트 접근 권한 요청</td><td>2026-02-23</td></tr>
+                                            <tr><td><span class="badge" style="background:var(--primary-color); color:white;">파일</span></td><td>설계도면 v2.pdf 업로드</td><td>2026-02-22</td></tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            });
+
+            continentHtml += `
+                        </div>
+                    </div>
+                </div>
+            `;
+        });
+
+        continentHtml += `
+            </div>
+        `;
+
+        continentGroup.innerHTML = continentHtml;
+        container.appendChild(continentGroup);
+    });
+
+    const allContinents = container.querySelectorAll('.continent-group');
+    allContinents.forEach(continent => {
+        continent.classList.add('active');
+    });
+
+    const allCountries = container.querySelectorAll('.country-group');
+    allCountries.forEach(country => {
+        country.classList.add('active');
+    });
+}
+
+function toggleGroup(header) {
+    const group = header.parentElement;
+    group.classList.toggle('active');
+}
+
+function toggleAccordion(header) {
+    const item = header.parentElement;
+    const container = item.parentElement;
+
+    const allItems = container.querySelectorAll('.accordion-item');
+    allItems.forEach(el => {
+        if (el !== item) el.classList.remove('active');
+    });
+
+    item.classList.toggle('active');
+}
+
+async function syncData() {
+    const btn = document.getElementById('syncBtn');
+    const logConsole = document.getElementById('logConsole');
+    const logBody = document.getElementById('logBody');
+
+    btn.classList.add('loading');
+    btn.innerHTML = `<span class="spinner"></span> 동기화 중 (진행 상황 확인 중...)`;
+    btn.disabled = true;
+
+    logConsole.style.display = 'block';
+    logBody.innerHTML = ''; 
+
+    function addLog(msg) {
+        const logItem = document.createElement('div');
+        logItem.innerText = `[${new Date().toLocaleTimeString()}] ${msg}`;
+        logBody.appendChild(logItem);
+        logConsole.scrollTop = logConsole.scrollHeight; 
+    }
+
+    try {
+        const response = await fetch(`/sync`);
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            const chunk = decoder.decode(value);
+            const lines = chunk.split('\n');
+
+            for (const line of lines) {
+                if (line.startsWith('data: ')) {
+                    const payload = JSON.parse(line.substring(6));
+
+                    if (payload.type === 'log') {
+                        addLog(payload.message);
+                    } else if (payload.type === 'done') {
+                        const newData = payload.data;
+                        newData.forEach(scrapedItem => {
+                            const target = rawData.find(item =>
+                                item[0].replace(/\s/g, '').includes(scrapedItem.projectName.replace(/\s/g, '')) ||
+                                scrapedItem.projectName.replace(/\s/g, '').includes(item[0].replace(/\s/g, ''))
+                            );
+
+                            if (target) {
+                                if (scrapedItem.recentLog !== "기존데이터유지") {
+                                    target[3] = scrapedItem.recentLog;
+                                }
+                                target[4] = scrapedItem.fileCount;
+                            }
+                        });
+
+                        document.getElementById('projectAccordion').innerHTML = '';
+                        init();
+                        addLog(">>> 모든 동기화 작업이 완료되었습니다!");
+                        alert(`총 ${newData.length}개 프로젝트 동기화 완료!`);
+                        logConsole.style.display = 'none'; 
+                    }
+                }
+            }
+        }
+    } catch (e) {
+        addLog(`오류 발생: ${e.message}`);
+        alert("서버 연결 실패. 백엔드 서버가 실행 중인지 확인하세요.");
+        console.error(e);
+    } finally {
+        btn.classList.remove('loading');
+        btn.innerHTML = `<span class="spinner"></span> 데이터 동기화 (크롤링)`;
+        btn.disabled = false;
+    }
+}
+
+document.addEventListener('DOMContentLoaded', init);

js/mail.js

@@ -0,0 +1,403 @@
+let currentFiles = [];
+let editingIndex = -1;
+
+const HIERARCHY = {
+    "행정": {
+        "계약": ["계약관리", "기성관리", "업무지시서", "인원관리"],
+        "업무관리": ["업무일지(2025)", "업무일지(2025년 이전)", "발주처 정기보고", "본사업무보고", "공사감독일지", "양식서류"]
+    },
+    "설계성과품": {
+        "시방서": ["공사시방서", "장비 반입허가 검토서"],
+        "설계도면": ["공통", "토공", "비탈면안전공", "배수공", "교량공", "포장공", "교통안전시설공", "부대공", "용지공 & 기타공"],
+        "수량산출서": ["토공", "비탈면안전공", "배수공", "교량공", "포장공", "교통안전시설공", "부대공", "용지공 & 기타공"],
+        "내역서": ["단가산출서"],
+        "보고서": ["실시설계보고서", "지반조사보고서", "구조계산서", "수리 및 전기계산서", "기타보고서", "기술자문 및 심의"],
+        "측량계산부": ["측량계산부"],
+        "설계단계 수행협의": ["회의·협의"]
+    },
+    "시공성과품": {
+        "설계도면": ["공통", "토공", "비탈면안전공", "배수공", "교량공", "포장공", "교통안전시설공", "부대공", "용지공 & 기타공"]
+    },
+    "시공검측": {
+        "토공": ["검측 (깨기)", "검측 (연약지반)", "검측 (발파)", "검측 (노체)", "검측 (노상)", "검측 (토취장)"],
+        "배수공": ["검측 (V형측구)", "검측 (산마루측구)", "검측 (U형측구)", "검측 (U형측구)(안)", "검측 (L형측구, J형측구)", "검측 (도수로)", "검측 (도수로)(안)", "검측 (횡배수관)", "검측 (종배수관)", "검측 (맹암거)", "검측 (통로암거)", "검측 (수로암거)", "검측 (호안공)", "검측 (옹벽공)", "검측 (용수개거)"],
+        "구조물공": ["검측 (평목교-거더, 부대공)", "검측 (평목교)(안)", "검측 (개착터널, 생태통로)"],
+        "포장공": ["검측 (기층, 보조기층)"],
+        "부대공": ["검측 (환경)", "검측 (지장가옥,건물 철거)", "검측 (방음벽 등)"],
+        "비탈면안전공": ["검측 (식생보호공)", "검측 (구조물보호공)"],
+        "교통안전시설공": ["검측 (낙석방지책)"],
+        "검측 양식서류": ["검측 양식서류"]
+    },
+    "설계변경": {
+        "실정보고(어천~공주)": ["토공", "배수공", "교량공(평목교)", "구조물공", "포장공", "교통안전공", "부대공", "전기공사", "미확정공", "안전관리", "환경관리", "품질관리", "자재관리", "지장물", "기타"],
+        "실정보고(대술~정안)": ["토공", "배수공", "비탈면안전공", "포장공", "부대공", "안전관리", "환경관리", "자재관리", "기타"],
+        "기술지원 검토": ["토공", "배수공", "교량공(평목교)", "구조물&부대공", "기타"],
+        "시공계획(어천~공주)": ["토공", "배수공", "교량공(평목교)", "구조물&부대&포장&교통안전공", "환경 및 품질관리"]
+    },
+    "공사관리": {
+        "공정·일정": ["공정표", "월간 공정보고", "작업일보"],
+        "품질 관리": ["품질시험계획서", "품질시험 실적보고", "콘크리트 타설현황[어천~공주(4차)]", "품질관리비 사용내역", "균열관리", "품질관리 양식서류"],
+        "안전 관리": ["안전관리계획서", "안전관리 실적보고", "위험성 평가", "사전작업허가서", "안전관리비 사용내역", "안전관리수준평가", "안전관리 양식서류"],
+        "환경 관리": ["환경영향평가", "사전재해영향성검토", "유지관리 및 보수점검", "환경보전비 사용내역", "건설폐기물 관리"],
+        "자재 관리 (관급)": ["자재구매요청 (레미콘, 철근)", "자재구매요청 (그 외)", "납품기한", "계약 변경", "자재 반입·수불 관리", "자재관리 양식서류"],
+        "자재 관리 (사급)": ["자재공급원 승인", "자재 반입·수불 관리", "자재 검수·확인"],
+        "점검 (정리중)": ["내부점검", "외부점검"],
+        "공문": ["접수(수신)", "발송(발신)", "하도급", "인력", "방침"]
+    },
+    "민원관리": {
+        "민원(어천~공주)": ["처리대장", "보상", "공사일반", "환경분쟁"],
+        "실정보고(어천~공주)": ["민원"],
+        "실정보고(대술~정안)": ["민원"]
+    }
+};
+
+async function loadAttachments() {
+    try {
+        const res = await fetch('/attachments');
+        currentFiles = await res.json();
+        renderFiles();
+    } catch (e) {
+        console.error("Failed to load attachments:", e);
+    }
+}
+
+function renderFiles() {
+    const isAiActive = document.getElementById('aiToggle').checked;
+    const container = document.getElementById('attachmentList');
+    if (!container) return;
+    container.innerHTML = '';
+
+    currentFiles.forEach((file, index) => {
+        const item = document.createElement('div');
+        item.className = 'attachment-item-wrap';
+        item.style.marginBottom = "8px";
+
+        let pathText = "경로를 선택해주세요";
+        let modeClass = "manual-mode";
+
+        if (file.analysis) {
+            const prefix = file.analysis.isManual ? "선택 경로: " : "추천: ";
+            pathText = `${prefix}${file.analysis.suggested_path}`;
+            modeClass = file.analysis.isManual ? "manual-mode" : "smart-mode";
+        } else if (isAiActive) {
+            pathText = "AI 분석 대기 중...";
+            modeClass = "smart-mode";
+        }
+
+        item.innerHTML = `
+            <div class="attachment-item" onclick="showPreview(${index}, event)">
+                <span class="file-icon">📄</span>
+                <div class="file-details">
+                    <div class="file-name" title="${file.name}">${file.name}</div>
+                    <div class="file-size">${file.size}</div>
+                </div>
+                <div class="btn-group">
+                    <span id="recommend-${index}" class="ai-recommend path-display ${modeClass}" onclick="openPathModal(${index}, event)">${pathText}</span>
+                    ${isAiActive ? `<button class="btn-upload btn-ai" onclick="startAnalysis(${index}, event)">AI 분석</button>` : ''}
+                    <button class="btn-upload btn-normal" onclick="confirmUpload(${index}, event)">파일 업로드</button>
+                </div>
+            </div>
+            <div id="log-area-${index}" class="file-log-area">
+                <div id="log-content-${index}"></div>
+            </div>
+        `;
+        container.appendChild(item);
+    });
+}
+
+function switchMailTab(el, tabType) {
+    document.querySelectorAll('.mail-tab').forEach(tab => tab.classList.remove('active'));
+    el.classList.add('active');
+    console.log(`Switched to ${tabType}`);
+    // 실제 데이터 필터링 로직이 있다면 여기에 추가
+}
+
+function togglePreview(show) {
+    const previewArea = document.getElementById('mailPreviewArea');
+    if (show) {
+        previewArea.classList.add('active');
+    } else {
+        previewArea.classList.remove('active');
+    }
+}
+
+function showPreview(index, event) {
+    // 버튼이나 경로 클릭 시 미리보기 방지
+    if (event.target.closest('.btn-group') || event.target.closest('.path-display')) return;
+
+    const file = currentFiles[index];
+    const previewContainer = document.getElementById('previewContainer');
+    const fullViewBtn = document.getElementById('fullViewBtn');
+    
+    // 이전에 active 상태인 아이템 해제
+    document.querySelectorAll('.attachment-item').forEach(item => item.classList.remove('active'));
+    // 현재 클릭한 아이템 active
+    event.currentTarget.classList.add('active');
+
+    togglePreview(true);
+
+    const isPdf = file.name.toLowerCase().endsWith('.pdf');
+    const fileUrl = `/sample_files/${encodeURIComponent(file.name)}`;
+
+    // 전체보기 버튼 설정
+    if (fullViewBtn) {
+        fullViewBtn.style.display = 'block';
+        fullViewBtn.onclick = () => {
+            window.open(fileUrl, 'PMFullView', 'width=1000,height=800,scrollbars=yes');
+        };
+    }
+
+    if (isPdf) {
+        // PDF의 경우 #page=1 옵션을 사용하여 첫 페이지부터 노출 (10페이지 제한은 UI 문구로 처리)
+        // 실제 브라우저 뷰어 사양에 따라 다르지만 보통 전체가 로드되므로, 안내 문구와 함께 제공
+        previewContainer.innerHTML = `
+            <iframe src="${fileUrl}#page=1" style="width:100%; height:100%; border:none;"></iframe>
+        `;
+    } else {
+        previewContainer.innerHTML = `
+            <div style="width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center;">
+                <img src="/sample.png" class="preview-image" onerror="this.src='https://via.placeholder.com/400x560?text=File+Preview'">
+                <div style="margin-top:20px; font-weight:700; color:var(--primary-color);">${file.name}</div>
+                <div style="font-size:12px; color:var(--text-sub); margin-top:8px;">본 화면은 미리보기 예시입니다.</div>
+            </div>
+        `;
+    }
+}
+
+function openPathModal(index, event) {
+    if (event) event.stopPropagation();
+    editingIndex = index;
+    const modal = document.getElementById('pathModal');
+    const tabSelect = document.getElementById('tabSelect');
+    if (!tabSelect) return;
+    tabSelect.innerHTML = Object.keys(HIERARCHY).map(tab => `<option value="${tab}">${tab}</option>`).join('');
+    updateCategories();
+    modal.style.display = 'flex';
+}
+
+function updateCategories() {
+    const tabSelect = document.getElementById('tabSelect');
+    const catSelect = document.getElementById('categorySelect');
+    if (!tabSelect || !catSelect) return;
+    const tab = tabSelect.value;
+    const cats = Object.keys(HIERARCHY[tab]);
+    catSelect.innerHTML = cats.map(cat => `<option value="${cat}">${cat}</option>`).join('');
+    updateSubs();
+}
+
+function updateSubs() {
+    const tabSelect = document.getElementById('tabSelect');
+    const catSelect = document.getElementById('categorySelect');
+    const subSelect = document.getElementById('subSelect');
+    if (!tabSelect || !catSelect || !subSelect) return;
+    const tab = tabSelect.value;
+    const cat = catSelect.value;
+    const subs = HIERARCHY[tab][cat];
+    subSelect.innerHTML = subs.map(sub => `<option value="${sub}">${sub}</option>`).join('');
+}
+
+function applyPathSelection() {
+    const tabSelect = document.getElementById('tabSelect');
+    const catSelect = document.getElementById('categorySelect');
+    const subSelect = document.getElementById('subSelect');
+    if (!tabSelect || !catSelect || !subSelect) return;
+    const tab = tabSelect.value;
+    const cat = catSelect.value;
+    const sub = subSelect.value;
+    const fullPath = `${tab} > ${cat} > ${sub}`;
+
+    if (!currentFiles[editingIndex].analysis) {
+        currentFiles[editingIndex].analysis = {};
+    }
+    currentFiles[editingIndex].analysis.suggested_path = fullPath;
+    currentFiles[editingIndex].analysis.isManual = true;
+
+    renderFiles();
+    closeModal();
+}
+
+function closeModal() {
+    const modal = document.getElementById('pathModal');
+    if (modal) modal.style.display = 'none';
+}
+
+async function startAnalysis(index, event) {
+    if (event) event.stopPropagation();
+    const file = currentFiles[index];
+    const logArea = document.getElementById(`log-area-${index}`);
+    const logContent = document.getElementById(`log-content-${index}`);
+    const recLabel = document.getElementById(`recommend-${index}`);
+
+    if (!logArea || !logContent || !recLabel) return;
+
+    logArea.classList.add('active');
+    logContent.innerHTML = '<div class="log-line log-info">>>> 3중 레이어 AI 분석 엔진 가동...</div>';
+    recLabel.innerText = '분석 중...';
+
+    try {
+        const res = await fetch(`/analyze-file?filename=${encodeURIComponent(file.name)}`);
+        const analysis = await res.json();
+        if (analysis.error) throw new Error(analysis.error);
+
+        const result = analysis.final_result;
+        const steps = [
+            `1. 파일 포맷 분석: ${file.name.split('.').pop().toUpperCase()} 감지`,
+            `2. 페이지 스캔: 총 ${analysis.total_pages}페이지 분석 완료`,
+            `3. 문맥 추론: ${result.reason}`
+        ];
+
+        steps.forEach(step => {
+            const line = document.createElement('div');
+            line.className = 'log-line';
+            line.innerText = "   " + step;
+            logContent.appendChild(line);
+        });
+
+        const resultLine = document.createElement('div');
+        resultLine.className = 'log-line log-success';
+        resultLine.style.marginTop = "8px";
+        resultLine.innerHTML = `[최종 결과] ${result.suggested_path}<br>└ 신뢰도: 100%`;
+        logContent.appendChild(resultLine);
+
+        const snippetArea = document.createElement('div');
+        snippetArea.style.cssText = "margin-top:10px; padding:10px; background:#1a202c; color:#a0aec0; font-size:11px; border-radius:4px; border-left:3px solid #63b3ed; max-height:100px; overflow-y:auto;";
+        snippetArea.innerHTML = `<strong>[AI가 읽은 핵심 내용]</strong><br>${result.snippet || "텍스트 추출 불가"}`;
+        logContent.appendChild(snippetArea);
+
+        currentFiles[index].analysis = {
+            suggested_path: result.suggested_path,
+            isManual: false
+        };
+        renderFiles();
+
+    } catch (e) {
+        logContent.innerHTML += `<div class="log-line" style="color:red;">ERR: ${e.message}</div>`;
+        recLabel.innerText = '분석 실패';
+    }
+}
+
+function confirmUpload(index, event) {
+    if (event) event.stopPropagation();
+    const file = currentFiles[index];
+    
+    if (!file.analysis || !file.analysis.suggested_path) {
+        alert("경로를 설정해주세요.");
+        return;
+    }
+
+    const path = file.analysis.suggested_path;
+    const message = `정해진 위치로 업로드하시겠습니까?\n\n위치: ${path}`;
+    if (confirm(message)) alert("업로드가 완료되었습니다.");
+}
+
+let addressBookData = [
+    { name: "이태훈", dept: "PM Overseas / 선임연구원", email: "th.lee@projectmaster.com", phone: "010-1234-5678" },
+    { name: "Pany S.", dept: "라오스 농림부 / 국장", email: "pany.s@lao.gov.la", phone: "+856-20-1234-5678" },
+    { name: "김철수", dept: "현대건설 / 현장소장", email: "cs.kim@hdec.co.kr", phone: "010-9876-5432" },
+    { name: "Nguyen Van A", dept: "베트남 전력청 / 팀장", email: "nva@evn.com.vn", phone: "+84-90-1234-5678" }
+];
+let contactEditingIndex = -1;
+
+function openAddressBook() {
+    const modal = document.getElementById('addressBookModal');
+    if (modal) {
+        renderAddressBook();
+        modal.style.display = 'flex';
+    }
+}
+
+function closeAddressBook() {
+    const modal = document.getElementById('addressBookModal');
+    if (modal) {
+        modal.style.display = 'none';
+        document.getElementById('addContactForm').style.display = 'none';
+        contactEditingIndex = -1;
+    }
+}
+
+function renderAddressBook() {
+    const body = document.getElementById('addressBookBody');
+    if (!body) return;
+    body.innerHTML = addressBookData.map((c, idx) => `
+        <tr>
+            <td><strong>${c.name}</strong></td>
+            <td>${c.dept}</td>
+            <td>${c.email}</td>
+            <td>${c.phone}</td>
+            <td style="text-align:right; white-space:nowrap;">
+                <button class="_button-xsmall" style="background:#edf2f7; color:var(--text-main); margin-right:4px;" onclick="editContact(${idx})">수정</button>
+                <button class="_button-xsmall" style="background:#fee2e2; color:#e53e3e;" onclick="deleteContact(${idx})">삭제</button>
+            </td>
+        </tr>
+    `).join('');
+}
+
+function toggleAddContactForm() {
+    const form = document.getElementById('addContactForm');
+    if (form.style.display === 'none') {
+        form.style.display = 'block';
+    } else {
+        form.style.display = 'none';
+        contactEditingIndex = -1;
+        // 필드 초기화
+        document.getElementById('newContactName').value = '';
+        document.getElementById('newContactDept').value = '';
+        document.getElementById('newContactEmail').value = '';
+        document.getElementById('newContactPhone').value = '';
+    }
+}
+
+function editContact(index) {
+    const contact = addressBookData[index];
+    contactEditingIndex = index;
+    
+    document.getElementById('newContactName').value = contact.name;
+    document.getElementById('newContactDept').value = contact.dept;
+    document.getElementById('newContactEmail').value = contact.email;
+    document.getElementById('newContactPhone').value = contact.phone;
+    
+    document.getElementById('addContactForm').style.display = 'block';
+}
+
+function deleteContact(index) {
+    if (confirm(`'${addressBookData[index].name}'님을 주소록에서 삭제하시겠습니까?`)) {
+        addressBookData.splice(index, 1);
+        renderAddressBook();
+    }
+}
+
+function addContact() {
+    const name = document.getElementById('newContactName').value;
+    const dept = document.getElementById('newContactDept').value;
+    const email = document.getElementById('newContactEmail').value;
+    const phone = document.getElementById('newContactPhone').value;
+
+    if (!name) {
+        alert("이름을 입력해주세요.");
+        return;
+    }
+
+    const newData = { name, dept, email, phone };
+
+    if (contactEditingIndex > -1) {
+        addressBookData[contactEditingIndex] = newData;
+        contactEditingIndex = -1;
+    } else {
+        addressBookData.push(newData);
+    }
+
+    renderAddressBook();
+    toggleAddContactForm();
+}
+
+function togglePreviewAuto() {
+    const area = document.getElementById('mailPreviewArea');
+    const icon = document.getElementById('previewToggleIcon');
+    const isActive = area.classList.toggle('active');
+    
+    if (icon) {
+        icon.innerText = isActive ? '▶' : '◀';
+    }
+}
+
+document.addEventListener('DOMContentLoaded', loadAttachments);