Amkor/Groupware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 휴가 신청 다이얼로그 개선 (관리자 상용구, UI 가시성, 색상 통일, 공통 알림 컴포넌트 추가)

Browse Source
This commit is contained in:
backuppc
2025-12-29 17:33:50 +09:00
parent 9d6b27fae4
commit d11a86b58d
6 changed files with 947 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Project/frontend/src/components/common/DevelopmentNotice.tsx Normal file
View File

@@ -0,0 +1,12 @@
export function DevelopmentNotice() {
return (
<div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4 flex items-center justify-center animate-pulse">
<span className="text-yellow-400 font-medium flex items-center gap-2">
<span className="text-xl">⚠️</span>
현재 개발중인 페이지입니다. 데이터가 정확하지 않을 수 있습니다.
</span>
</div>
);
}

802
Project/frontend/src/components/holiday/HolidayRequestDialog.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { X, Save, Calendar, Clock, MapPin, User, FileText, AlertCircle } from 'lucide-react';
import { comms } from '@/communication';
import { comms } from '../../communication';
import { DevelopmentNotice } from '../common/DevelopmentNotice';
import { HolidayRequest, CommonCode } from '@/types';
interface HolidayRequestDialogProps {
@@ -35,6 +36,7 @@ export function HolidayRequestDialog({
backup: []
});
const [users, setUsers] = useState<Array<{ id: string; name: string }>>([]);
const [adminComments, setAdminComments] = useState<CommonCode[]>([]); // Code 54
// Form State
const [formData, setFormData] = useState<HolidayRequest>({
@@ -59,7 +61,9 @@ export function HolidayRequestDialog({
sendmail: false
});
const [balanceMessage, setBalanceMessage] = useState('');
const [requestType, setRequestType] = useState<'day' | 'time' | 'out'>('day'); // day: 휴가, time: 대체, out: 외출
const isReadOnly = formData.conf === 1 && userLevel < 5;
useEffect(() => {
if (isOpen) {
@@ -67,9 +71,40 @@ export function HolidayRequestDialog({
if (userLevel >= 5) {
loadUsers();
}
if (initialData) {
setFormData({ ...initialData });
const confValue = initialData.conf;
const convertedConf = Number(initialData.conf ?? 0);
console.log('Dialog Debug:', {
initialData,
rawConf: confValue,
typeOfConf: typeof confValue,
convertedConf,
finalFormDataConf: convertedConf
});
setFormData({
idx: initialData.idx,
gcode: initialData.gcode || '',
uid: initialData.uid || currentUserId || '',
cate: initialData.cate || '',
sdate: initialData.sdate ? initialData.sdate.split('T')[0] : new Date().toISOString().split('T')[0],
edate: initialData.edate ? initialData.edate.split('T')[0] : new Date().toISOString().split('T')[0],
HolyDays: initialData.HolyDays || 0,
HolyTimes: initialData.HolyTimes || 0,
HolyReason: initialData.HolyReason || (initialData as any).holyReason || '',
HolyLocation: initialData.HolyLocation || (initialData as any).holyLocation || '',
HolyBackup: initialData.HolyBackup || (initialData as any).holyBackup || '',
Remark: initialData.Remark || (initialData as any).remark || '',
wuid: initialData.wuid || '',
wdate: initialData.wdate || '',
Response: initialData.Response || (initialData as any).response || '',
conf: convertedConf,
stime: initialData.stime || '09:00',
etime: initialData.etime || '18:00',
sendmail: initialData.sendmail || false,
conf_id: initialData.conf_id || '',
conf_time: initialData.conf_time || ''
});
// Determine request type based on data
if (initialData.cate === '외출') {
setRequestType('out');
@@ -106,21 +141,39 @@ export function HolidayRequestDialog({
}
}, [isOpen, initialData, currentUserId]);
// Handle ESC key
useEffect(() => {
const handleEsc = (e: KeyboardEvent) => {
if (isOpen && e.key === 'Escape') {
onClose();
}
};
window.addEventListener('keydown', handleEsc);
return () => window.removeEventListener('keydown', handleEsc);
}, [isOpen, onClose]);
const loadCodes = async () => {
try {
const [cateRes, reasonRes, locationRes, backupRes] = await Promise.all([
comms.getCommonList('50'),
comms.getCommonList('51'),
comms.getCommonList('52'),
comms.getCommonList('53')
]);
// Execute sequentially to avoid WebSocket response race conditions
const cateRes = await comms.getCommonList('50');
const reasonRes = await comms.getCommonList('51');
const locationRes = await comms.getCommonList('52');
const backupRes = await comms.getCommonList('53');
console.log('Fetched Common Codes:', {
cate: cateRes,
reason: reasonRes,
location: locationRes,
backup: backupRes
});
setCodes({
cate: cateRes || [],
reason: reasonRes || [],
location: locationRes || [],
backup: backupRes || []
});
// Set default category if new
if (!initialData && cateRes && cateRes.length > 0) {
setFormData(prev => ({ ...prev, cate: cateRes[0].svalue }));
@@ -145,12 +198,104 @@ export function HolidayRequestDialog({
}
};
useEffect(() => {
const fetchBalance = async () => {
// Only for new requests
if (formData.idx !== 0 || !isOpen || !formData.sdate || !formData.uid) return;
try {
const year = formData.sdate.substring(0, 4);
const response = await comms.getHolydayBalance(year, formData.uid);
// C# logic replication for message formatting
// [기준:YYYY-MM-DD] => [분류] N일 남음(N%사용), ...
const basedate = new Date(formData.sdate);
basedate.setDate(basedate.getDate() - 1);
const baseDateStr = basedate.toISOString().split('T')[0]; // Format manually if needed, but ISO YYYY-MM-DD ok
if (!response.Success || !response.Data) {
setBalanceMessage(`[기준:${baseDateStr}] => 등록된 근태자료가 없습니다`);
return;
}
const items: string[] = [];
response.Data.forEach(item => {
// Days
if (item.TotalGenDays !== 0 || item.TotalUseDays !== 0) { // Actually checks if Total != 0 or Remain != 0 in C#
const remain = item.TotalGenDays - item.TotalUseDays;
// C# checks: if (val[0] != "0" || val[2] != "0") (Total or Remain)
// Here checking Total != 0 is usually sufficient.
if (item.TotalGenDays > 0) {
const perc = (item.TotalUseDays / item.TotalGenDays) * 100;
items.push(`[${item.cate}] ${remain.toFixed(1)}일 남음(${perc.toFixed(1)}%사용)`);
}
}
// Times
if (item.TotalGenHours !== 0) {
const remain = item.TotalGenHours - item.TotalUseHours;
if (item.TotalGenHours > 0) {
const perc = (item.TotalUseHours / item.TotalGenHours) * 100;
items.push(`[${item.cate}] ${remain.toFixed(1)}시간 남음(${perc.toFixed(1)}%사용)`);
}
}
});
if (items.length === 0) {
setBalanceMessage(`[기준:${baseDateStr}] => 등록된 근태자료가 없습니다`);
} else {
setBalanceMessage(`[기준:${baseDateStr}] => ${items.join(',')}`);
}
} catch (error) {
console.error('Failed to fetch balance:', error);
}
};
fetchBalance();
}, [formData.sdate, formData.uid, formData.idx, isOpen]);
const handleTypeChange = (type: 'day' | 'time' | 'out') => {
setRequestType(type);
setFormData(prev => {
let newCate = prev.cate;
if (type === 'time') newCate = '대체';
else if (type === 'out') newCate = '외출';
// If switching back to 'day', we might want to reset cate if it was fixed to '대체' or '외출',
// or just leave it and let the user change it via Select.
// But typically '대체'/'외출' are not valid options for 'day' (general holiday).
// So let's reset to empty or first option if we have codes.
else if (prev.cate === '대체' || prev.cate === '외출') newCate = codes.cate[0]?.svalue || '';
return { ...prev, cate: newCate };
});
};
const handleSave = async () => {
// Validation
if (!formData.cate && requestType === 'day') {
alert('구분을 선택하세요.');
return;
}
if (requestType === 'day' && (!formData.HolyDays || formData.HolyDays <= 0)) {
alert('일수를 입력하세요.');
return;
}
if ((requestType === 'time' || requestType === 'out') && (!formData.HolyTimes || formData.HolyTimes <= 0)) {
alert('시간을 입력하세요.');
return;
}
if (requestType === 'out') {
if (!formData.stime) {
alert('시작 시간을 입력하세요.');
return;
}
if (!formData.etime) {
alert('종료 시간을 입력하세요.');
return;
}
}
if (formData.sdate > formData.edate) {
alert('종료일이 시작일보다 빠를 수 없습니다.');
return;
@@ -161,8 +306,7 @@ export function HolidayRequestDialog({
if (requestType === 'out') {
dataToSave.cate = '외출';
dataToSave.HolyDays = 0;
// Calculate times if needed, or rely on user input?
// WinForms doesn't seem to auto-calc times for 'out', just saves stime/etime.
// Calculate times if needed
} else if (requestType === 'time') {
dataToSave.cate = '대체';
dataToSave.HolyDays = 0;
@@ -171,15 +315,24 @@ export function HolidayRequestDialog({
dataToSave.HolyTimes = 0;
dataToSave.stime = '';
dataToSave.etime = '';
// Calculate days
const start = new Date(dataToSave.sdate);
const end = new Date(dataToSave.edate);
const diffTime = Math.abs(end.getTime() - start.getTime());
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
dataToSave.HolyDays = diffDays;
// dataToSave.HolyDays is already set from formData (manual input)
}
// New request specific handling
if (formData.idx === 0) {
// Validate Remark is not empty (as per user request)
if (!dataToSave.Remark || dataToSave.Remark.trim() === '') {
alert('비고를 입력해주세요');
return; // Needs to focus textarea but we can just return
}
// Append balance message if not already present (simplified check)
if (balanceMessage && !dataToSave.Remark.includes(balanceMessage)) {
dataToSave.Remark = dataToSave.Remark.trim() + '\r\n' + balanceMessage;
}
}
setLoading(true);
try {
const response = await comms.saveHolidayRequest(dataToSave);
@@ -199,303 +352,384 @@ export function HolidayRequestDialog({
if (!isOpen) return null;
const title = formData.idx === 0 ? '휴가/외출 신청' : '신청 내역 수정';
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
<div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-fade-in">
<div className="bg-[#1e1e2e] rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto border border-white/10">
{/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
<h2 className="text-xl font-bold text-gray-800">
{formData.idx === 0 ? '휴가/외출 신청' : '신청 내역 수정'}
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10 bg-white/5">
<h2 className="text-xl font-bold text-white flex items-center">
<Calendar className="w-5 h-5 mr-2 text-primary-400" />
{title}
</h2>
<button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
<X className="w-5 h-5 text-gray-500" />
<button onClick={onClose} className="text-white/50 hover:text-white transition-colors">
<X className="w-5 h-5" />
</button>
</div>
{/* 개발중 알림 */}
<div className="px-6 pt-6">
<DevelopmentNotice />
</div>
{/* Body */}
<div className="p-6 space-y-6">
{/* Request Type */}
<div className="flex gap-4 p-4 bg-gray-50 rounded-lg">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="type"
checked={requestType === 'day'}
onChange={() => setRequestType('day')}
className="w-4 h-4 text-blue-600"
disabled={formData.idx > 0 && initialData?.cate !== '대체' && initialData?.cate !== '외출'}
/>
<span className="font-medium text-gray-700">일반휴가</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="type"
checked={requestType === 'time'}
onChange={() => setRequestType('time')}
className="w-4 h-4 text-blue-600"
disabled={formData.idx > 0 && initialData?.cate !== '대체'}
/>
<span className="font-medium text-gray-700">대체휴가(시간)</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="type"
checked={requestType === 'out'}
onChange={() => setRequestType('out')}
className="w-4 h-4 text-blue-600"
disabled={formData.idx > 0 && initialData?.cate !== '외출'}
/>
<span className="font-medium text-gray-700">외출</span>
</label>
</div>
{/* User Selection (Admin only) */}
{userLevel >= 5 && (
<div className="grid grid-cols-1 gap-2">
<label className="text-sm font-medium text-gray-700 flex items-center gap-2">
<User className="w-4 h-4" /> 신청자
</label>
<select
value={formData.uid}
onChange={(e) => setFormData({ ...formData, uid: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
disabled={formData.idx > 0}
>
{users.map(user => (
<option key={user.id} value={user.id}>{user.name} ({user.id})</option>
))}
</select>
</div>
)}
{/* Date & Time */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700 flex items-center gap-2">
<Calendar className="w-4 h-4" /> 시작일
</label>
<input
type="date"
value={formData.sdate}
onChange={(e) => setFormData({ ...formData, sdate: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700 flex items-center gap-2">
<Calendar className="w-4 h-4" /> 종료일
</label>
<input
type="date"
value={formData.edate}
onChange={(e) => setFormData({ ...formData, edate: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
</div>
{(requestType === 'time' || requestType === 'out') && (
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700 flex items-center gap-2">
<Clock className="w-4 h-4" /> 시작 시간
</label>
<div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Left Column: Inputs */}
<div className="space-y-6">
{/* Request Type */}
<div className="flex gap-4 p-4 bg-white/5 rounded-lg border border-white/5">
<label className={`flex items-center gap-2 ${(isReadOnly || (formData.idx > 0 && initialData?.cate !== '대체' && initialData?.cate !== '외출')) ? 'cursor-not-allowed' : 'cursor-pointer'}`}>
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${requestType === 'day' ? 'border-green-400' : 'border-white/30'}`}>
{requestType === 'day' && <div className="w-2 h-2 rounded-full bg-green-400" />}
</div>
<input
type="time"
value={formData.stime}
onChange={(e) => setFormData({ ...formData, stime: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
type="radio"
name="type"
checked={requestType === 'day'}
onChange={() => handleTypeChange('day')}
className="hidden"
disabled={isReadOnly || (formData.idx > 0 && initialData?.cate !== '대체' && initialData?.cate !== '외출')}
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700 flex items-center gap-2">
<Clock className="w-4 h-4" /> 종료 시간
</label>
<input
type="time"
value={formData.etime}
onChange={(e) => setFormData({ ...formData, etime: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
</div>
)}
{/* Category & Reason */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700 flex items-center gap-2">
<FileText className="w-4 h-4" /> 구분
<span className="font-medium text-white/90">일반휴가</span>
</label>
{requestType === 'day' ? (
<label className={`flex items-center gap-2 ${(isReadOnly || (formData.idx > 0 && initialData?.cate !== '대체')) ? 'cursor-not-allowed' : 'cursor-pointer'}`}>
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${requestType === 'time' ? 'border-green-400' : 'border-white/30'}`}>
{requestType === 'time' && <div className="w-2 h-2 rounded-full bg-green-400" />}
</div>
<input
type="radio"
name="type"
checked={requestType === 'time'}
onChange={() => handleTypeChange('time')}
className="hidden"
disabled={isReadOnly || (formData.idx > 0 && initialData?.cate !== '대체')}
/>
<span className="font-medium text-white/90">대체휴가</span>
</label>
<label className={`flex items-center gap-2 ${isReadOnly ? 'cursor-not-allowed' : 'cursor-pointer'}`}>
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${requestType === 'out' ? 'border-green-400' : 'border-white/30'}`}>
{requestType === 'out' && <div className="w-2 h-2 rounded-full bg-green-400" />}
</div>
<input
type="radio"
name="type"
checked={requestType === 'out'}
onChange={() => handleTypeChange('out')}
className="hidden"
disabled={isReadOnly}
/>
<span className="font-medium text-white/90">외출</span>
</label>
</div>
{/* User Selection (Admin only) */}
{userLevel >= 5 && (
<div className="grid grid-cols-1 gap-2">
<label className="text-sm font-medium text-white/70 flex items-center gap-2">
<User className="w-4 h-4" /> 신청자
</label>
<select
value={formData.cate}
onChange={(e) => setFormData({ ...formData, cate: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
value={formData.uid}
onChange={(e) => setFormData({ ...formData, uid: e.target.value })}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400"
disabled={isReadOnly || formData.idx > 0}
>
{codes.cate.map(code => (
<option key={code.code} value={code.svalue}>{code.svalue}</option>
{users.map(user => (
<option key={user.id} value={user.id} className="bg-[#1e1e2e]">{user.name} ({user.id})</option>
))}
</select>
) : (
</div>
)}
{/* Date & Time */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium text-white/70 flex items-center gap-2">
<Calendar className="w-4 h-4" /> 시작일
</label>
<input
type="text"
value={requestType === 'out' ? '외출' : '대체'}
disabled
className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-100 text-gray-500"
type="date"
value={formData.sdate}
onChange={(e) => setFormData({ ...formData, sdate: e.target.value })}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:bg-white/10"
disabled={isReadOnly}
/>
)}
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700 flex items-center gap-2">
<AlertCircle className="w-4 h-4" /> 사유
</label>
<select
value={formData.HolyReason}
onChange={(e) => setFormData({ ...formData, HolyReason: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="">선택하세요</option>
{codes.reason.map(code => (
<option key={code.code} value={code.svalue}>{code.svalue}</option>
))}
</select>
</div>
</div>
{/* Location & Backup */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700 flex items-center gap-2">
<MapPin className="w-4 h-4" /> 행선지
</label>
<select
value={formData.HolyLocation}
onChange={(e) => setFormData({ ...formData, HolyLocation: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="">선택하세요</option>
{codes.location.map(code => (
<option key={code.code} value={code.svalue}>{code.svalue}</option>
))}
</select>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700 flex items-center gap-2">
<User className="w-4 h-4" /> 업무대행
</label>
<select
value={formData.HolyBackup}
onChange={(e) => setFormData({ ...formData, HolyBackup: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="">선택하세요</option>
{codes.backup.map(code => (
<option key={code.code} value={code.svalue}>{code.svalue}</option>
))}
</select>
</div>
</div>
{/* Days & Times (Manual Override) */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700">일수</label>
<input
type="number"
step="0.5"
value={formData.HolyDays}
onChange={(e) => setFormData({ ...formData, HolyDays: parseFloat(e.target.value) })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
disabled={requestType !== 'day'}
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700">시간</label>
<input
type="number"
step="0.5"
value={formData.HolyTimes}
onChange={(e) => setFormData({ ...formData, HolyTimes: parseFloat(e.target.value) })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
disabled={requestType === 'day'}
/>
</div>
</div>
{/* Remark */}
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700">비고</label>
<textarea
value={formData.Remark}
onChange={(e) => setFormData({ ...formData, Remark: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent h-20 resize-none"
/>
</div>
{/* Admin Response & Confirmation */}
{userLevel >= 5 && (
<div className="p-4 bg-blue-50 rounded-lg space-y-4 border border-blue-100">
<h3 className="font-semibold text-blue-800">관리자 승인</h3>
<div className="flex gap-4">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="conf"
checked={formData.conf === 0}
onChange={() => setFormData({ ...formData, conf: 0 })}
className="w-4 h-4 text-blue-600"
/>
<span className="text-gray-700">미승인</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="conf"
checked={formData.conf === 1}
onChange={() => setFormData({ ...formData, conf: 1 })}
className="w-4 h-4 text-green-600"
/>
<span className="text-gray-700">승인</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="conf"
checked={formData.conf === 2}
onChange={() => setFormData({ ...formData, conf: 2 })}
className="w-4 h-4 text-red-600"
/>
<span className="text-gray-700">반려</span>
</label>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-gray-700">관리자 메모</label>
<label className="text-sm font-medium text-white/70 flex items-center gap-2">
<Calendar className="w-4 h-4" /> 종료일
</label>
<input
type="text"
value={formData.Response}
onChange={(e) => setFormData({ ...formData, Response: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
type="date"
value={formData.edate}
onChange={(e) => setFormData({ ...formData, edate: e.target.value })}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:bg-white/10"
disabled={isReadOnly}
/>
</div>
</div>
)}
{/* Category & Reason */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium text-white/70 flex items-center gap-2">
<FileText className="w-4 h-4" /> 구분
</label>
{requestType === 'day' ? (
<select
value={formData.cate}
onChange={(e) => setFormData({ ...formData, cate: e.target.value })}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:bg-white/10"
disabled={isReadOnly}
>
{codes.cate.map(code => {
const val = code.memo || (code as any).Memo || code.svalue || (code as any).SValue || (code as any).value || (code as any).Value || (code as any).name || (code as any).Name;
const key = code.code || (code as any).Code || (code as any).key || (code as any).Key || val;
return (
<option key={key} value={val} className="bg-[#1e1e2e]">
{val}
</option>
);
})}
</select>
) : (
<input
type="text"
value={formData.cate}
readOnly
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white/50 cursor-not-allowed"
/>
)}
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-white/70 flex items-center gap-2">
<AlertCircle className="w-4 h-4" /> 사유
</label>
<input
type="text"
list="reason-list"
value={formData.HolyReason || ''}
onChange={(e) => setFormData({ ...formData, HolyReason: e.target.value })}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:bg-white/10"
placeholder="입력 또는 선택"
disabled={isReadOnly}
/>
<datalist id="reason-list">
{codes.reason.map(code => {
const val = code.memo || (code as any).Memo || code.svalue || (code as any).SValue || (code as any).value || (code as any).Value || (code as any).name || (code as any).Name;
const key = code.code || (code as any).Code || (code as any).key || (code as any).Key || val;
return (
<option key={key} value={val} />
);
})}
</datalist>
</div>
</div>
{/* Location & Backup */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium text-white/70 flex items-center gap-2">
<MapPin className="w-4 h-4" /> 행선지
</label>
<input
type="text"
list="location-list"
value={formData.HolyLocation || ''}
onChange={(e) => setFormData({ ...formData, HolyLocation: e.target.value })}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:bg-white/10"
placeholder="입력 또는 선택"
disabled={isReadOnly}
/>
<datalist id="location-list">
{codes.location.map(code => {
const val = code.memo || (code as any).Memo || code.svalue || (code as any).SValue || (code as any).value || (code as any).Value || (code as any).name || (code as any).Name;
const key = code.code || (code as any).Code || (code as any).key || (code as any).Key || val;
return (
<option key={key} value={val} />
);
})}
</datalist>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-white/70 flex items-center gap-2">
<User className="w-4 h-4" /> 업무대행
</label>
<input
type="text"
list="backup-list"
value={formData.HolyBackup || ''}
onChange={(e) => setFormData({ ...formData, HolyBackup: e.target.value })}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:bg-white/10"
placeholder="입력 또는 선택"
disabled={isReadOnly}
/>
<datalist id="backup-list">
{codes.backup.map(code => {
const val = code.memo || (code as any).Memo || code.svalue || (code as any).SValue || (code as any).value || (code as any).Value || (code as any).name || (code as any).Name;
const key = code.code || (code as any).Code || (code as any).key || (code as any).Key || val;
return (
<option key={key} value={val} />
);
})}
</datalist>
</div>
</div>
{/* Days & Times (Manual Override) */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium text-white/70">일수</label>
<input
type="number"
step="0.5"
value={formData.HolyDays}
onChange={(e) => setFormData({ ...formData, HolyDays: parseFloat(e.target.value) })}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:bg-white/10 disabled:text-white/30 disabled:cursor-not-allowed"
disabled={isReadOnly || requestType !== 'day'}
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-white/70">시간</label>
<input
type="number"
step="0.5"
value={formData.HolyTimes}
onChange={(e) => setFormData({ ...formData, HolyTimes: parseFloat(e.target.value) })}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:bg-white/10 disabled:text-white/30 disabled:cursor-not-allowed"
disabled={isReadOnly || requestType === 'day'}
/>
</div>
</div>
{/* Outing Time (Only for 'out') */}
{requestType === 'out' && (
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium text-white/70 flex items-center gap-2">
<Clock className="w-4 h-4" /> 시작 시간
</label>
<input
type="time"
value={formData.stime}
onChange={(e) => setFormData({ ...formData, stime: e.target.value })}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:bg-white/10"
disabled={isReadOnly}
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-white/70 flex items-center gap-2">
<Clock className="w-4 h-4" /> 종료 시간
</label>
<input
type="time"
value={formData.etime}
onChange={(e) => setFormData({ ...formData, etime: e.target.value })}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:bg-white/10"
disabled={isReadOnly}
/>
</div>
</div>
)}
</div>
{/* Right Column: Remark */}
<div className="md:col-span-1 h-full">
<div className="flex flex-col h-full space-y-2">
<label className="text-sm font-medium text-white/70">비고</label>
<textarea
value={formData.Remark}
onChange={(e) => setFormData({ ...formData, Remark: e.target.value })}
className="w-full flex-1 px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 resize-none min-h-[200px] disabled:bg-white/10"
placeholder="비고 사항을 입력하세요..."
disabled={isReadOnly}
/>
{/* Admin Response & Confirmation (Moved to Right) */}
<div className="p-4 bg-primary-500/10 rounded-lg space-y-4 border border-primary-500/20 mt-4">
<h3 className="font-semibold text-primary-400">관리자 승인</h3>
<div className="flex gap-4">
<label className={`flex items-center gap-2 ${userLevel < 5 ? 'cursor-not-allowed' : 'cursor-pointer'}`}>
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${formData.conf === 0 ? 'border-primary-400' : 'border-white/30'}`}>
{formData.conf === 0 && <div className="w-2 h-2 rounded-full bg-primary-400" />}
</div>
<input
type="radio"
name="conf"
checked={formData.conf === 0}
onChange={() => setFormData({ ...formData, conf: 0 })}
className="hidden"
disabled={userLevel < 5}
/>
<span className="text-white/70">미승인</span>
</label>
<label className={`flex items-center gap-2 ${userLevel < 5 ? 'cursor-not-allowed' : 'cursor-pointer'}`}>
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${formData.conf === 1 ? 'border-green-400' : 'border-white/30'}`}>
{formData.conf === 1 && <div className="w-2 h-2 rounded-full bg-green-400" />}
</div>
<input
type="radio"
name="conf"
checked={formData.conf === 1}
onChange={() => setFormData({ ...formData, conf: 1 })}
className="hidden"
disabled={userLevel < 5}
/>
<span className="text-white/70">승인</span>
</label>
<label className={`flex items-center gap-2 ${userLevel < 5 ? 'cursor-not-allowed' : 'cursor-pointer'}`}>
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${formData.conf === 2 ? 'border-red-400' : 'border-white/30'}`}>
{formData.conf === 2 && <div className="w-2 h-2 rounded-full bg-red-400" />}
</div>
<input
type="radio"
name="conf"
checked={formData.conf === 2}
onChange={() => setFormData({ ...formData, conf: 2 })}
className="hidden"
disabled={userLevel < 5}
/>
<span className="text-white/70">반려</span>
</label>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-white/70">관리자 메모</label>
<input
type="text"
list="adminCommentsList"
value={formData.Response}
onChange={(e) => setFormData({ ...formData, Response: e.target.value })}
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:bg-white/10"
disabled={userLevel < 5}
/>
<datalist id="adminCommentsList">
{adminComments.map((item) => (
<option key={(item as any).code || (item as any).Code} value={(item as any).memo || (item as any).Memo || (item as any).svalue || (item as any).SValue} />
))}
</datalist>
</div>
</div>
</div>
</div>
</div>
{/* Footer */}
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-100 bg-gray-50 rounded-b-xl">
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-white/10 bg-white/5">
<button
onClick={onClose}
className="px-4 py-2 text-gray-600 hover:bg-gray-200 rounded-lg transition-colors font-medium"
className="px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 rounded-lg transition-colors font-medium"
>
취소
</button>
<button
onClick={handleSave}
disabled={loading}
className="flex items-center gap-2 px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-lg shadow-blue-500/30 transition-all font-medium disabled:opacity-50"
disabled={loading || isReadOnly}
className="flex items-center gap-2 px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg shadow-lg shadow-primary-500/30 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed"
>
<Save className="w-4 h-4" />
{loading ? '저장 중...' : '저장'}

481
Project/frontend/src/pages/HolidayRequest.tsx
View File

@@ -1,8 +1,19 @@
import { useState, useEffect, useCallback } from 'react';
import { Calendar, Search, User, RefreshCw, ChevronLeft, ChevronRight, Plus } from 'lucide-react';
import {
Calendar,
Search,
User,
RefreshCw,
ChevronLeft,
ChevronRight,
Plus,
CheckCircle,
AlertCircle,
} from 'lucide-react';
import { comms } from '../communication';
import { HolidayRequest, HolidayRequestSummary } from '../types';
import { HolidayRequestDialog } from '../components/holiday/HolidayRequestDialog';
import { DevelopmentNotice } from '@/components/common/DevelopmentNotice';
export default function HolidayRequestPage() {
const [loading, setLoading] = useState(false);
@@ -11,8 +22,10 @@ export default function HolidayRequestPage() {
ApprovedDays: 0,
ApprovedTimes: 0,
PendingDays: 0,
PendingDays: 0,
PendingTimes: 0
});
const [balance, setBalance] = useState({ days: 0, times: 0 });
// 필터 상태
const [startDate, setStartDate] = useState('');
@@ -23,7 +36,7 @@ export default function HolidayRequestPage() {
const [currentUserName, setCurrentUserName] = useState('');
// 사용자 목록
const [users, setUsers] = useState<Array<{id: string, name: string}>>([]);
const [users, setUsers] = useState<Array<{ id: string, name: string }>>([]);
// Dialog State
const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -99,12 +112,12 @@ export default function HolidayRequestPage() {
const loadData = useCallback(async () => {
if (!startDate || !endDate) return;
setLoading(true);
try {
const userId = userLevel < 5 ? currentUserId : selectedUserId;
const response = await comms.getHolidayRequestList(startDate, endDate, userId, userLevel);
if (response.Success && response.Data) {
setRequests(response.Data);
// Summary는 별도 필드로 올 수 있음
@@ -113,6 +126,26 @@ export default function HolidayRequestPage() {
setSummary(data.Summary);
}
}
// Fetch Balance
// If viewing all, show current user's balance. If viewing specific user, show that user's balance.
const targetUid = userId === '%' ? currentUserId : userId;
if (targetUid) {
const year = startDate.substring(0, 4);
const balanceResp = await comms.getHolydayBalance(year, targetUid);
if (balanceResp.Success && balanceResp.Data) {
let d = 0, t = 0;
balanceResp.Data.forEach(item => {
d += (item.TotalGenDays - item.TotalUseDays);
t += (item.TotalGenHours - item.TotalUseHours);
});
setBalance({ days: d, times: t });
} else {
setBalance({ days: 0, times: 0 });
}
}
} catch (error) {
console.error('Failed to load holiday requests:', error);
alert('데이터를 불러오는 중 오류가 발생했습니다.');
@@ -127,10 +160,10 @@ export default function HolidayRequestPage() {
current.setMonth(current.getMonth() + offset);
const year = current.getFullYear();
const month = current.getMonth();
const newStart = new Date(year, month, 1);
const newEnd = new Date(year, month + 1, 0);
setStartDate(formatDate(newStart));
setEndDate(formatDate(newEnd));
};
@@ -151,224 +184,280 @@ export default function HolidayRequestPage() {
return conf === 1 ? '승인' : '미승인';
};
// 카운팅: 미래 휴가 (예정일 + 건수)
const scheduledStats = requests.reduce((acc, req) => {
if (!req.sdate) return acc;
const today = new Date();
today.setHours(0, 0, 0, 0);
const startDate = new Date(req.sdate);
// 오늘 이후에 시작하는 휴가
if (startDate > today) {
return {
count: acc.count + 1,
days: acc.days + (req.HolyDays || 0)
};
}
return acc;
}, { count: 0, days: 0 });
const isFuture = (dateStr?: string) => {
if (!dateStr) return false;
const today = new Date();
today.setHours(0, 0, 0, 0);
const startDate = new Date(dateStr);
return startDate > today;
};
return (
<div className="flex flex-col h-full bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50">
{/* 헤더 */}
<div className="glass-effect-solid border-b border-white/20">
<div className="flex items-center justify-between px-6 py-4">
<div className="flex items-center space-x-3">
<div className="p-2 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg">
<Calendar className="w-5 h-5 text-white" />
</div>
<div>
<h1 className="text-xl font-bold text-white">휴가/외출 신청</h1>
<p className="text-sm text-white/70">Holiday Request Management</p>
</div>
</div>
<div className="flex items-center gap-2">
<button
onClick={() => {
setSelectedRequest(null);
setIsDialogOpen(true);
}}
className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-all shadow-lg hover:shadow-blue-500/30"
>
<Plus className="w-4 h-4" />
<span className="text-sm font-medium">신청</span>
</button>
<button
onClick={loadData}
disabled={loading}
className="flex items-center gap-2 px-4 py-2 glass-effect-solid hover:bg-white/20 rounded-lg transition-all text-white disabled:opacity-50"
>
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
<span className="text-sm font-medium">새로고침</span>
</button>
</div>
</div>
</div>
<div className="space-y-6 animate-fade-in">
<div className="max-w-[1920px] mx-auto space-y-6">
<DevelopmentNotice />
{/* 상단 컨트롤 바 */}
<div className="glass-effect rounded-2xl p-6">
<div className="flex flex-col space-y-4">
{/* 필터 영역 */}
<div className="glass-effect-solid border-b border-white/20">
<div className="px-6 py-4">
<div className="flex items-center gap-4 flex-wrap">
{/* 월 이동 버튼 */}
<div className="flex items-center gap-2">
<button
onClick={() => moveMonth(-1)}
className="p-2 glass-effect hover:bg-white/30 rounded-lg transition-all"
>
<ChevronLeft className="w-4 h-4 text-white" />
</button>
<div className="flex items-center gap-2">
<Calendar className="w-4 h-4 text-white/80" />
<input
type="date"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
className="px-3 py-2 glass-effect text-white text-sm rounded-lg focus:ring-2 focus:ring-blue-400/50 focus:outline-none"
/>
<span className="text-white/60">~</span>
<input
type="date"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
className="px-3 py-2 glass-effect text-white text-sm rounded-lg focus:ring-2 focus:ring-blue-400/50 focus:outline-none"
/>
</div>
<button
onClick={() => moveMonth(1)}
className="p-2 glass-effect hover:bg-white/30 rounded-lg transition-all"
>
<ChevronRight className="w-4 h-4 text-white" />
</button>
</div>
{/* 담당자 선택 (레벨 5 이상만) */}
{userLevel >= 5 && (
<div className="flex items-center gap-2">
<User className="w-4 h-4 text-white/80" />
<select
value={selectedUserId}
onChange={(e) => setSelectedUserId(e.target.value)}
className="px-3 py-2 glass-effect text-white text-sm rounded-lg focus:ring-2 focus:ring-blue-400/50 focus:outline-none"
<div className="flex flex-col md:flex-row gap-4 items-end md:items-center justify-between">
{/* Date Move & Pick */}
<div className="flex items-center gap-2 w-full md:w-auto">
<button
onClick={() => moveMonth(-1)}
className="p-2 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors"
title="이전 달"
>
{users.map(user => (
<option key={user.id} value={user.id}>{user.name}</option>
))}
</select>
</div>
)}
<ChevronLeft className="w-5 h-5" />
</button>
{/* 조회 버튼 */}
<button
onClick={loadData}
disabled={loading}
className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white text-sm font-medium rounded-lg shadow-lg transition-all disabled:opacity-50"
>
<Search className="w-4 h-4" />
조회
</button>
<div className="grid grid-cols-2 gap-2">
<input
type="date"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
className="bg-white/20 border border-white/30 rounded-lg px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 text-sm"
/>
<input
type="date"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
className="bg-white/20 border border-white/30 rounded-lg px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 text-sm"
/>
</div>
<button
onClick={() => moveMonth(1)}
className="p-2 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors"
title="다음 달"
>
<ChevronRight className="w-5 h-5" />
</button>
</div>
{/* User Select (Manager) */}
{userLevel >= 5 && (
<div className="w-full md:w-64">
<div className="relative">
<User className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-white/50" />
<select
value={selectedUserId}
onChange={(e) => setSelectedUserId(e.target.value)}
className="w-full bg-white/20 border border-white/30 rounded-lg pl-10 pr-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 appearance-none"
>
{users.map(user => (
<option key={user.id} value={user.id} className="bg-[#1e1e2e]">{user.name}</option>
))}
</select>
</div>
</div>
)}
{/* Buttons */}
<div className="flex gap-2 w-full md:w-auto">
{/* Refresh / Search */}
<button
onClick={loadData}
disabled={loading}
className="flex-1 md:flex-none bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-lg transition-colors flex items-center justify-center disabled:opacity-50"
>
{loading ? <RefreshCw className="w-4 h-4 mr-2 animate-spin" /> : <Search className="w-4 h-4 mr-2" />}
조회
</button>
{/* Add Request */}
<button
onClick={() => {
setSelectedRequest(null);
setIsDialogOpen(true);
}}
className="flex-1 md:flex-none bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center justify-center"
>
<Plus className="w-4 h-4 mr-2" />
신청
</button>
</div>
</div>
</div>
{/* 합계 표시 */}
<div className="mt-4 flex gap-6 text-sm">
<div className="glass-effect px-4 py-2 rounded-lg">
<span className="font-medium text-white/90">합계(일) = </span>
<span className="text-blue-300 font-semibold">승인: {summary.ApprovedDays}</span>
<span className="mx-1 text-white/60">/</span>
<span className={summary.PendingDays === 0 ? 'text-white/90' : 'text-red-400 font-semibold'}>
미승인: {summary.PendingDays}
</span>
</div>
<div className="glass-effect px-4 py-2 rounded-lg">
<span className="font-medium text-white/90">합계(시간) = </span>
<span className="text-blue-300 font-semibold">승인: {summary.ApprovedTimes}</span>
<span className="mx-1 text-white/60">/</span>
<span className={summary.PendingTimes === 0 ? 'text-white/90' : 'text-red-400 font-semibold'}>
미승인: {summary.PendingTimes}
</span>
</div>
<div className="border-t border-white/10 my-4"></div>
{/* Summary Stats Cards (Merged) */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<StatCard
title="휴가 예정"
value={`${scheduledStats.count}건 (${scheduledStats.days}일)`}
icon={<Calendar className="w-6 h-6 text-blue-400" />}
color={scheduledStats.count > 0 ? "text-blue-400" : "text-white/50"}
/>
<StatCard
title="휴가 잔량 (일)"
value={`${balance.days.toFixed(1)}일`}
icon={<RefreshCw className="w-6 h-6 text-green-400" />}
color="text-green-400"
/>
<StatCard
title="휴가 잔량 (시간)"
value={`${balance.times.toFixed(1)}시간`}
icon={<RefreshCw className="w-6 h-6 text-purple-400" />}
color="text-purple-400"
/>
</div>
</div>
</div>
{/* 테이블 */}
<div className="flex-1 overflow-auto px-6 py-4">
<div className="glass-effect-solid rounded-xl overflow-hidden">
{/* List Table */}
<div className="glass-effect rounded-2xl overflow-hidden">
<div className="px-6 py-4 border-b border-white/10 flex justify-between items-center">
<h3 className="text-lg font-semibold text-white">신청 내역</h3>
<span className="text-white/50 text-sm">
총 {requests.length}건
</span>
</div>
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-white/10">
<th className="px-4 py-3 text-left font-semibold text-white/90">No</th>
<th className="px-4 py-3 text-left font-semibold text-white/90">신청일</th>
<th className="px-4 py-3 text-left font-semibold text-white/90">부서</th>
<th className="px-4 py-3 text-left font-semibold text-white/90">신청자</th>
<th className="px-4 py-3 text-left font-semibold text-white/90">종류</th>
<th className="px-4 py-3 text-left font-semibold text-white/90">시작일</th>
<th className="px-4 py-3 text-left font-semibold text-white/90">종료일</th>
<th className="px-4 py-3 text-center font-semibold text-white/90">일수</th>
<th className="px-4 py-3 text-center font-semibold text-white/90">시간</th>
<th className="px-4 py-3 text-left font-semibold text-white/90">사유</th>
<th className="px-4 py-3 text-center font-semibold text-white/90">승인</th>
<table className="w-full">
<thead className="bg-white/10">
<tr>
<th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase w-[50px]">No</th>
{/* <th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase">부서</th> <- Removed */}
<th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase w-[100px]">신청자</th>
<th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase w-[80px]">종류</th>
<th className="px-4 py-3 text-center text-xs font-medium text-white/70 uppercase w-[80px]">상태</th>
<th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase w-[140px]">시작일</th>
<th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase w-[140px]">종료일</th>
<th className="px-4 py-3 text-center text-xs font-medium text-white/70 uppercase w-[60px]">일수</th>
<th className="px-4 py-3 text-center text-xs font-medium text-white/70 uppercase w-[60px]">시간</th>
<th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase w-[100px]">행선지</th>
<th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase">사유</th>
</tr>
</thead>
<tbody>
<tbody className="divide-y divide-white/10">
{loading ? (
<tr>
<td colSpan={11} className="px-4 py-12 text-center">
<div className="flex items-center justify-center gap-3">
<RefreshCw className="w-5 h-5 text-blue-400 animate-spin" />
<span className="text-white/60">데이터를 불러오는 중...</span>
<td colSpan={10} className="px-4 py-8 text-center bg-transparent">
<div className="flex items-center justify-center">
<RefreshCw className="w-5 h-5 mr-2 animate-spin text-white/50" />
<span className="text-white/50">데이터를 불러오는 중...</span>
</div>
</td>
</tr>
) : requests.length === 0 ? (
<tr>
<td colSpan={11} className="px-4 py-12 text-center">
<div className="flex flex-col items-center justify-center gap-3">
<Calendar className="w-12 h-12 text-white/30" />
<span className="text-white/60">조회된 데이터가 없습니다.</span>
</div>
<td colSpan={9} className="px-4 py-8 text-center text-white/50 bg-transparent">
조회된 데이터가 없습니다.
</td>
</tr>
) : (
requests.map((req, index) => (
<tr
key={req.idx}
className="border-b border-white/5 hover:bg-white/5 transition-colors cursor-pointer"
onClick={() => {
setSelectedRequest(req);
setIsDialogOpen(true);
}}
>
<td className="px-4 py-3 text-white/70">{index + 1}</td>
<td className="px-4 py-3 text-white/90">{formatDateShort(req.wdate)}</td>
<td className="px-4 py-3 text-white/80">{req.dept || ''}</td>
<td className="px-4 py-3 text-white font-medium">{req.name || ''}</td>
<td className="px-4 py-3">
<span className="px-2 py-1 bg-blue-500/20 text-blue-300 rounded text-xs font-medium">
{getCategoryName(req.cate)}
</span>
</td>
<td className="px-4 py-3 text-white/90">{formatDateShort(req.sdate)}</td>
<td className="px-4 py-3 text-white/90">{formatDateShort(req.edate)}</td>
<td className="px-4 py-3 text-center text-white/90">{req.HolyDays || 0}</td>
<td className="px-4 py-3 text-center text-white/90">{req.HolyTimes || 0}</td>
<td className="px-4 py-3 text-white/70 max-w-xs truncate" title={req.HolyReason || ''}>
{req.HolyReason || '-'}
</td>
<td className="px-4 py-3 text-center">
<span className={`px-2 py-1 rounded text-xs font-semibold ${
req.conf === 1
? 'bg-green-500/20 text-green-300'
: 'bg-red-500/20 text-red-300'
}`}>
{getConfirmStatusText(req.conf)}
</span>
</td>
</tr>
))
requests.map((req, index) => {
// 미래 휴가 배경색 처리
const isFutureRequest = isFuture(req.sdate);
const rowClass = isFutureRequest
? "bg-blue-500/10 hover:bg-blue-500/20 transition-colors cursor-pointer"
: "hover:bg-white/5 transition-colors cursor-pointer";
return (
<tr
key={req.idx}
className={rowClass}
onClick={() => {
setSelectedRequest(req);
setIsDialogOpen(true);
}}
>
<td className="px-4 py-3 text-white/50 text-sm">{index + 1}</td>
{/* <td className="px-4 py-3 text-white/70 text-sm">{req.dept || '-'}</td> <- Removed */}
<td className="px-4 py-3 text-white text-sm font-medium">{req.name || '-'}</td>
<td className="px-4 py-3 text-sm">
<span className={`px-2 py-1 rounded text-xs ${req.cate === '1' ? 'bg-primary-500/20 text-primary-300' : // 연차
req.cate === '2' ? 'bg-blue-500/20 text-blue-300' : // 반차
req.cate === '5' ? 'bg-yellow-500/20 text-yellow-300' : // 외출
'bg-white/10 text-white/70'
}`}>
{getCategoryName(req.cate)}
</span>
</td>
<td className="px-4 py-3 text-center">
<span className={`px-2 py-1 rounded text-xs font-semibold ${req.conf === 1
? 'bg-success-500/20 text-success-300'
: 'bg-danger-500/20 text-danger-300'
}`}>
{getConfirmStatusText(req.conf)}
</span>
</td>
<td className="px-4 py-3 text-white text-sm">
{formatDateShort(req.sdate)}
{isFutureRequest && <span className="ml-2 text-[10px] bg-blue-500 text-white px-1.5 py-0.5 rounded-full">예정</span>}
</td>
<td className="px-4 py-3 text-white text-sm">{formatDateShort(req.edate)}</td>
<td className="px-4 py-3 text-center text-white text-sm">{req.HolyDays || 0}</td>
<td className="px-4 py-3 text-center text-white text-sm">{req.HolyTimes || 0}</td>
<td className="px-4 py-3 text-white text-sm max-w-[150px] truncate">{req.HolyLocation || '-'}</td>
<td className="px-4 py-3 text-white/70 text-sm max-w-xs truncate" title={req.HolyReason || ''}>
{req.HolyReason || '-'}
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
</div>
</div>
{/* 다이얼로그 */}
<HolidayRequestDialog
isOpen={isDialogOpen}
onClose={() => setIsDialogOpen(false)}
onSave={() => {
setIsDialogOpen(false);
loadData();
}}
initialData={selectedRequest}
currentUserName={currentUserName}
currentUserId={currentUserId}
userLevel={userLevel}
/>
{/* 다이얼로그 */}
<HolidayRequestDialog
isOpen={isDialogOpen}
onClose={() => setIsDialogOpen(false)}
onSave={() => {
setIsDialogOpen(false);
loadData();
}}
initialData={selectedRequest}
currentUserName={currentUserName}
currentUserId={currentUserId}
userLevel={userLevel}
/>
</div > </div >
);
}
// 통계 카드 컴포넌트 (Local)
interface StatCardProps {
title: string;
value: string | number;
icon: React.ReactNode;
color: string;
}
function StatCard({ title, value, icon, color }: StatCardProps) {
return (
<div className="glass-effect rounded-xl p-4 card-hover">
<div className="flex items-center">
<div className={`p-3 rounded-lg ${color.replace('text-', 'bg-').replace('-400', '-500/20')}`}>
{icon}
</div>
<div className="ml-4">
<p className="text-sm font-medium text-white/70">{title}</p>
<p className={`text-xl font-bold ${color}`}>{value}</p>
</div>
</div>
</div>
);
}

42
Project/frontend/src/pages/Jobreport.tsx
View File

@@ -37,7 +37,7 @@ export function Jobreport() {
// 페이징 상태
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 10;
const pageSize = 30;
// 권한 상태
const [canViewOT, setCanViewOT] = useState(false);
@@ -82,17 +82,17 @@ export function Jobreport() {
try {
const now = new Date();
const todayStr = formatDateLocal(now);
// 15일 전 날짜 계산
const fifteenDaysAgoDate = new Date(now);
fifteenDaysAgoDate.setDate(now.getDate() - 15);
const fifteenDaysAgoStr = formatDateLocal(fifteenDaysAgoDate);
const response = await comms.getJobReportList(fifteenDaysAgoStr, todayStr, userId, '');
if (response.Success && response.Data) {
const dailyWork: { [key: string]: number } = {};
// 날짜별 시간 합계 계산
response.Data.forEach((item: JobReportItem) => {
if (item.pdate) {
@@ -102,22 +102,22 @@ export function Jobreport() {
});
const insufficientDays: { date: string; hrs: number }[] = [];
// 어제부터 15일 전까지 확인 (오늘은 제외)
for (let i = 1; i <= 15; i++) {
const d = new Date(now);
d.setDate(now.getDate() - i);
const dStr = formatDateLocal(d);
// 주말(토:6, 일:0) 제외
if (d.getDay() === 0 || d.getDay() === 6) continue;
const d = new Date(now);
d.setDate(now.getDate() - i);
const dStr = formatDateLocal(d);
const hrs = dailyWork[dStr] || 0;
if (hrs < 8) {
insufficientDays.push({ date: dStr, hrs });
}
// 주말(토:6, 일:0) 제외
if (d.getDay() === 0 || d.getDay() === 6) continue;
const hrs = dailyWork[dStr] || 0;
if (hrs < 8) {
insufficientDays.push({ date: dStr, hrs });
}
}
setUnregisteredJobReportCount(insufficientDays.length);
setUnregisteredJobReportDays(insufficientDays);
}
@@ -599,7 +599,7 @@ export function Jobreport() {
{/* 미등록 업무일지 카드 */}
<div className="flex-shrink-0 w-40">
<div
<div
className="bg-white/10 rounded-xl p-4 h-full flex flex-col justify-center cursor-pointer hover:bg-white/20 transition-colors"
onClick={() => setShowUnregisteredModal(true)}
>
@@ -678,7 +678,7 @@ export function Jobreport() {
key={item.idx}
className="hover:bg-white/5 transition-colors"
>
<td
<td
className="px-2 py-3 text-center cursor-pointer hover:bg-primary-500/10 transition-colors"
onClick={(e) => openCopyModal(item, e)}
title="복사하여 새로 작성"
@@ -818,12 +818,12 @@ export function Jobreport() {
<X className="w-5 h-5" />
</button>
</div>
<div className="p-6 max-h-[60vh] overflow-y-auto">
<p className="text-white/70 text-sm mb-4">
최근 15일(평일 기준) 중 8시간 미만 등록된 날짜입니다.
</p>
{unregisteredJobReportDays.length === 0 ? (
<div className="text-center py-8 text-white/50">
미등록 내역이 없습니다.
@@ -849,7 +849,7 @@ export function Jobreport() {
</div>
)}
</div>
<div className="px-6 py-4 border-t border-white/10 bg-white/5 flex justify-end">
<button
onClick={() => setShowUnregisteredModal(false)}

4
Project/frontend/src/pages/Kuntae.tsx
View File

@@ -18,6 +18,7 @@ import {
import { comms } from '@/communication';
import { KuntaeModel, HolydayPermission, HolydayUser, HolydayBalance } from '@/types';
import { KuntaeEditModal, KuntaeFormData } from '@/components/kuntae/KuntaeEditModal';
import { DevelopmentNotice } from '@/components/common/DevelopmentNotice';
export function Kuntae() {
const [kuntaeList, setKuntaeList] = useState<KuntaeModel[]>([]);
@@ -234,6 +235,9 @@ export function Kuntae() {
return (
<div className="space-y-6 animate-fade-in">
{/* 개발중 알림 */}
<DevelopmentNotice />
{/* 상단 컨트롤 바 */}
<div className="glass-effect rounded-2xl p-6">
<div className="flex flex-col space-y-4">

212
Project/frontend/src/pages/Project.tsx
View File

@@ -15,6 +15,7 @@ import {
import { comms } from '@/communication';
import { ProjectListItem, ProjectListResponse } from '@/types';
import { ProjectDetailDialog } from '@/components/project';
import { DevelopmentNotice } from '@/components/common/DevelopmentNotice';
import clsx from 'clsx';
// 상태별 색상 매핑
@@ -244,7 +245,7 @@ export function Project() {
// 히스토리 저장
const saveHistory = async () => {
if (!editingHistory) return;
try {
const historyData = {
idx: editingHistory.idx || 0,
@@ -253,9 +254,9 @@ export function Project() {
progress: editingHistory.progress || 0,
remark: editRemark,
};
const result = await comms.saveProjectHistory(historyData);
if (result.Success) {
// 저장 성공 후 히스토리 다시 로드
const historyResult = await comms.getProjectHistory(editingHistory.pidx);
@@ -265,7 +266,7 @@ export function Project() {
} else {
alert(result.Message || '저장에 실패했습니다.');
}
setEditingHistory(null);
setEditRemark('');
} catch (error) {
@@ -294,7 +295,10 @@ export function Project() {
};
return (
<div className="p-4 space-y-4">
<div className="p-4 space-y-4 relative">
{/* 개발중 알림 */}
<DevelopmentNotice />
{/* 헤더 */}
<div className="glass-effect rounded-xl p-4">
<div className="flex items-center justify-between mb-4">
@@ -321,11 +325,10 @@ export function Project() {
<button
key={status}
onClick={() => toggleStatus(status)}
className={`px-3 py-1 rounded-lg text-sm transition-all ${
checked
? `${statusColors[status]?.bg || 'bg-white/20'} ${statusColors[status]?.text || 'text-white'} font-semibold`
: 'bg-white/5 text-white/50'
}`}
className={`px-3 py-1 rounded-lg text-sm transition-all ${checked
? `${statusColors[status]?.bg || 'bg-white/20'} ${statusColors[status]?.text || 'text-white'} font-semibold`
: 'bg-white/5 text-white/50'
}`}
>
{status}
<span className="ml-1 text-xs">({statusCounts[status] || 0})</span>
@@ -337,9 +340,8 @@ export function Project() {
<div className="flex flex-wrap items-center gap-3">
<button
onClick={toggleUserFilter}
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-all ${
userFilter ? 'bg-primary-500/20 text-primary-400' : 'bg-white/5 text-white/50'
}`}
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-all ${userFilter ? 'bg-primary-500/20 text-primary-400' : 'bg-white/5 text-white/50'
}`}
>
<User className="w-4 h-4" />
<span>{userFilter || '전체'}</span>
@@ -413,71 +415,71 @@ export function Project() {
{/* 메인 콘텐츠 */}
<div className="glass-effect rounded-xl overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead className="bg-white/5 sticky top-0">
<tr className="text-white/60 text-left">
<th className="px-3 py-2 w-16">상태</th>
<th className="px-3 py-2">프로젝트명</th>
<th className="px-3 py-2 w-20">챔피언</th>
<th className="px-3 py-2 w-28">요청자</th>
<th className="px-3 py-2 w-20 text-center">진행률</th>
<th className="px-3 py-2 w-24">시작</th>
<th className="px-3 py-2 w-24">만료/완료</th>
<th className="px-3 py-2 w-10"></th>
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead className="bg-white/5 sticky top-0">
<tr className="text-white/60 text-left">
<th className="px-3 py-2 w-16">상태</th>
<th className="px-3 py-2">프로젝트명</th>
<th className="px-3 py-2 w-20">챔피언</th>
<th className="px-3 py-2 w-28">요청자</th>
<th className="px-3 py-2 w-20 text-center">진행률</th>
<th className="px-3 py-2 w-24">시작</th>
<th className="px-3 py-2 w-24">만료/완료</th>
<th className="px-3 py-2 w-10"></th>
</tr>
</thead>
<tbody className="divide-y divide-white/5">
{loading ? (
<tr>
<td colSpan={8} className="px-3 py-8 text-center text-white/50">
<RefreshCw className="w-6 h-6 animate-spin mx-auto mb-2" />
로딩중...
</td>
</tr>
</thead>
<tbody className="divide-y divide-white/5">
{loading ? (
<tr>
<td colSpan={8} className="px-3 py-8 text-center text-white/50">
<RefreshCw className="w-6 h-6 animate-spin mx-auto mb-2" />
로딩중...
</td>
</tr>
) : paginatedProjects.length === 0 ? (
<tr>
<td colSpan={8} className="px-3 py-8 text-center text-white/50">
프로젝트가 없습니다.
</td>
</tr>
) : (
paginatedProjects.map((project) => {
const statusColor = statusColors[project.status] || { text: 'text-white', bg: 'bg-white/10' };
const isExpanded = expandedProject === project.idx;
) : paginatedProjects.length === 0 ? (
<tr>
<td colSpan={8} className="px-3 py-8 text-center text-white/50">
프로젝트가 없습니다.
</td>
</tr>
) : (
paginatedProjects.map((project) => {
const statusColor = statusColors[project.status] || { text: 'text-white', bg: 'bg-white/10' };
const isExpanded = expandedProject === project.idx;
return (
<>
<tr
key={project.idx}
className={clsx(
'border-b border-white/10 cursor-pointer hover:bg-white/5',
isExpanded && 'bg-primary-900/30'
)}
onClick={() => toggleHistory(project.idx)}
>
<td className="px-3 py-2">
<span className={`px-2 py-0.5 rounded text-xs ${statusColor.bg} ${statusColor.text}`}>
{project.status}
</span>
</td>
<td className={`px-3 py-2 ${statusColor.text}`}>
<div className="truncate max-w-xs" title={project.name}>
<div className="flex items-center gap-2">
<button
onClick={e => {
e.stopPropagation();
handleSelectProject(project);
}}
className="text-primary-300 hover:text-primary-200 transition-colors"
title="편집"
>
<Edit2 className="w-4 h-4" />
</button>
<span className="font-regular text-white/90">{project.name}</span>
</div>
return (
<>
<tr
key={project.idx}
className={clsx(
'border-b border-white/10 cursor-pointer hover:bg-white/5',
isExpanded && 'bg-primary-900/30'
)}
onClick={() => toggleHistory(project.idx)}
>
<td className="px-3 py-2">
<span className={`px-2 py-0.5 rounded text-xs ${statusColor.bg} ${statusColor.text}`}>
{project.status}
</span>
</td>
<td className={`px-3 py-2 ${statusColor.text}`}>
<div className="truncate max-w-xs" title={project.name}>
<div className="flex items-center gap-2">
<button
onClick={e => {
e.stopPropagation();
handleSelectProject(project);
}}
className="text-primary-300 hover:text-primary-200 transition-colors"
title="편집"
>
<Edit2 className="w-4 h-4" />
</button>
<span className="font-regular text-white/90">{project.name}</span>
</div>
</td>
</div>
</td>
<td className="px-3 py-2 text-white/70">{project.name_champion || project.userManager}</td>
<td className="px-3 py-2 text-white/70 text-xs">
<div>{project.ReqLine}</div>
@@ -584,7 +586,7 @@ export function Project() {
</div>
</div>
) : projectHistory.length > 0 ? (
<div
<div
className="bg-white/5 rounded p-3 border-l-2 border-primary-500 cursor-pointer hover:bg-white/10 transition-colors"
onClick={() => startEditHistory(projectHistory[0])}
>
@@ -608,36 +610,36 @@ export function Project() {
</td>
</tr>
)}
</>
);
})
)}
</tbody>
</table>
</div>
</>
);
})
)}
</tbody>
</table>
</div>
{/* 페이징 */}
{totalPages > 1 && (
<div className="flex items-center justify-center gap-2 p-3 border-t border-white/10">
<button
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
disabled={currentPage === 1}
className="p-1 rounded hover:bg-white/10 disabled:opacity-30"
>
<ChevronLeft className="w-5 h-5 text-white/70" />
</button>
<span className="text-white/70 text-sm">
{currentPage} / {totalPages}
</span>
<button
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
disabled={currentPage === totalPages}
className="p-1 rounded hover:bg-white/10 disabled:opacity-30"
>
<ChevronRight className="w-5 h-5 text-white/70" />
</button>
</div>
)}
{/* 페이징 */}
{totalPages > 1 && (
<div className="flex items-center justify-center gap-2 p-3 border-t border-white/10">
<button
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
disabled={currentPage === 1}
className="p-1 rounded hover:bg-white/10 disabled:opacity-30"
>
<ChevronLeft className="w-5 h-5 text-white/70" />
</button>
<span className="text-white/70 text-sm">
{currentPage} / {totalPages}
</span>
<button
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
disabled={currentPage === totalPages}
className="p-1 rounded hover:bg-white/10 disabled:opacity-30"
>
<ChevronRight className="w-5 h-5 text-white/70" />
</button>
</div>
)}
</div>
{/* 프로젝트 상세 다이얼로그 */}