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:
@@ -138,11 +138,31 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="projects-grid" id="workersGrid">
|
||||
<!-- 작업자 카드들이 여기에 동적으로 생성됩니다 -->
|
||||
|
||||
<!-- 작업자 테이블 -->
|
||||
<div class="table-container">
|
||||
<table class="data-table" id="workersTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 60px;">상태</th>
|
||||
<th style="width: 100px;">이름</th>
|
||||
<th style="width: 100px;">직책</th>
|
||||
<th style="width: 130px;">전화번호</th>
|
||||
<th style="width: 180px;">이메일</th>
|
||||
<th style="width: 100px;">입사일</th>
|
||||
<th style="width: 100px;">부서</th>
|
||||
<th style="width: 80px;">계정</th>
|
||||
<th style="width: 80px;">현장직</th>
|
||||
<th style="width: 120px;">등록일</th>
|
||||
<th style="width: 100px;">관리</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="workersGrid">
|
||||
<!-- 작업자 행들이 여기에 동적으로 생성됩니다 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Empty State -->
|
||||
<div class="empty-state" id="emptyState" style="display: none;">
|
||||
<div class="empty-icon">👥</div>
|
||||
|
||||
Reference in New Issue
Block a user