deployment.js

// 작업 배포 관리 스크립트
document.addEventListener('DOMContentLoaded', function() {
    // 샘플 문서 데이터
    const sampleDocuments = [
        { id: 1, title: '건축 도면 #2456', type: '도면', priority: 'high', deadline: '2024-03-15' },
        { id: 2, title: '시공 계획서 #1890', type: '계획서', priority: 'normal', deadline: '2024-03-20' },
        { id: 3, title: '공사 명세서 #3124', type: '명세서', priority: 'low', deadline: '2024-03-25' },
        { id: 4, title: '안전 계획서 #4567', type: '계획서', priority: 'high', deadline: '2024-03-12' },
        { id: 5, title: '건축 허가서 #5231', type: '허가서', priority: 'normal', deadline: '2024-03-18' },
        { id: 6, title: '공사 일정표 #6789', type: '일정표', priority: 'low', deadline: '2024-03-28' }
    ];

    // 샘플 작업자 데이터
    const sampleWorkers = [
        { id: 1, name: '김작업', group: 'A팀', status: 'available', currentTasks: 3 },
        { id: 2, name: '이수정', group: 'B팀', status: 'available', currentTasks: 2 },
        { id: 3, name: '박라벨', group: 'A팀', status: 'busy', currentTasks: 5 },
        { id: 4, name: '최교정', group: 'C팀', status: 'available', currentTasks: 1 },
        { id: 5, name: '정정밀', group: 'B팀', status: 'available', currentTasks: 4 }
    ];
    // 문서 카드 생성 함수
    function createDocumentCard(document) {
        const priorityColors = {
            high: 'bg-red-100 text-red-800',
            normal: 'bg-yellow-100 text-yellow-800',
            low: 'bg-green-100 text-green-800'
        };

        return `
            <div class="document-card bg-white rounded-lg p-4 shadow-md border border-gray-200 cursor-move" 
                 draggable="true" 
                 data-document-id="${document.id}">
                <div class="flex justify-between items-start mb-2">
                    <span class="text-sm font-medium text-gray-700">${document.title}</span>
                    <span class="priority-badge ${priorityColors[document.priority]} px-2 py-1 rounded-full text-xs">
                ${document.priority === 'high' ? '높음' : document.priority === 'normal' ? '보통' : '낮음'}
            </span>
        </div>
        <div class="text-xs text-gray-500 mb-2">${document.type}</div>
        <div class="flex justify-between items-center">
            <span class="text-xs text-gray-400">마감: ${document.deadline}</span>
            <button class="worker-select-btn text-xs bg-primary-500 text-white px-2 py-1 rounded">
                작업자 선택
            </button>
        </div>
    </div>
        `;
    }
// 작업자 목록 표시 함수
    function showWorkerList(workers) {
        const workerList = workers.map(worker => `
            <div class="worker-item bg-gray-50 rounded-lg p-3 mb-2 cursor-pointer hover:bg-gray-100 transition-colors" data-worker-id="${worker.id}">
                <div class="flex justify-between items-center">
                    <span class="text-sm font-medium">${worker.name}</span>
                    <span class="text-xs ${worker.status === 'available' ? 'text-green-600' : 'text-yellow-600'}">
                    ${worker.status === 'available' ? '가능' : '바쁨'}
                </span>
            </div>
            <div class="text-xs text-gray-500">${worker.group} • ${worker.currentTasks}개 작업</div>
        </div>
    `).join('');

    // 모달이나 드롭다운에 작업자 목록 표시
    const workerModal = document.createElement('div');
    workerModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="workerModal">
        <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
            <h3 class="text-lg font-semibold mb-4">작업자 선택</h3>
            <div class="worker-list max-h-64 overflow-y-auto">
                ${workerList}
            </div>
            <button class="w-full bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 mt-4" onclick="hideWorkerModal()">
                닫기
            </button>
        </div>
    </div>

    document.body.appendChild(workerModal);
}
// 드래그 앤 드롭 기능
function initializeDragAndDrop() {
    const documentCards = document.querySelectorAll('.document-card');
    const columns = document.querySelectorAll('#waitingColumn, #deployingColumn, #progressColumn, #completedColumn');

    // 드래그 시작
    documentCards.forEach(card => {
        card.addEventListener('dragstart', function(e) {
            e.dataTransfer.setData('text/plain', this.dataset.documentId);
            this.classList.add('dragging');
        });

        // 드래그 종료
        card.addEventListener('dragend', function() {
            this.classList.remove('dragging');
        });
    });

    // 드롭 영역 설정
    columns.forEach(column => {
        column.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.classList.add('drag-over');
        });

        column.addEventListener('dragleave', function() {
            this.classList.remove('drag-over');
        });

        column.addEventListener('drop', function(e) {
            e.preventDefault();
            this.classList.remove('drag-over');
            
            const documentId = e.dataTransfer.getData('text/plain');
            const documentCard = document.querySelector(`[data-document-id="${documentId}"]`);
            
            if (documentCard) {
                this.appendChild(documentCard);
                updateDocumentStatus(documentId, column.id);
            }
        });
    });
}
// 문서 상태 업데이트
function updateDocumentStatus(documentId, columnId) {
    console.log(`문서 ${documentId}가 ${columnId}로 이동되었습니다.');
    
    // 여기에 실제 상태 업데이트 로직 추가
    // 예: API 호출로 서버에 상태 변경 알림
}

// 초기 문서 로드
function loadInitialDocuments() {
    const waitingColumn = document.getElementById('waitingColumn');
    
    sampleDocuments.forEach(document => {
        waitingColumn.innerHTML += createDocumentCard(document);
    });

    // 드래그 앤 드롭 초기화
    setTimeout(() => {
        initializeDragAndDrop();
    }, 100);
}

// 배포 버튼 이벤트
document.getElementById('deployBtn').addEventListener('click', function() {
    const workerType = document.getElementById('workerType').value;
    const priority = document.getElementById('priority').value;
    const deadline = document.getElementById('deadline').value;
    
    alert(`작업 배포가 시작되었습니다!\n유형: ${workerType}\n우선순위: ${priority}\n마감일: ${deadline || '미설정'}`);
    
    // 실제 배포 로직 구현
    // deployDocuments(workerType, priority, deadline);
}

// 초기 실행
loadInitialDocuments();