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>
485 lines
19 KiB
HTML
485 lines
19 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">
|
|
<style>
|
|
.tabs {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
}
|
|
.tab {
|
|
padding: 0.75rem 1.5rem;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
color: #6b7280;
|
|
transition: all 0.2s;
|
|
}
|
|
.tab:hover {
|
|
color: #111827;
|
|
}
|
|
.tab.active {
|
|
color: #3b82f6;
|
|
border-bottom-color: #3b82f6;
|
|
}
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
/* 모바일 최적화 */
|
|
@media (max-width: 768px) {
|
|
.tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
|
|
.tabs::-webkit-scrollbar { display: none; }
|
|
.tab { flex-shrink: 0; padding: 0.625rem 1rem; white-space: nowrap; font-size: 0.875rem; }
|
|
.page-actions { flex-direction: column; width: 100%; gap: 0.5rem; }
|
|
.page-actions input[type="date"] { width: 100%; }
|
|
.page-actions .btn { width: 100%; text-align: center; }
|
|
}
|
|
</style>
|
|
</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">
|
|
<div class="page-title-section">
|
|
<h1 class="page-title">휴가 관리</h1>
|
|
<p class="page-description">휴가 신청을 승인하고 작업자 휴가 정보를 관리합니다</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 탭 메뉴 -->
|
|
<div class="tabs">
|
|
<button class="tab active" onclick="switchTab('approval')">승인 대기 목록</button>
|
|
<button class="tab" onclick="switchTab('input')">직접 입력</button>
|
|
<button class="tab" onclick="switchTab('all')">전체 신청 내역</button>
|
|
</div>
|
|
|
|
<!-- 승인 대기 목록 탭 -->
|
|
<div id="approvalTab" class="tab-content active">
|
|
<div class="content-section">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">승인 대기 목록</h2>
|
|
<p class="text-muted">대기 중인 휴가 신청을 승인하거나 거부할 수 있습니다</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="pendingRequestsList" class="data-table-container">
|
|
<!-- 승인 대기 목록이 여기에 동적으로 렌더링됩니다 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 직접 입력 탭 -->
|
|
<div id="inputTab" class="tab-content">
|
|
<div class="content-section">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">휴가 정보 직접 입력</h2>
|
|
<p class="text-muted">승인 절차 없이 휴가 정보를 직접 입력합니다. 입력 즉시 승인 상태로 저장됩니다.</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="vacationInputForm" onsubmit="submitVacationInput(event)">
|
|
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
|
|
<div class="form-group">
|
|
<label for="inputWorker">작업자 *</label>
|
|
<select id="inputWorker" class="form-control" required onchange="updateVacationBalance()">
|
|
<option value="">선택하세요</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="inputVacationType">휴가 유형 *</label>
|
|
<select id="inputVacationType" class="form-control" required>
|
|
<option value="">선택하세요</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="inputStartDate">시작일 *</label>
|
|
<input type="date" id="inputStartDate" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="inputEndDate">종료일 *</label>
|
|
<input type="date" id="inputEndDate" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="inputDaysUsed">사용 일수 *</label>
|
|
<input type="number" id="inputDaysUsed" class="form-control" min="0.5" step="0.5" value="1.0" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>작업자 휴가 잔여</label>
|
|
<div id="workerVacationBalance" style="padding: 0.75rem; background-color: #f9fafb; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
|
|
<span class="text-muted">작업자를 선택하세요</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" style="grid-column: 1 / -1;">
|
|
<label for="inputReason">사유</label>
|
|
<textarea id="inputReason" class="form-control" rows="3" placeholder="휴가 사유를 입력하세요 (선택)"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 2rem;">
|
|
<button type="submit" class="btn btn-primary" style="padding: 1rem 3rem;">
|
|
즉시 입력 (자동 승인)
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 최근 입력 내역 -->
|
|
<div class="card" style="margin-top: 2rem;">
|
|
<div class="card-header">
|
|
<h2 class="card-title">최근 입력 내역</h2>
|
|
<div class="page-actions">
|
|
<button class="btn btn-secondary" onclick="loadRecentInputs()">
|
|
새로고침
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="recentInputsList" class="data-table-container">
|
|
<!-- 최근 입력 내역이 여기에 동적으로 렌더링됩니다 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 전체 신청 내역 탭 -->
|
|
<div id="allTab" class="tab-content">
|
|
<div class="content-section">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">전체 신청 내역</h2>
|
|
<div class="page-actions">
|
|
<input type="date" id="filterStartDate" class="form-control" style="width: auto;">
|
|
<span style="margin: 0 0.5rem;">~</span>
|
|
<input type="date" id="filterEndDate" class="form-control" style="width: auto;">
|
|
<button class="btn btn-secondary" onclick="filterAllRequests()">
|
|
조회
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="resetFilter()">
|
|
전체
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="allRequestsList" class="data-table-container">
|
|
<!-- 전체 신청 내역이 여기에 동적으로 렌더링됩니다 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</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 src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script src="/js/vacation-common.js"></script>
|
|
<script>
|
|
// axios 기본 설정
|
|
(function() {
|
|
const checkApiConfig = setInterval(() => {
|
|
if (window.API_BASE_URL) {
|
|
clearInterval(checkApiConfig);
|
|
axios.defaults.baseURL = window.API_BASE_URL;
|
|
const token = localStorage.getItem('sso_token');
|
|
if (token) {
|
|
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
|
}
|
|
|
|
axios.interceptors.request.use(
|
|
config => {
|
|
const token = localStorage.getItem('sso_token');
|
|
if (token) {
|
|
config.headers.Authorization = `Bearer ${token}`;
|
|
}
|
|
return config;
|
|
},
|
|
error => Promise.reject(error)
|
|
);
|
|
|
|
axios.interceptors.response.use(
|
|
response => response,
|
|
error => {
|
|
if (error.response?.status === 401) {
|
|
alert('세션이 만료되었습니다. 다시 로그인해주세요.');
|
|
window.location.href = '/pages/login.html';
|
|
}
|
|
return Promise.reject(error);
|
|
}
|
|
);
|
|
}
|
|
}, 50);
|
|
})();
|
|
</script>
|
|
<script>
|
|
let allRequestsData = [];
|
|
|
|
// 페이지 로드 시 초기화
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
await waitForAxiosConfig();
|
|
initializePage();
|
|
});
|
|
|
|
async function initializePage() {
|
|
try {
|
|
const currentUser = getCurrentUser();
|
|
|
|
// 관리자 권한 체크
|
|
if (currentUser.access_level !== 'system' && currentUser.access_level !== 'admin') {
|
|
alert('관리자만 접근할 수 있습니다.');
|
|
window.location.href = '/pages/attendance/vacation-request.html';
|
|
return;
|
|
}
|
|
|
|
await loadWorkers();
|
|
await loadVacationTypes();
|
|
await loadPendingRequests();
|
|
await loadAllRequests();
|
|
|
|
// 휴가 업데이트 이벤트 리스너
|
|
window.addEventListener('vacation-updated', () => {
|
|
loadPendingRequests();
|
|
loadAllRequests();
|
|
});
|
|
|
|
// 날짜 필터 초기화 (최근 3개월)
|
|
const today = new Date();
|
|
const threeMonthsAgo = new Date();
|
|
threeMonthsAgo.setMonth(today.getMonth() - 3);
|
|
|
|
document.getElementById('filterStartDate').value = threeMonthsAgo.toISOString().split('T')[0];
|
|
document.getElementById('filterEndDate').value = today.toISOString().split('T')[0];
|
|
} catch (error) {
|
|
console.error('초기화 오류:', error);
|
|
alert('페이지 초기화 중 오류가 발생했습니다.');
|
|
}
|
|
}
|
|
|
|
function switchTab(tabName) {
|
|
// 모든 탭과 컨텐츠 비활성화
|
|
document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
|
|
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
|
|
|
|
// 선택한 탭 활성화
|
|
if (tabName === 'approval') {
|
|
document.querySelector('.tab:nth-child(1)').classList.add('active');
|
|
document.getElementById('approvalTab').classList.add('active');
|
|
} else if (tabName === 'input') {
|
|
document.querySelector('.tab:nth-child(2)').classList.add('active');
|
|
document.getElementById('inputTab').classList.add('active');
|
|
} else if (tabName === 'all') {
|
|
document.querySelector('.tab:nth-child(3)').classList.add('active');
|
|
document.getElementById('allTab').classList.add('active');
|
|
}
|
|
}
|
|
|
|
async function loadPendingRequests() {
|
|
try {
|
|
const response = await axios.get('/vacation-requests/pending');
|
|
if (response.data.success) {
|
|
renderVacationRequests(response.data.data, 'pendingRequestsList', true, 'approval');
|
|
}
|
|
} catch (error) {
|
|
console.error('승인 대기 목록 로드 오류:', error);
|
|
document.getElementById('pendingRequestsList').innerHTML = `
|
|
<div class="empty-state">
|
|
<p>승인 대기 중인 신청이 없습니다.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
async function loadAllRequests() {
|
|
try {
|
|
const response = await axios.get('/vacation-requests');
|
|
if (response.data.success) {
|
|
allRequestsData = response.data.data;
|
|
renderVacationRequests(allRequestsData, 'allRequestsList', false);
|
|
}
|
|
} catch (error) {
|
|
console.error('전체 신청 내역 로드 오류:', error);
|
|
document.getElementById('allRequestsList').innerHTML = `
|
|
<div class="empty-state">
|
|
<p>신청 내역이 없습니다.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
async function updateVacationBalance() {
|
|
const workerId = document.getElementById('inputWorker').value;
|
|
const balanceDiv = document.getElementById('workerVacationBalance');
|
|
|
|
if (!workerId) {
|
|
balanceDiv.innerHTML = '<span class="text-muted">작업자를 선택하세요</span>';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await axios.get(`/attendance/vacation-balance/${workerId}`);
|
|
if (response.data.success) {
|
|
const balance = response.data.data;
|
|
|
|
if (!balance || Object.keys(balance).length === 0) {
|
|
balanceDiv.innerHTML = '<span class="text-muted">휴가 잔여 정보가 없습니다</span>';
|
|
return;
|
|
}
|
|
|
|
const balanceHTML = Object.keys(balance).map(key => {
|
|
const info = balance[key];
|
|
return `
|
|
<div style="display: inline-block; margin-right: 1rem;">
|
|
<span style="color: #6b7280; font-size: 0.875rem;">${key}:</span>
|
|
<strong style="color: #111827; font-size: 1rem; margin-left: 0.25rem;">${info.remaining || 0}일</strong>
|
|
<span style="color: #9ca3af; font-size: 0.75rem; margin-left: 0.25rem;">(전체: ${info.total || 0}일)</span>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
balanceDiv.innerHTML = balanceHTML;
|
|
}
|
|
} catch (error) {
|
|
console.error('휴가 잔여 조회 오류:', error);
|
|
balanceDiv.innerHTML = '<span class="text-muted" style="color: #dc2626;">조회 실패</span>';
|
|
}
|
|
}
|
|
|
|
async function submitVacationInput(event) {
|
|
event.preventDefault();
|
|
|
|
const data = {
|
|
user_id: parseInt(document.getElementById('inputWorker').value),
|
|
vacation_type_id: parseInt(document.getElementById('inputVacationType').value),
|
|
start_date: document.getElementById('inputStartDate').value,
|
|
end_date: document.getElementById('inputEndDate').value,
|
|
days_used: parseFloat(document.getElementById('inputDaysUsed').value),
|
|
reason: document.getElementById('inputReason').value || null
|
|
};
|
|
|
|
if (!confirm(`${document.getElementById('inputWorker').selectedOptions[0].text}의 휴가를 즉시 입력하시겠습니까?\n\n입력 즉시 승인 상태로 저장됩니다.`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// 휴가 신청 생성
|
|
const response = await axios.post('/vacation-requests', data);
|
|
if (response.data.success) {
|
|
const requestId = response.data.data.request_id;
|
|
|
|
// 즉시 승인 처리
|
|
try {
|
|
const approveResponse = await axios.patch(`/vacation-requests/${requestId}/approve`);
|
|
if (approveResponse.data.success) {
|
|
alert('휴가 정보가 입력되고 자동 승인되었습니다.');
|
|
document.getElementById('vacationInputForm').reset();
|
|
document.getElementById('workerVacationBalance').innerHTML = '<span class="text-muted">작업자를 선택하세요</span>';
|
|
window.dispatchEvent(new Event('vacation-updated'));
|
|
loadRecentInputs();
|
|
}
|
|
} catch (approveError) {
|
|
console.error('자동 승인 오류:', approveError);
|
|
alert('휴가 정보는 입력되었으나 자동 승인에 실패했습니다. 승인 관리 탭에서 수동으로 승인해주세요.');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('휴가 입력 오류:', error);
|
|
alert(error.response?.data?.message || '휴가 입력 중 오류가 발생했습니다.');
|
|
}
|
|
}
|
|
|
|
async function loadRecentInputs() {
|
|
try {
|
|
const response = await axios.get('/vacation-requests');
|
|
if (response.data.success) {
|
|
// 최근 30일 이내 승인된 항목만 표시
|
|
const thirtyDaysAgo = new Date();
|
|
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
|
|
const thirtyDaysAgoStr = thirtyDaysAgo.toISOString().split('T')[0];
|
|
|
|
const recentApproved = response.data.data.filter(req =>
|
|
req.status === 'approved' &&
|
|
req.created_at >= thirtyDaysAgoStr
|
|
).slice(0, 20); // 최근 20개만
|
|
|
|
renderVacationRequests(recentApproved, 'recentInputsList', false);
|
|
}
|
|
} catch (error) {
|
|
console.error('최근 입력 내역 로드 오류:', error);
|
|
document.getElementById('recentInputsList').innerHTML = `
|
|
<div class="empty-state">
|
|
<p>최근 입력 내역이 없습니다.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
function filterAllRequests() {
|
|
const startDate = document.getElementById('filterStartDate').value;
|
|
const endDate = document.getElementById('filterEndDate').value;
|
|
|
|
if (!startDate || !endDate) {
|
|
alert('시작일과 종료일을 모두 선택해주세요.');
|
|
return;
|
|
}
|
|
|
|
const filtered = allRequestsData.filter(req => {
|
|
return req.start_date >= startDate && req.start_date <= endDate;
|
|
});
|
|
|
|
renderVacationRequests(filtered, 'allRequestsList', false);
|
|
}
|
|
|
|
function resetFilter() {
|
|
renderVacationRequests(allRequestsData, 'allRequestsList', false);
|
|
}
|
|
</script>
|
|
<script>initAuth();</script>
|
|
</body>
|
|
</html>
|