hyungi/tk-factory-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tksupport): 전사 행정지원 서비스 신규 구축 (Phase 1 - 휴가신청)

Browse Source 
sso_users 기반 전사 휴가신청/승인/잔여일 관리 서비스.
기존 tkfb의 workers 종속 휴가 기능을 전사 확장.

- API: Express + MariaDB, SSO JWT 인증, 자동 마이그레이션
- Web: 대시보드, 휴가 신청/현황/승인 페이지 (보라색 테마)
- DB: sp_vacation_requests, sp_vacation_balances 신규 테이블
- Docker: API(30600), Web(30680) 포트 구성

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-03-13 15:39:59 +09:00
parent fa61bdbb30
commit 3011495e6d
18 changed files with 2100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
tksupport/web/static/css/tksupport.css Normal file
View File

@@ -0,0 +1,50 @@
/* tksupport global styles */
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; margin: 0; }
.fade-in { opacity: 0; transition: opacity 0.3s; }
.fade-in.visible { opacity: 1; }
/* Input */
.input-field { border: 1px solid #e2e8f0; transition: border-color 0.15s; outline: none; }
.input-field:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }
/* Toast */
.toast-message { transition: opacity 0.3s; }
/* Nav active */
.nav-link.active { background: rgba(124,58,237,0.15); color: #6d28d9; font-weight: 600; }
/* Stat card */
.stat-card { background: white; border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.stat-card .stat-label { font-size: 0.8rem; color: #6b7280; margin-top: 0.25rem; }
/* Table */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th { background: #f1f5f9; padding: 0.625rem 0.75rem; text-align: left; font-weight: 600; color: #475569; white-space: nowrap; border-bottom: 2px solid #e2e8f0; }
.data-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.data-table tr:hover { background: #f8fafc; }
/* Badge */
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.badge-green { background: #ecfdf5; color: #059669; }
.badge-blue { background: #eff6ff; color: #2563eb; }
.badge-amber { background: #fffbeb; color: #d97706; }
.badge-red { background: #fef2f2; color: #dc2626; }
.badge-gray { background: #f3f4f6; color: #6b7280; }
.badge-purple { background: #f5f3ff; color: #7c3aed; }
/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.modal-content { background: white; border-radius: 0.75rem; max-width: 40rem; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
/* Empty state */
.empty-state { text-align: center; padding: 3rem 1rem; color: #9ca3af; }
.empty-state i { font-size: 2.5rem; margin-bottom: 0.75rem; }
/* Responsive */
@media (max-width: 768px) {
.stat-card .stat-value { font-size: 1.25rem; }
.data-table { font-size: 0.8rem; }
.data-table th, .data-table td { padding: 0.5rem; }
.hide-mobile { display: none; }
}

145
tksupport/web/static/js/tksupport-core.js Normal file
View File

@@ -0,0 +1,145 @@
/* ===== 서비스 워커 해제 (push-sw.js 제외) ===== */
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(function(regs) { regs.forEach(function(r) {
if (!r.active || !r.active.scriptURL.includes('push-sw.js')) { r.unregister(); }
}); });
if (typeof caches !== 'undefined') { caches.keys().then(function(ns) { ns.forEach(function(n) { caches.delete(n); }); }); }
}
/* ===== Config ===== */
const API_BASE = '/api';
/* ===== Token ===== */
function _cookieGet(n) { const m = document.cookie.match(new RegExp('(?:^|; )' + n + '=([^;]*)')); return m ? decodeURIComponent(m[1]) : null; }
function _cookieRemove(n) { let c = n + '=; path=/; max-age=0'; if (location.hostname.includes('technicalkorea.net')) c += '; domain=.technicalkorea.net; secure; samesite=lax'; document.cookie = c; }
function getToken() { return _cookieGet('sso_token') || localStorage.getItem('sso_token'); }
function getLoginUrl() {
const h = location.hostname;
const t = Date.now();
if (h.includes('technicalkorea.net')) return location.protocol + '//tkfb.technicalkorea.net/login?redirect=' + encodeURIComponent(location.href) + '&_t=' + t;
return location.protocol + '//' + h + ':30000/login?redirect=' + encodeURIComponent(location.href) + '&_t=' + t;
}
function decodeToken(t) { try { const b = atob(t.split('.')[1].replace(/-/g,'+').replace(/_/g,'/')); return JSON.parse(new TextDecoder().decode(Uint8Array.from(b, c => c.charCodeAt(0)))); } catch { return null; } }
/* ===== 리다이렉트 루프 방지 ===== */
const _REDIRECT_KEY = '_sso_redirect_ts';
function _safeRedirect() {
const last = parseInt(sessionStorage.getItem(_REDIRECT_KEY) || '0', 10);
if (Date.now() - last < 5000) { console.warn('[tksupport] 리다이렉트 루프 감지'); return; }
sessionStorage.setItem(_REDIRECT_KEY, String(Date.now()));
location.href = getLoginUrl();
}
/* ===== API ===== */
async function api(path, opts = {}) {
const token = getToken();
const headers = { 'Authorization': token ? `Bearer ${token}` : '', ...(opts.headers||{}) };
if (!(opts.body instanceof FormData)) headers['Content-Type'] = 'application/json';
const res = await fetch(API_BASE + path, { ...opts, headers });
if (res.status === 401) { _safeRedirect(); throw new Error('인증 만료'); }
const data = await res.json();
if (!res.ok) throw new Error(data.error || '요청 실패');
return data;
}
/* ===== Toast ===== */
function showToast(msg, type = 'success') {
document.querySelector('.toast-message')?.remove();
const el = document.createElement('div');
el.className = `toast-message fixed bottom-4 right-4 px-4 py-3 rounded-lg text-white z-[10000] shadow-lg ${type==='success'?'bg-purple-500':'bg-red-500'}`;
el.innerHTML = `<i class="fas ${type==='success'?'fa-check-circle':'fa-exclamation-circle'} mr-2"></i>${escapeHtml(msg)}`;
document.body.appendChild(el);
setTimeout(() => { el.classList.add('opacity-0'); setTimeout(() => el.remove(), 300); }, 3000);
}
/* ===== Escape ===== */
function escapeHtml(str) { if (!str) return ''; const d = document.createElement('div'); d.textContent = str; return d.innerHTML; }
/* ===== Helpers ===== */
function formatDate(d) { if (!d) return ''; return String(d).substring(0, 10); }
function formatDateTime(d) { if (!d) return ''; return String(d).substring(0, 16).replace('T', ' '); }
function statusBadge(s) {
const m = {
pending: ['badge-amber', '대기'],
approved: ['badge-green', '승인'],
rejected: ['badge-red', '반려'],
cancelled: ['badge-gray', '취소']
};
const [cls, label] = m[s] || ['badge-gray', s];
return `<span class="badge ${cls}">${label}</span>`;
}
/* ===== Logout ===== */
function doLogout() {
if (!confirm('로그아웃?')) return;
_cookieRemove('sso_token'); _cookieRemove('sso_user'); _cookieRemove('sso_refresh_token');
['sso_token','sso_user','sso_refresh_token','token','user','access_token','currentUser','current_user','userInfo','userPageAccess'].forEach(k => localStorage.removeItem(k));
location.href = getLoginUrl() + '&logout=1';
}
/* ===== Navbar ===== */
function renderNavbar() {
const currentPage = location.pathname.replace(/\//g, '') || 'index.html';
const isAdmin = currentUser && ['admin','system'].includes(currentUser.role);
const links = [
{ href: '/', icon: 'fa-home', label: '대시보드', match: ['index.html', ''] },
{ href: '/vacation-request.html', icon: 'fa-paper-plane', label: '휴가 신청', match: ['vacation-request.html'] },
{ href: '/vacation-status.html', icon: 'fa-calendar-check', label: '내 휴가 현황', match: ['vacation-status.html'] },
{ href: '/vacation-approval.html', icon: 'fa-clipboard-check', label: '휴가 승인', match: ['vacation-approval.html'], admin: true },
];
const nav = document.getElementById('sideNav');
if (!nav) return;
nav.innerHTML = links.filter(l => !l.admin || isAdmin).map(l => {
const active = l.match.some(m => currentPage === m || currentPage.endsWith(m));
return `<a href="${l.href}" class="nav-link flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm transition-colors ${active ? 'active' : 'text-gray-600 hover:bg-gray-100'}">
<i class="fas ${l.icon} w-5 text-center"></i><span>${l.label}</span></a>`;
}).join('');
}
/* ===== State ===== */
let currentUser = null;
/* ===== Init ===== */
function initAuth() {
const cookieToken = _cookieGet('sso_token');
const localToken = localStorage.getItem('sso_token');
if (!cookieToken && localToken) {
['sso_token','sso_user','sso_refresh_token','token','user','access_token',
'currentUser','current_user','userInfo','userPageAccess'].forEach(k => localStorage.removeItem(k));
_safeRedirect();
return false;
}
const token = getToken();
if (!token) { _safeRedirect(); return false; }
const decoded = decodeToken(token);
if (!decoded) { _safeRedirect(); return false; }
sessionStorage.removeItem(_REDIRECT_KEY);
if (!localStorage.getItem('sso_token')) localStorage.setItem('sso_token', token);
currentUser = {
id: decoded.user_id || decoded.id,
username: decoded.username || decoded.sub,
name: decoded.name || decoded.full_name,
role: (decoded.role || decoded.access_level || '').toLowerCase()
};
const dn = currentUser.name || currentUser.username;
const nameEl = document.getElementById('headerUserName');
const avatarEl = document.getElementById('headerUserAvatar');
if (nameEl) nameEl.textContent = dn;
if (avatarEl) avatarEl.textContent = dn.charAt(0).toUpperCase();
renderNavbar();
// 알림 벨 로드
_loadNotificationBell();
setTimeout(() => document.querySelector('.fade-in')?.classList.add('visible'), 50);
return true;
}
/* ===== 알림 벨 ===== */
function _loadNotificationBell() {
const s = document.createElement('script');
s.src = (location.hostname.includes('technicalkorea.net') ? 'https://tkfb.technicalkorea.net' : location.protocol + '//' + location.hostname + ':30000') + '/shared/notification-bell.js?v=2';
document.head.appendChild(s);
}