0de9d5bb48
카카오톡 인앱 WebView는 서브도메인 간 쿠키를 공유하지 않아 tkds에서 로그인 후 tkfb로 리다이렉트 시 인증이 풀리는 문제. - sso-relay.js: URL hash의 _sso= 토큰을 로컬 쿠키+localStorage로 설정 - gateway dashboard: 로그인 후 redirect URL에 #_sso=<token> 추가 - 전 서비스 HTML: core JS 직전에 sso-relay.js 로드 (81개 파일) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
364 lines
14 KiB
HTML
364 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>휴가 발생 입력 - TK 공장관리</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026040103">
|
|
<link rel="stylesheet" href="/css/vacation-allocation.css">
|
|
</head>
|
|
|
|
<body class="bg-gray-50">
|
|
<header class="bg-orange-700 text-white sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-14">
|
|
<div class="flex items-center gap-3">
|
|
<button id="mobileMenuBtn" class="lg:hidden text-orange-200 hover:text-white"><i class="fas fa-bars text-xl"></i></button>
|
|
<i class="fas fa-industry text-xl text-orange-200"></i>
|
|
<h1 class="text-lg font-semibold">TK 공장관리</h1>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span id="headerUserName" class="text-sm hidden sm:block">-</span>
|
|
<div id="headerUserAvatar" class="w-8 h-8 bg-orange-600 rounded-full flex items-center justify-center text-sm font-bold">-</div>
|
|
<button onclick="doLogout()" class="text-orange-200 hover:text-white" title="로그아웃"><i class="fas fa-sign-out-alt"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div id="mobileOverlay" class="hidden fixed inset-0 bg-black/50 z-30 lg:hidden"></div>
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 fade-in">
|
|
<div class="flex gap-6">
|
|
<nav id="sideNav" class="hidden lg:flex flex-col gap-1 w-52 flex-shrink-0 pt-2 fixed lg:static z-40 bg-white lg:bg-transparent p-4 lg:p-0 rounded-lg lg:rounded-none shadow-lg lg:shadow-none top-14 left-0 bottom-0 overflow-y-auto"></nav>
|
|
<div class="flex-1 min-w-0">
|
|
|
|
<!-- 페이지 헤더 -->
|
|
<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>
|
|
</div>
|
|
</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>
|
|
|
|
<script src="/js/sso-relay.js?v=20260401"></script>
|
|
<script src="/static/js/tkfb-core.js?v=2026040105"></script>
|
|
<script src="/js/api-base.js?v=2026031401"></script>
|
|
<script type="module" src="/js/vacation-allocation.js" defer></script>
|
|
<script>initAuth();</script>
|
|
</body>
|
|
|
|
</html>
|