diff --git a/web-ui/css/admin-pages.css b/web-ui/css/admin-pages.css index 90d0aa5..e502beb 100644 --- a/web-ui/css/admin-pages.css +++ b/web-ui/css/admin-pages.css @@ -813,6 +813,22 @@ tr:last-child td { border-bottom: none; } +/* 테이블 내 버튼 스타일 */ +.data-table .btn-icon { + padding: 0.375rem 0.5rem; + background: transparent; + border: none; + cursor: pointer; + font-size: 1rem; + transition: all 0.2s ease; + border-radius: var(--radius-sm); +} + +.data-table .btn-icon:hover { + background: var(--bg-hover); + transform: scale(1.1); +} + /* ============================================ 11. 모달 ============================================ */ diff --git a/web-ui/js/worker-management.js b/web-ui/js/worker-management.js index 1e5d78b..c2e8801 100644 --- a/web-ui/js/worker-management.js +++ b/web-ui/js/worker-management.js @@ -175,18 +175,19 @@ async function loadWorkers() { function renderWorkers() { const workersGrid = document.getElementById('workersGrid'); const emptyState = document.getElementById('emptyState'); - + const tableContainer = document.querySelector('.table-container'); + if (!workersGrid || !emptyState) return; - + if (filteredWorkers.length === 0) { - workersGrid.style.display = 'none'; - emptyState.style.display = 'block'; + if (tableContainer) tableContainer.style.display = 'none'; + emptyState.style.display = 'flex'; return; } - - workersGrid.style.display = 'grid'; + + if (tableContainer) tableContainer.style.display = 'block'; emptyState.style.display = 'none'; - + const workersHtml = filteredWorkers.map(worker => { // 작업자 상태 및 직책 아이콘 const jobTypeMap = { @@ -194,66 +195,66 @@ function renderWorkers() { 'leader': { icon: '👨‍💼', text: '그룹장', color: '#3b82f6' }, 'admin': { icon: '👨‍💻', text: '관리자', color: '#8b5cf6' } }; - + const jobType = jobTypeMap[worker.job_type] || jobTypeMap['worker']; const isInactive = worker.status === 'inactive' || worker.is_active === 0 || worker.is_active === false; const isResigned = worker.employment_status === 'resigned'; const hasAccount = worker.user_id !== null && worker.user_id !== undefined; - console.log('🎨 카드 렌더링:', { - worker_id: worker.worker_id, - worker_name: worker.worker_name, - status: worker.status, - is_active: worker.is_active, - isInactive: isInactive, - isResigned: isResigned, - user_id: worker.user_id, - hasAccount: hasAccount - }); + // 상태 배지 + let statusBadge = ''; + if (isResigned) { + statusBadge = '퇴사'; + } else if (isInactive) { + statusBadge = '사무직'; + } else { + statusBadge = '현장직'; + } return ` -
- ${isResigned ? '
🚪 퇴사
' : - isInactive ? '
🏢 사무직
' : ''} -
-
-
- ${worker.worker_name.charAt(0)} -
-

- ${worker.worker_name} - ${hasAccount ? '🔐' : ''} - ${isResigned ? '(퇴사)' : - isInactive ? '(사무직)' : ''} -

-
- ${jobType.icon} ${jobType.text} - ${hasAccount ? '🔐 계정 연동됨' : '⚪ 계정 없음'} - ${worker.phone_number ? `📞 ${worker.phone_number}` : ''} - ${worker.email ? `📧 ${worker.email}` : ''} - ${worker.department ? `🏢 ${worker.department}` : ''} - ${worker.hire_date ? `📅 입사: ${formatDate(worker.hire_date)}` : ''} - ${isResigned ? '⚠️ 퇴사 처리됨' : ''} + + ${statusBadge} + +
+
+ ${worker.worker_name.charAt(0)}
+ ${worker.worker_name}
-
- - - +
-
-
+ + `; }).join(''); - + workersGrid.innerHTML = workersHtml; } diff --git a/web-ui/pages/admin/workers.html b/web-ui/pages/admin/workers.html index 454bcc3..52fc41d 100644 --- a/web-ui/pages/admin/workers.html +++ b/web-ui/pages/admin/workers.html @@ -138,11 +138,31 @@
- -
- + + +
+ + + + + + + + + + + + + + + + + + + +
상태이름직책전화번호이메일입사일부서계정현장직등록일관리
- +