refactor: 작업자 관리 페이지를 카드에서 테이블 형식으로 변경

## 변경 사항
- 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 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-01-26 15:24:33 +09:00
parent 45f80e206b
commit ad7088d840
3 changed files with 92 additions and 55 deletions

View File

@@ -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. 모달
============================================ */