feat: React 프론트엔드 기능 대폭 확장
- 월별근무표: 휴일/근무일 관리, 자동 초기화 - 메일양식: 템플릿 CRUD, To/CC/BCC 설정 - 그룹정보: 부서 관리, 비트 연산 기반 권한 설정 - 업무일지: 수정 성공 메시지 제거, 오늘 근무시간 필터링 수정 - 웹소켓 메시지 type 충돌 버그 수정 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
backuppc
449
Project/frontend/src/components/user/UserInfoDialog.tsx
Normal file
449
Project/frontend/src/components/user/UserInfoDialog.tsx
Normal file
@@ -0,0 +1,449 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { X, Save, Key, User, Mail, Building2, Briefcase, Calendar, FileText } from 'lucide-react';
|
||||
import { clsx } from 'clsx';
|
||||
import { comms } from '@/communication';
|
||||
import { UserInfoDetail } from '@/types';
|
||||
|
||||
interface UserInfoDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
userId?: string;
|
||||
onSave?: () => void;
|
||||
}
|
||||
|
||||
interface PasswordDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: (oldPassword: string, newPassword: string) => void;
|
||||
}
|
||||
|
||||
function PasswordDialog({ isOpen, onClose, onConfirm }: PasswordDialogProps) {
|
||||
const [oldPassword, setOldPassword] = useState('');
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!newPassword) {
|
||||
setError('새 비밀번호를 입력하세요.');
|
||||
return;
|
||||
}
|
||||
if (newPassword !== confirmPassword) {
|
||||
setError('새 비밀번호가 일치하지 않습니다.');
|
||||
return;
|
||||
}
|
||||
onConfirm(oldPassword, newPassword);
|
||||
setOldPassword('');
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
setError('');
|
||||
onClose();
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[10001]">
|
||||
<div className="glass-effect-solid rounded-xl p-6 w-full max-w-sm">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Key className="w-5 h-5" />
|
||||
비밀번호 변경
|
||||
</h3>
|
||||
<button onClick={onClose} className="text-white/60 hover:text-white">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">기존 비밀번호</label>
|
||||
<input
|
||||
type="password"
|
||||
value={oldPassword}
|
||||
onChange={(e) => setOldPassword(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
|
||||
placeholder="기존 비밀번호"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">새 비밀번호</label>
|
||||
<input
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
|
||||
placeholder="새 비밀번호"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">새 비밀번호 확인</label>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
|
||||
placeholder="새 비밀번호 확인"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-400 text-sm">{error}</p>}
|
||||
|
||||
<div className="flex justify-end gap-2 mt-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white/70 hover:text-white transition-colors"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition-colors"
|
||||
>
|
||||
변경
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function UserInfoDialog({ isOpen, onClose, userId, onSave }: UserInfoDialogProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [showPasswordDialog, setShowPasswordDialog] = useState(false);
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
|
||||
|
||||
const [formData, setFormData] = useState<UserInfoDetail>({
|
||||
Id: '',
|
||||
NameK: '',
|
||||
NameE: '',
|
||||
Dept: '',
|
||||
Grade: '',
|
||||
Email: '',
|
||||
Tel: '',
|
||||
Hp: '',
|
||||
DateIn: '',
|
||||
DateO: '',
|
||||
Memo: '',
|
||||
Process: '',
|
||||
State: '',
|
||||
UseJobReport: false,
|
||||
UseUserState: false,
|
||||
ExceptHoly: false,
|
||||
Level: 0,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
loadUserInfo();
|
||||
}
|
||||
}, [isOpen, userId]);
|
||||
|
||||
const loadUserInfo = async () => {
|
||||
setLoading(true);
|
||||
setMessage(null);
|
||||
try {
|
||||
const response = userId
|
||||
? await comms.getUserInfoById(userId)
|
||||
: await comms.getCurrentUserInfo();
|
||||
|
||||
if (response.Success && response.Data) {
|
||||
setFormData(response.Data);
|
||||
} else {
|
||||
setMessage({ type: 'error', text: response.Message || '사용자 정보를 불러올 수 없습니다.' });
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage({ type: 'error', text: '사용자 정보 조회 중 오류가 발생했습니다.' });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setMessage(null);
|
||||
try {
|
||||
const response = await comms.saveUserInfo(formData);
|
||||
if (response.Success) {
|
||||
setMessage({ type: 'success', text: '저장되었습니다.' });
|
||||
onSave?.();
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
}, 1000);
|
||||
} else {
|
||||
setMessage({ type: 'error', text: response.Message || '저장에 실패했습니다.' });
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage({ type: 'error', text: '저장 중 오류가 발생했습니다.' });
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChangePassword = async (oldPassword: string, newPassword: string) => {
|
||||
try {
|
||||
const response = await comms.changePassword(oldPassword, newPassword);
|
||||
if (response.Success) {
|
||||
setMessage({ type: 'success', text: '비밀번호가 변경되었습니다.' });
|
||||
} else {
|
||||
setMessage({ type: 'error', text: response.Message || '비밀번호 변경에 실패했습니다.' });
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage({ type: 'error', text: '비밀번호 변경 중 오류가 발생했습니다.' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (field: keyof UserInfoDetail, value: string | boolean) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[10000]">
|
||||
<div className="glass-effect-solid rounded-xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10">
|
||||
<h2 className="text-xl font-semibold text-white flex items-center gap-2">
|
||||
<User className="w-6 h-6" />
|
||||
사용자 정보
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-white/60 hover:text-white transition-colors"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 overflow-y-auto max-h-[calc(90vh-140px)] custom-scrollbar">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{/* 기본 정보 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
|
||||
<User className="w-4 h-4" />
|
||||
사원번호
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.Id}
|
||||
disabled
|
||||
className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">이름</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.NameK}
|
||||
onChange={(e) => handleInputChange('NameK', e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
|
||||
placeholder="이름"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">영문이름</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.NameE}
|
||||
onChange={(e) => handleInputChange('NameE', e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
|
||||
placeholder="English Name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
|
||||
<Building2 className="w-4 h-4" />
|
||||
부서
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.Dept}
|
||||
onChange={(e) => handleInputChange('Dept', e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
|
||||
placeholder="부서"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
|
||||
<Briefcase className="w-4 h-4" />
|
||||
직책
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.Grade}
|
||||
onChange={(e) => handleInputChange('Grade', e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
|
||||
placeholder="직책"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">공정</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.Process}
|
||||
onChange={(e) => handleInputChange('Process', e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
|
||||
placeholder="공정"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 이메일 */}
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
|
||||
<Mail className="w-4 h-4" />
|
||||
이메일
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.Email}
|
||||
onChange={(e) => handleInputChange('Email', e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 입/퇴사 정보 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
|
||||
<Calendar className="w-4 h-4" />
|
||||
입사일
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.DateIn}
|
||||
onChange={(e) => handleInputChange('DateIn', e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
|
||||
placeholder="YYYY-MM-DD"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
|
||||
<Calendar className="w-4 h-4" />
|
||||
퇴사일
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.DateO}
|
||||
onChange={(e) => handleInputChange('DateO', e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
|
||||
placeholder="YYYY-MM-DD"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 비고 */}
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
|
||||
<FileText className="w-4 h-4" />
|
||||
비고
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.Memo}
|
||||
onChange={(e) => handleInputChange('Memo', e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 resize-none"
|
||||
placeholder="비고"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 옵션 체크박스 */}
|
||||
<div className="flex flex-wrap gap-6">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.UseJobReport}
|
||||
onChange={(e) => handleInputChange('UseJobReport', e.target.checked)}
|
||||
className="w-4 h-4 rounded border-white/20 bg-white/10 text-blue-600"
|
||||
/>
|
||||
<span className="text-white/70">업무일지 사용</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.UseUserState}
|
||||
onChange={(e) => handleInputChange('UseUserState', e.target.checked)}
|
||||
className="w-4 h-4 rounded border-white/20 bg-white/10 text-blue-600"
|
||||
/>
|
||||
<span className="text-white/70">계정 사용</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.ExceptHoly}
|
||||
onChange={(e) => handleInputChange('ExceptHoly', e.target.checked)}
|
||||
className="w-4 h-4 rounded border-white/20 bg-white/10 text-blue-600"
|
||||
/>
|
||||
<span className="text-white/70">휴가 제외</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* 메시지 */}
|
||||
{message && (
|
||||
<div
|
||||
className={clsx(
|
||||
'px-4 py-2 rounded-lg text-sm',
|
||||
message.type === 'success' ? 'bg-green-600/20 text-green-400' : 'bg-red-600/20 text-red-400'
|
||||
)}
|
||||
>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-t border-white/10">
|
||||
<button
|
||||
onClick={() => setShowPasswordDialog(true)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-yellow-600/20 hover:bg-yellow-600/30 text-yellow-400 rounded-lg transition-colors"
|
||||
>
|
||||
<Key className="w-4 h-4" />
|
||||
비밀번호 변경
|
||||
</button>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white/70 hover:text-white transition-colors"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className={clsx(
|
||||
'flex items-center gap-2 px-4 py-2 rounded-lg transition-colors',
|
||||
saving
|
||||
? 'bg-blue-600/50 text-white/50 cursor-not-allowed'
|
||||
: 'bg-blue-600 hover:bg-blue-700 text-white'
|
||||
)}
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
{saving ? '저장 중...' : '저장'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PasswordDialog
|
||||
isOpen={showPasswordDialog}
|
||||
onClose={() => setShowPasswordDialog(false)}
|
||||
onConfirm={handleChangePassword}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
1
Project/frontend/src/components/user/index.ts
Normal file
1
Project/frontend/src/components/user/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { UserInfoDialog } from './UserInfoDialog';
|
||||
Reference in New Issue
Block a user