hyungi/TK-FB-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 일일순회점검 시스템 신규 구현
  - 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
Download Patch File Download Diff File Expand all files Collapse all files

59
web-ui/pages/admin/accounts.html
View File

@@ -8,7 +8,6 @@
<link rel="stylesheet" href="/css/common.css?v=1">
<link rel="stylesheet" href="/css/admin-settings.css?v=1">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/auth-check.js" defer></script>
</head>
<body>
<div class="work-report-container">
@@ -120,13 +119,18 @@
<input type="tel" id="userPhone" class="form-control">
</div>
<!-- 페이지 권한 설정 (사용자 편집 시에만 표시) -->
<div class="form-group" id="pageAccessGroup" style="display: none;">
<label class="form-label">페이지 접근 권한</label>
<small class="form-help">관리자는 모든 페이지에 자동으로 접근 가능합니다</small>
<div id="pageAccessList" class="page-access-list">
<!-- 페이지 체크박스 목록이 동적으로 생성됩니다 -->
<!-- 작업자 연결 (수정 시에만 표시) -->
<div class="form-group" id="workerLinkGroup" style="display: none;">
<label class="form-label">작업자 연결</label>
<div class="worker-link-container">
<div class="linked-worker-info" id="linkedWorkerInfo">
<span class="no-worker">연결된 작업자 없음</span>
</div>
<button type="button" class="btn btn-secondary btn-sm" onclick="openWorkerSelectModal()">
작업자 선택
</button>
</div>
<small class="form-help">계정과 작업자를 연결하면 출퇴근, 작업보고서 등의 기록이 연동됩니다</small>
</div>
</form>
</div>
@@ -194,13 +198,48 @@
</div>
</div>
<!-- 작업자 선택 모달 -->
<div id="workerSelectModal" class="modal-overlay" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<h2>작업자 선택</h2>
<button class="modal-close-btn" onclick="closeWorkerSelectModal()">×</button>
</div>
<div class="modal-body">
<div class="worker-select-layout">
<!-- 부서 목록 -->
<div class="department-list-panel">
<h3 class="panel-title">부서</h3>
<div class="department-list" id="departmentList">
<!-- 부서 목록이 동적으로 생성됩니다 -->
</div>
</div>
<!-- 작업자 목록 -->
<div class="worker-list-panel">
<h3 class="panel-title">작업자</h3>
<div class="worker-list" id="workerListForSelect">
<div class="empty-message">부서를 선택하세요</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeWorkerSelectModal()">취소</button>
<button type="button" class="btn btn-danger" onclick="unlinkWorker()">연결 해제</button>
</div>
</div>
</div>
<!-- 토스트 알림 -->
<div class="toast-container" id="toastContainer"></div>
<!-- JavaScript -->
<script type="module" src="/js/api-config.js?v=13"></script>
<script type="module" src="/js/load-navbar.js"></script>
<script type="module" src="/js/load-sidebar.js"></script>
<script src="/js/api-base.js"></script>
<script src="/js/app-init.js?v=2" defer></script>
<script src="https://instant.page/5.2.0" type="module"></script>
<script src="/js/admin-settings.js?v=8"></script>
</body>
</html>

9
web-ui/pages/admin/attendance-report.html
View File

@@ -5,10 +5,11 @@
<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=7">
<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>
<script src="/js/api-base.js"></script>
<script src="/js/app-init.js?v=2" defer></script>
<script src="https://instant.page/5.2.0" type="module"></script>
<style>
.comparison-grid {
display: grid;
@@ -177,8 +178,6 @@
</main>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="module" src="/js/load-navbar.js"></script>
<script type="module" src="/js/load-sidebar.js"></script>
<script type="module">
import '/js/api-config.js?v=3';
</script>

9
web-ui/pages/admin/codes.html
View File

@@ -5,10 +5,11 @@
<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=7">
<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>
<script src="/js/api-base.js"></script>
<script src="/js/app-init.js?v=2" defer></script>
<script src="https://instant.page/5.2.0" type="module"></script>
</head>
<body>
<!-- 네비게이션 바 -->
@@ -134,8 +135,6 @@
</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/code-management.js?v=2"></script>
</body>
</html>

316
web-ui/pages/admin/departments.html Normal file
View File

@@ -0,0 +1,316 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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=8">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/api-base.js"></script>
<script src="/js/app-init.js?v=2" defer></script>
<script src="https://instant.page/5.2.0" type="module"></script>
<style>
.department-grid {
display: grid;
grid-template-columns: 350px 1fr;
gap: 1.5rem;
margin-top: 1rem;
}
.department-list-panel {
background: white;
border-radius: 0.5rem;
padding: 1rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.department-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 0.5rem;
border: 1px solid #e5e7eb;
}
.department-item:hover {
background: #f3f4f6;
}
.department-item.active {
background: #eff6ff;
border-color: #3b82f6;
}
.department-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.department-name {
font-weight: 600;
color: #1f2937;
}
.department-count {
font-size: 0.875rem;
color: #6b7280;
}
.department-actions {
display: flex;
gap: 0.5rem;
}
.btn-icon {
padding: 0.375rem;
border-radius: 0.375rem;
background: transparent;
border: none;
cursor: pointer;
color: #6b7280;
transition: all 0.2s;
}
.btn-icon:hover {
background: #e5e7eb;
color: #1f2937;
}
.btn-icon.danger:hover {
background: #fee2e2;
color: #dc2626;
}
.worker-list-panel {
background: white;
border-radius: 0.5rem;
padding: 1rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.worker-list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e5e7eb;
}
.worker-list-title {
font-size: 1.125rem;
font-weight: 600;
color: #1f2937;
}
.worker-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
margin-bottom: 0.5rem;
transition: all 0.2s;
}
.worker-card:hover {
border-color: #d1d5db;
background: #f9fafb;
}
.worker-card.selected {
background: #eff6ff;
border-color: #3b82f6;
}
.worker-info-row {
display: flex;
align-items: center;
gap: 1rem;
}
.worker-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: #4b5563;
}
.worker-details {
display: flex;
flex-direction: column;
}
.worker-name {
font-weight: 600;
color: #1f2937;
}
.worker-job {
font-size: 0.875rem;
color: #6b7280;
}
.bulk-actions {
display: none;
gap: 0.5rem;
padding: 0.75rem;
background: #f3f4f6;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
.bulk-actions.visible {
display: flex;
}
.modal-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 100;
}
.modal-backdrop.show {
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background: white;
border-radius: 0.75rem;
padding: 1.5rem;
width: 90%;
max-width: 500px;
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.modal-title {
font-size: 1.25rem;
font-weight: 600;
color: #1f2937;
}
.form-group {
margin-bottom: 1rem;
}
.form-label {
display: block;
font-weight: 500;
margin-bottom: 0.5rem;
color: #374151;
}
.form-input, .form-select, .form-textarea {
width: 100%;
padding: 0.625rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 0.875rem;
}
.form-textarea {
min-height: 80px;
resize: vertical;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 1.5rem;
}
@media (max-width: 768px) {
.department-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<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-actions">
<button class="btn btn-primary" onclick="openDepartmentModal()">새 부서 등록</button>
</div>
</div>
<div class="department-grid">
<!-- 부서 목록 패널 -->
<div class="department-list-panel">
<h3 style="margin-bottom: 1rem; font-size: 1rem; color: #374151;">부서 목록</h3>
<div id="departmentList">
<!-- 부서 목록이 여기에 동적으로 생성됩니다 -->
</div>
</div>
<!-- 작업자 목록 패널 -->
<div class="worker-list-panel">
<div class="worker-list-header">
<span class="worker-list-title" id="workerListTitle">부서를 선택하세요</span>
<button class="btn btn-secondary btn-sm" id="addWorkerBtn" style="display: none;" onclick="openAddWorkerModal()">
작업자 추가
</button>
</div>
<!-- 일괄 작업 영역 -->
<div class="bulk-actions" id="bulkActions">
<span style="font-size: 0.875rem; color: #374151;"><strong id="selectedCount">0</strong>명 선택됨</span>
<select class="form-select" id="moveToDepartment" style="width: 150px; margin-left: auto;">
<option value="">부서 이동...</option>
</select>
<button class="btn btn-primary btn-sm" onclick="moveSelectedWorkers()">이동</button>
</div>
<div id="workerList">
<div style="text-align: center; padding: 2rem; color: #9ca3af;">
왼쪽에서 부서를 선택하면 해당 부서의 작업자가 표시됩니다.
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- 부서 등록/수정 모달 -->
<div class="modal-backdrop" id="departmentModal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="departmentModalTitle">새 부서 등록</h2>
<button class="btn-icon" onclick="closeDepartmentModal()">&times;</button>
</div>
<form id="departmentForm" onsubmit="saveDepartment(event)">
<input type="hidden" id="departmentId">
<div class="form-group">
<label class="form-label">부서명 *</label>
<input type="text" class="form-input" id="departmentName" required placeholder="예: 생산팀, 품질관리팀">
</div>
<div class="form-group">
<label class="form-label">상위 부서</label>
<select class="form-select" id="parentDepartment">
<option value="">없음 (최상위 부서)</option>
</select>
</div>
<div class="form-group">
<label class="form-label">설명</label>
<textarea class="form-textarea" id="departmentDescription" placeholder="부서 설명을 입력하세요"></textarea>
</div>
<div class="form-group">
<label class="form-label">표시 순서</label>
<input type="number" class="form-input" id="displayOrder" value="0" min="0">
</div>
<div class="form-group">
<label style="display: flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" id="isActive" checked>
<span>활성화</span>
</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeDepartmentModal()">취소</button>
<button type="submit" class="btn btn-primary">저장</button>
</div>
</form>
</div>
</div>
<script src="/js/department-management.js"></script>
</body>
</html>

186
web-ui/pages/admin/equipments.html
View File

@@ -5,10 +5,11 @@
<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=7">
<link rel="stylesheet" href="/css/admin-pages.css?v=8">
<link rel="stylesheet" href="/css/equipment-management.css?v=1">
<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>
<script src="/js/api-base.js"></script>
<script src="/js/app-init.js?v=2" defer></script>
</head>
<body>
<!-- 네비게이션 바 -->
@@ -32,21 +33,26 @@
</div>
</div>
<!-- 통계 요약 -->
<div id="statsSection" class="eq-stats-section">
<!-- JS에서 동적으로 렌더링 -->
</div>
<!-- 필터 영역 -->
<div class="filter-section">
<div class="filter-group">
<div class="eq-filter-section">
<div class="eq-filter-group">
<label for="filterWorkplace">작업장</label>
<select id="filterWorkplace" class="form-control" onchange="filterEquipments()">
<option value="">전체</option>
</select>
</div>
<div class="filter-group">
<div class="eq-filter-group">
<label for="filterType">설비 유형</label>
<select id="filterType" class="form-control" onchange="filterEquipments()">
<option value="">전체</option>
</select>
</div>
<div class="filter-group">
<div class="eq-filter-group">
<label for="filterStatus">상태</label>
<select id="filterStatus" class="form-control" onchange="filterEquipments()">
<option value="">전체</option>
@@ -55,17 +61,15 @@
<option value="inactive">비활성</option>
</select>
</div>
<div class="filter-group">
<div class="eq-filter-group eq-search-group">
<label for="searchInput">검색</label>
<input type="text" id="searchInput" class="form-control" placeholder="설비명 또는 코드 검색" oninput="filterEquipments()">
<input type="text" id="searchInput" class="form-control" placeholder="설비명, 코드, 제조사 검색..." oninput="filterEquipments()">
</div>
</div>
<!-- 설비 목록 -->
<div class="content-section">
<div id="equipmentList" class="data-table-container">
<!-- 설비 목록이 여기에 동적으로 렌더링됩니다 -->
</div>
<div id="equipmentList" class="eq-table-container">
<!-- 설비 목록이 여기에 동적으로 렌더링됩니다 -->
</div>
</div>
</main>
@@ -73,79 +77,99 @@
<!-- 설비 추가/수정 모달 -->
<div id="equipmentModal" class="modal-overlay" style="display: none;">
<div class="modal-container" style="max-width: 700px;">
<div class="modal-container" style="max-width: 720px;">
<div class="modal-header">
<h2 id="modalTitle">설비 추가</h2>
<button class="btn-close" onclick="closeEquipmentModal()">&times;</button>
</div>
<div class="modal-body">
<div class="modal-body eq-modal-body">
<form id="equipmentForm">
<input type="hidden" id="equipmentId">
<div class="form-row">
<div class="form-group">
<label for="equipmentCode">설비 코드 *</label>
<input type="text" id="equipmentCode" class="form-control" placeholder="예: CNC-01" required>
<!-- 기본 정보 -->
<div class="eq-form-section">
<div class="eq-form-section-title">기본 정보</div>
<div class="eq-form-row">
<div class="form-group">
<label for="equipmentCode">관리번호 *</label>
<input type="text" id="equipmentCode" class="form-control" placeholder="예: TKP-001" required>
</div>
<div class="form-group">
<label for="equipmentName">설비명 *</label>
<input type="text" id="equipmentName" class="form-control" placeholder="예: TIG용접기" required>
</div>
</div>
<div class="form-group">
<label for="equipmentName">설비명 *</label>
<input type="text" id="equipmentName" class="form-control" placeholder="예: CNC 머시닝 센터" required>
<div class="eq-form-row">
<div class="form-group">
<label for="modelName">모델명</label>
<input type="text" id="modelName" class="form-control" placeholder="예: Perfect-500PT">
</div>
<div class="form-group">
<label for="specifications">규격</label>
<input type="text" id="specifications" class="form-control" placeholder="예: 500A/DC">
</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="equipmentType">설비 유형</label>
<input type="text" id="equipmentType" class="form-control" placeholder="예: CNC, 선반, 밀링 등">
<!-- 제조사 및 구입 정보 -->
<div class="eq-form-section">
<div class="eq-form-section-title">제조사 및 구입 정보</div>
<div class="eq-form-row">
<div class="form-group">
<label for="manufacturer">제조사 (메이커)</label>
<input type="text" id="manufacturer" class="form-control" placeholder="예: 퍼펙트대대">
</div>
<div class="form-group">
<label for="supplier">구입처</label>
<input type="text" id="supplier" class="form-control" placeholder="예: 현대용접기">
</div>
</div>
<div class="form-group">
<label for="workplaceId">작업장</label>
<select id="workplaceId" class="form-control">
<option value="">선택 안함</option>
</select>
<div class="eq-form-row">
<div class="form-group">
<label for="purchasePrice">구입가격 (원)</label>
<input type="number" id="purchasePrice" class="form-control" placeholder="예: 1600000">
</div>
<div class="form-group">
<label for="installationDate">구입일자</label>
<input type="date" id="installationDate" class="form-control">
</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="manufacturer">제조사</label>
<input type="text" id="manufacturer" class="form-control" placeholder="예: DMG MORI">
<!-- 상세 정보 -->
<div class="eq-form-section">
<div class="eq-form-section-title">상세 정보</div>
<div class="eq-form-row">
<div class="form-group">
<label for="serialNumber">시리얼 번호 (S/N)</label>
<input type="text" id="serialNumber" class="form-control">
</div>
<div class="form-group">
<label for="equipmentStatus">상태</label>
<select id="equipmentStatus" class="form-control">
<option value="active">활성</option>
<option value="maintenance">정비중</option>
<option value="inactive">비활성</option>
</select>
</div>
</div>
<div class="eq-form-row">
<div class="form-group">
<label for="equipmentType">설비 유형</label>
<input type="text" id="equipmentType" class="form-control" placeholder="예: 용접기, 크레인 등">
</div>
<div class="form-group">
<label for="workplaceId">작업장</label>
<select id="workplaceId" class="form-control">
<option value="">선택 안함</option>
</select>
</div>
</div>
<div class="form-group">
<label for="modelName">모델명</label>
<input type="text" id="modelName" class="form-control" placeholder="예: NHX-5000">
<label for="notes">비고</label>
<textarea id="notes" class="form-control" rows="2" placeholder="기타 메모사항"></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="serialNumber">시리얼 번호</label>
<input type="text" id="serialNumber" class="form-control">
</div>
<div class="form-group">
<label for="installationDate">설치일</label>
<input type="date" id="installationDate" class="form-control">
</div>
</div>
<div class="form-group">
<label for="equipmentStatus">상태</label>
<select id="equipmentStatus" class="form-control">
<option value="active">활성</option>
<option value="maintenance">정비중</option>
<option value="inactive">비활성</option>
</select>
</div>
<div class="form-group">
<label for="specifications">사양 정보</label>
<textarea id="specifications" class="form-control" rows="3" placeholder="설비 사양 정보를 입력하세요"></textarea>
</div>
<div class="form-group">
<label for="notes">비고</label>
<textarea id="notes" class="form-control" rows="2" placeholder="기타 메모사항"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
@@ -156,16 +180,11 @@
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="module" src="/js/load-navbar.js?v=5"></script>
<script type="module" src="/js/load-sidebar.js"></script>
<script type="module">
// API 설정 먼저 로드
import '/js/api-config.js?v=3';
</script>
<script>
// axios 기본 설정
(function() {
// api-config.js가 로드될 때까지 대기
const checkApiConfig = setInterval(() => {
if (window.API_BASE_URL) {
clearInterval(checkApiConfig);
@@ -174,30 +193,17 @@
if (token) {
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}
// axios 요청 인터셉터 추가 (모든 요청에 토큰 자동 추가)
axios.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
console.log('[Request]', config.method.toUpperCase(), config.url);
if (token) config.headers.Authorization = `Bearer ${token}`;
return config;
},
error => {
return Promise.reject(error);
}
error => Promise.reject(error)
);
// axios 응답 인터셉터 추가 (에러 처리)
axios.interceptors.response.use(
response => {
console.log('[Response]', response.status, response.config.url);
return response;
},
response => response,
error => {
console.error('[Error]', error.response?.status, error.config?.url, error.message);
if (error.response?.status === 401) {
alert('세션이 만료되었습니다. 다시 로그인해주세요.');
window.location.href = '/pages/login.html';
@@ -205,12 +211,10 @@
return Promise.reject(error);
}
);
console.log('[Axios Ready]', axios.defaults.baseURL);
}
}, 50);
})();
</script>
<script src="/js/equipment-management.js?v=4"></script>
<script src="/js/equipment-management.js?v=8"></script>
</body>
</html>

9
web-ui/pages/admin/issue-categories.html
View File

@@ -5,10 +5,11 @@
<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=7">
<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>
<script src="/js/api-base.js"></script>
<script src="/js/app-init.js?v=2" defer></script>
<script src="https://instant.page/5.2.0" type="module"></script>
<style>
.type-tabs {
display: flex;
@@ -315,8 +316,6 @@
</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/issue-category-manage.js"></script>
</body>
</html>

134
web-ui/pages/admin/page-access.html
View File

@@ -1,134 +0,0 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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/common.css?v=1">
<link rel="stylesheet" href="/css/admin-settings.css?v=1">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script type="module" src="/js/auth-check.js" defer></script>
</head>
<body>
<div class="work-report-container">
<!-- 네비게이션 바 -->
<div id="navbar-container"></div>
<!-- 메인 콘텐츠 -->
<main class="work-report-main">
<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="settings-section">
<div class="section-header">
<h2 class="section-title">사용자 목록</h2>
<div class="filter-buttons">
<button class="filter-btn active" data-filter="all">전체</button>
<button class="filter-btn" data-filter="with-access">권한 있음</button>
<button class="filter-btn" data-filter="no-access">권한 없음</button>
</div>
</div>
<div class="users-container">
<div class="users-table-container">
<table class="users-table">
<thead>
<tr>
<th>사용자명</th>
<th>아이디</th>
<th>역할</th>
<th>작업자</th>
<th>접근 가능 페이지</th>
<th>관리</th>
</tr>
</thead>
<tbody id="usersTableBody">
<tr>
<td colspan="6" style="text-align: center; padding: 2rem;">
<div class="spinner"></div>
<p>사용자 목록을 불러오는 중...</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="empty-state" id="emptyState" style="display: none;">
<h3>등록된 사용자가 없습니다</h3>
<p>권한을 부여할 사용자 계정이 없습니다.</p>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- 페이지 권한 설정 모달 -->
<div id="pageAccessModal" class="modal-overlay" style="display: none;">
<div class="modal-container" style="max-width: 700px;">
<div class="modal-header">
<h2 id="modalTitle">페이지 권한 설정</h2>
<button class="modal-close-btn" onclick="closePageAccessModal()">×</button>
</div>
<div class="modal-body">
<div class="user-info-section" style="background: #f9fafb; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem;">
<div style="display: flex; align-items: center; gap: 0.75rem;">
<div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600;">
<span id="modalUserInitial">-</span>
</div>
<div>
<div style="font-weight: 600; font-size: 1rem; color: #111827;" id="modalUserName">사용자명</div>
<div style="font-size: 0.875rem; color: #6b7280;">
<span id="modalUsername">username</span>
<span style="margin: 0 0.5rem;">•</span>
<span id="modalWorkerName">작업자</span>
</div>
</div>
</div>
</div>
<div class="page-access-list">
<h3 style="font-size: 1rem; font-weight: 600; color: #374151; margin-bottom: 1rem;">
접근 가능 페이지 선택
</h3>
<div id="pageListContainer" style="max-height: 400px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.5rem;">
<div style="text-align: center; padding: 2rem; color: #6b7280;">
<div class="spinner" style="margin: 0 auto 0.5rem;"></div>
페이지 목록을 불러오는 중...
</div>
</div>
</div>
<div style="margin-top: 1.5rem; padding: 1rem; background: #fffbeb; border: 1px solid #fde047; border-radius: 0.5rem;">
<p style="margin: 0; font-size: 0.875rem; color: #92400e;">
<strong>💡 참고:</strong> Admin 및 System Admin은 모든 페이지에 자동으로 접근할 수 있습니다.
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closePageAccessModal()">취소</button>
<button type="button" class="btn btn-primary" id="savePageAccessBtn">저장</button>
</div>
</div>
</div>
<!-- 토스트 알림 -->
<div class="toast-container" id="toastContainer"></div>
<!-- JavaScript -->
<script type="module" src="/js/api-config.js?v=13"></script>
<script type="module" src="/js/load-navbar.js"></script>
<script type="module" src="/js/load-sidebar.js"></script>
<script src="/js/page-access-management.js?v=1"></script>
</body>
</html>

9
web-ui/pages/admin/projects.html
View File

@@ -5,9 +5,8 @@
<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" defer></script>
</head>
<body>
<!-- 네비게이션 바 -->
@@ -169,9 +168,9 @@
</div>
<!-- JavaScript -->
<script type="module" src="/js/api-config.js?v=3"></script>
<script type="module" src="/js/load-navbar.js?v=5"></script>
<script type="module" src="/js/load-sidebar.js"></script>
<script src="/js/api-base.js"></script>
<script src="/js/app-init.js?v=2" defer></script>
<script src="https://instant.page/5.2.0" type="module"></script>
<script type="module" src="/js/project-management.js?v=3"></script>
</body>
</html>

9
web-ui/pages/admin/tasks.html
View File

@@ -5,10 +5,11 @@
<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=7">
<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>
<script src="/js/api-base.js"></script>
<script src="/js/app-init.js?v=2" defer></script>
<script src="https://instant.page/5.2.0" type="module"></script>
</head>
<body>
<!-- 네비게이션 바 -->
@@ -144,8 +145,6 @@
</div>
</div>
<script type="module" src="/js/load-navbar.js"></script>
<script type="module" src="/js/load-sidebar.js"></script>
<script type="module" src="/js/task-management.js?v=1"></script>
</body>
</html>

520
web-ui/pages/admin/workers.html
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>

684
web-ui/pages/admin/workplaces.html
View File

@@ -5,307 +5,419 @@
<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=7">
<link rel="stylesheet" href="/css/admin-pages.css?v=8">
<link rel="stylesheet" href="/css/workplace-management.css?v=7">
<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>
<script src="/js/api-base.js"></script>
<script src="/js/app-init.js?v=2" defer></script>
<script src="https://instant.page/5.2.0" type="module"></script>
</head>
<body>
<!-- 네비게이션 바 -->
<div id="navbar-container"></div>
<!-- 메인 레이아웃 -->
<!-- 메인 레이아웃 (기존 admin 레이아웃과 호환) -->
<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-actions">
<button class="btn btn-primary" onclick="openCategoryModal()">공장 추가</button>
<button class="btn btn-primary" onclick="openWorkplaceModal()">작업장 추가</button>
<button class="btn btn-secondary" onclick="refreshWorkplaces()">새로고침</button>
<div class="wp-content">
<!-- 페이지 헤더 -->
<div class="wp-page-header">
<div class="wp-header-content">
<h1 class="wp-page-title">
<span class="wp-page-title-icon">🏭</span>
작업장 관리
</h1>
<p class="wp-page-description">공장 및 작업장을 등록하고 설비 위치를 지도에서 관리합니다</p>
</div>
</div>
<!-- 공장(카테고리) 탭 -->
<div class="code-tabs" id="categoryTabs">
<button class="tab-btn active" data-category="" onclick="switchCategory('')">전체</button>
<!-- 공장 탭들이 여기에 동적으로 생성됩니다 -->
</div>
<!-- 공장 레이아웃 지도 관리 섹션 (카테고리가 선택된 경우에만 표시) -->
<div class="code-section" id="layoutMapSection" style="display: none;">
<div class="section-header">
<h2 class="section-title"><span id="selectedCategoryName"></span> 레이아웃 지도</h2>
<button class="btn btn-secondary" onclick="openLayoutMapModal()">지도 설정</button>
</div>
<div id="layoutMapPreview" style="padding: 20px; background: #f9fafb; border-radius: 8px; text-align: center;">
<!-- 레이아웃 이미지 미리보기가 여기에 표시됩니다 -->
</div>
</div>
<!-- 작업장 목록 -->
<div class="code-section">
<div class="section-header">
<h2 class="section-title">작업장 목록</h2>
</div>
<div class="code-stats" id="workplaceStats">
<span class="stat-item">전체 <span id="totalCount">0</span>개</span>
<span class="stat-item">활성 <span id="activeCount">0</span>개</span>
</div>
<div class="code-grid" id="workplaceGrid">
<!-- 작업장 카드들이 여기에 동적으로 생성됩니다 -->
</div>
<div class="wp-header-actions">
<button class="wp-btn wp-btn-primary" onclick="openCategoryModal()">
<span class="wp-btn-icon">🏢</span>
공장 추가
</button>
<button class="wp-btn wp-btn-primary" onclick="openWorkplaceModal()">
<span class="wp-btn-icon">📍</span>
작업장 추가
</button>
<button class="wp-btn wp-btn-secondary" onclick="refreshWorkplaces()">
<span class="wp-btn-icon">🔄</span>
새로고침
</button>
</div>
</div>
<!-- 통계 카드 -->
<div class="wp-stats-row" id="statsRow">
<div class="wp-stat-card">
<div class="wp-stat-icon factory">🏢</div>
<div class="wp-stat-content">
<h3 id="factoryCount">0</h3>
<p>공장</p>
</div>
</div>
<div class="wp-stat-card">
<div class="wp-stat-icon workplace">📍</div>
<div class="wp-stat-content">
<h3 id="totalCount">0</h3>
<p>전체 작업장</p>
</div>
</div>
<div class="wp-stat-card">
<div class="wp-stat-icon active">✅</div>
<div class="wp-stat-content">
<h3 id="activeCount">0</h3>
<p>활성 작업장</p>
</div>
</div>
<div class="wp-stat-card">
<div class="wp-stat-icon equipment">⚙️</div>
<div class="wp-stat-content">
<h3 id="equipmentCount">0</h3>
<p>등록된 설비</p>
</div>
</div>
</div>
<!-- 공장(카테고리) 탭 -->
<div class="wp-factory-tabs" id="categoryTabs">
<button class="wp-tab-btn active" data-category="" onclick="switchCategory('')">
<span class="wp-tab-icon">🏗️</span>
전체
<span class="wp-tab-count" id="tabAllCount">0</span>
</button>
<!-- 공장 탭들이 여기에 동적으로 생성됩니다 -->
</div>
<!-- 공장 레이아웃 지도 관리 섹션 (카테고리가 선택된 경우에만 표시) -->
<div class="wp-layout-section" id="layoutMapSection" style="display: none;">
<div class="wp-layout-header">
<h2 class="wp-layout-title">
<span class="wp-layout-title-icon">🗺️</span>
<span id="selectedCategoryName"></span> 레이아웃 지도
</h2>
<button class="wp-btn wp-btn-primary" onclick="openLayoutMapModal()">
<span class="wp-btn-icon">⚙️</span>
지도 설정
</button>
</div>
<div class="wp-layout-body">
<div id="layoutMapPreview" class="wp-layout-preview">
<div class="wp-layout-empty">
<div class="wp-layout-empty-icon">🗺️</div>
<p>레이아웃 이미지가 아직 등록되지 않았습니다</p>
</div>
</div>
</div>
</div>
<!-- 작업장 목록 -->
<div class="wp-workplace-section">
<div class="wp-section-header">
<h2 class="wp-section-title">
<span>📋</span>
작업장 목록
</h2>
<div class="wp-section-stats">
<span class="wp-section-stat">전체 <strong id="sectionTotalCount">0</strong>개</span>
<span class="wp-section-stat">활성 <strong id="sectionActiveCount">0</strong>개</span>
</div>
</div>
<div class="wp-section-body">
<div class="wp-grid" id="workplaceGrid">
<!-- 작업장 카드들이 여기에 동적으로 생성됩니다 -->
</div>
</div>
</div>
</div>
</main>
</div>
<!-- 공장(카테고리) 추가/수정 모달 -->
<div id="categoryModal" class="modal-overlay" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<h2 id="categoryModalTitle">공장 추가</h2>
<button class="modal-close-btn" onclick="closeCategoryModal()">×</button>
</div>
<div class="modal-body">
<form id="categoryForm" onsubmit="event.preventDefault(); saveCategory();">
<input type="hidden" id="categoryId">
<div class="form-group">
<label class="form-label">공장명 *</label>
<input type="text" id="categoryName" class="form-control" placeholder="예: 제 1공장" required>
</div>
<div class="form-group">
<label class="form-label">설명</label>
<textarea id="categoryDescription" class="form-control" rows="3" placeholder="공장에 대한 설명을 입력하세요"></textarea>
</div>
<div class="form-group">
<label class="form-label">표시 순서</label>
<input type="number" id="categoryOrder" class="form-control" value="0" min="0">
<small class="form-help">작은 숫자가 먼저 표시됩니다</small>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeCategoryModal()">취소</button>
<button type="button" class="btn btn-danger" id="deleteCategoryBtn" onclick="deleteCategory()" style="display: none;">삭제</button>
<button type="button" class="btn btn-primary" onclick="saveCategory()">저장</button>
</div>
</div>
</div>
<!-- 작업장 추가/수정 모달 -->
<div id="workplaceModal" class="modal-overlay" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<h2 id="workplaceModalTitle">작업장 추가</h2>
<button class="modal-close-btn" onclick="closeWorkplaceModal()">×</button>
</div>
<div class="modal-body">
<form id="workplaceForm" onsubmit="event.preventDefault(); saveWorkplace();">
<input type="hidden" id="workplaceId">
<div class="form-group">
<label class="form-label">소속 공장</label>
<select id="workplaceCategoryId" class="form-control">
<option value="">공장 선택</option>
<!-- 공장 목록이 동적으로 생성됩니다 -->
</select>
</div>
<div class="form-group">
<label class="form-label">작업장명 *</label>
<input type="text" id="workplaceName" class="form-control" placeholder="예: 서스작업장, 조립구역" required>
</div>
<div class="form-group">
<label class="form-label">작업장 용도</label>
<select id="workplacePurpose" class="form-control">
<option value="">선택 안 함</option>
<option value="작업구역">작업구역</option>
<option value="설비">설비</option>
<option value="휴게시설">휴게시설</option>
<option value="회의실">회의실</option>
<option value="창고">창고</option>
<option value="기타">기타</option>
</select>
<small class="form-help">작업장의 주요 용도를 선택하세요</small>
</div>
<div class="form-group">
<label class="form-label">표시 순서</label>
<input type="number" id="displayPriority" class="form-control" value="0" min="0">
<small class="form-help">숫자가 작을수록 먼저 표시됩니다</small>
</div>
<div class="form-group">
<label class="form-label">설명</label>
<textarea id="workplaceDescription" class="form-control" rows="4" placeholder="작업장에 대한 설명을 입력하세요"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeWorkplaceModal()">취소</button>
<button type="button" class="btn btn-danger" id="deleteWorkplaceBtn" onclick="deleteWorkplace()" style="display: none;">삭제</button>
<button type="button" class="btn btn-primary" onclick="saveWorkplace()">저장</button>
</div>
</div>
</div>
<!-- 작업장 지도 관리 모달 -->
<div id="workplaceMapModal" class="modal-overlay" style="display: none;">
<div class="modal-container" style="max-width: 90vw; max-height: 90vh;">
<div class="modal-header">
<h2 id="workplaceMapModalTitle">작업장 지도 관리</h2>
<button class="modal-close-btn" onclick="closeWorkplaceMapModal()">×</button>
</div>
<div class="modal-body" style="overflow-y: auto;">
<!-- Step 1: 이미지 업로드 -->
<div class="form-section" style="border-bottom: 2px solid #e5e7eb; padding-bottom: 20px; margin-bottom: 20px;">
<h3 style="font-size: 16px; font-weight: 600; margin-bottom: 12px;">Step 1. 작업장 레이아웃 이미지 업로드</h3>
<p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">
작업장의 상세 레이아웃 이미지를 업로드하세요
</p>
<div class="form-group">
<label class="form-label">현재 이미지</label>
<div id="workplaceLayoutPreview" style="background: #f9fafb; border: 2px dashed #cbd5e1; padding: 20px; border-radius: 8px; text-align: center; min-height: 200px;">
<span style="color: #94a3b8;">업로드된 이미지가 없습니다</span>
</div>
</div>
<div class="form-group">
<label class="form-label">새 이미지 업로드</label>
<input type="file" id="workplaceLayoutFile" accept="image/*" class="form-control" onchange="previewWorkplaceLayoutImage(event)">
<small class="form-help">JPG, PNG, GIF 형식 지원 (최대 5MB)</small>
</div>
<button type="button" class="btn btn-primary" onclick="uploadWorkplaceLayout()">이미지 업로드</button>
</div>
<!-- Step 2: 설비/영역 정의 -->
<div class="form-section">
<h3 style="font-size: 16px; font-weight: 600; margin-bottom: 12px;">Step 2. 설비 위치 정의 (선택사항)</h3>
<p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">
작업장 이미지 위에 마우스로 드래그하여 각 설비의 위치를 지정하세요
</p>
<!-- 영역 그리기 캔버스 -->
<div style="position: relative; display: inline-block; margin-bottom: 20px;" id="workplaceCanvasContainer">
<canvas id="workplaceRegionCanvas" style="border: 2px solid #cbd5e1; cursor: crosshair; max-width: 100%;"></canvas>
</div>
<!-- 설비 선택 및 영역 목록 -->
<div class="form-group">
<label class="form-label">설비 이름 입력</label>
<input type="text" id="equipmentNameInput" class="form-control" placeholder="예: CNC-01, 선반기-A" style="margin-bottom: 12px;">
<small class="form-help">드래그로 영역을 선택한 후 설비 이름을 입력하고 저장하세요</small>
<div style="display: flex; gap: 8px; margin-top: 12px;">
<button type="button" class="btn btn-secondary" onclick="clearWorkplaceCurrentRegion()">현재 영역 지우기</button>
<button type="button" class="btn btn-primary" onclick="saveWorkplaceEquipmentRegion()">설비 위치 저장</button>
</div>
</div>
<!-- 정의된 영역 목록 -->
<div class="form-group">
<label class="form-label">정의된 설비 목록</label>
<div id="workplaceEquipmentList" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; min-height: 100px;">
<p style="color: #94a3b8; text-align: center;">아직 정의된 설비가 없습니다</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeWorkplaceMapModal()">닫기</button>
</div>
</div>
</div>
<!-- 레이아웃 지도 설정 모달 -->
<div id="layoutMapModal" class="modal-overlay" style="display: none;">
<div class="modal-container" style="max-width: 90vw; max-height: 90vh;">
<div class="modal-header">
<h2>공장 레이아웃 지도 설정</h2>
<button class="modal-close-btn" onclick="closeLayoutMapModal()">×</button>
</div>
<div class="modal-body" style="overflow-y: auto;">
<!-- Step 1: 이미지 업로드 -->
<div class="form-section" style="border-bottom: 2px solid #e5e7eb; padding-bottom: 20px; margin-bottom: 20px;">
<h3 style="font-size: 16px; font-weight: 600; margin-bottom: 12px;">Step 1. 공장 레이아웃 이미지 업로드</h3>
<div class="form-group">
<label class="form-label">현재 이미지</label>
<div id="currentLayoutImage" style="background: #f9fafb; border: 2px dashed #cbd5e1; padding: 20px; border-radius: 8px; text-align: center;">
<span style="color: #94a3b8;">업로드된 이미지가 없습니다</span>
</div>
</div>
<div class="form-group">
<label class="form-label">새 이미지 업로드</label>
<input type="file" id="layoutImageFile" accept="image/*" class="form-control" onchange="previewLayoutImage(event)">
<small class="form-help">JPG, PNG, GIF 형식 지원 (최대 5MB)</small>
</div>
<button type="button" class="btn btn-primary" onclick="uploadLayoutImage()">이미지 업로드</button>
</div>
<!-- Step 2: 작업장 영역 정의 -->
<div class="form-section">
<h3 style="font-size: 16px; font-weight: 600; margin-bottom: 12px;">Step 2. 작업장 영역 정의</h3>
<p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">
이미지 위에 마우스로 드래그하여 각 작업장의 위치를 지정하세요
</p>
<!-- 영역 그리기 캔버스 -->
<div style="position: relative; display: inline-block; margin-bottom: 20px;" id="canvasContainer">
<canvas id="regionCanvas" style="border: 2px solid #cbd5e1; cursor: crosshair; max-width: 100%;"></canvas>
</div>
<!-- 작업장 선택 및 영역 목록 -->
<div class="form-group">
<label class="form-label">작업장 선택</label>
<select id="regionWorkplaceSelect" class="form-control" style="margin-bottom: 12px;">
<option value="">작업장을 선택하세요</option>
</select>
<div style="display: flex; gap: 8px;">
<button type="button" class="btn btn-secondary" onclick="clearCurrentRegion()">현재 영역 지우기</button>
<button type="button" class="btn btn-primary" onclick="saveRegion()">선택 영역 저장</button>
</div>
</div>
<!-- 정의된 영역 목록 -->
<div class="form-group">
<label class="form-label">정의된 영역 목록</label>
<div id="regionList" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; min-height: 100px;">
<!-- 영역 목록이 여기에 표시됩니다 -->
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeLayoutMapModal()">닫기</button>
</div>
</div>
<!-- 공장(카테고리) 추가/수정 모달 -->
<div id="categoryModal" class="wp-modal-overlay" style="display: none;">
<div class="wp-modal">
<div class="wp-modal-header">
<h2 class="wp-modal-title">
<span>🏢</span>
<span id="categoryModalTitle">공장 추가</span>
</h2>
<button class="wp-modal-close" onclick="closeCategoryModal()">×</button>
</div>
<div class="wp-modal-body">
<form id="categoryForm" onsubmit="event.preventDefault(); saveCategory();">
<input type="hidden" id="categoryId">
<div class="wp-form-group">
<label class="wp-form-label required">공장명</label>
<input type="text" id="categoryName" class="wp-form-control" placeholder="예: 제 1공장" required>
</div>
<div class="wp-form-group">
<label class="wp-form-label">설명</label>
<textarea id="categoryDescription" class="wp-form-control" rows="3" placeholder="공장에 대한 설명을 입력하세요"></textarea>
</div>
<div class="wp-form-group">
<label class="wp-form-label">표시 순서</label>
<input type="number" id="categoryOrder" class="wp-form-control" value="0" min="0">
<span class="wp-form-help">숫자가 작을수록 먼저 표시됩니다</span>
</div>
</form>
</div>
<div class="wp-modal-footer">
<button type="button" class="wp-btn wp-btn-outline" onclick="closeCategoryModal()">취소</button>
<button type="button" class="wp-btn wp-btn-danger" id="deleteCategoryBtn" onclick="deleteCategory()" style="display: none;">삭제</button>
<button type="button" class="wp-btn wp-btn-primary" onclick="saveCategory()">저장</button>
</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/workplace-management.js?v=3"></script>
<script type="module" src="/js/workplace-layout-map.js?v=1"></script>
<!-- 작업장 추가/수정 모달 -->
<div id="workplaceModal" class="wp-modal-overlay" style="display: none;">
<div class="wp-modal">
<div class="wp-modal-header">
<h2 class="wp-modal-title">
<span>📍</span>
<span id="workplaceModalTitle">작업장 추가</span>
</h2>
<button class="wp-modal-close" onclick="closeWorkplaceModal()">×</button>
</div>
<div class="wp-modal-body">
<form id="workplaceForm" onsubmit="event.preventDefault(); saveWorkplace();">
<input type="hidden" id="workplaceId">
<div class="wp-form-group">
<label class="wp-form-label">소속 공장</label>
<select id="workplaceCategoryId" class="wp-form-control">
<option value="">공장 선택</option>
</select>
</div>
<div class="wp-form-group">
<label class="wp-form-label required">작업장명</label>
<input type="text" id="workplaceName" class="wp-form-control" placeholder="예: 서스작업장, 조립구역" required>
</div>
<div class="wp-form-group">
<label class="wp-form-label">작업장 용도</label>
<select id="workplacePurpose" class="wp-form-control">
<option value="">선택 안 함</option>
<option value="작업구역">작업구역</option>
<option value="설비">설비</option>
<option value="휴게시설">휴게시설</option>
<option value="회의실">회의실</option>
<option value="창고">창고</option>
<option value="기타">기타</option>
</select>
<span class="wp-form-help">작업장의 주요 용도를 선택하세요</span>
</div>
<div class="wp-form-group">
<label class="wp-form-label">표시 순서</label>
<input type="number" id="displayPriority" class="wp-form-control" value="0" min="0">
<span class="wp-form-help">숫자가 작을수록 먼저 표시됩니다</span>
</div>
<div class="wp-form-group">
<label class="wp-form-label">설명</label>
<textarea id="workplaceDescription" class="wp-form-control" rows="3" placeholder="작업장에 대한 설명을 입력하세요"></textarea>
</div>
</form>
</div>
<div class="wp-modal-footer">
<button type="button" class="wp-btn wp-btn-outline" onclick="closeWorkplaceModal()">취소</button>
<button type="button" class="wp-btn wp-btn-danger" id="deleteWorkplaceBtn" onclick="deleteWorkplace()" style="display: none;">삭제</button>
<button type="button" class="wp-btn wp-btn-primary" onclick="saveWorkplace()">저장</button>
</div>
</div>
</div>
<!-- 작업장 지도 관리 모달 (간단 모드) -->
<div id="workplaceMapModal" class="wp-modal-overlay" style="display: none;">
<div class="wp-modal" style="max-width: 600px;">
<div class="wp-modal-header">
<h2 class="wp-modal-title">
<span>🗺️</span>
<span id="workplaceMapModalTitle">작업장 지도 관리</span>
</h2>
<button class="wp-modal-close" onclick="closeWorkplaceMapModal()">×</button>
</div>
<div class="wp-modal-body" style="padding: 24px;">
<!-- 이미지 업로드 섹션 -->
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin-bottom: 20px;">
<h3 style="font-size: 15px; font-weight: 600; margin-bottom: 12px; color: #334155;">📷 작업장 레이아웃 이미지</h3>
<div class="wp-form-group">
<div id="workplaceLayoutPreview" style="background: white; border: 2px dashed #cbd5e1; padding: 20px; border-radius: 8px; text-align: center; min-height: 120px;">
<span style="color: #94a3b8;">업로드된 이미지가 없습니다</span>
</div>
</div>
<div style="display: flex; gap: 8px; align-items: center; margin-top: 12px;">
<input type="file" id="workplaceLayoutFile" accept="image/*" class="wp-form-control" style="flex: 1;" onchange="previewWorkplaceLayoutImage(event)">
<button type="button" class="wp-btn wp-btn-primary" onclick="uploadWorkplaceLayout()">업로드</button>
</div>
<span class="wp-form-help" style="margin-top: 8px; display: block;">JPG, PNG, GIF 형식 지원 (최대 5MB)</span>
</div>
<!-- 설비 배치 버튼 -->
<div style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border-radius: 12px; padding: 24px; text-align: center;">
<div style="font-size: 48px; margin-bottom: 12px;">⚙️</div>
<h3 style="color: white; font-size: 18px; font-weight: 600; margin-bottom: 8px;">설비 위치 편집</h3>
<p style="color: rgba(255,255,255,0.8); font-size: 14px; margin-bottom: 16px;">
전체 화면에서 설비 위치를 쉽게 지정할 수 있습니다
</p>
<button type="button" class="wp-btn" style="background: white; color: #1d4ed8; font-weight: 600; padding: 12px 32px; font-size: 15px;" onclick="openFullscreenEquipmentEditor()">
🖥️ 전체화면 편집 열기
</button>
</div>
<!-- 등록된 설비 요약 -->
<div style="margin-top: 20px; background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
<h4 style="font-size: 14px; font-weight: 600; color: #334155; margin: 0;">📋 등록된 설비</h4>
<span id="workplaceEquipmentCount" style="font-size: 12px; color: #64748b;">0개</span>
</div>
<div id="workplaceEquipmentList" style="max-height: 150px; overflow-y: auto;">
<p style="color: #94a3b8; text-align: center; padding: 12px; font-size: 13px;">아직 정의된 설비가 없습니다</p>
</div>
</div>
</div>
<div class="wp-modal-footer">
<button type="button" class="wp-btn wp-btn-outline" onclick="closeWorkplaceMapModal()">닫기</button>
</div>
</div>
</div>
<!-- 전체화면 설비 배치 편집기 -->
<div id="fullscreenEquipmentEditor" class="fullscreen-editor" style="display: none;">
<div class="fullscreen-editor-header">
<div class="fullscreen-editor-title">
<span>⚙️</span>
<span id="fullscreenEditorTitle">설비 위치 편집</span>
</div>
<div class="fullscreen-editor-actions">
<button type="button" class="editor-btn editor-btn-secondary" onclick="toggleEditorSidebar()">
<span id="sidebarToggleIcon">◀</span> 패널
</button>
<button type="button" class="editor-btn editor-btn-primary" onclick="closeFullscreenEditor()">
✕ 닫기
</button>
</div>
</div>
<div class="fullscreen-editor-body">
<!-- 메인 캔버스 영역 -->
<div class="fullscreen-canvas-area" id="fullscreenCanvasArea">
<div class="canvas-toolbar">
<span class="toolbar-info">🖱️ 드래그로 영역 선택</span>
<span class="toolbar-zoom" id="canvasZoomInfo">100%</span>
</div>
<div class="canvas-wrapper" id="fullscreenCanvasWrapper">
<canvas id="fullscreenRegionCanvas"></canvas>
</div>
<div class="canvas-help">
<span>💡 마우스로 드래그하여 설비 영역을 지정한 후, 오른쪽 패널에서 설비를 선택하고 저장하세요</span>
</div>
</div>
<!-- 사이드바 패널 -->
<div class="fullscreen-sidebar" id="fullscreenSidebar">
<!-- 설비 선택 -->
<div class="sidebar-section">
<div class="sidebar-section-header">
<h4>🔧 설비 선택</h4>
<span id="fsAvailableEquipmentCount" class="badge badge-success">0개</span>
</div>
<div class="sidebar-section-body">
<select id="fsEquipmentSelect" class="wp-form-control" onchange="fsToggleNewEquipmentFields()">
<option value="">-- 기존 설비 선택 --</option>
</select>
<p class="form-help">이미 배치된 설비는 목록에 표시되지 않습니다</p>
<div id="fsNewEquipmentFields" class="new-equipment-box">
<label>또는 새 설비 등록</label>
<input type="text" id="fsEquipmentCode" class="wp-form-control" placeholder="설비 코드">
<input type="text" id="fsEquipmentName" class="wp-form-control" placeholder="설비명">
</div>
<div class="button-group">
<button type="button" class="wp-btn wp-btn-outline" onclick="fsClearCurrentRegion()">영역 지우기</button>
<button type="button" class="wp-btn wp-btn-primary" onclick="fsSaveEquipmentRegion()">저장</button>
</div>
</div>
</div>
<!-- 등록된 설비 목록 -->
<div class="sidebar-section sidebar-section-flex">
<div class="sidebar-section-header">
<h4>📋 등록된 설비</h4>
<span id="fsRegisteredCount" class="badge">0개</span>
</div>
<div class="sidebar-section-body sidebar-list" id="fsEquipmentList">
<p class="empty-message">등록된 설비가 없습니다</p>
</div>
</div>
</div>
</div>
</div>
<!-- 레이아웃 지도 설정 모달 -->
<div id="layoutMapModal" class="wp-modal-overlay" style="display: none;">
<div class="wp-modal" style="max-width: 90vw; max-height: 90vh; width: 1000px;">
<div class="wp-modal-header">
<h2 class="wp-modal-title">
<span>🗺️</span>
공장 레이아웃 지도 설정
</h2>
<button class="wp-modal-close" onclick="closeLayoutMapModal()">×</button>
</div>
<div class="wp-modal-body" style="overflow-y: auto;">
<!-- Step 1: 이미지 업로드 -->
<div style="border-bottom: 2px solid #e5e7eb; padding-bottom: 20px; margin-bottom: 20px;">
<h3 style="font-size: 16px; font-weight: 600; margin-bottom: 12px;">Step 1. 공장 레이아웃 이미지 업로드</h3>
<div class="wp-form-group">
<label class="wp-form-label">현재 이미지</label>
<div id="currentLayoutImage" style="background: #f9fafb; border: 2px dashed #cbd5e1; padding: 20px; border-radius: 8px; text-align: center;">
<span style="color: #94a3b8;">업로드된 이미지가 없습니다</span>
</div>
</div>
<div class="wp-form-group">
<label class="wp-form-label">새 이미지 업로드</label>
<input type="file" id="layoutImageFile" accept="image/*" class="wp-form-control" onchange="previewLayoutImage(event)">
<span class="wp-form-help">JPG, PNG, GIF 형식 지원 (최대 5MB)</span>
</div>
<button type="button" class="wp-btn wp-btn-primary" onclick="uploadLayoutImage()">이미지 업로드</button>
</div>
<!-- Step 2: 작업장 영역 정의 -->
<div>
<h3 style="font-size: 16px; font-weight: 600; margin-bottom: 12px;">Step 2. 작업장 영역 정의</h3>
<p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">
이미지 위에 마우스로 드래그하여 각 작업장의 위치를 지정하세요
</p>
<!-- 영역 그리기 캔버스 -->
<div style="position: relative; display: inline-block; margin-bottom: 20px;" id="canvasContainer">
<canvas id="regionCanvas" style="border: 2px solid #cbd5e1; cursor: crosshair; max-width: 100%;"></canvas>
</div>
<!-- 작업장 선택 및 영역 목록 -->
<div class="wp-form-group">
<label class="wp-form-label">작업장 선택</label>
<select id="regionWorkplaceSelect" class="wp-form-control" style="margin-bottom: 12px;">
<option value="">작업장을 선택하세요</option>
</select>
<div style="display: flex; gap: 8px;">
<button type="button" class="wp-btn wp-btn-outline" onclick="clearCurrentRegion()">현재 영역 지우기</button>
<button type="button" class="wp-btn wp-btn-primary" onclick="saveRegion()">선택 영역 저장</button>
</div>
</div>
<!-- 정의된 영역 목록 -->
<div class="wp-form-group">
<label class="wp-form-label">정의된 영역 목록</label>
<div id="regionList" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; min-height: 100px;">
<!-- 영역 목록이 여기에 표시됩니다 -->
</div>
</div>
</div>
</div>
<div class="wp-modal-footer">
<button type="button" class="wp-btn wp-btn-outline" onclick="closeLayoutMapModal()">닫기</button>
</div>
</div>
</div>
<script type="module" src="/js/workplace-management.js?v=8"></script>
<script type="module" src="/js/workplace-layout-map.js?v=1"></script>
</body>
</html>