feat(tksupport): 전사 행정지원 서비스 신규 구축 (Phase 1 - 휴가신청)
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
11
tksupport/api/Dockerfile
Normal file
11
tksupport/api/Dockerfile
Normal file
@@ -0,0 +1,11 @@
|
||||
FROM node:18-alpine
|
||||
WORKDIR /usr/src/app
|
||||
COPY package*.json ./
|
||||
RUN npm install --omit=dev
|
||||
COPY . .
|
||||
RUN chown -R node:node /usr/src/app
|
||||
USER node
|
||||
EXPOSE 3000
|
||||
HEALTHCHECK --interval=30s --timeout=3s --start-period=20s --retries=3 \
|
||||
CMD node -e "require('http').get('http://localhost:3000/health', (res) => { process.exit(res.statusCode === 200 ? 0 : 1); })"
|
||||
CMD ["node", "index.js"]
|
||||
319
tksupport/api/controllers/vacationController.js
Normal file
319
tksupport/api/controllers/vacationController.js
Normal file
@@ -0,0 +1,319 @@
|
||||
const vacationRequestModel = require('../models/vacationRequestModel');
|
||||
const vacationBalanceModel = require('../models/vacationBalanceModel');
|
||||
const { getPool } = require('../middleware/auth');
|
||||
|
||||
const vacationController = {
|
||||
// ─── 휴가 신청 ───
|
||||
|
||||
async createRequest(req, res) {
|
||||
try {
|
||||
const { vacation_type_id, start_date, end_date, days_used, reason } = req.body;
|
||||
const user_id = req.user.user_id || req.user.id;
|
||||
|
||||
if (!vacation_type_id || !start_date || !end_date || !days_used) {
|
||||
return res.status(400).json({ success: false, error: '필수 필드가 누락되었습니다' });
|
||||
}
|
||||
if (new Date(end_date) < new Date(start_date)) {
|
||||
return res.status(400).json({ success: false, error: '종료일은 시작일보다 이후여야 합니다' });
|
||||
}
|
||||
|
||||
const overlapRows = await vacationRequestModel.checkOverlap(user_id, start_date, end_date);
|
||||
if (overlapRows[0].count > 0) {
|
||||
return res.status(400).json({ success: false, error: '해당 기간에 이미 신청된 휴가가 있습니다' });
|
||||
}
|
||||
|
||||
const result = await vacationRequestModel.create({
|
||||
user_id, vacation_type_id, start_date, end_date,
|
||||
days_used, reason: reason || null, status: 'pending'
|
||||
});
|
||||
|
||||
res.status(201).json({
|
||||
success: true,
|
||||
message: '휴가 신청이 완료되었습니다',
|
||||
data: { request_id: result.insertId }
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('휴가 신청 생성 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
},
|
||||
|
||||
async getRequests(req, res) {
|
||||
try {
|
||||
const role = (req.user.role || '').toLowerCase();
|
||||
const userId = req.user.user_id || req.user.id;
|
||||
const filters = {
|
||||
status: req.query.status,
|
||||
start_date: req.query.start_date,
|
||||
end_date: req.query.end_date,
|
||||
vacation_type_id: req.query.vacation_type_id
|
||||
};
|
||||
|
||||
if (!['admin', 'system'].includes(role)) {
|
||||
filters.user_id = userId;
|
||||
} else if (req.query.user_id) {
|
||||
filters.user_id = req.query.user_id;
|
||||
}
|
||||
|
||||
const results = await vacationRequestModel.getAll(filters);
|
||||
res.json({ success: true, data: results });
|
||||
} catch (error) {
|
||||
console.error('휴가 신청 목록 조회 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
},
|
||||
|
||||
async getRequestById(req, res) {
|
||||
try {
|
||||
const results = await vacationRequestModel.getById(req.params.id);
|
||||
if (results.length === 0) {
|
||||
return res.status(404).json({ success: false, error: '해당 휴가 신청을 찾을 수 없습니다' });
|
||||
}
|
||||
const request = results[0];
|
||||
const role = (req.user.role || '').toLowerCase();
|
||||
const userId = req.user.user_id || req.user.id;
|
||||
if (!['admin', 'system'].includes(role) && userId !== request.user_id) {
|
||||
return res.status(403).json({ success: false, error: '권한이 없습니다' });
|
||||
}
|
||||
res.json({ success: true, data: request });
|
||||
} catch (error) {
|
||||
console.error('휴가 신청 조회 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
},
|
||||
|
||||
async updateRequest(req, res) {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const { start_date, end_date, days_used, reason, vacation_type_id } = req.body;
|
||||
|
||||
const results = await vacationRequestModel.getById(id);
|
||||
if (results.length === 0) {
|
||||
return res.status(404).json({ success: false, error: '해당 휴가 신청을 찾을 수 없습니다' });
|
||||
}
|
||||
|
||||
const existing = results[0];
|
||||
const role = (req.user.role || '').toLowerCase();
|
||||
const userId = req.user.user_id || req.user.id;
|
||||
if (!['admin', 'system'].includes(role) && userId !== existing.user_id) {
|
||||
return res.status(403).json({ success: false, error: '권한이 없습니다' });
|
||||
}
|
||||
if (existing.status !== 'pending') {
|
||||
return res.status(400).json({ success: false, error: '대기 중인 신청만 수정할 수 있습니다' });
|
||||
}
|
||||
|
||||
const updateData = {};
|
||||
if (vacation_type_id) updateData.vacation_type_id = vacation_type_id;
|
||||
if (start_date) updateData.start_date = start_date;
|
||||
if (end_date) updateData.end_date = end_date;
|
||||
if (days_used) updateData.days_used = days_used;
|
||||
if (reason !== undefined) updateData.reason = reason;
|
||||
|
||||
if (start_date || end_date) {
|
||||
const newStart = start_date || existing.start_date;
|
||||
const newEnd = end_date || existing.end_date;
|
||||
const overlapRows = await vacationRequestModel.checkOverlap(existing.user_id, newStart, newEnd, id);
|
||||
if (overlapRows[0].count > 0) {
|
||||
return res.status(400).json({ success: false, error: '해당 기간에 이미 신청된 휴가가 있습니다' });
|
||||
}
|
||||
}
|
||||
|
||||
await vacationRequestModel.update(id, updateData);
|
||||
res.json({ success: true, message: '휴가 신청이 수정되었습니다' });
|
||||
} catch (error) {
|
||||
console.error('휴가 신청 수정 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
},
|
||||
|
||||
async cancelRequest(req, res) {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const results = await vacationRequestModel.getById(id);
|
||||
if (results.length === 0) {
|
||||
return res.status(404).json({ success: false, error: '해당 휴가 신청을 찾을 수 없습니다' });
|
||||
}
|
||||
|
||||
const existing = results[0];
|
||||
const role = (req.user.role || '').toLowerCase();
|
||||
const userId = req.user.user_id || req.user.id;
|
||||
if (!['admin', 'system'].includes(role) && userId !== existing.user_id) {
|
||||
return res.status(403).json({ success: false, error: '권한이 없습니다' });
|
||||
}
|
||||
if (existing.status === 'cancelled') {
|
||||
return res.status(400).json({ success: false, error: '이미 취소된 신청입니다' });
|
||||
}
|
||||
|
||||
// 승인된 건 취소 시 잔여일 복구
|
||||
if (existing.status === 'approved') {
|
||||
const year = new Date(existing.start_date).getFullYear();
|
||||
await vacationBalanceModel.restoreDays(
|
||||
existing.user_id, existing.vacation_type_id, year, parseFloat(existing.days_used)
|
||||
);
|
||||
}
|
||||
|
||||
await vacationRequestModel.updateStatus(id, {
|
||||
status: 'cancelled',
|
||||
reviewed_by: userId,
|
||||
review_note: '취소됨'
|
||||
});
|
||||
res.json({ success: true, message: '휴가 신청이 취소되었습니다' });
|
||||
} catch (error) {
|
||||
console.error('휴가 취소 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
},
|
||||
|
||||
// ─── 승인/반려 (관리자) ───
|
||||
|
||||
async getPending(req, res) {
|
||||
try {
|
||||
const results = await vacationRequestModel.getAllPending();
|
||||
res.json({ success: true, data: results });
|
||||
} catch (error) {
|
||||
console.error('대기 목록 조회 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
},
|
||||
|
||||
async approveRequest(req, res) {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const { review_note } = req.body;
|
||||
const reviewed_by = req.user.user_id || req.user.id;
|
||||
|
||||
const results = await vacationRequestModel.getById(id);
|
||||
if (results.length === 0) {
|
||||
return res.status(404).json({ success: false, error: '해당 휴가 신청을 찾을 수 없습니다' });
|
||||
}
|
||||
if (results[0].status !== 'pending') {
|
||||
return res.status(400).json({ success: false, error: '이미 처리된 신청입니다' });
|
||||
}
|
||||
|
||||
const request = results[0];
|
||||
|
||||
// 잔여일 차감
|
||||
const year = new Date(request.start_date).getFullYear();
|
||||
await vacationBalanceModel.deductDays(
|
||||
request.user_id, request.vacation_type_id, year, parseFloat(request.days_used)
|
||||
);
|
||||
|
||||
await vacationRequestModel.updateStatus(id, { status: 'approved', reviewed_by, review_note });
|
||||
res.json({ success: true, message: '휴가 신청이 승인되었습니다' });
|
||||
} catch (error) {
|
||||
console.error('휴가 승인 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
},
|
||||
|
||||
async rejectRequest(req, res) {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const { review_note } = req.body;
|
||||
const reviewed_by = req.user.user_id || req.user.id;
|
||||
|
||||
const results = await vacationRequestModel.getById(id);
|
||||
if (results.length === 0) {
|
||||
return res.status(404).json({ success: false, error: '해당 휴가 신청을 찾을 수 없습니다' });
|
||||
}
|
||||
if (results[0].status !== 'pending') {
|
||||
return res.status(400).json({ success: false, error: '이미 처리된 신청입니다' });
|
||||
}
|
||||
|
||||
await vacationRequestModel.updateStatus(id, { status: 'rejected', reviewed_by, review_note });
|
||||
res.json({ success: true, message: '휴가 신청이 반려되었습니다' });
|
||||
} catch (error) {
|
||||
console.error('휴가 반려 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
},
|
||||
|
||||
// ─── 잔여일 ───
|
||||
|
||||
async getMyBalance(req, res) {
|
||||
try {
|
||||
const userId = req.user.user_id || req.user.id;
|
||||
const year = parseInt(req.query.year) || new Date().getFullYear();
|
||||
const balances = await vacationBalanceModel.getByUserAndYear(userId, year);
|
||||
const hireDate = await vacationBalanceModel.getUserHireDate(userId);
|
||||
res.json({ success: true, data: { balances, hire_date: hireDate } });
|
||||
} catch (error) {
|
||||
console.error('잔여일 조회 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
},
|
||||
|
||||
async getUserBalance(req, res) {
|
||||
try {
|
||||
const { userId } = req.params;
|
||||
const year = parseInt(req.query.year) || new Date().getFullYear();
|
||||
const balances = await vacationBalanceModel.getByUserAndYear(userId, year);
|
||||
const hireDate = await vacationBalanceModel.getUserHireDate(userId);
|
||||
res.json({ success: true, data: { balances, hire_date: hireDate } });
|
||||
} catch (error) {
|
||||
console.error('사용자 잔여일 조회 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
},
|
||||
|
||||
async allocateBalance(req, res) {
|
||||
try {
|
||||
const { user_id, vacation_type_id, year, total_days, notes } = req.body;
|
||||
const created_by = req.user.user_id || req.user.id;
|
||||
|
||||
if (!user_id || !vacation_type_id || !year || total_days === undefined) {
|
||||
return res.status(400).json({ success: false, error: '필수 필드가 누락되었습니다' });
|
||||
}
|
||||
|
||||
await vacationBalanceModel.allocate({ user_id, vacation_type_id, year, total_days, notes, created_by });
|
||||
res.json({ success: true, message: '휴가 잔여일이 배정되었습니다' });
|
||||
} catch (error) {
|
||||
console.error('잔여일 배정 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
},
|
||||
|
||||
async getAllBalances(req, res) {
|
||||
try {
|
||||
const year = parseInt(req.query.year) || new Date().getFullYear();
|
||||
const balances = await vacationBalanceModel.getAllByYear(year);
|
||||
res.json({ success: true, data: balances });
|
||||
} catch (error) {
|
||||
console.error('전체 잔여일 조회 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
},
|
||||
|
||||
// ─── 참조 데이터 ───
|
||||
|
||||
async getVacationTypes(req, res) {
|
||||
try {
|
||||
const db = getPool();
|
||||
const [rows] = await db.query('SELECT * FROM vacation_types ORDER BY priority ASC, type_name ASC');
|
||||
res.json({ success: true, data: rows });
|
||||
} catch (error) {
|
||||
console.error('휴가 유형 조회 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
},
|
||||
|
||||
// ─── 사용자 목록 (관리자 - 배정용) ───
|
||||
|
||||
async getUsers(req, res) {
|
||||
try {
|
||||
const db = getPool();
|
||||
const [rows] = await db.query(`
|
||||
SELECT user_id, username, name, hire_date
|
||||
FROM sso_users
|
||||
WHERE is_active = 1
|
||||
ORDER BY name ASC
|
||||
`);
|
||||
res.json({ success: true, data: rows });
|
||||
} catch (error) {
|
||||
console.error('사용자 목록 조회 오류:', error);
|
||||
res.status(500).json({ success: false, error: '서버 오류가 발생했습니다' });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = vacationController;
|
||||
42
tksupport/api/db/migrations/001_create_sp_tables.sql
Normal file
42
tksupport/api/db/migrations/001_create_sp_tables.sql
Normal file
@@ -0,0 +1,42 @@
|
||||
-- sso_users에 입사일 추가
|
||||
ALTER TABLE sso_users ADD COLUMN IF NOT EXISTS hire_date DATE NULL COMMENT '입사일';
|
||||
|
||||
-- 전사 휴가 신청
|
||||
CREATE TABLE IF NOT EXISTS sp_vacation_requests (
|
||||
request_id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
user_id INT NOT NULL COMMENT 'sso_users.user_id',
|
||||
vacation_type_id INT UNSIGNED NOT NULL,
|
||||
start_date DATE NOT NULL,
|
||||
end_date DATE NOT NULL,
|
||||
days_used DECIMAL(4,1) NOT NULL,
|
||||
reason TEXT,
|
||||
status ENUM('pending','approved','rejected','cancelled') DEFAULT 'pending',
|
||||
reviewed_by INT NULL,
|
||||
reviewed_at TIMESTAMP NULL,
|
||||
review_note TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (user_id) REFERENCES sso_users(user_id),
|
||||
FOREIGN KEY (reviewed_by) REFERENCES sso_users(user_id),
|
||||
FOREIGN KEY (vacation_type_id) REFERENCES vacation_types(id),
|
||||
INDEX idx_user_status (user_id, status),
|
||||
INDEX idx_dates (start_date, end_date)
|
||||
);
|
||||
|
||||
-- 전사 휴가 잔여일
|
||||
CREATE TABLE IF NOT EXISTS sp_vacation_balances (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
user_id INT NOT NULL COMMENT 'sso_users.user_id',
|
||||
vacation_type_id INT UNSIGNED NOT NULL,
|
||||
year INT NOT NULL,
|
||||
total_days DECIMAL(4,1) DEFAULT 0,
|
||||
used_days DECIMAL(4,1) DEFAULT 0,
|
||||
notes TEXT,
|
||||
created_by INT NOT NULL,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||
UNIQUE KEY unique_user_type_year (user_id, vacation_type_id, year),
|
||||
FOREIGN KEY (user_id) REFERENCES sso_users(user_id),
|
||||
FOREIGN KEY (created_by) REFERENCES sso_users(user_id),
|
||||
FOREIGN KEY (vacation_type_id) REFERENCES vacation_types(id)
|
||||
);
|
||||
62
tksupport/api/index.js
Normal file
62
tksupport/api/index.js
Normal file
@@ -0,0 +1,62 @@
|
||||
const express = require('express');
|
||||
const cors = require('cors');
|
||||
const vacationRoutes = require('./routes/vacationRoutes');
|
||||
const vacationRequestModel = require('./models/vacationRequestModel');
|
||||
const { requireAuth } = require('./middleware/auth');
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3000;
|
||||
|
||||
const allowedOrigins = [
|
||||
'https://tkfb.technicalkorea.net',
|
||||
'https://tkreport.technicalkorea.net',
|
||||
'https://tkqc.technicalkorea.net',
|
||||
'https://tkuser.technicalkorea.net',
|
||||
'https://tkpurchase.technicalkorea.net',
|
||||
'https://tksafety.technicalkorea.net',
|
||||
'https://tksupport.technicalkorea.net',
|
||||
];
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
allowedOrigins.push('http://localhost:30680');
|
||||
}
|
||||
app.use(cors({
|
||||
origin: function(origin, cb) {
|
||||
if (!origin || allowedOrigins.includes(origin) || /^http:\/\/192\.168\.\d+\.\d+(:\d+)?$/.test(origin)) return cb(null, true);
|
||||
cb(new Error('CORS blocked: ' + origin));
|
||||
},
|
||||
credentials: true
|
||||
}));
|
||||
app.use(express.json());
|
||||
|
||||
// Health check
|
||||
app.get('/health', (req, res) => {
|
||||
res.json({ status: 'ok', service: 'tksupport-api', timestamp: new Date().toISOString() });
|
||||
});
|
||||
|
||||
// Routes
|
||||
app.use('/api/vacation', vacationRoutes);
|
||||
|
||||
// 404
|
||||
app.use((req, res) => {
|
||||
res.status(404).json({ success: false, error: 'Not Found' });
|
||||
});
|
||||
|
||||
// Error handler
|
||||
app.use((err, req, res, next) => {
|
||||
console.error('tksupport-api Error:', err.message);
|
||||
res.status(err.status || 500).json({
|
||||
success: false,
|
||||
error: err.message || 'Internal Server Error'
|
||||
});
|
||||
});
|
||||
|
||||
app.listen(PORT, async () => {
|
||||
console.log(`tksupport-api running on port ${PORT}`);
|
||||
try {
|
||||
await vacationRequestModel.runMigration();
|
||||
} catch (err) {
|
||||
console.error('Migration error:', err.message);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = app;
|
||||
98
tksupport/api/middleware/auth.js
Normal file
98
tksupport/api/middleware/auth.js
Normal file
@@ -0,0 +1,98 @@
|
||||
const jwt = require('jsonwebtoken');
|
||||
const mysql = require('mysql2/promise');
|
||||
|
||||
const JWT_SECRET = process.env.SSO_JWT_SECRET;
|
||||
|
||||
let pool;
|
||||
function getPool() {
|
||||
if (!pool) {
|
||||
pool = mysql.createPool({
|
||||
host: process.env.DB_HOST || 'mariadb',
|
||||
port: parseInt(process.env.DB_PORT) || 3306,
|
||||
user: process.env.DB_USER || 'hyungi_user',
|
||||
password: process.env.DB_PASSWORD,
|
||||
database: process.env.DB_NAME || 'hyungi',
|
||||
waitForConnections: true,
|
||||
connectionLimit: 5,
|
||||
queueLimit: 0
|
||||
});
|
||||
}
|
||||
return pool;
|
||||
}
|
||||
|
||||
function extractToken(req) {
|
||||
const authHeader = req.headers['authorization'];
|
||||
if (authHeader && authHeader.startsWith('Bearer ')) {
|
||||
return authHeader.split(' ')[1];
|
||||
}
|
||||
if (req.cookies && req.cookies.sso_token) {
|
||||
return req.cookies.sso_token;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function requireAuth(req, res, next) {
|
||||
const token = extractToken(req);
|
||||
if (!token) {
|
||||
return res.status(401).json({ success: false, error: '인증이 필요합니다' });
|
||||
}
|
||||
try {
|
||||
const decoded = jwt.verify(token, JWT_SECRET);
|
||||
req.user = decoded;
|
||||
next();
|
||||
} catch {
|
||||
return res.status(401).json({ success: false, error: '유효하지 않은 토큰입니다' });
|
||||
}
|
||||
}
|
||||
|
||||
function requireAdmin(req, res, next) {
|
||||
const token = extractToken(req);
|
||||
if (!token) {
|
||||
return res.status(401).json({ success: false, error: '인증이 필요합니다' });
|
||||
}
|
||||
try {
|
||||
const decoded = jwt.verify(token, JWT_SECRET);
|
||||
if (!['admin', 'system'].includes((decoded.role || '').toLowerCase())) {
|
||||
return res.status(403).json({ success: false, error: '관리자 권한이 필요합니다' });
|
||||
}
|
||||
req.user = decoded;
|
||||
next();
|
||||
} catch {
|
||||
return res.status(401).json({ success: false, error: '유효하지 않은 토큰입니다' });
|
||||
}
|
||||
}
|
||||
|
||||
function requirePage(pageName) {
|
||||
return async (req, res, next) => {
|
||||
const userId = req.user.user_id || req.user.id;
|
||||
const role = (req.user.role || '').toLowerCase();
|
||||
if (role === 'admin' || role === 'system') return next();
|
||||
|
||||
try {
|
||||
const db = getPool();
|
||||
const [rows] = await db.query(
|
||||
'SELECT can_access FROM user_page_permissions WHERE user_id = ? AND page_name = ?',
|
||||
[userId, pageName]
|
||||
);
|
||||
if (rows.length > 0) {
|
||||
return rows[0].can_access ? next() : res.status(403).json({ success: false, error: '접근 권한이 없습니다' });
|
||||
}
|
||||
const [userRows] = await db.query('SELECT department_id FROM sso_users WHERE user_id = ?', [userId]);
|
||||
if (userRows.length > 0 && userRows[0].department_id) {
|
||||
const [deptRows] = await db.query(
|
||||
'SELECT can_access FROM department_page_permissions WHERE department_id = ? AND page_name = ?',
|
||||
[userRows[0].department_id, pageName]
|
||||
);
|
||||
if (deptRows.length > 0) {
|
||||
return deptRows[0].can_access ? next() : res.status(403).json({ success: false, error: '접근 권한이 없습니다' });
|
||||
}
|
||||
}
|
||||
return res.status(403).json({ success: false, error: '접근 권한이 없습니다' });
|
||||
} catch (err) {
|
||||
console.error('Permission check error:', err);
|
||||
return res.status(500).json({ success: false, error: '권한 확인 실패' });
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = { getPool, extractToken, requireAuth, requireAdmin, requirePage };
|
||||
96
tksupport/api/models/vacationBalanceModel.js
Normal file
96
tksupport/api/models/vacationBalanceModel.js
Normal file
@@ -0,0 +1,96 @@
|
||||
const { getPool } = require('../middleware/auth');
|
||||
|
||||
const vacationBalanceModel = {
|
||||
async getByUserAndYear(userId, year) {
|
||||
const db = getPool();
|
||||
const [rows] = await db.query(`
|
||||
SELECT
|
||||
vb.*,
|
||||
vt.type_name,
|
||||
vt.type_code,
|
||||
vt.priority,
|
||||
vt.is_special,
|
||||
(vb.total_days - vb.used_days) as remaining_days
|
||||
FROM sp_vacation_balances vb
|
||||
INNER JOIN vacation_types vt ON vb.vacation_type_id = vt.id
|
||||
WHERE vb.user_id = ? AND vb.year = ?
|
||||
ORDER BY vt.priority ASC, vt.type_name ASC
|
||||
`, [userId, year]);
|
||||
return rows;
|
||||
},
|
||||
|
||||
async getAllByYear(year) {
|
||||
const db = getPool();
|
||||
const [rows] = await db.query(`
|
||||
SELECT
|
||||
vb.*,
|
||||
su.name as user_name,
|
||||
su.username,
|
||||
su.hire_date,
|
||||
vt.type_name,
|
||||
vt.type_code,
|
||||
vt.priority,
|
||||
(vb.total_days - vb.used_days) as remaining_days
|
||||
FROM sp_vacation_balances vb
|
||||
INNER JOIN sso_users su ON vb.user_id = su.user_id
|
||||
INNER JOIN vacation_types vt ON vb.vacation_type_id = vt.id
|
||||
WHERE vb.year = ? AND su.is_active = 1
|
||||
ORDER BY su.name ASC, vt.priority ASC
|
||||
`, [year]);
|
||||
return rows;
|
||||
},
|
||||
|
||||
async allocate(data) {
|
||||
const db = getPool();
|
||||
const [result] = await db.query(`
|
||||
INSERT INTO sp_vacation_balances (user_id, vacation_type_id, year, total_days, used_days, notes, created_by)
|
||||
VALUES (?, ?, ?, ?, 0, ?, ?)
|
||||
ON DUPLICATE KEY UPDATE
|
||||
total_days = VALUES(total_days),
|
||||
notes = VALUES(notes),
|
||||
updated_at = NOW()
|
||||
`, [data.user_id, data.vacation_type_id, data.year, data.total_days, data.notes || null, data.created_by]);
|
||||
return result;
|
||||
},
|
||||
|
||||
async deductDays(userId, vacationTypeId, year, daysToDeduct) {
|
||||
const db = getPool();
|
||||
const [result] = await db.query(`
|
||||
UPDATE sp_vacation_balances
|
||||
SET used_days = used_days + ?, updated_at = NOW()
|
||||
WHERE user_id = ? AND vacation_type_id = ? AND year = ?
|
||||
`, [daysToDeduct, userId, vacationTypeId, year]);
|
||||
return result;
|
||||
},
|
||||
|
||||
async restoreDays(userId, vacationTypeId, year, daysToRestore) {
|
||||
const db = getPool();
|
||||
const [result] = await db.query(`
|
||||
UPDATE sp_vacation_balances
|
||||
SET used_days = GREATEST(0, used_days - ?), updated_at = NOW()
|
||||
WHERE user_id = ? AND vacation_type_id = ? AND year = ?
|
||||
`, [daysToRestore, userId, vacationTypeId, year]);
|
||||
return result;
|
||||
},
|
||||
|
||||
calculateAnnualLeaveDays(hireDate, targetYear) {
|
||||
const hire = new Date(hireDate);
|
||||
const targetDate = new Date(targetYear, 0, 1);
|
||||
const monthsDiff = (targetDate.getFullYear() - hire.getFullYear()) * 12
|
||||
+ (targetDate.getMonth() - hire.getMonth());
|
||||
if (monthsDiff < 12) {
|
||||
return Math.floor(monthsDiff);
|
||||
}
|
||||
const yearsWorked = Math.floor(monthsDiff / 12);
|
||||
const additionalDays = Math.floor((yearsWorked - 1) / 2);
|
||||
return Math.min(15 + additionalDays, 25);
|
||||
},
|
||||
|
||||
async getUserHireDate(userId) {
|
||||
const db = getPool();
|
||||
const [rows] = await db.query('SELECT hire_date FROM sso_users WHERE user_id = ?', [userId]);
|
||||
return rows.length > 0 ? rows[0].hire_date : null;
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = vacationBalanceModel;
|
||||
149
tksupport/api/models/vacationRequestModel.js
Normal file
149
tksupport/api/models/vacationRequestModel.js
Normal file
@@ -0,0 +1,149 @@
|
||||
const { getPool } = require('../middleware/auth');
|
||||
|
||||
const vacationRequestModel = {
|
||||
async create(data) {
|
||||
const db = getPool();
|
||||
const [result] = await db.query('INSERT INTO sp_vacation_requests SET ?', data);
|
||||
return result;
|
||||
},
|
||||
|
||||
async getAll(filters = {}) {
|
||||
const db = getPool();
|
||||
let query = `
|
||||
SELECT
|
||||
vr.*,
|
||||
su.name as user_name,
|
||||
su.username,
|
||||
vt.type_name as vacation_type_name,
|
||||
vt.type_code,
|
||||
reviewer.name as reviewer_name
|
||||
FROM sp_vacation_requests vr
|
||||
INNER JOIN sso_users su ON vr.user_id = su.user_id
|
||||
INNER JOIN vacation_types vt ON vr.vacation_type_id = vt.id
|
||||
LEFT JOIN sso_users reviewer ON vr.reviewed_by = reviewer.user_id
|
||||
WHERE 1=1
|
||||
`;
|
||||
const params = [];
|
||||
|
||||
if (filters.user_id) {
|
||||
query += ' AND vr.user_id = ?';
|
||||
params.push(filters.user_id);
|
||||
}
|
||||
if (filters.status) {
|
||||
query += ' AND vr.status = ?';
|
||||
params.push(filters.status);
|
||||
}
|
||||
if (filters.start_date) {
|
||||
query += ' AND vr.start_date >= ?';
|
||||
params.push(filters.start_date);
|
||||
}
|
||||
if (filters.end_date) {
|
||||
query += ' AND vr.end_date <= ?';
|
||||
params.push(filters.end_date);
|
||||
}
|
||||
if (filters.vacation_type_id) {
|
||||
query += ' AND vr.vacation_type_id = ?';
|
||||
params.push(filters.vacation_type_id);
|
||||
}
|
||||
|
||||
query += ' ORDER BY vr.created_at DESC';
|
||||
|
||||
const [rows] = await db.query(query, params);
|
||||
return rows;
|
||||
},
|
||||
|
||||
async getById(requestId) {
|
||||
const db = getPool();
|
||||
const [rows] = await db.query(`
|
||||
SELECT
|
||||
vr.*,
|
||||
su.name as user_name,
|
||||
su.username,
|
||||
vt.type_name as vacation_type_name,
|
||||
vt.type_code,
|
||||
reviewer.name as reviewer_name
|
||||
FROM sp_vacation_requests vr
|
||||
INNER JOIN sso_users su ON vr.user_id = su.user_id
|
||||
INNER JOIN vacation_types vt ON vr.vacation_type_id = vt.id
|
||||
LEFT JOIN sso_users reviewer ON vr.reviewed_by = reviewer.user_id
|
||||
WHERE vr.request_id = ?
|
||||
`, [requestId]);
|
||||
return rows;
|
||||
},
|
||||
|
||||
async update(requestId, data) {
|
||||
const db = getPool();
|
||||
const [result] = await db.query('UPDATE sp_vacation_requests SET ? WHERE request_id = ?', [data, requestId]);
|
||||
return result;
|
||||
},
|
||||
|
||||
async updateStatus(requestId, statusData) {
|
||||
const db = getPool();
|
||||
const [result] = await db.query(`
|
||||
UPDATE sp_vacation_requests
|
||||
SET status = ?, reviewed_by = ?, reviewed_at = NOW(), review_note = ?
|
||||
WHERE request_id = ?
|
||||
`, [statusData.status, statusData.reviewed_by, statusData.review_note || null, requestId]);
|
||||
return result;
|
||||
},
|
||||
|
||||
async checkOverlap(userId, startDate, endDate, excludeRequestId = null) {
|
||||
const db = getPool();
|
||||
let query = `
|
||||
SELECT COUNT(*) as count FROM sp_vacation_requests
|
||||
WHERE user_id = ?
|
||||
AND status IN ('pending', 'approved')
|
||||
AND start_date <= ? AND end_date >= ?
|
||||
`;
|
||||
const params = [userId, endDate, startDate];
|
||||
|
||||
if (excludeRequestId) {
|
||||
query += ' AND request_id != ?';
|
||||
params.push(excludeRequestId);
|
||||
}
|
||||
|
||||
const [rows] = await db.query(query, params);
|
||||
return rows;
|
||||
},
|
||||
|
||||
async getAllPending() {
|
||||
const db = getPool();
|
||||
const [rows] = await db.query(`
|
||||
SELECT
|
||||
vr.*,
|
||||
su.name as user_name,
|
||||
su.username,
|
||||
vt.type_name as vacation_type_name,
|
||||
vt.type_code
|
||||
FROM sp_vacation_requests vr
|
||||
INNER JOIN sso_users su ON vr.user_id = su.user_id
|
||||
INNER JOIN vacation_types vt ON vr.vacation_type_id = vt.id
|
||||
WHERE vr.status = 'pending'
|
||||
ORDER BY vr.created_at ASC
|
||||
`);
|
||||
return rows;
|
||||
},
|
||||
|
||||
async runMigration() {
|
||||
const db = getPool();
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const sqlFile = path.join(__dirname, '..', 'db', 'migrations', '001_create_sp_tables.sql');
|
||||
const sql = fs.readFileSync(sqlFile, 'utf8');
|
||||
const statements = sql.split(';').map(s => s.trim()).filter(s => s.length > 0);
|
||||
for (const stmt of statements) {
|
||||
try {
|
||||
await db.query(stmt);
|
||||
} catch (err) {
|
||||
if (err.code === 'ER_DUP_FIELDNAME' || err.code === 'ER_TABLE_EXISTS_ERROR') {
|
||||
// Already migrated
|
||||
} else {
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log('[tksupport] Migration completed');
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = vacationRequestModel;
|
||||
16
tksupport/api/package.json
Normal file
16
tksupport/api/package.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "tksupport-api",
|
||||
"version": "1.0.0",
|
||||
"description": "TK Factory Services - 전사 행정지원 서비스",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node index.js",
|
||||
"dev": "node --watch index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
"express": "^4.18.2",
|
||||
"jsonwebtoken": "^9.0.0",
|
||||
"mysql2": "^3.14.1"
|
||||
}
|
||||
}
|
||||
32
tksupport/api/routes/vacationRoutes.js
Normal file
32
tksupport/api/routes/vacationRoutes.js
Normal file
@@ -0,0 +1,32 @@
|
||||
const express = require('express');
|
||||
const router = express.Router();
|
||||
const { requireAuth, requireAdmin } = require('../middleware/auth');
|
||||
const ctrl = require('../controllers/vacationController');
|
||||
|
||||
router.use(requireAuth);
|
||||
|
||||
// 참조 데이터
|
||||
router.get('/types', ctrl.getVacationTypes);
|
||||
|
||||
// 휴가 신청
|
||||
router.post('/requests', ctrl.createRequest);
|
||||
router.get('/requests', ctrl.getRequests);
|
||||
router.get('/requests/:id', ctrl.getRequestById);
|
||||
router.put('/requests/:id', ctrl.updateRequest);
|
||||
router.patch('/requests/:id/cancel', ctrl.cancelRequest);
|
||||
|
||||
// 승인 (관리자)
|
||||
router.get('/pending', requireAdmin, ctrl.getPending);
|
||||
router.patch('/requests/:id/approve', requireAdmin, ctrl.approveRequest);
|
||||
router.patch('/requests/:id/reject', requireAdmin, ctrl.rejectRequest);
|
||||
|
||||
// 잔여일
|
||||
router.get('/balance', ctrl.getMyBalance);
|
||||
router.get('/balance/all', requireAdmin, ctrl.getAllBalances);
|
||||
router.get('/balance/:userId', requireAdmin, ctrl.getUserBalance);
|
||||
router.post('/balance/allocate', requireAdmin, ctrl.allocateBalance);
|
||||
|
||||
// 사용자 목록 (관리자)
|
||||
router.get('/users', requireAdmin, ctrl.getUsers);
|
||||
|
||||
module.exports = router;
|
||||
6
tksupport/web/Dockerfile
Normal file
6
tksupport/web/Dockerfile
Normal file
@@ -0,0 +1,6 @@
|
||||
FROM nginx:alpine
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY *.html /usr/share/nginx/html/
|
||||
COPY static/ /usr/share/nginx/html/static/
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
237
tksupport/web/index.html
Normal file
237
tksupport/web/index.html
Normal file
@@ -0,0 +1,237 @@
|
||||
<!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=1">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<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">
|
||||
<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">
|
||||
<!-- Sidebar Nav -->
|
||||
<nav id="sideNav" class="hidden lg:flex flex-col gap-1 w-48 flex-shrink-0 pt-2"></nav>
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- 통계 카드 -->
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-5">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value text-purple-600" id="statRemaining">-</div>
|
||||
<div class="stat-label">잔여 연차</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value text-blue-600" id="statUsed">-</div>
|
||||
<div class="stat-label">사용 연차</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value text-amber-600" id="statPending">-</div>
|
||||
<div class="stat-label">대기 중</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value text-green-600" id="statApproved">-</div>
|
||||
<div class="stat-label">승인 완료</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 빠른 신청 -->
|
||||
<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-plus text-purple-500 mr-2"></i>빠른 휴가 신청</h2>
|
||||
<a href="/vacation-request.html" class="text-sm text-purple-600 hover:text-purple-800">상세 신청 <i class="fas fa-arrow-right ml-1"></i></a>
|
||||
</div>
|
||||
<div id="hireDateWarning" class="hidden bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4 text-sm text-amber-700">
|
||||
<i class="fas fa-exclamation-triangle mr-1"></i>입사일이 미등록되어 연차가 자동 계산되지 않습니다. 관리자에게 수동 배정을 요청하세요.
|
||||
</div>
|
||||
<form id="quickRequestForm">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">휴가 유형 <span class="text-red-400">*</span></label>
|
||||
<select id="vacationType" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
|
||||
<option value="">선택</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">시작일 <span class="text-red-400">*</span></label>
|
||||
<input type="date" id="startDate" 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="date" id="endDate" 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="number" id="daysUsed" step="0.5" min="0.5" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">사유</label>
|
||||
<input type="text" id="reason" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="사유를 입력하세요 (선택)">
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button type="submit" class="px-6 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium">
|
||||
<i class="fas fa-paper-plane mr-2"></i>신청
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 최근 신청 현황 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-5">
|
||||
<h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-history text-purple-500 mr-2"></i>최근 신청 현황</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>유형</th>
|
||||
<th>기간</th>
|
||||
<th class="text-center">일수</th>
|
||||
<th>사유</th>
|
||||
<th>상태</th>
|
||||
<th class="text-right hide-mobile">신청일</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="recentRequestsBody">
|
||||
<tr><td colspan="6" class="text-center text-gray-400 py-8">로딩 중...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/tksupport-core.js?v=1"></script>
|
||||
<script>
|
||||
let vacationTypes = [];
|
||||
|
||||
async function initDashboard() {
|
||||
if (!initAuth()) return;
|
||||
|
||||
try {
|
||||
// 휴가 유형, 잔여일, 최근 신청 병렬 로드
|
||||
const [typesRes, balanceRes, requestsRes] = await Promise.all([
|
||||
api('/vacation/types'),
|
||||
api('/vacation/balance'),
|
||||
api('/vacation/requests')
|
||||
]);
|
||||
|
||||
vacationTypes = typesRes.data;
|
||||
const sel = document.getElementById('vacationType');
|
||||
vacationTypes.forEach(t => {
|
||||
sel.innerHTML += `<option value="${t.id}">${escapeHtml(t.type_name)}</option>`;
|
||||
});
|
||||
|
||||
// 잔여일 통계
|
||||
const balances = balanceRes.data.balances;
|
||||
const hireDate = balanceRes.data.hire_date;
|
||||
let totalRemaining = 0, totalUsed = 0;
|
||||
balances.forEach(b => {
|
||||
totalRemaining += parseFloat(b.remaining_days || 0);
|
||||
totalUsed += parseFloat(b.used_days || 0);
|
||||
});
|
||||
document.getElementById('statRemaining').textContent = totalRemaining % 1 === 0 ? totalRemaining : totalRemaining.toFixed(1);
|
||||
document.getElementById('statUsed').textContent = totalUsed % 1 === 0 ? totalUsed : totalUsed.toFixed(1);
|
||||
|
||||
if (!hireDate) {
|
||||
document.getElementById('hireDateWarning').classList.remove('hidden');
|
||||
}
|
||||
|
||||
// 신청 현황 통계
|
||||
const requests = requestsRes.data;
|
||||
const pendingCount = requests.filter(r => r.status === 'pending').length;
|
||||
const approvedCount = requests.filter(r => r.status === 'approved').length;
|
||||
document.getElementById('statPending').textContent = pendingCount;
|
||||
document.getElementById('statApproved').textContent = approvedCount;
|
||||
|
||||
// 최근 5건 표시
|
||||
renderRecentRequests(requests.slice(0, 5));
|
||||
} catch (err) {
|
||||
console.error('Dashboard init error:', err);
|
||||
showToast(err.message, 'error');
|
||||
}
|
||||
|
||||
// 날짜 기본값
|
||||
const today = new Date().toISOString().substring(0, 10);
|
||||
document.getElementById('startDate').value = today;
|
||||
document.getElementById('endDate').value = today;
|
||||
document.getElementById('daysUsed').value = '1';
|
||||
|
||||
// 날짜 변경 시 자동 일수 계산
|
||||
document.getElementById('startDate').addEventListener('change', calcDays);
|
||||
document.getElementById('endDate').addEventListener('change', calcDays);
|
||||
|
||||
// 빠른 신청 폼
|
||||
document.getElementById('quickRequestForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const vacation_type_id = document.getElementById('vacationType').value;
|
||||
const start_date = document.getElementById('startDate').value;
|
||||
const end_date = document.getElementById('endDate').value;
|
||||
const days_used = parseFloat(document.getElementById('daysUsed').value);
|
||||
const reason = document.getElementById('reason').value;
|
||||
|
||||
if (!vacation_type_id) { showToast('휴가 유형을 선택하세요', 'error'); return; }
|
||||
|
||||
try {
|
||||
await api('/vacation/requests', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ vacation_type_id: parseInt(vacation_type_id), start_date, end_date, days_used, reason })
|
||||
});
|
||||
showToast('휴가 신청이 완료되었습니다');
|
||||
setTimeout(() => location.reload(), 1000);
|
||||
} catch (err) {
|
||||
showToast(err.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function calcDays() {
|
||||
const s = document.getElementById('startDate').value;
|
||||
const e = document.getElementById('endDate').value;
|
||||
if (s && e) {
|
||||
const diff = Math.floor((new Date(e) - new Date(s)) / 86400000) + 1;
|
||||
if (diff > 0) document.getElementById('daysUsed').value = diff;
|
||||
}
|
||||
}
|
||||
|
||||
function renderRecentRequests(requests) {
|
||||
const tbody = document.getElementById('recentRequestsBody');
|
||||
if (requests.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="empty-state"><i class="fas fa-calendar-times block"></i>신청 내역이 없습니다</td></tr>';
|
||||
return;
|
||||
}
|
||||
tbody.innerHTML = requests.map(r => `
|
||||
<tr>
|
||||
<td>${escapeHtml(r.vacation_type_name)}</td>
|
||||
<td>${formatDate(r.start_date)}${r.start_date !== r.end_date ? ' ~ ' + formatDate(r.end_date) : ''}</td>
|
||||
<td class="text-center">${r.days_used}</td>
|
||||
<td class="hide-mobile">${escapeHtml(r.reason || '-')}</td>
|
||||
<td>${statusBadge(r.status)}</td>
|
||||
<td class="text-right hide-mobile text-gray-500 text-xs">${formatDate(r.created_at)}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
initDashboard();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
45
tksupport/web/nginx.conf
Normal file
45
tksupport/web/nginx.conf
Normal file
@@ -0,0 +1,45 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
charset utf-8;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
gzip on;
|
||||
gzip_types text/plain text/css application/javascript application/json;
|
||||
gzip_min_length 1024;
|
||||
|
||||
location ~* \.html$ {
|
||||
expires -1;
|
||||
add_header Cache-Control "no-store, no-cache, must-revalidate";
|
||||
}
|
||||
|
||||
location ~* \.(js|css)$ {
|
||||
expires 1h;
|
||||
add_header Cache-Control "public, no-transform";
|
||||
}
|
||||
|
||||
location /api/ {
|
||||
proxy_pass http://tksupport-api:3000/api/;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
location /static/ {
|
||||
expires 1h;
|
||||
add_header Cache-Control "public, no-transform";
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location /health {
|
||||
access_log off;
|
||||
return 200 'ok';
|
||||
add_header Content-Type text/plain;
|
||||
}
|
||||
}
|
||||
50
tksupport/web/static/css/tksupport.css
Normal file
50
tksupport/web/static/css/tksupport.css
Normal 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
145
tksupport/web/static/js/tksupport-core.js
Normal 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);
|
||||
}
|
||||
388
tksupport/web/vacation-approval.html
Normal file
388
tksupport/web/vacation-approval.html
Normal file
@@ -0,0 +1,388 @@
|
||||
<!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=1">
|
||||
</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">
|
||||
<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="flex gap-1 mb-5 bg-white rounded-xl shadow-sm p-1">
|
||||
<button onclick="switchTab('pending')" id="tabPending" class="flex-1 py-2.5 text-sm font-medium rounded-lg transition-colors bg-purple-600 text-white">
|
||||
대기 중 <span id="pendingCount" class="ml-1 bg-white/20 px-1.5 py-0.5 rounded-full text-xs">0</span>
|
||||
</button>
|
||||
<button onclick="switchTab('all')" id="tabAll" class="flex-1 py-2.5 text-sm font-medium rounded-lg transition-colors text-gray-600 hover:bg-gray-100">
|
||||
전체 내역
|
||||
</button>
|
||||
<button onclick="switchTab('balance')" id="tabBalance" class="flex-1 py-2.5 text-sm font-medium rounded-lg transition-colors text-gray-600 hover:bg-gray-100">
|
||||
잔여일 관리
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 대기 목록 -->
|
||||
<div id="panelPending" class="bg-white rounded-xl shadow-sm p-5 mb-5">
|
||||
<h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-clock text-amber-500 mr-2"></i>승인 대기 목록</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>신청자</th>
|
||||
<th>유형</th>
|
||||
<th>기간</th>
|
||||
<th class="text-center">일수</th>
|
||||
<th class="hide-mobile">사유</th>
|
||||
<th class="hide-mobile">신청일</th>
|
||||
<th class="text-right">처리</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pendingBody">
|
||||
<tr><td colspan="7" class="text-center text-gray-400 py-8">로딩 중...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 전체 내역 -->
|
||||
<div id="panelAll" class="hidden bg-white rounded-xl shadow-sm p-5 mb-5">
|
||||
<h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-list text-purple-500 mr-2"></i>전체 휴가 내역</h2>
|
||||
<div class="flex flex-wrap items-end gap-3 mb-4">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">상태</label>
|
||||
<select id="filterAllStatus" class="input-field px-3 py-2 rounded-lg text-sm">
|
||||
<option value="">전체</option>
|
||||
<option value="pending">대기</option>
|
||||
<option value="approved">승인</option>
|
||||
<option value="rejected">반려</option>
|
||||
<option value="cancelled">취소</option>
|
||||
</select>
|
||||
</div>
|
||||
<button onclick="loadAllRequests()" class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700">
|
||||
<i class="fas fa-search mr-1"></i>조회
|
||||
</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>신청자</th>
|
||||
<th>유형</th>
|
||||
<th>기간</th>
|
||||
<th class="text-center">일수</th>
|
||||
<th>상태</th>
|
||||
<th class="hide-mobile">검토자</th>
|
||||
<th class="text-right hide-mobile">신청일</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="allRequestsBody">
|
||||
<tr><td colspan="7" class="text-center text-gray-400 py-8">조회 버튼을 클릭하세요</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 잔여일 관리 -->
|
||||
<div id="panelBalance" class="hidden">
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 mb-5">
|
||||
<h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-plus-circle text-purple-500 mr-2"></i>잔여일 배정</h2>
|
||||
<form id="allocateForm">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">직원 <span class="text-red-400">*</span></label>
|
||||
<select id="allocUser" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
|
||||
<option value="">선택</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">유형 <span class="text-red-400">*</span></label>
|
||||
<select id="allocType" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
|
||||
<option value="">선택</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">연도 <span class="text-red-400">*</span></label>
|
||||
<input type="number" id="allocYear" 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="number" id="allocDays" step="0.5" min="0" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button type="submit" class="w-full px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700">
|
||||
<i class="fas fa-save mr-1"></i>배정
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">메모</label>
|
||||
<input type="text" id="allocNotes" class="input-field w-full px-3 py-2 rounded-lg text-sm" placeholder="배정 사유 (선택)">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm p-5">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-base font-semibold text-gray-800"><i class="fas fa-table text-purple-500 mr-2"></i>전체 잔여일 현황</h2>
|
||||
<button onclick="loadAllBalances()" class="text-sm text-purple-600 hover:text-purple-800">
|
||||
<i class="fas fa-sync-alt mr-1"></i>새로고침
|
||||
</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>직원</th>
|
||||
<th>유형</th>
|
||||
<th class="text-center">총일수</th>
|
||||
<th class="text-center">사용</th>
|
||||
<th class="text-center">잔여</th>
|
||||
<th class="hide-mobile">메모</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="balancesBody">
|
||||
<tr><td colspan="6" class="text-center text-gray-400 py-8">로딩 중...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 승인/반려 모달 -->
|
||||
<div id="reviewModal" class="hidden modal-overlay" onclick="if(event.target===this)closeReview()">
|
||||
<div class="modal-content p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 id="reviewModalTitle" class="text-lg font-semibold">휴가 승인</h3>
|
||||
<button onclick="closeReview()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<div id="reviewDetail" class="text-sm mb-4"></div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">검토 메모</label>
|
||||
<textarea id="reviewNote" rows="2" class="input-field w-full px-3 py-2 rounded-lg resize-none" placeholder="메모 (선택)"></textarea>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4 gap-2">
|
||||
<button onclick="closeReview()" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">취소</button>
|
||||
<button id="reviewSubmitBtn" onclick="submitReview()" class="px-6 py-2 text-white rounded-lg text-sm font-medium">확인</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/tksupport-core.js?v=1"></script>
|
||||
<script>
|
||||
let reviewAction = '';
|
||||
let reviewRequestId = null;
|
||||
|
||||
async function initApprovalPage() {
|
||||
if (!initAuth()) return;
|
||||
if (!currentUser || !['admin','system'].includes(currentUser.role)) {
|
||||
document.querySelector('.flex-1').innerHTML = '<div class="bg-white rounded-xl shadow-sm p-8 text-center text-gray-500"><i class="fas fa-lock text-4xl mb-3 block"></i>관리자 권한이 필요합니다</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('allocYear').value = new Date().getFullYear();
|
||||
await loadDropdowns();
|
||||
loadPending();
|
||||
loadAllBalances();
|
||||
|
||||
document.getElementById('allocateForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const data = {
|
||||
user_id: parseInt(document.getElementById('allocUser').value),
|
||||
vacation_type_id: parseInt(document.getElementById('allocType').value),
|
||||
year: parseInt(document.getElementById('allocYear').value),
|
||||
total_days: parseFloat(document.getElementById('allocDays').value),
|
||||
notes: document.getElementById('allocNotes').value
|
||||
};
|
||||
try {
|
||||
await api('/vacation/balance/allocate', { method: 'POST', body: JSON.stringify(data) });
|
||||
showToast('잔여일이 배정되었습니다');
|
||||
document.getElementById('allocDays').value = '';
|
||||
document.getElementById('allocNotes').value = '';
|
||||
loadAllBalances();
|
||||
} catch (err) {
|
||||
showToast(err.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function loadDropdowns() {
|
||||
try {
|
||||
const [typesRes, usersRes] = await Promise.all([
|
||||
api('/vacation/types'),
|
||||
api('/vacation/users')
|
||||
]);
|
||||
const typeSel = document.getElementById('allocType');
|
||||
typesRes.data.forEach(t => {
|
||||
typeSel.innerHTML += `<option value="${t.id}">${escapeHtml(t.type_name)}</option>`;
|
||||
});
|
||||
const userSel = document.getElementById('allocUser');
|
||||
usersRes.data.forEach(u => {
|
||||
const hireMark = u.hire_date ? '' : ' (입사일 미등록)';
|
||||
userSel.innerHTML += `<option value="${u.user_id}">${escapeHtml(u.name || u.username)}${hireMark}</option>`;
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPending() {
|
||||
try {
|
||||
const res = await api('/vacation/pending');
|
||||
const data = res.data;
|
||||
document.getElementById('pendingCount').textContent = data.length;
|
||||
const tbody = document.getElementById('pendingBody');
|
||||
if (data.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="7" class="empty-state"><i class="fas fa-check-circle block text-green-400"></i>대기 중인 신청이 없습니다</td></tr>';
|
||||
return;
|
||||
}
|
||||
tbody.innerHTML = data.map(r => `
|
||||
<tr>
|
||||
<td class="font-medium">${escapeHtml(r.user_name || r.username)}</td>
|
||||
<td>${escapeHtml(r.vacation_type_name)}</td>
|
||||
<td class="whitespace-nowrap">${formatDate(r.start_date)}${r.start_date !== r.end_date ? ' ~ ' + formatDate(r.end_date) : ''}</td>
|
||||
<td class="text-center">${r.days_used}</td>
|
||||
<td class="hide-mobile max-w-[200px] truncate">${escapeHtml(r.reason || '-')}</td>
|
||||
<td class="hide-mobile text-gray-500 text-xs">${formatDate(r.created_at)}</td>
|
||||
<td class="text-right whitespace-nowrap">
|
||||
<button onclick="openReview(${r.request_id}, 'approve', '${escapeHtml(r.user_name || r.username)}', '${escapeHtml(r.vacation_type_name)}', '${formatDate(r.start_date)} ~ ${formatDate(r.end_date)}', ${r.days_used})" class="px-2.5 py-1 bg-green-500 text-white rounded text-xs hover:bg-green-600 mr-1">승인</button>
|
||||
<button onclick="openReview(${r.request_id}, 'reject', '${escapeHtml(r.user_name || r.username)}', '${escapeHtml(r.vacation_type_name)}', '${formatDate(r.start_date)} ~ ${formatDate(r.end_date)}', ${r.days_used})" class="px-2.5 py-1 bg-red-500 text-white rounded text-xs hover:bg-red-600">반려</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} catch (err) {
|
||||
showToast(err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAllRequests() {
|
||||
const status = document.getElementById('filterAllStatus').value;
|
||||
const params = status ? `?status=${status}` : '';
|
||||
try {
|
||||
const res = await api('/vacation/requests' + params);
|
||||
const data = res.data;
|
||||
const tbody = document.getElementById('allRequestsBody');
|
||||
if (data.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="7" class="empty-state">내역이 없습니다</td></tr>';
|
||||
return;
|
||||
}
|
||||
tbody.innerHTML = data.map(r => `
|
||||
<tr>
|
||||
<td class="font-medium">${escapeHtml(r.user_name || r.username)}</td>
|
||||
<td>${escapeHtml(r.vacation_type_name)}</td>
|
||||
<td class="whitespace-nowrap">${formatDate(r.start_date)}${r.start_date !== r.end_date ? ' ~ ' + formatDate(r.end_date) : ''}</td>
|
||||
<td class="text-center">${r.days_used}</td>
|
||||
<td>${statusBadge(r.status)}</td>
|
||||
<td class="hide-mobile text-gray-500 text-sm">${escapeHtml(r.reviewer_name || '-')}</td>
|
||||
<td class="text-right hide-mobile text-gray-500 text-xs">${formatDate(r.created_at)}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} catch (err) {
|
||||
showToast(err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAllBalances() {
|
||||
try {
|
||||
const year = new Date().getFullYear();
|
||||
const res = await api('/vacation/balance/all?year=' + year);
|
||||
const data = res.data;
|
||||
const tbody = document.getElementById('balancesBody');
|
||||
if (data.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="empty-state">배정된 잔여일이 없습니다</td></tr>';
|
||||
return;
|
||||
}
|
||||
tbody.innerHTML = data.map(b => `
|
||||
<tr>
|
||||
<td class="font-medium">${escapeHtml(b.user_name || b.username)}</td>
|
||||
<td>${escapeHtml(b.type_name)}</td>
|
||||
<td class="text-center">${b.total_days}</td>
|
||||
<td class="text-center">${b.used_days}</td>
|
||||
<td class="text-center font-bold ${parseFloat(b.remaining_days) <= 0 ? 'text-red-500' : 'text-purple-600'}">${b.remaining_days}</td>
|
||||
<td class="hide-mobile text-gray-500 text-sm max-w-[200px] truncate">${escapeHtml(b.notes || '-')}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} catch (err) {
|
||||
showToast(err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function switchTab(tab) {
|
||||
const tabs = ['pending', 'all', 'balance'];
|
||||
tabs.forEach(t => {
|
||||
const panel = document.getElementById('panel' + t.charAt(0).toUpperCase() + t.slice(1));
|
||||
const btn = document.getElementById('tab' + t.charAt(0).toUpperCase() + t.slice(1));
|
||||
if (t === tab) {
|
||||
panel.classList.remove('hidden');
|
||||
btn.className = 'flex-1 py-2.5 text-sm font-medium rounded-lg transition-colors bg-purple-600 text-white';
|
||||
} else {
|
||||
panel.classList.add('hidden');
|
||||
btn.className = 'flex-1 py-2.5 text-sm font-medium rounded-lg transition-colors text-gray-600 hover:bg-gray-100';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openReview(id, action, userName, typeName, dateRange, days) {
|
||||
reviewRequestId = id;
|
||||
reviewAction = action;
|
||||
const isApprove = action === 'approve';
|
||||
document.getElementById('reviewModalTitle').textContent = isApprove ? '휴가 승인' : '휴가 반려';
|
||||
document.getElementById('reviewDetail').innerHTML = `
|
||||
<div class="bg-gray-50 rounded-lg p-3 space-y-1">
|
||||
<div><span class="text-gray-500">신청자:</span> <strong>${userName}</strong></div>
|
||||
<div><span class="text-gray-500">유형:</span> ${typeName}</div>
|
||||
<div><span class="text-gray-500">기간:</span> ${dateRange} (${days}일)</div>
|
||||
</div>
|
||||
`;
|
||||
const btn = document.getElementById('reviewSubmitBtn');
|
||||
btn.className = `px-6 py-2 text-white rounded-lg text-sm font-medium ${isApprove ? 'bg-green-600 hover:bg-green-700' : 'bg-red-600 hover:bg-red-700'}`;
|
||||
btn.textContent = isApprove ? '승인' : '반려';
|
||||
document.getElementById('reviewNote').value = '';
|
||||
document.getElementById('reviewModal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeReview() { document.getElementById('reviewModal').classList.add('hidden'); }
|
||||
|
||||
async function submitReview() {
|
||||
const note = document.getElementById('reviewNote').value;
|
||||
try {
|
||||
await api(`/vacation/requests/${reviewRequestId}/${reviewAction}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({ review_note: note })
|
||||
});
|
||||
showToast(reviewAction === 'approve' ? '승인되었습니다' : '반려되었습니다');
|
||||
closeReview();
|
||||
loadPending();
|
||||
} catch (err) {
|
||||
showToast(err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
initApprovalPage();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
168
tksupport/web/vacation-request.html
Normal file
168
tksupport/web/vacation-request.html
Normal file
@@ -0,0 +1,168 @@
|
||||
<!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=1">
|
||||
</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">
|
||||
<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">
|
||||
<h2 class="text-base font-semibold text-gray-800 mb-3"><i class="fas fa-chart-pie text-purple-500 mr-2"></i>내 잔여일 현황</h2>
|
||||
<div id="hireDateWarning" class="hidden bg-amber-50 border border-amber-200 rounded-lg p-3 mb-3 text-sm text-amber-700">
|
||||
<i class="fas fa-exclamation-triangle mr-1"></i>입사일이 미등록되어 연차가 자동 계산되지 않습니다. 관리자에게 문의하세요.
|
||||
</div>
|
||||
<div id="balanceCards" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
<div class="text-center text-gray-400 py-4 col-span-full">로딩 중...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 신청 폼 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 mb-5">
|
||||
<h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-paper-plane text-purple-500 mr-2"></i>휴가 신청</h2>
|
||||
<form id="requestForm">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">휴가 유형 <span class="text-red-400">*</span></label>
|
||||
<select id="vacationType" class="input-field w-full px-3 py-2.5 rounded-lg" required>
|
||||
<option value="">선택하세요</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">사용일수 <span class="text-red-400">*</span></label>
|
||||
<input type="number" id="daysUsed" step="0.5" min="0.5" class="input-field w-full px-3 py-2.5 rounded-lg" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">시작일 <span class="text-red-400">*</span></label>
|
||||
<input type="date" id="startDate" class="input-field w-full px-3 py-2.5 rounded-lg" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">종료일 <span class="text-red-400">*</span></label>
|
||||
<input type="date" id="endDate" class="input-field w-full px-3 py-2.5 rounded-lg" required>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">사유</label>
|
||||
<textarea id="reason" rows="2" class="input-field w-full px-3 py-2.5 rounded-lg resize-none" placeholder="휴가 사유를 입력하세요 (선택사항)"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-5 gap-2">
|
||||
<a href="/" class="px-4 py-2.5 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">취소</a>
|
||||
<button type="submit" class="px-6 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium">
|
||||
<i class="fas fa-paper-plane mr-2"></i>신청하기
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/tksupport-core.js?v=1"></script>
|
||||
<script>
|
||||
async function initRequestPage() {
|
||||
if (!initAuth()) return;
|
||||
|
||||
try {
|
||||
const [typesRes, balanceRes] = await Promise.all([
|
||||
api('/vacation/types'),
|
||||
api('/vacation/balance')
|
||||
]);
|
||||
|
||||
// 휴가 유형 드롭다운
|
||||
const sel = document.getElementById('vacationType');
|
||||
typesRes.data.forEach(t => {
|
||||
sel.innerHTML += `<option value="${t.id}">${escapeHtml(t.type_name)}</option>`;
|
||||
});
|
||||
|
||||
// 잔여일 카드
|
||||
const balances = balanceRes.data.balances;
|
||||
const hireDate = balanceRes.data.hire_date;
|
||||
if (!hireDate) document.getElementById('hireDateWarning').classList.remove('hidden');
|
||||
|
||||
const container = document.getElementById('balanceCards');
|
||||
if (balances.length === 0) {
|
||||
container.innerHTML = '<div class="text-center text-gray-400 py-4 col-span-full">배정된 휴가가 없습니다</div>';
|
||||
} else {
|
||||
container.innerHTML = balances.map(b => `
|
||||
<div class="border rounded-lg p-3 text-center">
|
||||
<div class="text-xs text-gray-500 mb-1">${escapeHtml(b.type_name)}</div>
|
||||
<div class="text-xl font-bold text-purple-600">${b.remaining_days}</div>
|
||||
<div class="text-xs text-gray-400 mt-1">${b.used_days} / ${b.total_days} 사용</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
} catch (err) {
|
||||
showToast(err.message, 'error');
|
||||
}
|
||||
|
||||
// 날짜 기본값
|
||||
const today = new Date().toISOString().substring(0, 10);
|
||||
document.getElementById('startDate').value = today;
|
||||
document.getElementById('endDate').value = today;
|
||||
document.getElementById('daysUsed').value = '1';
|
||||
|
||||
document.getElementById('startDate').addEventListener('change', calcDays);
|
||||
document.getElementById('endDate').addEventListener('change', calcDays);
|
||||
|
||||
document.getElementById('requestForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const data = {
|
||||
vacation_type_id: parseInt(document.getElementById('vacationType').value),
|
||||
start_date: document.getElementById('startDate').value,
|
||||
end_date: document.getElementById('endDate').value,
|
||||
days_used: parseFloat(document.getElementById('daysUsed').value),
|
||||
reason: document.getElementById('reason').value
|
||||
};
|
||||
|
||||
if (!data.vacation_type_id) { showToast('휴가 유형을 선택하세요', 'error'); return; }
|
||||
|
||||
try {
|
||||
await api('/vacation/requests', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
showToast('휴가 신청이 완료되었습니다');
|
||||
setTimeout(() => { location.href = '/vacation-status.html'; }, 1000);
|
||||
} catch (err) {
|
||||
showToast(err.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function calcDays() {
|
||||
const s = document.getElementById('startDate').value;
|
||||
const e = document.getElementById('endDate').value;
|
||||
if (s && e) {
|
||||
const diff = Math.floor((new Date(e) - new Date(s)) / 86400000) + 1;
|
||||
if (diff > 0) document.getElementById('daysUsed').value = diff;
|
||||
}
|
||||
}
|
||||
|
||||
initRequestPage();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
195
tksupport/web/vacation-status.html
Normal file
195
tksupport/web/vacation-status.html
Normal file
@@ -0,0 +1,195 @@
|
||||
<!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=1">
|
||||
</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">
|
||||
<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">
|
||||
<h2 class="text-base font-semibold text-gray-800 mb-3"><i class="fas fa-chart-pie text-purple-500 mr-2"></i>잔여일 현황</h2>
|
||||
<div id="balanceCards" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
<div class="text-center text-gray-400 py-4 col-span-full">로딩 중...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 필터 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 mb-5">
|
||||
<div class="flex flex-wrap items-end gap-3 mb-4">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">상태</label>
|
||||
<select id="filterStatus" class="input-field px-3 py-2 rounded-lg text-sm">
|
||||
<option value="">전체</option>
|
||||
<option value="pending">대기</option>
|
||||
<option value="approved">승인</option>
|
||||
<option value="rejected">반려</option>
|
||||
<option value="cancelled">취소</option>
|
||||
</select>
|
||||
</div>
|
||||
<button onclick="loadRequests()" class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700">
|
||||
<i class="fas fa-search mr-1"></i>조회
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>유형</th>
|
||||
<th>기간</th>
|
||||
<th class="text-center">일수</th>
|
||||
<th class="hide-mobile">사유</th>
|
||||
<th>상태</th>
|
||||
<th class="hide-mobile">검토자</th>
|
||||
<th class="text-right">관리</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="requestsBody">
|
||||
<tr><td colspan="7" class="text-center text-gray-400 py-8">로딩 중...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 상세 모달 -->
|
||||
<div id="detailModal" class="hidden modal-overlay" onclick="if(event.target===this)closeDetail()">
|
||||
<div class="modal-content p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold">휴가 신청 상세</h3>
|
||||
<button onclick="closeDetail()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<div id="detailContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/tksupport-core.js?v=1"></script>
|
||||
<script>
|
||||
async function initStatusPage() {
|
||||
if (!initAuth()) return;
|
||||
|
||||
try {
|
||||
const balanceRes = await api('/vacation/balance');
|
||||
const balances = balanceRes.data.balances;
|
||||
const container = document.getElementById('balanceCards');
|
||||
if (balances.length === 0) {
|
||||
container.innerHTML = '<div class="text-center text-gray-400 py-4 col-span-full">배정된 휴가가 없습니다</div>';
|
||||
} else {
|
||||
container.innerHTML = balances.map(b => `
|
||||
<div class="border rounded-lg p-3 text-center">
|
||||
<div class="text-xs text-gray-500 mb-1">${escapeHtml(b.type_name)}</div>
|
||||
<div class="text-xl font-bold text-purple-600">${b.remaining_days}</div>
|
||||
<div class="text-xs text-gray-400 mt-1">${b.used_days} / ${b.total_days} 사용</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
loadRequests();
|
||||
}
|
||||
|
||||
async function loadRequests() {
|
||||
const status = document.getElementById('filterStatus').value;
|
||||
const params = status ? `?status=${status}` : '';
|
||||
try {
|
||||
const res = await api('/vacation/requests' + params);
|
||||
renderRequests(res.data);
|
||||
} catch (err) {
|
||||
showToast(err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function renderRequests(requests) {
|
||||
const tbody = document.getElementById('requestsBody');
|
||||
if (requests.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="7" class="empty-state"><i class="fas fa-calendar-times block"></i>신청 내역이 없습니다</td></tr>';
|
||||
return;
|
||||
}
|
||||
tbody.innerHTML = requests.map(r => `
|
||||
<tr>
|
||||
<td>${escapeHtml(r.vacation_type_name)}</td>
|
||||
<td class="whitespace-nowrap">${formatDate(r.start_date)}${r.start_date !== r.end_date ? '<br><span class="text-gray-400">~</span> ' + formatDate(r.end_date) : ''}</td>
|
||||
<td class="text-center">${r.days_used}</td>
|
||||
<td class="hide-mobile max-w-[200px] truncate">${escapeHtml(r.reason || '-')}</td>
|
||||
<td>${statusBadge(r.status)}</td>
|
||||
<td class="hide-mobile text-gray-500 text-sm">${escapeHtml(r.reviewer_name || '-')}</td>
|
||||
<td class="text-right whitespace-nowrap">
|
||||
<button onclick="showDetail(${r.request_id})" class="text-purple-600 hover:text-purple-800 text-sm mr-1" title="상세"><i class="fas fa-eye"></i></button>
|
||||
${r.status === 'pending' ? `<button onclick="cancelRequest(${r.request_id})" class="text-red-500 hover:text-red-700 text-sm" title="취소"><i class="fas fa-times-circle"></i></button>` : ''}
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
async function showDetail(id) {
|
||||
try {
|
||||
const res = await api('/vacation/requests/' + id);
|
||||
const r = res.data;
|
||||
document.getElementById('detailContent').innerHTML = `
|
||||
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||
<div><span class="text-gray-500">유형:</span> <strong>${escapeHtml(r.vacation_type_name)}</strong></div>
|
||||
<div><span class="text-gray-500">상태:</span> ${statusBadge(r.status)}</div>
|
||||
<div><span class="text-gray-500">시작일:</span> ${formatDate(r.start_date)}</div>
|
||||
<div><span class="text-gray-500">종료일:</span> ${formatDate(r.end_date)}</div>
|
||||
<div><span class="text-gray-500">사용일수:</span> ${r.days_used}일</div>
|
||||
<div><span class="text-gray-500">신청일:</span> ${formatDateTime(r.created_at)}</div>
|
||||
<div class="col-span-2"><span class="text-gray-500">사유:</span> ${escapeHtml(r.reason || '-')}</div>
|
||||
${r.reviewed_by ? `
|
||||
<div><span class="text-gray-500">검토자:</span> ${escapeHtml(r.reviewer_name || '-')}</div>
|
||||
<div><span class="text-gray-500">검토일:</span> ${formatDateTime(r.reviewed_at)}</div>
|
||||
<div class="col-span-2"><span class="text-gray-500">검토 메모:</span> ${escapeHtml(r.review_note || '-')}</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('detailModal').classList.remove('hidden');
|
||||
} catch (err) {
|
||||
showToast(err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function closeDetail() { document.getElementById('detailModal').classList.add('hidden'); }
|
||||
|
||||
async function cancelRequest(id) {
|
||||
if (!confirm('이 휴가 신청을 취소하시겠습니까?')) return;
|
||||
try {
|
||||
await api('/vacation/requests/' + id + '/cancel', { method: 'PATCH' });
|
||||
showToast('휴가 신청이 취소되었습니다');
|
||||
loadRequests();
|
||||
} catch (err) {
|
||||
showToast(err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
initStatusPage();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user