UI Unification: Refactor UserList and MailForm to Notepad design system, and finalize Customs management
This commit is contained in:
backuppc
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Search, RefreshCw, Users, Check, X, User, Save } from 'lucide-react';
|
||||
import { Search, RefreshCw, Users, Check, X, User as UserIcon, Save, Settings, Shield, Mail } from 'lucide-react';
|
||||
import { clsx } from 'clsx';
|
||||
import { comms } from '@/communication';
|
||||
import { GroupUser, UserLevelInfo, UserFullData } from '@/types';
|
||||
@@ -64,284 +64,252 @@ function UserDetailDialog({ user, levelInfo, onClose, onSave }: UserDetailDialog
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={onClose}>
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
||||
{/* 배경 오버레이 */}
|
||||
<div
|
||||
className="glass-effect rounded-xl w-full max-w-2xl max-h-[90vh] overflow-hidden"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="p-4 border-b border-white/10 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<User className="w-5 h-5 text-white/70" />
|
||||
<h2 className="text-lg font-semibold text-white">
|
||||
사용자 정보 {canEdit ? '' : '(읽기 전용)'}
|
||||
</h2>
|
||||
className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* 다이얼로그 콘텐트 */}
|
||||
<div className="relative w-full max-w-3xl bg-[#1a1c1e] border border-white/10 rounded-3xl shadow-2xl overflow-hidden animate-scale-in flex flex-col max-h-[90vh]">
|
||||
<div className="px-6 py-5 border-b border-white/10 flex items-center justify-between bg-white/[0.02] shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary-500/20 rounded-xl text-primary-400">
|
||||
<UserIcon className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white tracking-tight">
|
||||
사용자 정보 {canEdit ? '' : '(읽기 전용)'}
|
||||
</h3>
|
||||
<p className="text-white/30 text-[10px] uppercase font-bold tracking-widest mt-0.5">
|
||||
User Profile Management
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-white/60 hover:text-white transition-colors text-xl"
|
||||
className="p-2 hover:bg-white/10 rounded-xl text-white/40 hover:text-white transition-colors"
|
||||
>
|
||||
×
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 내용 */}
|
||||
<div className="p-4 overflow-auto max-h-[calc(90vh-120px)]">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{/* 사번 (읽기 전용) */}
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">사번</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.id}
|
||||
disabled
|
||||
className="w-full px-3 py-2 bg-white/5 border border-white/20 rounded-lg text-white/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 성명 */}
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">성명</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleChange('name', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className={clsx(
|
||||
"w-full px-3 py-2 border border-white/20 rounded-lg text-white",
|
||||
canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 영문명 */}
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">영문명</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.nameE}
|
||||
onChange={(e) => handleChange('nameE', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className={clsx(
|
||||
"w-full px-3 py-2 border border-white/20 rounded-lg text-white",
|
||||
canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 직책 */}
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">직책</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.grade}
|
||||
onChange={(e) => handleChange('grade', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className={clsx(
|
||||
"w-full px-3 py-2 border border-white/20 rounded-lg text-white",
|
||||
canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 공정 */}
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">공정</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.processs}
|
||||
onChange={(e) => handleChange('processs', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className={clsx(
|
||||
"w-full px-3 py-2 border border-white/20 rounded-lg text-white",
|
||||
canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 상태 */}
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">상태</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.state}
|
||||
onChange={(e) => handleChange('state', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className={clsx(
|
||||
"w-full px-3 py-2 border border-white/20 rounded-lg text-white",
|
||||
canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 이메일 */}
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">이메일</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleChange('email', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className={clsx(
|
||||
"w-full px-3 py-2 border border-white/20 rounded-lg text-white",
|
||||
canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 전화 */}
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">전화</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.tel}
|
||||
onChange={(e) => handleChange('tel', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className={clsx(
|
||||
"w-full px-3 py-2 border border-white/20 rounded-lg text-white",
|
||||
canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 입사일 */}
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">입사일</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.indate}
|
||||
onChange={(e) => handleChange('indate', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
placeholder="YYYY-MM-DD"
|
||||
className={clsx(
|
||||
"w-full px-3 py-2 border border-white/20 rounded-lg text-white",
|
||||
canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 퇴사일 */}
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">퇴사일</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.outdate}
|
||||
onChange={(e) => handleChange('outdate', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
placeholder="YYYY-MM-DD"
|
||||
className={clsx(
|
||||
"w-full px-3 py-2 border border-white/20 rounded-lg text-white",
|
||||
canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 레벨 */}
|
||||
<div>
|
||||
<label className="block text-sm text-white/70 mb-1">레벨</label>
|
||||
<select
|
||||
value={formData.level}
|
||||
onChange={(e) => handleChange('level', parseInt(e.target.value) || 0)}
|
||||
disabled={!canEditAdmin}
|
||||
className={clsx(
|
||||
"w-full px-3 py-2 border border-white/20 rounded-lg text-white",
|
||||
canEditAdmin ? "bg-white/10" : "bg-white/5 text-white/50"
|
||||
)}
|
||||
>
|
||||
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((lv) => (
|
||||
<option key={lv} value={lv} className="bg-gray-800 text-white">
|
||||
{lv}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* 메모 */}
|
||||
<div className="col-span-3">
|
||||
<label className="block text-sm text-white/70 mb-1">메모</label>
|
||||
<textarea
|
||||
value={formData.memo}
|
||||
onChange={(e) => handleChange('memo', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
rows={2}
|
||||
className={clsx(
|
||||
"w-full px-3 py-2 border border-white/20 rounded-lg text-white resize-none",
|
||||
canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 관리자 전용 설정 */}
|
||||
<div className="col-span-3 border-t border-white/10 pt-4 mt-2">
|
||||
<h3 className="text-sm font-medium text-white/80 mb-3">
|
||||
관리자 설정 {!canEditAdmin && '(관리자만 수정 가능)'}
|
||||
</h3>
|
||||
<div className="flex items-center gap-6">
|
||||
{/* 계정 사용 */}
|
||||
<label className={clsx(
|
||||
"flex items-center gap-2 cursor-pointer",
|
||||
!canEditAdmin && "opacity-50 cursor-not-allowed"
|
||||
)}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.useUserState}
|
||||
onChange={(e) => handleChange('useUserState', e.target.checked)}
|
||||
disabled={!canEditAdmin}
|
||||
className="w-4 h-4 rounded"
|
||||
/>
|
||||
<span className="text-sm text-white">계정 사용</span>
|
||||
</label>
|
||||
|
||||
{/* 일지 사용 */}
|
||||
<label className={clsx(
|
||||
"flex items-center gap-2 cursor-pointer",
|
||||
!canEditAdmin && "opacity-50 cursor-not-allowed"
|
||||
)}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.useJobReport}
|
||||
onChange={(e) => handleChange('useJobReport', e.target.checked)}
|
||||
disabled={!canEditAdmin}
|
||||
className="w-4 h-4 rounded"
|
||||
/>
|
||||
<span className="text-sm text-white">일지 사용</span>
|
||||
</label>
|
||||
|
||||
{/* 휴가 제외 */}
|
||||
<label className={clsx(
|
||||
"flex items-center gap-2 cursor-pointer",
|
||||
!canEditAdmin && "opacity-50 cursor-not-allowed"
|
||||
)}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.exceptHoly}
|
||||
onChange={(e) => handleChange('exceptHoly', e.target.checked)}
|
||||
disabled={!canEditAdmin}
|
||||
className="w-4 h-4 rounded"
|
||||
/>
|
||||
<span className="text-sm text-white">휴가 제외</span>
|
||||
</label>
|
||||
<div className="p-6 overflow-y-auto custom-scrollbar flex-1">
|
||||
<div className="space-y-8">
|
||||
{/* 기본 인사 정보 */}
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<UserIcon className="w-4 h-4 text-primary-500" />
|
||||
<h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">인사 정보</h4>
|
||||
<div className="flex-1 h-px bg-white/5"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5">
|
||||
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">사번</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.id}
|
||||
disabled
|
||||
className="w-full bg-transparent border-none text-sm text-white/50 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
||||
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">성명</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleChange('name', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
||||
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">영문명</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.nameE}
|
||||
onChange={(e) => handleChange('nameE', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
||||
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">직책</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.grade}
|
||||
onChange={(e) => handleChange('grade', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
||||
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">공정</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.processs}
|
||||
onChange={(e) => handleChange('processs', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
||||
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">상태</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.state}
|
||||
onChange={(e) => handleChange('state', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 연락처 및 일정 */}
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Shield className="w-4 h-4 text-primary-500" />
|
||||
<h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">연락처 및 근태 정보</h4>
|
||||
<div className="flex-1 h-px bg-white/5"></div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
||||
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">이메일</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleChange('email', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
||||
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">연락처</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.tel}
|
||||
onChange={(e) => handleChange('tel', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
||||
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">입사일</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.indate}
|
||||
onChange={(e) => handleChange('indate', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
placeholder="YYYY-MM-DD"
|
||||
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
||||
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">퇴사일</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.outdate}
|
||||
onChange={(e) => handleChange('outdate', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
placeholder="YYYY-MM-DD"
|
||||
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 관리자 권한 및 메모 */}
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Settings className="w-4 h-4 text-primary-500" />
|
||||
<h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">시스템 설정 및 메모</h4>
|
||||
<div className="flex-1 h-px bg-white/5"></div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5">
|
||||
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">권한 레벨</label>
|
||||
<select
|
||||
value={formData.level}
|
||||
onChange={(e) => handleChange('level', parseInt(e.target.value) || 0)}
|
||||
disabled={!canEditAdmin}
|
||||
className="w-full bg-transparent border-none text-sm text-white focus:outline-none cursor-pointer"
|
||||
>
|
||||
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((lv) => (
|
||||
<option key={lv} value={lv} className="bg-[#1a1c1e] text-white">
|
||||
Level {lv}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-3 flex items-center gap-6 px-4">
|
||||
{[
|
||||
{ id: 'useUserState', label: '계정 활성', checked: formData.useUserState },
|
||||
{ id: 'useJobReport', label: '일지 사용', checked: formData.useJobReport },
|
||||
{ id: 'exceptHoly', label: '휴가 제외', checked: formData.exceptHoly },
|
||||
].map((item) => (
|
||||
<label
|
||||
key={item.id}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 cursor-pointer transition-opacity",
|
||||
!canEditAdmin && "opacity-40 cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.checked}
|
||||
onChange={(e) => handleChange(item.id as any, e.target.checked)}
|
||||
disabled={!canEditAdmin}
|
||||
className="w-4 h-4 rounded border-white/20 bg-white/5 text-primary-500 focus:ring-primary-500/50 focus:ring-offset-0"
|
||||
/>
|
||||
<span className="text-sm text-white/70 font-medium">{item.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5 px-3 py-3 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
||||
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">비고 및 특이사항</label>
|
||||
<textarea
|
||||
value={formData.memo}
|
||||
onChange={(e) => handleChange('memo', e.target.value)}
|
||||
disabled={!canEdit}
|
||||
rows={3}
|
||||
className="w-full bg-transparent border-none text-sm text-white focus:outline-none resize-none placeholder:text-white/10 mt-1"
|
||||
placeholder="사용자 관련 특이사항을 입력하세요"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 푸터 */}
|
||||
<div className="p-4 border-t border-white/10 flex justify-end gap-2">
|
||||
{/* 푸터 버튼 */}
|
||||
<div className="px-6 py-5 bg-white/[0.02] border-t border-white/10 flex items-center justify-end gap-3 shrink-0">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white transition-colors"
|
||||
className="px-5 py-2 text-white/40 hover:text-white font-bold text-xs transition-colors"
|
||||
>
|
||||
닫기
|
||||
취소
|
||||
</button>
|
||||
{canEdit && (
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg text-white transition-colors"
|
||||
className="flex items-center gap-2 px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-xl font-bold text-xs shadow-lg shadow-primary-500/20 transition-all disabled:opacity-50 active:scale-95"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
{saving ? '저장 중...' : '저장'}
|
||||
<Save className="w-3.5 h-3.5" />
|
||||
{saving ? '저장 중...' : '사용자 정보 저장'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -380,14 +348,7 @@ export function UserListPage() {
|
||||
const result = await comms.getUserList(process);
|
||||
if (Array.isArray(result)) {
|
||||
setUsers(result);
|
||||
} else if (result && typeof result === 'object') {
|
||||
const r = result as { Success?: boolean; Message?: string };
|
||||
if (r.Success === false) {
|
||||
console.error('사용자 목록 조회 실패:', r.Message);
|
||||
}
|
||||
setUsers([]);
|
||||
} else {
|
||||
console.error('사용자 목록 응답이 배열이 아님:', result);
|
||||
setUsers([]);
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -415,130 +376,170 @@ export function UserListPage() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
{/* 헤더 */}
|
||||
<div className="glass-effect rounded-xl p-4 mb-4">
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm text-white/70">공정</label>
|
||||
<input
|
||||
type="text"
|
||||
value={process}
|
||||
onChange={(e) => setProcess(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleRefresh()}
|
||||
className="px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white w-24 text-center"
|
||||
/>
|
||||
<div className="space-y-6 animate-fade-in pb-4 h-full">
|
||||
{/* 사용자 목록 단일 카드 */}
|
||||
<div className="glass-effect rounded-3xl overflow-hidden shadow-2xl border border-white/10 flex flex-col h-full max-h-[calc(100vh-140px)]">
|
||||
<div className="px-6 py-4 border-b border-white/10 flex flex-col md:flex-row items-center justify-between gap-4 bg-white/[0.02]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary-500/20 rounded-lg">
|
||||
<Users className="w-5 h-5 text-primary-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-white tracking-tight">사용자 목록</h3>
|
||||
<p className="text-white/30 text-[10px] uppercase font-bold tracking-widest mt-0.5">
|
||||
Organizational Directory
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
className="flex items-center gap-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition-colors"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
새로고침
|
||||
</button>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 공정 필터 */}
|
||||
<div className="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-xl border border-white/10">
|
||||
<span className="text-[10px] text-white/30 font-bold uppercase whitespace-nowrap">공정</span>
|
||||
<input
|
||||
type="text"
|
||||
value={process}
|
||||
onChange={(e) => setProcess(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleRefresh()}
|
||||
className="bg-transparent border-none text-xs text-white p-0 w-16 text-center focus:outline-none focus:ring-0 font-bold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1" />
|
||||
{/* 검색창 */}
|
||||
<div className="relative group w-48 md:w-64">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-white/40 group-focus-within:text-primary-400 transition-colors" />
|
||||
<input
|
||||
type="text"
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
placeholder="ID, 성명, 정보 검색..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl pl-9 pr-4 py-1.5 text-xs text-white placeholder-white/20 focus:outline-none focus:ring-1 focus:ring-primary-500/50 transition-all backdrop-blur-sm h-[40px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40" />
|
||||
<input
|
||||
type="text"
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
placeholder="검색..."
|
||||
className="pl-9 pr-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 w-48"
|
||||
/>
|
||||
{/* 개수 */}
|
||||
<div className="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-xl border border-white/10 h-[40px]">
|
||||
<span className="text-primary-400 font-bold text-sm">{filteredUsers.length}</span>
|
||||
<span className="text-white/40 text-[10px] uppercase">명</span>
|
||||
</div>
|
||||
|
||||
{/* 새로고침 */}
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
className="p-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-white/70 hover:text-white transition-all disabled:opacity-50 h-[40px] w-[40px] flex items-center justify-center"
|
||||
title="새로고침"
|
||||
>
|
||||
<RefreshCw className={clsx("w-4 h-4", loading && "animate-spin")} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 테이블 */}
|
||||
<div className="glass-effect rounded-xl flex-1 overflow-hidden flex flex-col">
|
||||
<div className="p-4 border-b border-white/10 flex items-center gap-2">
|
||||
<Users className="w-5 h-5 text-white/70" />
|
||||
<h2 className="text-lg font-semibold text-white">사용자 목록</h2>
|
||||
<span className="text-sm text-white/50">({filteredUsers.length}명)</span>
|
||||
{/* 테이블 헤더 */}
|
||||
<div className="bg-white/5 px-6 py-3 border-b border-white/5 flex items-center text-[10px] font-bold text-white/30 uppercase tracking-widest shrink-0">
|
||||
<div className="w-12 text-center">ID</div>
|
||||
<div className="w-32 px-4">성명/직책</div>
|
||||
<div className="flex-1 px-4">이메일/연락처</div>
|
||||
<div className="w-24 px-4 text-center">공정</div>
|
||||
<div className="w-20 text-center">레벨</div>
|
||||
<div className="w-16 text-center">계정</div>
|
||||
<div className="w-16 text-center">일지</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto">
|
||||
<div className="flex-1 overflow-y-auto custom-scrollbar divide-y divide-white/5">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-32">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-white"></div>
|
||||
<div className="py-20 text-center">
|
||||
<RefreshCw className="w-10 h-10 mx-auto mb-4 animate-spin text-primary-500/50" />
|
||||
<p className="text-white/50 font-medium text-sm">사용자 정보를 불러오는 중...</p>
|
||||
</div>
|
||||
) : filteredUsers.length === 0 ? (
|
||||
<div className="py-32 text-center">
|
||||
<Users className="w-16 h-16 mx-auto text-white/10 mb-4" />
|
||||
<p className="text-white/30 text-base font-bold">등록된 사용자가 없습니다</p>
|
||||
<p className="text-white/10 text-[10px] mt-2 uppercase tracking-[0.2em]">No personnel records found</p>
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-white/5 sticky top-0">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-left font-medium text-white/70 w-24">사번</th>
|
||||
<th className="px-3 py-2 text-left font-medium text-white/70 w-24">성명</th>
|
||||
<th className="px-3 py-2 text-left font-medium text-white/70 w-20">직책</th>
|
||||
<th className="px-3 py-2 text-left font-medium text-white/70">이메일</th>
|
||||
<th className="px-3 py-2 text-left font-medium text-white/70 w-28">전화</th>
|
||||
<th className="px-3 py-2 text-left font-medium text-white/70 w-20">공정</th>
|
||||
<th className="px-3 py-2 text-left font-medium text-white/70 w-16">상태</th>
|
||||
<th className="px-3 py-2 text-center font-medium text-white/70 w-12">Lv</th>
|
||||
<th className="px-3 py-2 text-center font-medium text-white/70 w-16">계정</th>
|
||||
<th className="px-3 py-2 text-center font-medium text-white/70 w-16">일지</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{filteredUsers.map((user) => (
|
||||
<tr
|
||||
key={user.id}
|
||||
onClick={() => handleRowClick(user)}
|
||||
className={clsx(
|
||||
'hover:bg-white/5 transition-colors cursor-pointer',
|
||||
!user.useUserState && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
<td className="px-3 py-2 text-white font-mono">{user.id}</td>
|
||||
<td className="px-3 py-2 text-white font-medium">{user.name}</td>
|
||||
<td className="px-3 py-2 text-white/70">{user.grade}</td>
|
||||
<td className="px-3 py-2">
|
||||
{user.email ? (
|
||||
<a
|
||||
href={`mailto:${user.email}`}
|
||||
className="text-blue-400 hover:text-blue-300 hover:underline"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{user.email}
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-white/70">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-white/70">{user.tel}</td>
|
||||
<td className="px-3 py-2 text-white/70">{user.processs}</td>
|
||||
<td className="px-3 py-2 text-white/70">{user.state}</td>
|
||||
<td className="px-3 py-2 text-white text-center">{user.level}</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{user.useUserState ? (
|
||||
<Check className="w-4 h-4 text-green-400 mx-auto" />
|
||||
) : (
|
||||
<X className="w-4 h-4 text-red-400 mx-auto" />
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{user.useJobReport ? (
|
||||
<Check className="w-4 h-4 text-green-400 mx-auto" />
|
||||
) : (
|
||||
<X className="w-4 h-4 text-red-400 mx-auto" />
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{filteredUsers.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={10} className="px-4 py-8 text-center text-white/50">
|
||||
{users.length === 0 ? '공정을 입력하고 새로고침하세요.' : '검색 결과가 없습니다.'}
|
||||
</td>
|
||||
</tr>
|
||||
filteredUsers.map((user) => (
|
||||
<div
|
||||
key={user.id}
|
||||
onClick={() => handleRowClick(user)}
|
||||
className={clsx(
|
||||
"px-6 py-3 hover:bg-white/[0.03] transition-all cursor-pointer group flex items-center",
|
||||
!user.useUserState && "opacity-40 grayscale-[0.5]"
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
>
|
||||
{/* ID */}
|
||||
<div className="w-12 text-center text-xs font-mono text-white/40 group-hover:text-primary-400 Transition-colors">
|
||||
{user.id}
|
||||
</div>
|
||||
|
||||
{/* 성명/직책 */}
|
||||
<div className="w-32 px-4 flex flex-col">
|
||||
<div className="text-sm font-bold text-white group-hover:text-primary-300 transition-colors">
|
||||
{user.name}
|
||||
</div>
|
||||
<div className="text-[10px] text-white/30 font-medium uppercase tracking-tighter">
|
||||
{user.grade || '-'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 정보 */}
|
||||
<div className="flex-1 px-4 flex flex-col">
|
||||
<div className="flex items-center gap-1.5 text-xs text-white/60">
|
||||
<Mail className="w-3 h-3 text-white/20" />
|
||||
{user.email || '-'}
|
||||
</div>
|
||||
<div className="text-[10px] text-white/30 mt-0.5">
|
||||
{user.tel || user.hp || ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 공정 */}
|
||||
<div className="w-24 px-4 text-center">
|
||||
<span className="px-2 py-0.5 bg-white/5 border border-white/5 rounded-md text-[10px] text-white/50 font-bold uppercase">
|
||||
{user.processs || '-'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 레벨 */}
|
||||
<div className="w-20 text-center font-mono text-xs text-white/40">
|
||||
Lv.{user.level}
|
||||
</div>
|
||||
|
||||
{/* 계정 상태 */}
|
||||
<div className="w-16 flex justify-center">
|
||||
<div className={clsx(
|
||||
"w-6 h-6 rounded-lg flex items-center justify-center transition-colors",
|
||||
user.useUserState ? "bg-green-500/10 text-green-400" : "bg-red-500/10 text-red-500"
|
||||
)}>
|
||||
{user.useUserState ? <Check className="w-3.5 h-3.5" /> : <X className="w-3.5 h-3.5" />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 일지 사용 */}
|
||||
<div className="w-16 flex justify-center">
|
||||
<div className={clsx(
|
||||
"w-6 h-6 rounded-lg flex items-center justify-center transition-colors",
|
||||
user.useJobReport ? "bg-primary-500/10 text-primary-400" : "bg-white/5 text-white/10"
|
||||
)}>
|
||||
{user.useJobReport ? <Check className="w-3.5 h-3.5" /> : <X className="w-3.5 h-3.5" />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 푸터 */}
|
||||
<div className="px-6 py-2 flex items-center justify-between bg-white/[0.02] border-t border-white/5 shrink-0">
|
||||
<div className="text-white/20 text-[9px] font-bold uppercase tracking-[0.2em] py-2">
|
||||
System Directory Access <span className="text-white/5 mx-2">/</span>
|
||||
Level <span className="text-primary-400/50 font-mono tracking-normal">{levelInfo?.CurrentUserId || 'Unknown'}</span>
|
||||
</div>
|
||||
<div className="text-[9px] text-white/10 italic">
|
||||
Reference date: {new Date().toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 사용자 상세 다이얼로그 */}
|
||||
|
||||
Reference in New Issue
Block a user