static/js/app-docs.js

/**
 * RAG 검색 챗봇 문서 관리 JavaScript
 */

// DOM 요소 미리 선언
let uploadForm, documentFile, fileName, uploadButton, uploadStatus;
let refreshDocsButton, docsList, docsLoading, noDocsMessage;

/**
 * 문서 관리 DOM 요소 초기화
 */
function initDocsElements() {
    console.log('문서 관리 DOM 요소 초기화 중...');
    
    uploadForm = document.getElementById('uploadForm');
    documentFile = document.getElementById('documentFile');
    fileName = document.getElementById('fileName');
    uploadButton = document.getElementById('uploadButton');
    uploadStatus = document.getElementById('uploadStatus');
    refreshDocsButton = document.getElementById('refreshDocsButton');
    docsList = document.getElementById('docsList');
    docsLoading = document.getElementById('docsLoading');
    noDocsMessage = document.getElementById('noDocsMessage');
    
    console.log('문서 관리 DOM 요소 초기화 완료');
    
    // 문서 관리 이벤트 리스너 초기화
    initDocsEventListeners();
}

/**
 * 문서 관리 이벤트 리스너 초기화
 */
function initDocsEventListeners() {
    console.log('문서 관리 이벤트 리스너 초기화 중...');
    
    // 문서 업로드 이벤트 리스너
    documentFile.addEventListener('change', (event) => {
        if (event.target.files.length > 0) {
            fileName.textContent = event.target.files[0].name;
            console.log(`파일 선택됨: ${event.target.files[0].name}`);
        } else {
            fileName.textContent = '선택된 파일 없음';
            console.log('파일 선택 취소됨');
        }
    });
    
    uploadForm.addEventListener('submit', (event) => {
        event.preventDefault();
        console.log('업로드 폼 제출됨');
        uploadDocument();
    });
    
    // 문서 목록 새로고침 이벤트 리스너
    refreshDocsButton.addEventListener('click', () => {
        console.log('문서 목록 새로고침 요청');
        loadDocuments();
    });
    
    console.log('문서 관리 이벤트 리스너 초기화 완료');
}

/**
 * 문서 업로드 함수
 */
async function uploadDocument() {
    if (documentFile.files.length === 0) {
        console.log('업로드할 파일이 선택되지 않음');
        alert('파일을 선택해 주세요.');
        return;
    }
    
    console.log(`파일 업로드 시작: ${documentFile.files[0].name}`);
    
    // UI 업데이트
    uploadStatus.classList.remove('hidden');
    uploadStatus.className = 'upload-status';
    uploadStatus.innerHTML = '<div class="spinner"></div><p>업로드 중...</p>';
    uploadButton.disabled = true;
    
    try {
        const formData = new FormData();
        formData.append('document', documentFile.files[0]);
        
        console.log('문서 업로드 API 요청 전송');
        // API 요청
        const response = await fetch('/api/upload', {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        console.log('문서 업로드 API 응답 수신');
        
        // 응답 처리
        if (data.error) {
            console.error('업로드 오류:', data.error);
            uploadStatus.className = 'upload-status error';
            uploadStatus.textContent = `오류: ${data.error}`;
        } else if (data.warning) {
            console.warn('업로드 경고:', data.message);
            uploadStatus.className = 'upload-status warning';
            uploadStatus.textContent = data.message;
        } else {
            console.log('업로드 성공:', data.message);
            uploadStatus.className = 'upload-status success';
            uploadStatus.textContent = data.message;
            
            // 문서 목록 새로고침
            loadDocuments();
            
            // 입력 필드 초기화
            documentFile.value = '';
            fileName.textContent = '선택된 파일 없음';
        }
    } catch (error) {
        console.error('업로드 처리 중 오류:', error);
        uploadStatus.className = 'upload-status error';
        uploadStatus.textContent = '업로드 중 오류가 발생했습니다. 다시 시도해 주세요.';
    } finally {
        uploadButton.disabled = false;
    }
}

/**
 * 문서 목록 로드 함수
 */
async function loadDocuments() {
    console.log('문서 목록 로드 시작');
    
    // UI 업데이트
    docsList.querySelector('tbody').innerHTML = '';
    docsLoading.classList.remove('hidden');
    noDocsMessage.classList.add('hidden');
    
    try {
        console.log('문서 목록 API 요청 전송');
        // API 요청
        const response = await fetch('/api/documents');
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        console.log(`문서 목록 API 응답 수신: ${data.documents ? data.documents.length : 0}개 문서`);
        
        // 응답 처리
        docsLoading.classList.add('hidden');
        
        if (!data.documents || data.documents.length === 0) {
            console.log('로드된 문서가 없음');
            noDocsMessage.classList.remove('hidden');
            return;
        }
        
        // 문서 목록 업데이트
        const tbody = docsList.querySelector('tbody');
        data.documents.forEach(doc => {
            console.log(`문서 표시: ${doc.filename || doc.source}`);
            
            const row = document.createElement('tr');
            
            const fileNameCell = document.createElement('td');
            fileNameCell.textContent = doc.filename || doc.source;
            row.appendChild(fileNameCell);
            
            const chunksCell = document.createElement('td');
            chunksCell.textContent = doc.chunks;
            row.appendChild(chunksCell);
            
            const typeCell = document.createElement('td');
            typeCell.textContent = doc.filetype || '-';
            row.appendChild(typeCell);
            
            tbody.appendChild(row);
        });
        
        console.log('문서 목록 업데이트 완료');
    } catch (error) {
        console.error('문서 목록 로드 오류:', error);
        docsLoading.classList.add('hidden');
        noDocsMessage.classList.remove('hidden');
        noDocsMessage.querySelector('p').textContent = '문서 목록을 불러오는 중 오류가 발생했습니다.';
    }
}

// 페이지 로드 시 모듈 초기화
document.addEventListener('DOMContentLoaded', function() {
    console.log('문서 관리 모듈 초기화');
    
    // 비동기적으로 초기화 (DOM 요소가 준비된 후)
    setTimeout(() => {
        initDocsElements();
    }, 100);
});