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>
228 lines
11 KiB
HTML
228 lines
11 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/tksupport.css?v=2026032301">
|
|
</head>
|
|
<body>
|
|
<header class="bg-purple-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" onclick="toggleMobileMenu()" class="lg:hidden text-purple-200 hover:text-white">
|
|
<i class="fas fa-bars text-xl"></i>
|
|
</button>
|
|
<i class="fas fa-building text-xl text-purple-200"></i>
|
|
<h1 class="text-lg font-semibold">TK 행정지원</h1>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div id="headerUserName" class="text-sm font-medium hidden sm:block">-</div>
|
|
<div id="headerUserAvatar" class="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-sm font-semibold">-</div>
|
|
<button onclick="doLogout()" class="text-purple-200 hover:text-white" title="로그아웃"><i class="fas fa-sign-out-alt"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<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-48 flex-shrink-0 pt-2"></nav>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div class="bg-white rounded-xl shadow-sm p-5 mb-5">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-base font-semibold text-gray-800"><i class="fas fa-calendar-day text-purple-500 mr-2"></i>전사 휴가 관리</h2>
|
|
<div class="flex items-center gap-3">
|
|
<select id="yearSelect" class="input-field px-3 py-2 rounded-lg text-sm" onchange="loadHolidays()">
|
|
</select>
|
|
<button onclick="openAddModal()" class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700">
|
|
<i class="fas fa-plus mr-1"></i>추가
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>날짜</th>
|
|
<th>휴가명</th>
|
|
<th>유형</th>
|
|
<th class="hide-mobile">설명</th>
|
|
<th>상태</th>
|
|
<th class="text-right">관리</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="holidaysBody">
|
|
<tr><td colspan="6" class="text-center text-gray-400 py-8">로딩 중...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 추가 모달 -->
|
|
<div id="addModal" class="hidden modal-overlay" onclick="if(event.target===this)closeAddModal()">
|
|
<div class="modal-content p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-semibold">전사 휴가 등록</h3>
|
|
<button onclick="closeAddModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<form id="addForm">
|
|
<div class="space-y-3">
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">날짜 <span class="text-red-400">*</span></label>
|
|
<input type="date" id="addDate" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">휴가명 <span class="text-red-400">*</span></label>
|
|
<input type="text" id="addName" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="예: 창립기념일" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">유형 <span class="text-red-400">*</span></label>
|
|
<div class="flex gap-4 mt-1">
|
|
<label class="flex items-center gap-2 text-sm">
|
|
<input type="radio" name="addType" value="PAID" checked class="text-purple-600"> 유급휴가
|
|
</label>
|
|
<label class="flex items-center gap-2 text-sm">
|
|
<input type="radio" name="addType" value="ANNUAL_DEDUCT" class="text-purple-600"> 연차차감
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">설명</label>
|
|
<input type="text" id="addDesc" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="설명 (선택)">
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end mt-4 gap-2">
|
|
<button type="button" onclick="closeAddModal()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
|
|
<button type="submit" class="px-6 py-2 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700">등록</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/sso-relay.js?v=20260401"></script>
|
|
<script src="/static/js/tksupport-core.js?v=2026040101"></script>
|
|
<script>
|
|
async function initPage() {
|
|
if (!initAuth()) return;
|
|
// 권한은 API requirePage에서 체크
|
|
|
|
// 연도 셀렉트
|
|
const sel = document.getElementById('yearSelect');
|
|
const thisYear = new Date().getFullYear();
|
|
for (let y = thisYear + 1; y >= thisYear - 2; y--) {
|
|
sel.innerHTML += `<option value="${y}" ${y === thisYear ? 'selected' : ''}>${y}년</option>`;
|
|
}
|
|
|
|
loadHolidays();
|
|
|
|
document.getElementById('addForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const data = {
|
|
holiday_date: document.getElementById('addDate').value,
|
|
holiday_name: document.getElementById('addName').value,
|
|
holiday_type: document.querySelector('input[name="addType"]:checked').value,
|
|
description: document.getElementById('addDesc').value
|
|
};
|
|
try {
|
|
await api('/vacation/company/holidays', { method: 'POST', body: JSON.stringify(data) });
|
|
showToast('전사 휴가가 등록되었습니다');
|
|
closeAddModal();
|
|
loadHolidays();
|
|
} catch (err) {
|
|
showToast(err.message, 'error');
|
|
}
|
|
});
|
|
}
|
|
|
|
async function loadHolidays() {
|
|
const year = document.getElementById('yearSelect').value;
|
|
try {
|
|
const res = await api('/vacation/company/holidays?year=' + year);
|
|
renderHolidays(res.data);
|
|
} catch (err) {
|
|
showToast(err.message, 'error');
|
|
}
|
|
}
|
|
|
|
function renderHolidays(holidays) {
|
|
const tbody = document.getElementById('holidaysBody');
|
|
if (holidays.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="6" class="empty-state"><i class="fas fa-calendar-times block"></i>등록된 전사 휴가가 없습니다</td></tr>';
|
|
return;
|
|
}
|
|
tbody.innerHTML = holidays.map(h => {
|
|
const typeBadge = h.holiday_type === 'PAID'
|
|
? '<span class="badge badge-green">유급</span>'
|
|
: '<span class="badge badge-amber">연차차감</span>';
|
|
const statusText = h.holiday_type === 'ANNUAL_DEDUCT'
|
|
? (h.deduction_applied_at ? '<span class="badge badge-blue">차감완료</span>' : '<span class="badge badge-gray">미차감</span>')
|
|
: '<span class="badge badge-green">해당없음</span>';
|
|
const actions = [];
|
|
if (h.holiday_type === 'ANNUAL_DEDUCT' && !h.deduction_applied_at) {
|
|
actions.push(`<button onclick="applyDeduction(${h.id})" class="text-amber-600 hover:text-amber-800 text-sm mr-1" title="차감 실행"><i class="fas fa-calculator"></i></button>`);
|
|
}
|
|
if (!h.deduction_applied_at) {
|
|
actions.push(`<button onclick="deleteHoliday(${h.id})" class="text-red-500 hover:text-red-700 text-sm" title="삭제"><i class="fas fa-trash"></i></button>`);
|
|
}
|
|
return `<tr>
|
|
<td class="whitespace-nowrap">${formatDate(h.holiday_date)}</td>
|
|
<td class="font-medium">${escapeHtml(h.holiday_name)}</td>
|
|
<td>${typeBadge}</td>
|
|
<td class="hide-mobile text-gray-500 text-sm max-w-[200px] truncate">${escapeHtml(h.description || '-')}</td>
|
|
<td>${statusText}</td>
|
|
<td class="text-right whitespace-nowrap">${actions.join('') || '-'}</td>
|
|
</tr>`;
|
|
}).join('');
|
|
}
|
|
|
|
async function applyDeduction(id) {
|
|
if (!confirm('이 전사 휴가에 대해 전 직원 연차 차감을 실행하시겠습니까?\n\n실행 후 되돌릴 수 없습니다.')) return;
|
|
try {
|
|
const res = await api('/vacation/company/holidays/' + id + '/apply-deduction', { method: 'POST' });
|
|
showToast(res.message);
|
|
if (res.warning) {
|
|
setTimeout(() => showToast(res.warning, 'error'), 1500);
|
|
}
|
|
loadHolidays();
|
|
} catch (err) {
|
|
showToast(err.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function deleteHoliday(id) {
|
|
if (!confirm('이 전사 휴가를 삭제하시겠습니까?')) return;
|
|
try {
|
|
await api('/vacation/company/holidays/' + id, { method: 'DELETE' });
|
|
showToast('전사 휴가가 삭제되었습니다');
|
|
loadHolidays();
|
|
} catch (err) {
|
|
showToast(err.message, 'error');
|
|
}
|
|
}
|
|
|
|
function openAddModal() {
|
|
document.getElementById('addDate').value = '';
|
|
document.getElementById('addName').value = '';
|
|
document.getElementById('addDesc').value = '';
|
|
document.querySelector('input[name="addType"][value="PAID"]').checked = true;
|
|
document.getElementById('addModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeAddModal() {
|
|
document.getElementById('addModal').classList.add('hidden');
|
|
}
|
|
|
|
initPage();
|
|
</script>
|
|
</body>
|
|
</html>
|