74d3a78aa3
- 페이지 폴더 재구성: safety/, attendance/ 폴더 신규 생성 - work/ → safety/: 이슈 신고, 출입 신청 관련 페이지 이동 - common/ → attendance/: 근태/휴가 관련 페이지 이동 - admin/ 정리: safety-* 파일들을 safety/로 이동 - 사이드바 네비게이션 메뉴 구현 - 카테고리별 메뉴: 작업관리, 안전관리, 근태관리, 시스템관리 - 접기/펼치기 기능 및 상태 저장 - 관리자 전용 메뉴 자동 표시/숨김 - 날씨 API 연동 (기상청 단기예보) - TBM 및 navbar에 현재 날씨 표시 - weatherService.js 추가 - 안전 체크리스트 확장 - 기본/날씨별/작업별 체크 유형 추가 - checklist-manage.html 페이지 추가 - 이슈 신고 시스템 구현 - workIssueController, workIssueModel, workIssueRoutes 추가 - DB 마이그레이션 파일 추가 (실행 대기) Co-Authored-By: Claude Opus 4.5 <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>
|