Spaces:

jamesLeeeeeee
/

ocr

Running

App Files Files Community

jamesLeeeeeee commited on Nov 21, 2025

Commit

33ce322

verified ·

1 Parent(s): e08a831

각 페이지마다 한페지씩 있어야해. 일단 작업배포관리부터하는데. 칸반스타일로 드래그도 가능하게 . 작업자 클릭하고 문서리스트 있으면 넣어주는거지

Browse files

Files changed (7) hide show

admin-detail.html +4 -5
admin.html +3 -3
components/header.js +1 -0
deployment.html +119 -0
deployment.js +162 -0
index.html +3 -0
style.css +37 -1

admin-detail.html CHANGED Viewed

@@ -74,13 +74,12 @@
                             </div>
                         </div>
                     </div>
-                    <button class="w-full bg-primary-500 hover:bg-primary-600 text-white px-4 py-3 rounded-lg font-medium transition-all duration-300">
-                        배포 시작하기
-                    </button>
                 </div>
             </div>
-            <!-- 모니터링 -->
             <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200">
                 <div class="flex items-center mb-4">
                     <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-3">

                             </div>
                         </div>
                     </div>
+                    <a href="/deployment.html" class="w-full bg-primary-500 hover:bg-primary-600 text-white px-4 py-3 rounded-lg font-medium transition-all duration-300 block text-center">
+                        배포 관리하기
+                    </a>
                 </div>
             </div>
+<!-- 모니터링 -->
             <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200">
                 <div class="flex items-center mb-4">
                     <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-3">

admin.html CHANGED Viewed

@@ -102,10 +102,10 @@
                 </div>
                 <h3 class="text-xl font-semibold text-primary-900 mb-2">OCR 문서 등록</h3>
                 <p class="text-primary-700 mb-4">새로운 OCR 문서를 업로드하고 작업을 등록합니다.</p>
-                <a href="/admin-detail.html" class="w-full bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 block text-center">
-                    문서 등록하기
                 </a>
-            </div>
             <!-- 작업 배포 -->
             <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200 hover:shadow-xl transition-all duration-300">
                 <div class="w-12 h-12 bg-primary-600 rounded-full flex items-center justify-center mb-4">

                 </div>
                 <h3 class="text-xl font-semibold text-primary-900 mb-2">OCR 문서 등록</h3>
                 <p class="text-primary-700 mb-4">새로운 OCR 문서를 업로드하고 작업을 등록합니다.</p>
+                <a href="/deployment.html" class="w-full bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 block text-center">
+                    작업 배포 관리
                 </a>
+</div>
             <!-- 작업 배포 -->
             <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200 hover:shadow-xl transition-all duration-300">
                 <div class="w-12 h-12 bg-primary-600 rounded-full flex items-center justify-center mb-4">

components/header.js CHANGED Viewed

@@ -45,6 +45,7 @@ class CustomHeader extends HTMLElement {
                         <div class="hidden md:flex space-x-8">
                             <a href="/" class="nav-link font-medium">홈</a>
                             <a href="/admin.html" class="nav-link font-medium">관리자</a>
                             <a href="/admin-detail.html" class="nav-link font-medium">관리 상세</a>
                             <a href="/worker.html" class="nav-link font-medium">작업자</a>
                         </div>

                         <div class="hidden md:flex space-x-8">
                             <a href="/" class="nav-link font-medium">홈</a>
                             <a href="/admin.html" class="nav-link font-medium">관리자</a>
+                            <a href="/deployment.html" class="nav-link font-medium">작업 배포</a>
                             <a href="/admin-detail.html" class="nav-link font-medium">관리 상세</a>
                             <a href="/worker.html" class="nav-link font-medium">작업자</a>
                         </div>

deployment.html ADDED Viewed

	@@ -0,0 +1,119 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>작업 배포 관리 - OCR 정밀 교정 공방</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'primary': {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gradient-to-br from-primary-50 to-primary-100 min-h-screen">
+    <custom-header></custom-header>
+    <main class="container mx-auto px-4 py-8">
+        <div class="text-center mb-8">
+            <h1 class="text-4xl font-bold text-primary-900 mb-2">작업 배포 관리 📋</h1>
+            <p class="text-lg text-primary-700 max-w-2xl mx-auto">
+                작업자 선택과 문서 배포를 칸반 스타일로 관리합니다. 드래그 앤 드롭으로 간편하게 배포하세요.
+            </p>
+        </div>
+        <!-- 작업자 선택 및 배포 설정 -->
+        <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200 mb-8">
+            <div class="flex items-center mb-4">
+                <div class="w-10 h-10 bg-primary-500 rounded-full flex items-center justify-center mr-3">
+                    <i data-feather="users" class="text-white"></i>
+                </div>
+                <h2 class="text-2xl font-semibold text-primary-900">작업자 선택</h2>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div>
+                    <label class="block text-sm text-primary-600 mb-2">작업자 유형</label>
+                    <select id="workerType" class="w-full border border-primary-300 rounded-lg px-3 py-2">
+                        <option value="all">전체 작업자</option>
+                        <option value="group">특정 작업자 그룹</option>
+                        <option value="individual">개별 작업자</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm text-primary-600 mb-2">우선순위</label>
+                    <select id="priority" class="w-full border border-primary-300 rounded-lg px-3 py-2">
+                        <option value="high">높음</option>
+                        <option value="normal">보통</option>
+                        <option value="low">낮음</option>
+                </select>
+            </div>
+            <div>
+                <label class="block text-sm text-primary-600 mb-2">마감일 설정</label>
+                <input type="date" id="deadline" class="w-full border border-primary-300 rounded-lg px-3 py-2">
+            </div>
+        </div>
+        <button id="deployBtn" class="w-full bg-primary-500 hover:bg-primary-600 text-white px-4 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
+                배포 시작하기
+            </button>
+        </div>
+        <!-- 칸반 보드 -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+            <!-- 대기 문서 -->
+            <div class="bg-gray-50 rounded-xl p-4">
+                <h3 class="font-semibold text-gray-800 mb-4 text-center">대기 문서 📥</h3>
+                <div id="waitingColumn" class="space-y-4 min-h-96">
+                </div>
+            </div>
+            <!-- 배포 중 -->
+            <div class="bg-blue-50 rounded-xl p-4">
+                <h3 class="font-semibold text-blue-800 mb-4 text-center">배포 중 🚀</h3>
+                <div id="deployingColumn" class="space-y-4 min-h-96">
+                </div>
+            </div>
+            <!-- 진행 중 -->
+            <div class="bg-yellow-50 rounded-xl p-4">
+                <h3 class="font-semibold text-yellow-800 mb-4 text-center">진행 중 ⚡</h3>
+                <div id="progressColumn" class="space-y-4 min-h-96">
+                </div>
+            </div>
+            <!-- 완료 -->
+            <div class="bg-green-50 rounded-xl p-4">
+                <h3 class="font-semibold text-green-800 mb-4 text-center">완료 ✅</h3>
+                <div id="completedColumn" class="space-y-4 min-h-96">
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="deployment.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

deployment.js ADDED Viewed

	@@ -0,0 +1,162 @@

+// 작업 배포 관리 스크립트
+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>
+        <div class="flex space-x-1">
+            <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();

index.html CHANGED Viewed

@@ -80,6 +80,9 @@
                 <a href="/admin.html" class="bg-undefined-500 hover:bg-undefined-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105">
                     관리자 로그인
                 </a>
                 <a href="/worker.html" class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105">
                     작업자 로그인
                 </a>

                 <a href="/admin.html" class="bg-undefined-500 hover:bg-undefined-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105">
                     관리자 로그인
                 </a>
+                <a href="/deployment.html" class="bg-primary-500 hover:bg-primary-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105">
+                    작업 배포
+                </a>
                 <a href="/worker.html" class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105">
                     작업자 로그인
                 </a>

style.css CHANGED Viewed

@@ -32,7 +32,6 @@ body {
 .undefined-pulse {
     animation: undefined-pulse 2s infinite;
 }
 /* OCR 작업 관련 스타일 */
 .ocr-container {
     background: white;
@@ -81,3 +80,40 @@ body {
     background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
     transition: width 0.3s ease;
 }

 .undefined-pulse {
     animation: undefined-pulse 2s infinite;
 }
 /* OCR 작업 관련 스타일 */
 .ocr-container {
     background: white;
     background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
     transition: width 0.3s ease;
 }
+/* 배포 관리 스타일 */
+.document-card {
+    transition: all 0.3s ease;
+}
+.document-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+}
+.document-card.dragging {
+    opacity: 0.5;
+    transform: rotate(5deg);
+}
+.column {
+    transition: background-color 0.3s ease;
+}
+.column.drag-over {
+    background-color: rgba(14, 165, 233, 0.1);
+    border: 2px dashed #0ea5e9;
+}
+.worker-item {
+    transition: all 0.3s ease;
+}
+.worker-item:hover {
+    background-color: #f8fafc !important;
+}
+.priority-badge {
+    font-size: 0.75rem;
+    font-weight: 600;
+}