From ad7088d840f2d09d8046203e8114d444efa6fd3f Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Mon, 26 Jan 2026 15:24:33 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=9E=91=EC=97=85=EC=9E=90=20?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A5=BC=20?= =?UTF-8?q?=EC=B9=B4=EB=93=9C=EC=97=90=EC=84=9C=20=ED=85=8C=EC=9D=B4?= =?UTF-8?q?=EB=B8=94=20=ED=98=95=EC=8B=9D=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 변경 사항 - UI 형식: 카드 그리드 → 엑셀 스타일 테이블 - 더 많은 정보를 한눈에 볼 수 있음 - 공간 활용 효율성 향상 ## HTML 변경 (workers.html) - 테이블 구조 추가 - 컬럼: 상태, 이름, 직책, 전화번호, 이메일, 입사일, 부서, 계정, 현장직, 등록일, 관리 - tbody id="workersGrid" 유지 (기존 코드 호환성) ## JavaScript 변경 (worker-management.js) - renderWorkers() 함수 리팩토링 - 카드 HTML 생성 → 테이블 행 생성 - 상태 배지: 현장직(초록), 사무직(노랑), 퇴사(빨강) - 아바타 아이콘 유지 (이름 첫 글자) - 아이콘 버튼으로 편집/상태변경/삭제 기능 ## CSS 변경 (admin-pages.css) - 테이블 내 버튼 스타일 추가 - .data-table .btn-icon - hover 효과 및 transform ## 유지된 기능 - 검색 및 필터링 - 정렬 - 통계 표시 - 편집/삭제/상태 변경 - Empty state 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- web-ui/css/admin-pages.css | 16 +++++ web-ui/js/worker-management.js | 103 ++++++++++++++++---------------- web-ui/pages/admin/workers.html | 28 +++++++-- 3 files changed, 92 insertions(+), 55 deletions(-) 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 @@
- -
- + + +
+ + + + + + + + + + + + + + + + + + + +
상태이름직책전화번호이메일입사일부서계정현장직등록일관리
- +