4b158de1eb
- 모든 페이지에서 이모지 제거 (CODING_GUIDE 준수) - admin/ (9개), safety/ (7개), work/ (4개) - attendance/ (8개), profile/ (2개) - 사이드바 CSS에 누락된 컨테이너 클래스 추가 - work-report-container, analysis-container, dashboard-main - 사이드바 토글 시 메인 콘텐츠 정상 반응하도록 수정 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
356 lines
13 KiB
HTML
356 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/load-sidebar.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>
|