feat: 일일순회점검 시스템 구축 및 관리 기능 개선

- 일일순회점검 시스템 신규 구현
  - DB 테이블: patrol_checklist_items, daily_patrol_sessions, patrol_check_records, workplace_items, item_types
  - API: /api/patrol/* 엔드포인트
  - 프론트엔드: 지도 기반 작업장 점검 UI

- 설비 관리 기능 개선
  - 구매 관련 필드 추가 (구매일, 가격, 공급업체 등)
  - 설비 코드 자동 생성 (TKP-XXX 형식)

- 작업장 관리 개선
  - 레이아웃 이미지 업로드 기능
  - 마커 위치 저장 기능

- 부서 관리 기능 추가
- 사이드바 네비게이션 카테고리 재구성
- 이미지 401 오류 수정 (정적 파일 경로 처리)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-02-04 11:41:41 +09:00
parent 2e9d24faf2
commit 90d3e32992
101 changed files with 17421 additions and 7047 deletions

View File

@@ -5,118 +5,415 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>작업자 관리 | (주)테크니컬코리아</title>
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/admin-pages.css?v=6">
<link rel="stylesheet" href="/css/admin-pages.css?v=8">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/auth-check.js?v=1" defer></script>
<script type="module" src="/js/api-config.js?v=3"></script>
<!-- 최적화된 로딩: API 설정 → 앱 초기화 (병렬 컴포넌트 로딩) -->
<script src="/js/api-base.js"></script>
<script src="/js/app-init.js?v=2" defer></script>
<!-- instant.page: 링크 호버 시 페이지 프리로딩 -->
<script src="https://instant.page/5.2.0" type="module"></script>
<style>
.department-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 1.5rem;
min-height: calc(100vh - 200px);
}
/* 부서 패널 */
.department-panel {
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
.department-panel-header {
padding: 1rem 1.25rem;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.department-panel-header h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: #1f2937;
}
.department-list {
flex: 1;
overflow-y: auto;
padding: 0.5rem;
}
.department-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 0.25rem;
}
.department-item:hover {
background: #f3f4f6;
}
.department-item.active {
background: #dbeafe;
border-left: 3px solid #3b82f6;
}
.department-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.department-name {
font-weight: 500;
color: #1f2937;
}
.department-count {
font-size: 0.75rem;
color: #6b7280;
}
.department-actions {
display: flex;
gap: 0.25rem;
opacity: 0;
transition: opacity 0.2s;
}
.department-item:hover .department-actions {
opacity: 1;
}
.btn-icon {
padding: 0.375rem;
border: none;
background: transparent;
border-radius: 4px;
cursor: pointer;
color: #6b7280;
transition: all 0.2s;
}
.btn-icon:hover {
background: #e5e7eb;
color: #1f2937;
}
.btn-icon.danger:hover {
background: #fee2e2;
color: #dc2626;
}
/* 작업자 패널 */
.worker-panel {
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
.worker-panel-header {
padding: 1rem 1.25rem;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.worker-panel-header h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: #1f2937;
}
.worker-toolbar {
padding: 1rem 1.25rem;
border-bottom: 1px solid #e5e7eb;
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
.worker-toolbar .search-input {
flex: 1;
min-width: 200px;
padding: 0.5rem 1rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.875rem;
}
.worker-toolbar .filter-select {
padding: 0.5rem 1rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.875rem;
background: white;
}
.worker-list {
flex: 1;
overflow-y: auto;
padding: 1rem;
}
/* 작업자 테이블 스타일 */
.workers-table {
width: 100%;
border-collapse: collapse;
}
.workers-table th,
.workers-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.workers-table th {
background: #f9fafb;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
color: #6b7280;
}
.workers-table tr:hover {
background: #f9fafb;
}
.worker-name-cell {
display: flex;
align-items: center;
gap: 0.75rem;
}
.worker-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.875rem;
}
.status-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
}
.status-badge.active {
background: #dcfce7;
color: #166534;
}
.status-badge.inactive {
background: #f3f4f6;
color: #6b7280;
}
.status-badge.resigned {
background: #fee2e2;
color: #dc2626;
}
.account-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
}
.account-badge.has-account {
background: #dbeafe;
color: #1d4ed8;
}
.account-badge.no-account {
background: #f3f4f6;
color: #9ca3af;
}
/* 빈 상태 */
.empty-state {
text-align: center;
padding: 3rem;
color: #6b7280;
}
.empty-state h4 {
margin: 0 0 0.5rem 0;
color: #374151;
}
/* 반응형 */
@media (max-width: 1024px) {
.department-layout {
grid-template-columns: 1fr;
}
.department-panel {
max-height: 300px;
}
}
/* 부서 모달 스타일 */
.form-check {
display: flex;
align-items: center;
gap: 0.5rem;
}
.form-check input[type="checkbox"] {
width: 1rem;
height: 1rem;
}
</style>
</head>
<body>
<!-- 네비게이션 바 -->
<div id="navbar-container"></div>
<!-- 네비게이션 바 -->
<div id="navbar-container"></div>
<!-- 메인 레이아웃 -->
<div class="page-container">
<!-- 메인 콘텐츠 -->
<main class="main-content">
<div class="dashboard-main">
<div class="page-header">
<div class="page-title-section">
<h1 class="page-title">작업자 관리</h1>
<p class="page-description">작업자 등록, 수정, 삭제 및 기본 정보를 관리합니다</p>
</div>
<!-- 메인 레이아웃 -->
<div class="page-container">
<main class="main-content">
<div class="dashboard-main">
<div class="page-header">
<div class="page-title-section">
<h1 class="page-title">작업자 관리</h1>
<p class="page-description">부서별 작업자 관리합니다. 부서를 선택하면 해당 부서의 작업자를 확인하고 관리할 수 있습니다.</p>
</div>
</div>
<div class="page-actions">
<button class="btn btn-primary" onclick="openWorkerModal()">새 작업자 등록</button>
<button class="btn btn-secondary" onclick="refreshWorkerList()">새로고침</button>
</div>
</div>
<!-- 부서 기반 레이아웃 -->
<div class="department-layout">
<!-- 왼쪽: 부서 목록 -->
<div class="department-panel">
<div class="department-panel-header">
<h3>부서 목록</h3>
<button class="btn btn-sm btn-primary" onclick="openDepartmentModal()">+ 부서 추가</button>
</div>
<div class="department-list" id="departmentList">
<!-- 부서 목록이 여기에 렌더링됩니다 -->
</div>
</div>
<!-- 검색 및 필터 -->
<div class="search-section">
<div class="search-bar">
<input type="text" id="searchInput" class="search-input" placeholder="작업자명, 직책, 전화번호로 검색...">
<button class="search-btn" onclick="searchWorkers()">검색</button>
</div>
<div class="filter-options">
<select id="jobTypeFilter" class="filter-select" onchange="filterWorkers()">
<option value="">모든 직책</option>
<option value="leader">그룹장</option>
<option value="worker">작업자</option>
<option value="admin">관리자</option>
</select>
<select id="statusFilter" class="filter-select" onchange="filterWorkers()">
<option value="">모든 상태</option>
<option value="active">활성</option>
<option value="inactive">비활성</option>
</select>
<select id="sortBy" class="filter-select" onchange="sortWorkers()">
<option value="created_at">등록일순</option>
<option value="worker_name">이름순</option>
<option value="job_type">직책순</option>
</select>
</div>
</div>
<!-- 작업자 목록 -->
<div class="projects-section">
<div class="section-header">
<h2 class="section-title">등록된 작업자</h2>
<div class="project-stats">
<span class="stat-item active-stat" onclick="filterByStatus('active')" title="활성 작업자만 보기">활성 <span id="activeWorkers">0</span></span>
<span class="stat-item inactive-stat" onclick="filterByStatus('inactive')" title="비활성 작업자만 보기">비활성 <span id="inactiveWorkers">0</span></span>
<span class="stat-item total-stat" onclick="filterByStatus('all')" title="전체 작업자 보기"><span id="totalWorkers">0</span></span>
<!-- 오른쪽: 작업자 목록 -->
<div class="worker-panel">
<div class="worker-panel-header">
<h3 id="workerListTitle">부서를 선택하세요</h3>
<button class="btn btn-sm btn-primary" id="addWorkerBtn" onclick="openWorkerModal()" style="display: none;">+ 작업자 추가</button>
</div>
<div class="worker-toolbar" id="workerToolbar" style="display: none;">
<input type="text" class="search-input" id="workerSearch" placeholder="작업자 검색..." oninput="filterWorkers()">
<select class="filter-select" id="statusFilter" onchange="filterWorkers()">
<option value="">모든 상태</option>
<option value="active">활성</option>
<option value="inactive">비활성</option>
<option value="resigned">퇴사</option>
</select>
</div>
<div class="worker-list" id="workerList">
<div class="empty-state">
<h4>부서를 선택해주세요</h4>
<p>왼쪽에서 부서를 선택하면 해당 부서의 작업자가 표시됩니다.</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- 작업자 테이블 -->
<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 id="departmentModal" class="modal-overlay" style="display: none;">
<div class="modal-container" style="max-width: 500px;">
<div class="modal-header">
<h2 id="departmentModalTitle">새 부서 등록</h2>
<button class="modal-close-btn" onclick="closeDepartmentModal()">×</button>
</div>
<div class="modal-body">
<form id="departmentForm" onsubmit="event.preventDefault(); saveDepartment();">
<input type="hidden" id="departmentId">
<!-- Empty State -->
<div class="empty-state" id="emptyState" style="display: none;">
<h3>등록된 작업자가 없습니다.</h3>
<p>"새 작업자 등록" 버튼을 눌러 작업자를 등록해보세요.</p>
<button class="btn btn-primary" onclick="openWorkerModal()">첫 작업자 등록하기</button>
<div class="form-group">
<label class="form-label">부서명 *</label>
<input type="text" id="departmentName" class="form-control" placeholder="예: 생산팀, 품질관리팀" required>
</div>
<div class="form-group">
<label class="form-label">상위 부서</label>
<select id="parentDepartment" class="form-control">
<option value="">없음 (최상위 부서)</option>
</select>
</div>
<div class="form-group">
<label class="form-label">설명</label>
<textarea id="departmentDescription" class="form-control" rows="2" placeholder="부서에 대한 설명"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">표시 순서</label>
<input type="number" id="displayOrder" class="form-control" value="0" min="0">
</div>
<div class="form-group">
<label class="form-label">&nbsp;</label>
<div class="form-check">
<input type="checkbox" id="isActiveDept" checked>
<label for="isActiveDept">활성화</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeDepartmentModal()">취소</button>
<button type="button" class="btn btn-danger" id="deleteDeptBtn" onclick="deleteDepartment()" style="display: none;">삭제</button>
<button type="button" class="btn btn-primary" onclick="saveDepartment()">저장</button>
</div>
</div>
</div>
</main>
</div>
<!-- 작업자 추가/수정 모달 -->
<div id="workerModal" class="modal-overlay" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<h2 id="modalTitle">새 작업자 등록</h2>
<h2 id="workerModalTitle">새 작업자 등록</h2>
<button class="modal-close-btn" onclick="closeWorkerModal()">×</button>
</div>
<div class="modal-body">
<form id="workerForm" onsubmit="event.preventDefault(); saveWorker();">
<input type="hidden" id="workerId">
<div class="form-row">
<div class="form-group">
<label class="form-label">작업자명 *</label>
@@ -131,34 +428,23 @@
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">전화번호</label>
<input type="tel" id="phoneNumber" class="form-control" placeholder="010-0000-0000">
</div>
<div class="form-group">
<label class="form-label">이메일</label>
<input type="email" id="email" class="form-control" placeholder="example@company.com">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">입사일</label>
<input type="date" id="hireDate" class="form-control">
<input type="date" id="joinDate" class="form-control">
</div>
<div class="form-group">
<label class="form-label">부서</label>
<input type="text" id="department" class="form-control" placeholder="소속 부서">
<label class="form-label">급여</label>
<input type="number" id="salary" class="form-control" placeholder="월급여">
</div>
</div>
<div class="form-group">
<label class="form-label">비고</label>
<textarea id="notes" class="form-control" rows="3" placeholder="추가 정보나 특이사항을 입력하세요"></textarea>
<label class="form-label">연차</label>
<input type="number" id="annualLeave" class="form-control" placeholder="연차 일수" value="0">
</div>
<!-- 상태 관리 섹션 -->
<div class="form-group">
<label class="form-label" style="font-weight: 600; margin-bottom: 0.75rem; display: block;">상태 관리</label>
@@ -166,20 +452,20 @@
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
<!-- 계정 생성/연동 -->
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
<input type="checkbox" id="hasAccount" style="margin: 0; cursor: pointer;">
<input type="checkbox" id="createAccount" style="margin: 0; cursor: pointer;">
<span>계정 생성/연동</span>
</label>
<small style="color: #6b7280; font-size: 0.75rem; margin-top: -0.5rem; margin-left: 1.5rem;">
체크 시 로그인 계정이 자동 생성됩니다 (나의 대시보드, 연차/출퇴근 관리 가능)
체크 시 로그인 계정이 자동 생성됩니다 (ID: 이름 로마자 변환, 초기 비밀번호: 1234)
</small>
<!-- 현장직/사무직 구분 -->
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
<input type="checkbox" id="isActive" checked style="margin: 0; cursor: pointer;">
<input type="checkbox" id="isActiveWorker" checked style="margin: 0; cursor: pointer;">
<span>현장직 (활성화)</span>
</label>
<small style="color: #6b7280; font-size: 0.75rem; margin-top: -0.5rem; margin-left: 1.5rem;">
체크: 현장직 (출퇴근 관리 필요) / 체크 해제: 사무직 (출퇴근 관리 불필요)
체크: 현장직 (TBM, 작업보고서에 표시) / 체크 해제: 사무직
</small>
<!-- 퇴사 처리 -->
@@ -188,13 +474,13 @@
<span style="color: #ef4444;">퇴사 처리</span>
</label>
<small style="color: #ef4444; font-size: 0.75rem; margin-top: -0.5rem; margin-left: 1.5rem;">
퇴사한 작업자로 표시됩니다. 작업 보고서에서 제외됩니다
퇴사한 작업자로 표시됩니다. TBM/작업 보고서에서 제외됩니다
</small>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeWorkerModal()">취소</button>
<button type="button" class="btn btn-danger" id="deleteWorkerBtn" onclick="deleteWorker()" style="display: none;">삭제</button>
@@ -202,10 +488,8 @@
</div>
</div>
</div>
</div>
<script type="module" src="/js/load-navbar.js?v=5"></script>
<script type="module" src="/js/load-sidebar.js"></script>
<script type="module" src="/js/worker-management.js?v=7"></script>
<!-- worker-management.js만 로드 (navbar/sidebar는 app-init.js에서 처리) -->
<script type="module" src="/js/worker-management.js?v=8"></script>
</body>
</html>