b6485e3140
- 실시간 작업장 현황을 지도로 시각화 - 작업장 관리 페이지에서 정의한 구역 정보 활용 - TBM 작업자 및 방문자 현황 표시 주요 변경사항: - dashboard.html: 작업장 현황 섹션 추가 (기존 작업 현황 테이블 제거) - workplace-status.js: 지도 렌더링 및 데이터 통합 로직 구현 - modern-dashboard.js: 삭제된 DOM 요소 조건부 체크 추가 시각화 방식: - 인원 없음: 회색 테두리 + 작업장 이름 - 내부 작업자: 파란색 영역 + 인원 수 - 외부 방문자: 보라색 영역 + 인원 수 - 둘 다: 초록색 영역 + 총 인원 수 기술 구현: - Canvas API 기반 사각형 영역 렌더링 - map-regions API를 통한 데이터 일관성 보장 - 클릭 이벤트로 상세 정보 모달 표시 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
355 lines
13 KiB
HTML
355 lines
13 KiB
HTML
<!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/vacation-allocation.css">
|
||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||
|
||
<!-- 스크립트 -->
|
||
<script type="module" src="/js/api-config.js"></script>
|
||
<script type="module" src="/js/auth-check.js" defer></script>
|
||
<script type="module" src="/js/load-navbar.js"></script>
|
||
<script type="module" src="/js/vacation-allocation.js" defer></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 메인 컨테이너 -->
|
||
<div class="page-container">
|
||
|
||
<!-- 네비게이션 헤더 -->
|
||
<div id="navbar-container"></div>
|
||
|
||
<!-- 메인 콘텐츠 -->
|
||
<main class="main-content">
|
||
<div class="content-wrapper">
|
||
|
||
<!-- 페이지 헤더 -->
|
||
<div class="page-header">
|
||
<h1 class="page-title">➕ 휴가 발생 입력</h1>
|
||
<p class="page-description">작업자별 휴가를 입력하고 특별 휴가를 관리합니다</p>
|
||
</div>
|
||
|
||
<!-- 탭 네비게이션 -->
|
||
<div class="tab-navigation">
|
||
<button class="tab-button active" data-tab="individual">개별 입력</button>
|
||
<button class="tab-button" data-tab="bulk">일괄 입력</button>
|
||
<button class="tab-button" data-tab="special">특별 휴가 관리</button>
|
||
</div>
|
||
|
||
<!-- 탭 1: 개별 입력 -->
|
||
<section id="tab-individual" class="tab-content active">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2 class="card-title">개별 작업자 휴가 입력</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
|
||
<!-- 입력 폼 -->
|
||
<div class="form-section">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="individualWorker">작업자 선택 <span class="required">*</span></label>
|
||
<select id="individualWorker" class="form-select" required>
|
||
<option value="">선택하세요</option>
|
||
<!-- JavaScript로 동적 생성 -->
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="individualYear">연도 <span class="required">*</span></label>
|
||
<select id="individualYear" class="form-select" required>
|
||
<!-- JavaScript로 동적 생성 -->
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="individualVacationType">휴가 유형 <span class="required">*</span></label>
|
||
<select id="individualVacationType" class="form-select" required>
|
||
<option value="">선택하세요</option>
|
||
<!-- JavaScript로 동적 생성 -->
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 자동 계산 섹션 -->
|
||
<div class="auto-calculate-section">
|
||
<div class="section-header">
|
||
<h3>자동 계산 (연차만 해당)</h3>
|
||
<button id="autoCalculateBtn" class="btn btn-secondary btn-sm">
|
||
🔄 입사일 기준 자동 계산
|
||
</button>
|
||
</div>
|
||
<div id="autoCalculateResult" class="alert alert-info" style="display: none;">
|
||
<!-- 계산 결과 표시 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 수동 입력 -->
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="individualTotalDays">총 부여 일수 <span class="required">*</span></label>
|
||
<input type="number" id="individualTotalDays" class="form-input" min="0" step="0.5" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="individualUsedDays">사용 일수</label>
|
||
<input type="number" id="individualUsedDays" class="form-input" min="0" step="0.5" value="0">
|
||
</div>
|
||
|
||
<div class="form-group full-width">
|
||
<label for="individualNotes">비고</label>
|
||
<input type="text" id="individualNotes" class="form-input" placeholder="예: 2026년 연차">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button id="individualSubmitBtn" class="btn btn-primary">
|
||
저장
|
||
</button>
|
||
<button id="individualResetBtn" class="btn btn-secondary">
|
||
초기화
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 기존 데이터 테이블 -->
|
||
<div class="existing-data-section">
|
||
<h3>기존 입력 내역</h3>
|
||
<div class="table-responsive">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>작업자</th>
|
||
<th>연도</th>
|
||
<th>휴가 유형</th>
|
||
<th>총 일수</th>
|
||
<th>사용 일수</th>
|
||
<th>잔여 일수</th>
|
||
<th>비고</th>
|
||
<th>작업</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="individualTableBody">
|
||
<tr>
|
||
<td colspan="8" class="loading-state">
|
||
<p>작업자를 선택하세요</p>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 탭 2: 일괄 입력 -->
|
||
<section id="tab-bulk" class="tab-content">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2 class="card-title">근속년수별 연차 일괄 생성</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
|
||
<div class="alert alert-warning">
|
||
<strong>주의:</strong> 이 기능은 연차(ANNUAL) 휴가 유형만 생성합니다. 각 작업자의 입사일을 기준으로 근속년수를 계산하여 자동으로 연차를 부여합니다.
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="bulkYear">대상 연도 <span class="required">*</span></label>
|
||
<select id="bulkYear" class="form-select" required>
|
||
<!-- JavaScript로 동적 생성 -->
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="bulkEmploymentStatus">재직 상태</label>
|
||
<select id="bulkEmploymentStatus" class="form-select">
|
||
<option value="employed">재직 중만</option>
|
||
<option value="all">전체</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button id="bulkPreviewBtn" class="btn btn-secondary">
|
||
미리보기
|
||
</button>
|
||
<button id="bulkSubmitBtn" class="btn btn-primary" disabled>
|
||
일괄 생성
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 미리보기 테이블 -->
|
||
<div id="bulkPreviewSection" class="preview-section" style="display: none;">
|
||
<h3>생성 예정 내역</h3>
|
||
<div class="table-responsive">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>작업자</th>
|
||
<th>입사일</th>
|
||
<th>근속년수</th>
|
||
<th>부여 연차</th>
|
||
<th>계산 근거</th>
|
||
<th>상태</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="bulkPreviewTableBody">
|
||
<!-- JavaScript로 동적 생성 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 탭 3: 특별 휴가 관리 -->
|
||
<section id="tab-special" class="tab-content">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2 class="card-title">특별 휴가 유형 관리</h2>
|
||
<button id="addSpecialTypeBtn" class="btn btn-primary btn-sm">
|
||
+ 새 휴가 유형 추가
|
||
</button>
|
||
</div>
|
||
<div class="card-body">
|
||
|
||
<div class="table-responsive">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>유형명</th>
|
||
<th>코드</th>
|
||
<th>우선순위</th>
|
||
<th>특별 휴가</th>
|
||
<th>시스템 유형</th>
|
||
<th>설명</th>
|
||
<th>작업</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="specialTypesTableBody">
|
||
<tr>
|
||
<td colspan="7" class="loading-state">
|
||
<div class="spinner"></div>
|
||
<p>데이터를 불러오는 중...</p>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
</div>
|
||
|
||
<!-- 알림 토스트 -->
|
||
<div class="toast-container" id="toastContainer"></div>
|
||
|
||
<!-- 모달: 휴가 유형 추가/수정 -->
|
||
<div id="vacationTypeModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="modalTitle">휴가 유형 추가</h3>
|
||
<button class="modal-close">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="vacationTypeForm">
|
||
<input type="hidden" id="modalTypeId">
|
||
|
||
<div class="form-group">
|
||
<label for="modalTypeName">유형명 <span class="required">*</span></label>
|
||
<input type="text" id="modalTypeName" class="form-input" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="modalTypeCode">코드 <span class="required">*</span></label>
|
||
<input type="text" id="modalTypeCode" class="form-input" required>
|
||
<small>예: ANNUAL, SICK, MATERNITY (영문 대문자)</small>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="modalPriority">우선순위 <span class="required">*</span></label>
|
||
<input type="number" id="modalPriority" class="form-input" min="1" required>
|
||
<small>낮을수록 먼저 차감</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="modalIsSpecial">
|
||
특별 휴가
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="modalDescription">설명</label>
|
||
<textarea id="modalDescription" class="form-input" rows="3"></textarea>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">저장</button>
|
||
<button type="button" class="btn btn-secondary modal-close">취소</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 모달: 휴가 수정 -->
|
||
<div id="editBalanceModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>휴가 수정</h3>
|
||
<button class="modal-close">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="editBalanceForm">
|
||
<input type="hidden" id="editBalanceId">
|
||
|
||
<div class="form-group">
|
||
<label for="editTotalDays">총 일수 <span class="required">*</span></label>
|
||
<input type="number" id="editTotalDays" class="form-input" min="0" step="0.5" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="editUsedDays">사용 일수 <span class="required">*</span></label>
|
||
<input type="number" id="editUsedDays" class="form-input" min="0" step="0.5" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="editNotes">비고</label>
|
||
<input type="text" id="editNotes" class="form-input">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">저장</button>
|
||
<button type="button" class="btn btn-secondary modal-close">취소</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
|
||
</html>
|