File size: 6,206 Bytes
33ce322
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0f7d155
16b3bc4
33ce322
0f7d155
33ce322
 
 
 
0f7d155
16b3bc4
33ce322
0f7d155
33ce322
 
 
 
0f7d155
16b3bc4
33ce322
0f7d155
33ce322
 
 
 
0f7d155
16b3bc4
33ce322
0f7d155
33ce322
16b3bc4
 
 
 
 
 
 
 
 
 
 
 
 
 
33ce322
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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>

        <!-- 작업자 선택 모달 -->
        <div id="workerModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <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 id="workerList" class="worker-list max-h-64 overflow-y-auto">
                    <!-- 동적으로 생성될 작업자 목록 -->
                </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>
</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>