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

UI Unification: Refactor UserList and MailForm to Notepad design system, and finalize Customs management

Browse Source
This commit is contained in:
backuppc
2025-12-30 15:07:09 +09:00
parent 8d6183715a
commit 9f7308b549
6 changed files with 1440 additions and 866 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
Project/frontend/src/communication.ts
View File

@@ -1532,6 +1532,49 @@ class CommunicationLayer {
} }
} }
/**
* 업체정보 추가
*/
public async addCustoms(item: Omit<CustomItem, 'idx' | 'wuid' | 'wdate' | 'gcode'>): Promise<ApiResponse> {
if (isWebView && machine) {
// @ts-ignore - Assuming Customs_Add exists on the native side if needed
const result = await machine.Customs_Add(
item.grp, item.name, item.owner, item.ownertel, item.address, item.tel, item.fax, item.email, item.memo, item.uptae, item.staff, item.stafftel, item.name2
);
return JSON.parse(result);
} else {
return this.wsRequest<ApiResponse>('CUSTOMS_ADD', 'CUSTOMS_ADD_RESULT', { ...item });
}
}
/**
* 업체정보 수정
*/
public async updateCustoms(item: Omit<CustomItem, 'wuid' | 'wdate' | 'gcode'>): Promise<ApiResponse> {
if (isWebView && machine) {
// @ts-ignore - Assuming Customs_Update exists on the native side if needed
const result = await machine.Customs_Update(
item.idx, item.grp, item.name, item.owner, item.ownertel, item.address, item.tel, item.fax, item.email, item.memo, item.uptae, item.staff, item.stafftel, item.name2
);
return JSON.parse(result);
} else {
return this.wsRequest<ApiResponse>('CUSTOMS_UPDATE', 'CUSTOMS_UPDATE_RESULT', { ...item });
}
}
/**
* 업체정보 삭제
*/
public async deleteCustoms(idx: number): Promise<ApiResponse> {
if (isWebView && machine) {
// @ts-ignore - Assuming Customs_Delete exists on the native side if needed
const result = await machine.Customs_Delete(idx);
return JSON.parse(result);
} else {
return this.wsRequest<ApiResponse>('CUSTOMS_DELETE', 'CUSTOMS_DELETE_RESULT', { idx });
}
}
/** /**
* 라이선스 목록 조회 * 라이선스 목록 조회
* @returns ApiResponse<LicenseItem[]> * @returns ApiResponse<LicenseItem[]>

365
Project/frontend/src/components/customs/CustomEditDialog.tsx Normal file
View File

@@ -0,0 +1,365 @@
import { useState, useEffect } from 'react';
import {
Building,
User,
Phone,
Mail,
MapPin,
FileText,
X,
Save,
Trash2,
Hash,
Briefcase
} from 'lucide-react';
import { comms } from '@/communication';
import type { CustomItem } from '@/types';
import { DevelopmentNotice } from '../DevelopmentNotice';
interface CustomEditDialogProps {
isOpen: boolean;
onClose: () => void;
onSaved: () => void;
item: CustomItem | null;
}
const initialForm: Omit<CustomItem, 'idx' | 'wuid' | 'wdate' | 'gcode'> = {
grp: '',
name: '',
owner: '',
ownertel: '',
address: '',
tel: '',
fax: '',
email: '',
memo: '',
uptae: '',
staff: '',
stafftel: '',
name2: ''
};
export function CustomEditDialog({ isOpen, onClose, onSaved, item }: CustomEditDialogProps) {
const [formData, setFormData] = useState<Omit<CustomItem, 'idx' | 'wuid' | 'wdate' | 'gcode'>>(initialForm);
const [loading, setLoading] = useState(false);
useEffect(() => {
if (item) {
setFormData({
grp: item.grp || '',
name: item.name || '',
owner: item.owner || '',
ownertel: item.ownertel || '',
address: item.address || '',
tel: item.tel || '',
fax: item.fax || '',
email: item.email || '',
memo: item.memo || '',
uptae: item.uptae || '',
staff: item.staff || '',
stafftel: item.stafftel || '',
name2: item.name2 || ''
});
} else {
setFormData(initialForm);
}
}, [item, isOpen]);
const handleSave = async () => {
if (!formData.name) {
alert('업체명을 입력해주세요.');
return;
}
setLoading(true);
try {
let response;
if (item) {
response = await comms.updateCustoms({ ...formData, idx: item.idx });
} else {
response = await comms.addCustoms(formData);
}
if (response.Success) {
onSaved();
onClose();
} else {
alert(response.Message || '저장에 실패했습니다.');
}
} catch (error) {
console.error('업체정보 저장 오류:', error);
alert('저장 중 오류가 발생했습니다.');
} finally {
setLoading(false);
}
};
const handleDelete = async () => {
if (!item) return;
if (!confirm('정말 삭제하시겠습니까?')) return;
setLoading(true);
try {
const response = await comms.deleteCustoms(item.idx);
if (response.Success) {
onSaved();
onClose();
} else {
alert(response.Message || '삭제에 실패했습니다.');
}
} catch (error) {
console.error('업체정보 삭제 오류:', error);
alert('삭제 중 오류가 발생했습니다.');
} finally {
setLoading(false);
}
};
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
{/* 배경 오버레이 */}
<div
className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in"
onClick={onClose}
/>
{/* 다이얼로그 콘텐트 */}
<div className="relative w-full max-w-2xl bg-[#1a1c1e] border border-white/10 rounded-3xl shadow-2xl overflow-hidden animate-scale-in">
<div className="px-6 py-5 border-b border-white/10 flex items-center justify-between bg-white/[0.02]">
<div className="flex items-center gap-3">
<div className="p-2 bg-primary-500/20 rounded-xl text-primary-400">
<Building className="w-5 h-5" />
</div>
<div>
<h3 className="text-xl font-bold text-white tracking-tight">
{item ? '업체 정보 수정' : '새 업체 등록'}
</h3>
<p className="text-white/30 text-[10px] uppercase font-bold tracking-widest mt-0.5">
{item ? 'Edit Company Profile' : 'Register New Company'}
</p>
</div>
</div>
<button
onClick={onClose}
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-6 max-h-[70vh] overflow-y-auto custom-scrollbar">
{/* 개발 중 알림 */}
<div className="mb-6">
<DevelopmentNotice />
</div>
<div className="space-y-8">
{/* 기본 정보 */}
<section className="space-y-4">
<div className="flex items-center gap-3 mb-2">
<Hash 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 flex items-center gap-1.5">
<Building className="w-2.5 h-2.5" /> 업체명 (국문) *
</label>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="한글 업체명"
/>
</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 flex items-center gap-1.5">
<Briefcase className="w-2.5 h-2.5" /> 업체명 (영문/기타)
</label>
<input
type="text"
value={formData.name2}
onChange={(e) => setFormData({ ...formData, name2: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="영문 업체명 또는 별칭"
/>
</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.owner}
onChange={(e) => setFormData({ ...formData, owner: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="대표자 성함"
/>
</div>
<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.grp}
onChange={(e) => setFormData({ ...formData, grp: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="협력사, 고객사 등"
/>
</div>
<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.uptae}
onChange={(e) => setFormData({ ...formData, uptae: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="IT, 유통 등"
/>
</div>
</div>
</section>
{/* 연락처 정보 */}
<section className="space-y-4">
<div className="flex items-center gap-3 mb-2">
<Phone 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">
<label className="text-[10px] font-bold text-white/30 uppercase pl-1 flex items-center gap-1.5">
<Phone className="w-2.5 h-2.5" /> 대표 전화
</label>
<input
type="text"
value={formData.tel}
onChange={(e) => setFormData({ ...formData, tel: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="00-000-0000"
/>
</div>
<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 flex items-center gap-1.5">
<Mail className="w-2.5 h-2.5" /> 대표 이메일
</label>
<input
type="text"
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="email@company.com"
/>
</div>
</div>
<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 flex items-center gap-1.5">
<MapPin className="w-2.5 h-2.5" /> 주소
</label>
<input
type="text"
value={formData.address}
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="사업장 소재지 상세 주소"
/>
</div>
</section>
{/* 담당자 정보 */}
<section className="space-y-4">
<div className="flex items-center gap-3 mb-2">
<User 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">
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">담당자 성함</label>
<input
type="text"
value={formData.staff}
onChange={(e) => setFormData({ ...formData, staff: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="담당자 이름"
/>
</div>
<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.stafftel}
onChange={(e) => setFormData({ ...formData, stafftel: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="010-0000-0000"
/>
</div>
</div>
</section>
{/* 메모 */}
<section className="space-y-4">
<div className="flex items-center gap-3 mb-2">
<FileText 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="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>
<textarea
rows={4}
value={formData.memo}
onChange={(e) => setFormData({ ...formData, memo: e.target.value })}
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10 resize-none"
placeholder="업체 관련 메모를 자유롭게 입력하세요"
/>
</div>
</section>
</div>
</div>
{/* 푸터 버튼 */}
<div className="px-6 py-5 bg-white/[0.02] border-t border-white/10 flex items-center justify-between">
<div>
{item && (
<button
onClick={handleDelete}
disabled={loading}
className="flex items-center gap-2 px-4 py-2 bg-red-500/10 hover:bg-red-500/20 text-red-400 rounded-xl font-bold text-xs transition-colors border border-red-500/20"
>
<Trash2 className="w-3.5 h-3.5" />
삭제
</button>
)}
</div>
<div className="flex items-center gap-3">
<button
onClick={onClose}
className="px-5 py-2 text-white/40 hover:text-white font-bold text-xs transition-colors"
>
취소
</button>
<button
onClick={handleSave}
disabled={loading}
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"
>
<Save className="w-3.5 h-3.5" />
{loading ? '저장 중...' : (item ? '수정 완료' : '업체 등록')}
</button>
</div>
</div>
</div>
</div>
);
}

187
Project/frontend/src/components/license/LicenseList.tsx
View File

@@ -4,8 +4,6 @@ import {
FolderOpen, FolderOpen,
Download, Download,
Search, Search,
ChevronLeft,
ChevronRight,
CheckCircle, CheckCircle,
XCircle, XCircle,
ShieldCheck, ShieldCheck,
@@ -231,28 +229,26 @@ export function LicenseList() {
}; };
return ( return (
<div className="flex flex-col h-full animate-fade-in bg-white/[0.02]"> <div className="space-y-6 animate-fade-in pb-4">
{/* 리스트 헤더 */} {/* 라이선스 리스트 카드 (메모장 디자인 통일) */}
<div className="bg-white/5 border-b border-white/10 px-6 py-4 flex items-center justify-between backdrop-blur-md sticky top-0 z-20"> <div className="glass-effect rounded-3xl overflow-hidden shadow-2xl border border-white/10">
<div className="flex items-center gap-4"> <div className="px-6 py-4 border-b border-white/10 flex flex-col md:flex-row items-center justify-between gap-4">
<div className="flex items-center gap-3">
<div className="p-2 bg-primary-500/20 rounded-lg"> <div className="p-2 bg-primary-500/20 rounded-lg">
<ShieldCheck className="w-6 h-6 text-primary-400" /> <ShieldCheck className="w-5 h-5 text-primary-400" />
</div>
<div>
<h2 className="text-lg font-bold text-white leading-tight">라이선스 관리</h2>
<p className="text-[10px] text-white/40 uppercase tracking-wider font-medium">License Management</p>
</div> </div>
<h3 className="text-lg font-bold text-white tracking-tight">라이선스 관리</h3>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{/* 검색 바 */} {/* 검색창 */}
<div className="relative group w-80"> <div className="relative group w-48 md:w-64">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/20 group-focus-within:text-primary-400 transition-colors" /> <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 <input
type="text" type="text"
value={searchText} value={searchText}
onChange={(e) => setSearchText(e.target.value)} onChange={(e) => setSearchText(e.target.value)}
placeholder="검색어 입력..." placeholder="검색..."
className="w-full bg-white/5 border border-white/10 rounded-xl pl-9 pr-8 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" className="w-full bg-white/5 border border-white/10 rounded-xl pl-9 pr-8 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"
/> />
{searchText && ( {searchText && (
@@ -265,7 +261,7 @@ export function LicenseList() {
)} )}
</div> </div>
{/* 건수 */} {/* 개수 */}
<div className="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-xl border border-white/10 h-[38px]"> <div className="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-xl border border-white/10 h-[38px]">
<span className="text-primary-400 font-bold text-sm">{filteredList.length}</span> <span className="text-primary-400 font-bold text-sm">{filteredList.length}</span>
<span className="text-white/40 text-[10px] uppercase">건</span> <span className="text-white/40 text-[10px] uppercase">건</span>
@@ -291,58 +287,57 @@ export function LicenseList() {
<Download className="w-4 h-4" /> <Download className="w-4 h-4" />
</button> </button>
{/* 추가 */} {/* 추가 버튼 */}
<button <button
onClick={handleAdd} onClick={handleAdd}
className="p-2 bg-primary-500 hover:bg-primary-600 border border-white/20 rounded-xl text-white transition-all shadow-lg shadow-primary-500/20 active:scale-95" className="p-2 bg-success-500 hover:bg-success-600 border border-white/20 rounded-xl text-white transition-all shadow-lg shadow-success-500/20 active:scale-95"
title="추가" title="라이선스 추가"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
</button> </button>
</div> </div>
</div> </div>
<div className="flex-1 overflow-hidden flex flex-col p-6"> {/* 컬럼 헤더 (메모장 디자인 통일) */}
{/* 테이블 메인 섹션 */} <div className="bg-white/10 px-6 py-3 border-b border-white/5 flex items-center gap-4">
<div className="flex-1 glass-effect rounded-2xl border border-white/10 flex flex-col overflow-hidden shadow-2xl"> <div className="w-8 text-center text-xs font-medium text-white/70 uppercase">상태</div>
{/* 컬럼 헤더 */} <div className="flex-1 text-xs font-medium text-white/70 uppercase">제품명 / 제조사</div>
<div className="bg-white/10 px-6 py-3 border-b border-white/5 flex items-center gap-4 sticky top-0 z-10"> <div className="flex items-center gap-6 shrink-0">
<div className="w-12 text-center text-xs font-medium text-white/70 uppercase">상태</div> <div className="flex items-center gap-4">
<div className="flex-1 flex items-center gap-4"> <div className="w-32 text-left text-xs font-medium text-white/70 uppercase">버전</div>
<div className="w-1/4 text-xs font-medium text-white/70 uppercase">제품명</div> <div className="w-16 text-center text-xs font-medium text-white/70 uppercase">수량</div>
<div className="w-1/4 text-xs font-medium text-white/70 uppercase">버전</div> <div className="w-32 text-left text-xs font-medium text-white/70 uppercase">사용자</div>
<div className="w-20 text-xs font-medium text-white/70 uppercase text-center">수량</div> <div className="w-48 text-left text-xs font-medium text-white/70 uppercase">시리얼 번호</div>
<div className="w-32 text-xs font-medium text-white/70 uppercase">사용자</div> </div>
<div className="flex-1 text-xs font-medium text-white/70 uppercase">S/N</div> <div className="w-8"></div> {/* 액션/폴더 버튼 공간 */}
</div> </div>
</div> </div>
<div className="divide-y divide-white/5 overflow-y-auto custom-scrollbar flex-1"> <div className="divide-y divide-white/5 max-h-[calc(100vh-280px)] overflow-y-auto custom-scrollbar">
{loading ? ( {loading ? (
<div className="px-6 py-12 text-center"> <div className="px-6 py-12 text-center">
<RefreshCw className="w-10 h-10 mx-auto mb-4 animate-spin text-primary-500/50" /> <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> <p className="text-white/50 font-medium text-sm">데이터를 동기화 중...</p>
</div> </div>
) : paginatedList.length === 0 ? ( ) : paginatedList.length === 0 ? (
<div className="px-6 py-20 text-center"> <div className="px-6 py-20 text-center">
<div className="relative inline-block mb-4"> <ShieldCheck className="w-16 h-16 mx-auto text-white/10 mb-4" />
<ShieldCheck className="w-16 h-16 mx-auto text-white/10" /> <p className="text-white/30 text-base">조회된 라이선스가 없습니다</p>
</div>
<p className="text-white/30 font-medium">조회된 라이선스가 없습니다.</p>
</div> </div>
) : ( ) : (
paginatedList.map((item) => ( paginatedList.map((item) => (
<div <div
key={item.idx} key={item.idx}
onClick={() => handleRowClick(item)}
className={clsx( className={clsx(
"px-6 py-3 hover:bg-white/[0.03] transition-all cursor-pointer group flex items-center gap-4 border-b border-white/[0.02]", "px-6 py-2.5 hover:bg-white/[0.03] transition-all cursor-pointer group relative",
item.expire && "bg-danger-500/[0.03]" item.expire && "bg-danger-500/[0.02]"
)} )}
onClick={() => handleRowClick(item)}
> >
<div className="w-12 flex justify-center shrink-0"> <div className="flex items-center gap-4">
{/* 상태 아이콘 */}
<div className={clsx( <div className={clsx(
"w-8 h-8 rounded-lg flex items-center justify-center transition-all group-hover:scale-110", "w-8 h-8 rounded-lg flex items-center justify-center shrink-0 transition-all group-hover:scale-110",
item.expire ? "bg-danger-500/20 text-danger-400" : "bg-success-500/20 text-success-400" item.expire ? "bg-danger-500/20 text-danger-400" : "bg-success-500/20 text-success-400"
)}> )}>
{item.expire ? ( {item.expire ? (
@@ -351,32 +346,46 @@ export function LicenseList() {
<CheckCircle className="w-4 h-4" /> <CheckCircle className="w-4 h-4" />
)} )}
</div> </div>
</div>
<div className="flex-1 flex items-center gap-4 min-w-0"> {/* 제목 (제품명 / 제조사) */}
<div className="w-1/4 min-w-0 flex items-center gap-2"> <div className="flex-1 min-w-0">
<button <div className="flex flex-col">
onClick={(e) => handleOpenFolder(item, e)} <h4 className="text-[var(--text-primary)] font-medium group-hover:text-primary-300 transition-colors truncate text-sm">
className="p-1 text-warning-400 hover:text-warning-300 transition-colors shrink-0"
title="폴더 열기"
>
<FolderOpen className="w-4 h-4" />
</button>
<span className="text-sm font-bold text-white group-hover:text-primary-400 transition-colors truncate">
{item.name} {item.name}
</h4>
<span className="text-[10px] text-white/30 truncate uppercase tracking-tighter">
{item.manu || 'Maker'}
</span> </span>
</div> </div>
<div className="w-1/4 min-w-0">
<span className="text-sm text-white/60 truncate" title={item.version}>{item.version || '-'}</span>
</div> </div>
<div className="w-20 shrink-0 text-center">
<span className="text-sm font-medium text-white/70">{item.qty || 0}</span> {/* 메타데이터 그룹 */}
<div className="flex items-center gap-6 shrink-0">
<div className="flex items-center gap-4">
<span className="text-white/60 text-sm w-32 truncate text-left">
{item.version || '-'}
</span>
<span className="text-white/50 text-sm w-16 text-center font-mono">
{item.qty || 0}
</span>
<span className="text-white/60 text-sm w-32 truncate text-left">
{item.uids || '-'}
</span>
<span className="text-white/30 text-xs w-48 text-left font-mono truncate">
{item.serialNo || '-'}
</span>
</div> </div>
<div className="w-32 shrink-0">
<span className="text-sm text-white/50 truncate" title={item.uids}>{item.uids || '-'}</span> {/* 폴더 버튼 */}
<div className="w-8 flex justify-end">
<button
onClick={(e) => handleOpenFolder(item, e)}
className="p-1.5 rounded-lg bg-white/5 hover:bg-white/10 text-warning-400 transition-all border border-white/10 opacity-0 group-hover:opacity-100"
title="폴더 열기"
>
<FolderOpen className="w-3.5 h-3.5" />
</button>
</div> </div>
<div className="flex-1 min-w-0">
<span className="text-xs font-mono text-white/40 truncate" title={item.serialNo}>{item.serialNo || '-'}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -384,65 +393,39 @@ export function LicenseList() {
)} )}
</div> </div>
{/* Pagination */} {/* 페이징 (메모장 디자인 통일) */}
{totalPages > 1 && ( {totalPages > 1 && (
<div className="bg-white/5 px-6 py-3 border-t border-white/10 flex items-center justify-between backdrop-blur-md"> <div className="px-6 py-4 border-t border-white/10 flex items-center justify-between bg-white/[0.02]">
<div className="flex items-center gap-2"> <div className="text-white/40 text-xs font-medium">
<span className="text-white/30 text-[10px] uppercase font-bold tracking-wider">Page</span> 총 <span className="text-white">{filteredList.length}</span>건 중
<span className="text-white text-sm font-mono font-bold">{currentPage}</span> <span className="text-white ml-2">{(currentPage - 1) * pageSize + 1}-{Math.min(currentPage * pageSize, filteredList.length)}</span>건 표시
<span className="text-white/20 text-xs italic">of</span>
<span className="text-white/60 text-sm font-mono">{totalPages}</span>
</div> </div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
<button <button
onClick={goToPreviousPage} onClick={goToPreviousPage}
disabled={currentPage === 1} disabled={currentPage === 1}
className="p-1.5 rounded-lg hover:bg-white/10 text-white/70 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-all" className="w-8 h-8 flex items-center justify-center rounded-lg bg-white/5 text-white/70 hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-all border border-white/10 text-xs"
> >
<ChevronLeft className="w-5 h-5" /> «
</button> </button>
<div className="flex items-center bg-white/5 px-3 h-8 rounded-lg border border-white/10 text-xs font-bold">
<div className="flex items-center gap-1 mx-2"> <span className="text-primary-400">{currentPage}</span>
{totalPages <= 5 ? ( <span className="text-white/30 mx-1.5">/</span>
[...Array(totalPages)].map((_, i) => ( <span className="text-white/70">{totalPages}</span>
<button
key={i + 1}
onClick={() => setCurrentPage(i + 1)}
className={clsx(
"w-8 h-8 rounded-lg text-xs font-bold transition-all",
currentPage === i + 1
? "bg-primary-500 text-white shadow-lg shadow-primary-500/30"
: "text-white/40 hover:bg-white/10 hover:text-white"
)}
>
{i + 1}
</button>
))
) : (
<span className="text-white/40 text-xs px-2">{currentPage} / {totalPages}</span>
)}
</div> </div>
<button <button
onClick={goToNextPage} onClick={goToNextPage}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
className="p-1.5 rounded-lg hover:bg-white/10 text-white/70 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-all" className="w-8 h-8 flex items-center justify-center rounded-lg bg-white/5 text-white/70 hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-all border border-white/10 text-xs"
> >
<ChevronRight className="w-5 h-5" /> »
</button> </button>
</div> </div>
<div className="flex items-center gap-2">
<span className="text-white/30 text-[10px] uppercase font-bold tracking-wider">Total</span>
<span className="text-primary-400 text-sm font-mono font-bold leading-none">{filteredList.length}</span>
</div>
</div> </div>
)} )}
</div> </div>
</div>
{/* Edit Dialog */} {/* 편집 다이얼로그 */}
<LicenseEditDialog <LicenseEditDialog
item={selectedItem} item={selectedItem}
isOpen={isDialogOpen} isOpen={isDialogOpen}

181
Project/frontend/src/pages/Customs.tsx
View File

@@ -1,13 +1,19 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Building, Search, RefreshCw } from 'lucide-react'; import { Building, Search, RefreshCw, Plus } from 'lucide-react';
import { comms } from '@/communication'; import { comms } from '@/communication';
import type { CustomItem } from '@/types'; import type { CustomItem } from '@/types';
import clsx from 'clsx';
import { CustomEditDialog } from '@/components/customs/CustomEditDialog';
export function Customs() { export function Customs() {
const [customsList, setCustomsList] = useState<CustomItem[]>([]); const [customsList, setCustomsList] = useState<CustomItem[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [searchKey, setSearchKey] = useState(''); const [searchKey, setSearchKey] = useState('');
// 추가/편집 다이얼로그 상태
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [selectedItem, setSelectedItem] = useState<CustomItem | null>(null);
useEffect(() => { useEffect(() => {
loadData(); loadData();
}, []); }, []);
@@ -36,92 +42,171 @@ export function Customs() {
loadData(); loadData();
}; };
const handleEdit = (item: CustomItem) => {
setSelectedItem(item);
setIsDialogOpen(true);
};
const handleAdd = () => {
setSelectedItem(null);
setIsDialogOpen(true);
};
return ( return (
<div className="space-y-6 animate-fade-in"> <div className="space-y-6 animate-fade-in pb-4">
{/* 검색 필터 */} {/* 업체 정보 리스트 카드 (메모장 디자인 통일) */}
<div className="glass-effect rounded-2xl p-6"> <div className="glass-effect rounded-3xl overflow-hidden shadow-2xl border border-white/10">
<div className="flex items-center gap-4"> <div className="px-6 py-4 border-b border-white/10 flex flex-col md:flex-row items-center justify-between gap-4">
<div className="flex items-center gap-2 flex-1"> <div className="flex items-center gap-3">
<label className="text-white/70 text-sm font-medium whitespace-nowrap">검색어</label> <div className="p-2 bg-primary-500/20 rounded-lg">
<Building className="w-5 h-5 text-primary-400" />
</div>
<div>
<h3 className="text-lg font-bold text-white tracking-tight">업체 정보</h3>
</div>
</div>
<div className="flex items-center gap-3">
{/* 검색창 */}
<div className="relative group w-48 md:w-80">
<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 <input
type="text" type="text"
value={searchKey} value={searchKey}
onChange={(e) => setSearchKey(e.target.value)} onChange={(e) => setSearchKey(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearch()} onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
placeholder="업체명, 대표자, 전화번호, 이메일, 담당자 등" placeholder="업체명, 대표자, 번호 검색..."
className="flex-1 h-10 bg-white/20 border border-white/30 rounded-lg px-3 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400" className="w-full bg-white/5 border border-white/10 rounded-xl pl-9 pr-8 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"
/> />
{searchKey && (
<button
onClick={() => { setSearchKey(''); loadData(); }}
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-white/20 hover:text-white transition-colors"
>
<RefreshCw className="w-3.5 h-3.5" />
</button>
)}
</div> </div>
{/* 개수 */}
<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">{customsList.length}</span>
<span className="text-white/40 text-[10px] uppercase">건</span>
</div>
{/* 새로고침 */}
<button <button
onClick={handleSearch} onClick={loadData}
disabled={loading} disabled={loading}
className="h-10 bg-primary-500 hover:bg-primary-600 text-white px-6 rounded-lg transition-colors flex items-center justify-center disabled:opacity-50" 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="새로고침"
> >
{loading ? ( <RefreshCw className={clsx("w-4 h-4", loading && "animate-spin")} />
<RefreshCw className="w-4 h-4 mr-2 animate-spin" /> </button>
) : (
<Search className="w-4 h-4 mr-2" /> {/* 추가 버튼 */}
)} <button
조회 onClick={handleAdd}
className="p-2 bg-primary-500 hover:bg-primary-600 border border-white/20 rounded-xl text-white transition-all shadow-lg shadow-primary-500/20 active:scale-95 h-[40px] w-[40px] flex items-center justify-center group"
title="업체 추가"
>
<Plus className="w-4 h-4 group-hover:rotate-90 transition-transform" />
</button> </button>
</div> </div>
</div> </div>
{/* 업체 목록 */} {/* 컬럼 헤더 (메모장 디자인 통일) */}
<div className="glass-effect rounded-2xl overflow-hidden"> <div className="bg-white/10 px-6 py-3 border-b border-white/5 flex items-center gap-4">
<div className="px-6 py-4 border-b border-white/10 flex items-center justify-between"> <div className="w-8"></div>
<h3 className="text-lg font-semibold text-white flex items-center"> <div className="flex-1 text-xs font-medium text-white/70 uppercase tracking-tighter">업체명 / 구분</div>
<Building className="w-5 h-5 mr-2" /> <div className="flex items-center gap-6 shrink-0 text-xs font-medium text-white/70 uppercase tracking-tighter">
업체 정보 <div className="w-24">대표자</div>
</h3> <div className="w-36">연락처 / 이메일</div>
<span className="text-white/60 text-sm">{customsList.length}건</span> <div className="w-24">담당자</div>
<div className="w-80 truncate">주소</div>
</div>
</div> </div>
<div className="divide-y divide-white/10 max-h-[calc(100vh-300px)] overflow-y-auto"> <div className="divide-y divide-white/5 max-h-[calc(100vh-280px)] overflow-y-auto custom-scrollbar">
{loading ? ( {loading ? (
<div className="px-6 py-8 text-center"> <div className="px-6 py-12 text-center">
<div className="flex items-center justify-center"> <RefreshCw className="w-10 h-10 mx-auto mb-4 animate-spin text-primary-500/50" />
<RefreshCw className="w-5 h-5 mr-2 animate-spin text-white/50" /> <p className="text-white/50 font-medium text-sm">데이터를 조회 중...</p>
<span className="text-white/50">데이터를 불러오는 중...</span>
</div>
</div> </div>
) : customsList.length === 0 ? ( ) : customsList.length === 0 ? (
<div className="px-6 py-8 text-center"> <div className="px-6 py-20 text-center">
<Building className="w-12 h-12 mx-auto mb-3 text-white/30" /> <Building className="w-16 h-16 mx-auto text-white/10 mb-4" />
<p className="text-white/50">조회된 데이터가 없습니다.</p> <p className="text-white/30 text-base font-bold">조회된 업체 정보가 없습니다</p>
<p className="text-white/40 text-sm mt-2">업체정보 API 구현이 필요합니다.</p> <p className="text-white/10 text-[10px] mt-2 uppercase tracking-[0.2em]">No matching company records</p>
</div> </div>
) : ( ) : (
customsList.map((item) => ( customsList.map((item) => (
<div <div
key={item.idx} key={item.idx}
className="px-6 py-4 hover:bg-white/5 transition-colors" onClick={() => handleEdit(item)}
className="px-6 py-3 hover:bg-white/[0.03] transition-all cursor-pointer group"
> >
<div className="flex items-center justify-between gap-4"> <div className="flex items-center gap-4">
{/* 구분 아이콘 */}
<div className="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center shrink-0 text-white/20 group-hover:text-primary-400 group-hover:bg-primary-500/10 transition-all">
<Building className="w-4 h-4" />
</div>
{/* 업체명 및 정보 */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h4 className="text-white font-medium mb-1"> <div className="flex flex-col">
<div className="flex items-center gap-2">
<h4 className="text-[var(--text-primary)] font-bold group-hover:text-primary-300 transition-colors truncate text-sm">
{item.name} {item.name}
{item.name2 && <span className="text-white/60 text-sm ml-2">({item.name2})</span>}
</h4> </h4>
<div className="flex items-center gap-4 text-white/60 text-sm flex-wrap"> {item.name2 && <span className="text-white/30 text-[10px]">({item.name2})</span>}
{item.grp && <div>구분: {item.grp}</div>} </div>
{item.owner && <div>대표: {item.owner}</div>} <span className="text-[10px] text-white/30 truncate uppercase tracking-tighter mt-0.5">
{item.uptae && <div>업태: {item.uptae}</div>} {item.grp || '미분류'} | {item.uptae || '-'}
{item.address && <div>{item.address}</div>} </span>
</div> </div>
</div> </div>
<div className="flex flex-col items-end gap-1 flex-shrink-0 text-white/60 text-sm">
{item.tel && <div>{item.tel}</div>} {/* 데이터 그룹 */}
{item.email && <div>{item.email}</div>} <div className="flex items-center gap-6 shrink-0">
{item.staff && <div>담당: {item.staff}</div>} <div className="w-24 text-sm text-white/70">
{item.owner || '-'}
</div>
<div className="w-36 flex flex-col">
<span className="text-sm text-white/80">{item.tel || '-'}</span>
<span className="text-[10px] text-white/20 truncate lowercase">{item.email || ''}</span>
</div>
<div className="w-24 text-sm text-white/60 font-medium">
{item.staff || '-'}
</div>
<div className="w-80 text-xs text-white/30 truncate font-light" title={item.address}>
{item.address || '-'}
</div>
</div> </div>
</div> </div>
</div> </div>
)) ))
)} )}
</div> </div>
{/* 하단 푸터 (메모장 기반) */}
<div className="px-6 py-2 flex items-center justify-between bg-white/[0.02] border-t border-white/5">
<div className="text-white/20 text-[9px] font-bold uppercase tracking-[0.2em] py-2">
Company Directory System <span className="text-white/5 mx-2">/</span>
Records <span className="text-primary-400/50 font-mono tracking-normal">{customsList.length}</span>
</div> </div>
<div className="text-[9px] text-white/10 italic">
Reference sync: {new Date().toLocaleDateString()}
</div>
</div>
</div>
<CustomEditDialog
isOpen={isDialogOpen}
onClose={() => setIsDialogOpen(false)}
onSaved={loadData}
item={selectedItem}
/>
</div> </div>
); );
} }

407
Project/frontend/src/pages/MailForm.tsx
View File

@@ -4,14 +4,17 @@ import {
Plus, Plus,
Edit2, Edit2,
Trash2, Trash2,
Save,
X, X,
Loader2,
RefreshCw, RefreshCw,
Search, Search,
Type,
FileText,
User,
CheckCircle2
} from 'lucide-react'; } from 'lucide-react';
import { comms } from '@/communication'; import { comms } from '@/communication';
import { MailFormItem } from '@/types'; import { MailFormItem } from '@/types';
import { clsx } from 'clsx';
const initialFormData: Partial<MailFormItem> = { const initialFormData: Partial<MailFormItem> = {
cate: '', cate: '',
@@ -165,305 +168,399 @@ export function MailFormPage() {
}; };
return ( return (
<div className="space-y-6"> <div className="space-y-6 animate-fade-in pb-4 h-full">
{/* 헤더 */} {/* 메일양식 메인 카드 */}
<div className="glass-effect rounded-2xl p-6"> <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="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> <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] shrink-0">
<div className="flex items-center space-x-3"> <div className="flex items-center gap-3">
<div className="p-3 bg-primary-500/20 rounded-xl"> <div className="p-2 bg-primary-500/20 rounded-lg">
<Mail className="w-6 h-6 text-primary-400" /> <Mail className="w-5 h-5 text-primary-400" />
</div> </div>
<div> <div>
<h1 className="text-2xl font-bold text-white">메일양식</h1> <h3 className="text-lg font-bold text-white tracking-tight">메일양식 관리</h3>
<p className="text-white/60 text-sm">메일 템플릿 관리</p> <p className="text-white/30 text-[10px] uppercase font-bold tracking-widest mt-0.5">
Email Template System
</p>
</div> </div>
</div> </div>
<div className="flex items-center space-x-3"> <div className="flex items-center gap-3">
{/* 검색 */} {/* 검색창 */}
<div className="relative"> <div className="relative group w-48 md:w-64">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-white/40" /> <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 <input
type="text" type="text"
value={searchKey} value={searchKey}
onChange={(e) => setSearchKey(e.target.value)} onChange={(e) => setSearchKey(e.target.value)}
placeholder="검색..." placeholder="양식명, 제목, 분류 검색..."
className="pl-10 pr-4 py-2 bg-white/10 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:border-primary-500 w-48" 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>
{/* 개수 */}
<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">{filteredItems.length}</span>
<span className="text-white/40 text-[10px] uppercase">건</span>
</div>
{/* 새로고침 */}
<button <button
onClick={loadData} onClick={loadData}
disabled={loading} disabled={loading}
className="flex items-center space-x-2 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white transition-colors disabled:opacity-50" 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={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} /> <RefreshCw className={clsx("w-4 h-4", loading && "animate-spin")} />
</button> </button>
{/* 추가 버튼 */}
<button <button
onClick={openAddModal} onClick={openAddModal}
className="flex items-center space-x-2 px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg text-white transition-colors" className="p-2 bg-primary-500 hover:bg-primary-600 border border-white/20 rounded-xl text-white transition-all shadow-lg shadow-primary-500/20 active:scale-95 h-[40px] w-[40px] flex items-center justify-center group"
title="새 양식 추가"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4 group-hover:rotate-90 transition-transform" />
<span>새 양식</span>
</button> </button>
</div> </div>
</div> </div>
{/* 리스트 헤더 */}
<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-24 px-4 text-center">분류</div>
<div className="flex-1 px-4">양식 정보</div>
<div className="w-64 px-4">메일 제목</div>
<div className="w-32 px-4 text-center">수신 옵션</div>
<div className="w-20 text-center">작업</div>
</div> </div>
{/* 목록 */} <div className="flex-1 overflow-y-auto custom-scrollbar divide-y divide-white/5">
<div className="glass-effect rounded-2xl overflow-hidden">
{loading ? ( {loading ? (
<div className="flex items-center justify-center py-20"> <div className="py-20 text-center">
<Loader2 className="w-8 h-8 text-white animate-spin" /> <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> </div>
) : filteredItems.length === 0 ? ( ) : filteredItems.length === 0 ? (
<div className="flex flex-col items-center justify-center py-20 text-white/50"> <div className="py-32 text-center">
<Mail className="w-12 h-12 mb-4 opacity-50" /> <Mail className="w-16 h-16 mx-auto text-white/10 mb-4" />
<p>등록된 메일양식이 없습니다.</p> <p className="text-white/30 text-base font-bold">등록된 메일양식이 없습니다</p>
<p className="text-white/10 text-[10px] mt-2 uppercase tracking-[0.2em]">No email templates available</p>
</div> </div>
) : ( ) : (
<div className="overflow-x-auto"> filteredItems.map((item) => (
<table className="w-full"> <div
<thead className="bg-white/10"> key={item.idx}
<tr> className="px-6 py-3 hover:bg-white/[0.03] transition-all group flex items-center"
<th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase w-24">분류</th> >
<th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase">양식명</th> {/* 분류 */}
<th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase">제목</th> <div className="w-24 px-4 text-center">
<th className="px-4 py-3 text-center text-xs font-medium text-white/70 uppercase w-20">To</th> <span className="px-2 py-0.5 bg-white/5 border border-white/5 rounded-md text-[10px] text-white/40 font-bold uppercase truncate block">
<th className="px-4 py-3 text-center text-xs font-medium text-white/70 uppercase w-20">CC</th> {item.cate || '미분류'}
<th className="px-4 py-3 text-center text-xs font-medium text-white/70 uppercase w-20">BCC</th> </span>
<th className="px-4 py-3 text-center text-xs font-medium text-white/70 uppercase w-24">작업</th> </div>
</tr>
</thead> {/* 양식명 */}
<tbody className="divide-y divide-white/5"> <div className="flex-1 px-4 flex flex-col">
{filteredItems.map((item) => ( <div className="text-sm font-bold text-white group-hover:text-primary-300 transition-colors">
<tr key={item.idx} className="hover:bg-white/5 transition-colors"> {item.title}
<td className="px-4 py-3 text-white/70 text-sm">{item.cate || '-'}</td> </div>
<td className="px-4 py-3 text-white text-sm font-medium">{item.title}</td> <div className="text-[10px] text-white/20 mt-0.5 flex items-center gap-1.5">
<td className="px-4 py-3 text-white/70 text-sm">{item.subject || '-'}</td> <FileText className="w-2.5 h-2.5" />
<td className="px-4 py-3 text-center"> ID: {item.idx}
{item.selfTo && ( </div>
<span className="inline-block w-5 h-5 bg-success-500/20 text-success-400 rounded text-xs leading-5">S</span> </div>
{/* 제목 */}
<div className="w-64 px-4 text-xs text-white/50 truncate italic">
{item.subject || '(제목 없음)'}
</div>
{/* 발신 옵션 (To/CC/BCC Self) */}
<div className="w-32 px-4 flex justify-center gap-1.5">
{[
{ label: 'T', active: item.selfTo, color: 'text-primary-400', bg: 'bg-primary-500/10' },
{ label: 'C', active: item.selfCC, color: 'text-amber-400', bg: 'bg-amber-500/10' },
{ label: 'B', active: item.selfBCC, color: 'text-emerald-400', bg: 'bg-emerald-500/10' }
].map((opt, i) => (
<div
key={i}
className={clsx(
"w-6 h-6 rounded flex items-center justify-center text-[10px] font-bold border border-white/5",
opt.active ? `${opt.bg} ${opt.color} border-${opt.color}/20` : "bg-white/5 text-white/10"
)} )}
</td> title={`${opt.label === 'T' ? 'To' : opt.label === 'C' ? 'CC' : 'BCC'} Self-include`}
<td className="px-4 py-3 text-center"> >
{item.selfCC && ( {opt.label}
<span className="inline-block w-5 h-5 bg-warning-500/20 text-warning-400 rounded text-xs leading-5">S</span> </div>
)} ))}
</td> </div>
<td className="px-4 py-3 text-center">
{item.selfBCC && ( {/* 작업 버튼 */}
<span className="inline-block w-5 h-5 bg-primary-500/20 text-primary-400 rounded text-xs leading-5">S</span> <div className="w-20 flex justify-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
)}
</td>
<td className="px-4 py-3">
<div className="flex items-center justify-center space-x-2">
<button <button
onClick={() => openEditModal(item)} onClick={() => openEditModal(item)}
className="p-1.5 hover:bg-white/10 rounded text-white/70 hover:text-white transition-colors" className="p-1.5 hover:bg-white/10 rounded-lg text-white/40 hover:text-white transition-colors"
title="수정"
> >
<Edit2 className="w-4 h-4" /> <Edit2 className="w-4 h-4" />
</button> </button>
<button <button
onClick={() => handleDelete(item)} onClick={() => handleDelete(item)}
className="p-1.5 hover:bg-danger-500/20 rounded text-white/70 hover:text-danger-400 transition-colors" className="p-1.5 hover:bg-red-500/10 rounded-lg text-white/40 hover:text-red-400 transition-colors"
title="삭제"
> >
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</button> </button>
</div> </div>
</td>
</tr>
))}
</tbody>
</table>
</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">
Template Management Hub <span className="text-white/5 mx-2">/</span>
Total <span className="text-primary-400/50 font-mono tracking-normal">{filteredItems.length}</span>
</div>
<div className="text-[9px] text-white/10 italic">
Reference date: {new Date().toLocaleDateString()}
</div>
</div>
</div>
{/* 편집 모달 */} {/* 편집 모달 */}
{showModal && ( {showModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"> <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
<div className="bg-slate-800 rounded-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col"> <div
className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in"
onClick={() => setShowModal(false)}
/>
<div className="relative w-full max-w-4xl bg-[#1a1c1e] border border-white/10 rounded-3xl shadow-2xl overflow-hidden animate-scale-in flex flex-col max-h-[90vh]">
{/* 모달 헤더 */} {/* 모달 헤더 */}
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10"> <div className="px-6 py-5 border-b border-white/10 flex items-center justify-between bg-white/[0.02] shrink-0">
<h2 className="text-xl font-bold text-white"> <div className="flex items-center gap-3">
{editingItem ? '메일양식 수정' : '새 메일양식'} <div className="p-2 bg-primary-500/20 rounded-xl text-primary-400">
<Mail className="w-5 h-5" />
</div>
<div>
<h2 className="text-xl font-bold text-white tracking-tight">
{editingItem ? '메일양식 수정' : '새 메일양식 등록'}
</h2> </h2>
<p className="text-white/30 text-[10px] uppercase font-bold tracking-widest mt-0.5">
Template Configuration
</p>
</div>
</div>
<button <button
onClick={() => setShowModal(false)} onClick={() => setShowModal(false)}
className="p-2 hover:bg-white/10 rounded-lg text-white/70 hover:text-white transition-colors" className="p-2 hover:bg-white/10 rounded-xl text-white/40 hover:text-white transition-colors"
> >
<X className="w-5 h-5" /> <X className="w-5 h-5" />
</button> </button>
</div> </div>
{/* 모달 내용 */} {/* 모달 내용 */}
<div className="flex-1 overflow-y-auto p-6 space-y-4"> <div className="flex-1 overflow-y-auto p-6 space-y-8 custom-scrollbar">
{/* 1행: 분류, 양식명 */} {/* 기본 정보 */}
<div className="grid grid-cols-2 gap-4"> <section className="space-y-4">
<div> <div className="flex items-center gap-3 mb-2">
<label className="block text-white/70 text-sm mb-1">분류</label> <Type 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">분류 (Category)</label>
<input <input
type="text" type="text"
value={formData.cate || ''} value={formData.cate || ''}
onChange={(e) => setFormData({ ...formData, cate: e.target.value })} onChange={(e) => setFormData({ ...formData, cate: e.target.value })}
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary-500" className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="업무, 공지 등"
/> />
</div> </div>
<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="block text-white/70 text-sm mb-1">양식명 *</label> <label className="text-[10px] font-bold text-white/30 uppercase pl-1">양식 명칭 *</label>
<input <input
type="text" type="text"
value={formData.title || ''} value={formData.title || ''}
onChange={(e) => setFormData({ ...formData, title: e.target.value })} onChange={(e) => setFormData({ ...formData, title: e.target.value })}
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary-500" className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="구분이 쉬운 양식 이름을 입력하세요"
/> />
</div> </div>
</div> </div>
{/* 2행: 제목 */} <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">
<div> <label className="text-[10px] font-bold text-white/30 uppercase pl-1">메일 제목 (Subject)</label>
<label className="block text-white/70 text-sm mb-1">메일 제목</label>
<input <input
type="text" type="text"
value={formData.subject || ''} value={formData.subject || ''}
onChange={(e) => setFormData({ ...formData, subject: e.target.value })} onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary-500" className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="발송 시 자동으로 채워질 제목"
/> />
</div> </div>
</section>
{/* 3행: 수신자 */} {/* 수신자 설정 */}
<div className="grid grid-cols-3 gap-4"> <section className="space-y-4">
<div> <div className="flex items-center gap-3 mb-2">
<label className="block text-white/70 text-sm mb-1">To (수신)</label> <User className="w-4 h-4 text-amber-500" />
<textarea <h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">수신자 기본값</h4>
value={formData.tolist || ''} <div className="flex-1 h-px bg-white/5"></div>
onChange={(e) => setFormData({ ...formData, tolist: e.target.value })} </div>
rows={2}
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:border-primary-500 resize-none" <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
placeholder="이메일 주소 (줄바꿈으로 구분)" {/* To */}
/> <div className="space-y-3">
<label className="flex items-center mt-1 text-sm text-white/60"> <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 flex items-center justify-between">
To (수신)
<span className="flex items-center gap-1.5 cursor-pointer text-primary-400">
<input <input
type="checkbox" type="checkbox"
checked={formData.selfTo || false} checked={formData.selfTo || false}
onChange={(e) => setFormData({ ...formData, selfTo: e.target.checked })} onChange={(e) => setFormData({ ...formData, selfTo: e.target.checked })}
className="mr-2" className="w-3 h-3 rounded"
/> />
본인 포함 Self
</span>
</label> </label>
</div>
<div>
<label className="block text-white/70 text-sm mb-1">CC (참조)</label>
<textarea <textarea
value={formData.cc || ''} value={formData.tolist || ''}
onChange={(e) => setFormData({ ...formData, cc: e.target.value })} onChange={(e) => setFormData({ ...formData, tolist: e.target.value })}
rows={2} rows={3}
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:border-primary-500 resize-none" className="w-full bg-transparent border-none text-xs text-white focus:outline-none resize-none placeholder:text-white/10"
placeholder="이메일 주소 (줄바꿈으로 구분)" placeholder="주소를 입력하세요 (줄바꿈 구분)"
/> />
<label className="flex items-center mt-1 text-sm text-white/60"> </div>
</div>
{/* CC */}
<div className="space-y-3">
<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 flex items-center justify-between">
CC (참조)
<span className="flex items-center gap-2 cursor-pointer text-amber-400">
<input <input
type="checkbox" type="checkbox"
checked={formData.selfCC || false} checked={formData.selfCC || false}
onChange={(e) => setFormData({ ...formData, selfCC: e.target.checked })} onChange={(e) => setFormData({ ...formData, selfCC: e.target.checked })}
className="mr-2" className="w-3 h-3 rounded"
/> />
본인 포함 Self
</span>
</label> </label>
</div>
<div>
<label className="block text-white/70 text-sm mb-1">BCC (숨은참조)</label>
<textarea <textarea
value={formData.bcc || ''} value={formData.cc || ''}
onChange={(e) => setFormData({ ...formData, bcc: e.target.value })} onChange={(e) => setFormData({ ...formData, cc: e.target.value })}
rows={2} rows={3}
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:border-primary-500 resize-none" className="w-full bg-transparent border-none text-xs text-white focus:outline-none resize-none placeholder:text-white/10"
placeholder="이메일 주소 (줄바꿈으로 구분)" placeholder="주소를 입력하세요 (줄바꿈 구분)"
/> />
<label className="flex items-center mt-1 text-sm text-white/60"> </div>
</div>
{/* BCC */}
<div className="space-y-3">
<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 flex items-center justify-between">
BCC (숨은참조)
<span className="flex items-center gap-2 cursor-pointer text-emerald-400">
<input <input
type="checkbox" type="checkbox"
checked={formData.selfBCC || false} checked={formData.selfBCC || false}
onChange={(e) => setFormData({ ...formData, selfBCC: e.target.checked })} onChange={(e) => setFormData({ ...formData, selfBCC: e.target.checked })}
className="mr-2" className="w-3 h-3 rounded"
/> />
본인 포함 Self
</span>
</label> </label>
<textarea
value={formData.bcc || ''}
onChange={(e) => setFormData({ ...formData, bcc: e.target.value })}
rows={3}
className="w-full bg-transparent border-none text-xs text-white focus:outline-none resize-none placeholder:text-white/10"
placeholder="주소를 입력하세요 (줄바꿈 구분)"
/>
</div>
</div> </div>
</div> </div>
{/* 4행: 제외 메일 */} <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid 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">
<div> <label className="text-[10px] font-bold text-white/30 uppercase pl-1 italic">Expect Mail (To 제외 주소)</label>
<label className="block text-white/70 text-sm mb-1">To 제외 메일</label>
<input <input
type="text" type="text"
value={formData.exceptmail || ''} value={formData.exceptmail || ''}
onChange={(e) => setFormData({ ...formData, exceptmail: e.target.value })} onChange={(e) => setFormData({ ...formData, exceptmail: e.target.value })}
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:border-primary-500" className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="제외할 이메일 주소"
/> />
</div> </div>
<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="block text-white/70 text-sm mb-1">CC 제외 메일</label> <label className="text-[10px] font-bold text-white/30 uppercase pl-1 italic">Expect Mail CC (참조 제외 주소)</label>
<input <input
type="text" type="text"
value={formData.exceptmailcc || ''} value={formData.exceptmailcc || ''}
onChange={(e) => setFormData({ ...formData, exceptmailcc: e.target.value })} onChange={(e) => setFormData({ ...formData, exceptmailcc: e.target.value })}
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:border-primary-500" className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
placeholder="제외할 이메일 주소"
/> />
</div> </div>
</div> </div>
</section>
{/* 5행: 본문 */} {/* 본문 에디터 영역 */}
<div> <section className="space-y-4">
<label className="block text-white/70 text-sm mb-1">메일 본문</label> <div className="flex items-center gap-3 mb-2">
<FileText className="w-4 h-4 text-emerald-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="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">메일 본문 (HTML 가능)</label>
<textarea <textarea
value={formData.body || ''} value={formData.body || ''}
onChange={(e) => setFormData({ ...formData, body: e.target.value })} onChange={(e) => setFormData({ ...formData, body: e.target.value })}
rows={6} rows={8}
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary-500 resize-none" className="w-full bg-transparent border-none text-sm text-white focus:outline-none resize-none placeholder:text-white/10 mt-1 font-mono"
placeholder="메일 본문 내용..." placeholder="메일 본문 내용을 입력하세요"
/> />
</div> </div>
{/* 6행: 꼬리말 */} <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">
<div> <label className="text-[10px] font-bold text-white/30 uppercase pl-1">꼬리말 (Tail/Signature)</label>
<label className="block text-white/70 text-sm mb-1">꼬리말</label>
<textarea <textarea
value={formData.tail || ''} value={formData.tail || ''}
onChange={(e) => setFormData({ ...formData, tail: e.target.value })} onChange={(e) => setFormData({ ...formData, tail: e.target.value })}
rows={3} rows={3}
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary-500 resize-none" className="w-full bg-transparent border-none text-sm text-white focus:outline-none resize-none placeholder:text-white/10 mt-1"
placeholder="메일 꼬리말..." placeholder="하단에 공통으로 표시될 꼬리말"
/> />
</div> </div>
</section>
</div> </div>
{/* 모달 푸터 */} {/* 모달 푸터 */}
<div className="flex items-center justify-end space-x-3 px-6 py-4 border-t border-white/10"> <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 <button
onClick={() => setShowModal(false)} onClick={() => setShowModal(false)}
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> </button>
<button <button
onClick={handleSave} onClick={handleSave}
disabled={saving} disabled={saving}
className="flex items-center space-x-2 px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg text-white transition-colors disabled:opacity-50" 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"
> >
{saving ? ( {saving ? (
<Loader2 className="w-4 h-4 animate-spin" /> <RefreshCw className="w-3.5 h-3.5 animate-spin" />
) : ( ) : (
<Save className="w-4 h-4" /> <CheckCircle2 className="w-3.5 h-3.5" />
)} )}
<span>저장</span> <span>{editingItem ? '양식 변경 사항 저장' : '새 메일양식 저장'}</span>
</button> </button>
</div> </div>
</div> </div>

537
Project/frontend/src/pages/UserList.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react'; 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 { clsx } from 'clsx';
import { comms } from '@/communication'; import { comms } from '@/communication';
import { GroupUser, UserLevelInfo, UserFullData } from '@/types'; import { GroupUser, UserLevelInfo, UserFullData } from '@/types';
@@ -64,284 +64,252 @@ function UserDetailDialog({ user, levelInfo, onClose, onSave }: UserDetailDialog
}; };
return ( 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 <div
className="glass-effect rounded-xl w-full max-w-2xl max-h-[90vh] overflow-hidden" className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in"
onClick={(e) => e.stopPropagation()} onClick={onClose}
> />
{/* 헤더 */}
<div className="p-4 border-b border-white/10 flex items-center justify-between"> {/* 다이얼로그 콘텐트 */}
<div className="flex items-center gap-2"> <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]">
<User className="w-5 h-5 text-white/70" /> <div className="px-6 py-5 border-b border-white/10 flex items-center justify-between bg-white/[0.02] shrink-0">
<h2 className="text-lg font-semibold text-white"> <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 ? '' : '(읽기 전용)'} 사용자 정보 {canEdit ? '' : '(읽기 전용)'}
</h2> </h3>
<p className="text-white/30 text-[10px] uppercase font-bold tracking-widest mt-0.5">
User Profile Management
</p>
</div>
</div> </div>
<button <button
onClick={onClose} 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> </button>
</div> </div>
{/* 내용 */} <div className="p-6 overflow-y-auto custom-scrollbar flex-1">
<div className="p-4 overflow-auto max-h-[calc(90vh-120px)]"> <div className="space-y-8">
<div className="grid grid-cols-3 gap-4"> {/* 기본 인사 정보 */}
{/* 사번 (읽기 전용) */} <section className="space-y-4">
<div> <div className="flex items-center gap-3 mb-2">
<label className="block text-sm text-white/70 mb-1">사번</label> <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 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 <input
type="text" type="text"
value={formData.id} value={formData.id}
disabled disabled
className="w-full px-3 py-2 bg-white/5 border border-white/20 rounded-lg text-white/50" className="w-full bg-transparent border-none text-sm text-white/50 focus:outline-none"
/> />
</div> </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>
<div>
<label className="block text-sm text-white/70 mb-1">성명</label>
<input <input
type="text" type="text"
value={formData.name} value={formData.name}
onChange={(e) => handleChange('name', e.target.value)} onChange={(e) => handleChange('name', e.target.value)}
disabled={!canEdit} disabled={!canEdit}
className={clsx( className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
"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>
<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>
<div>
<label className="block text-sm text-white/70 mb-1">영문명</label>
<input <input
type="text" type="text"
value={formData.nameE} value={formData.nameE}
onChange={(e) => handleChange('nameE', e.target.value)} onChange={(e) => handleChange('nameE', e.target.value)}
disabled={!canEdit} disabled={!canEdit}
className={clsx( className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
"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>
</div>
{/* 직책 */} <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<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="block text-sm text-white/70 mb-1">직책</label> <label className="text-[10px] font-bold text-white/30 uppercase pl-1">직책</label>
<input <input
type="text" type="text"
value={formData.grade} value={formData.grade}
onChange={(e) => handleChange('grade', e.target.value)} onChange={(e) => handleChange('grade', e.target.value)}
disabled={!canEdit} disabled={!canEdit}
className={clsx( className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
"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>
<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>
<div>
<label className="block text-sm text-white/70 mb-1">공정</label>
<input <input
type="text" type="text"
value={formData.processs} value={formData.processs}
onChange={(e) => handleChange('processs', e.target.value)} onChange={(e) => handleChange('processs', e.target.value)}
disabled={!canEdit} disabled={!canEdit}
className={clsx( className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
"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>
<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>
<div>
<label className="block text-sm text-white/70 mb-1">상태</label>
<input <input
type="text" type="text"
value={formData.state} value={formData.state}
onChange={(e) => handleChange('state', e.target.value)} onChange={(e) => handleChange('state', e.target.value)}
disabled={!canEdit} disabled={!canEdit}
className={clsx( className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
"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>
</div>
</section>
{/* 이메일 */} {/* 연락처 및 일정 */}
<div> <section className="space-y-4">
<label className="block text-sm text-white/70 mb-1">이메일</label> <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 <input
type="email" type="email"
value={formData.email} value={formData.email}
onChange={(e) => handleChange('email', e.target.value)} onChange={(e) => handleChange('email', e.target.value)}
disabled={!canEdit} disabled={!canEdit}
className={clsx( className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
"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>
<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>
<div>
<label className="block text-sm text-white/70 mb-1">전화</label>
<input <input
type="text" type="text"
value={formData.tel} value={formData.tel}
onChange={(e) => handleChange('tel', e.target.value)} onChange={(e) => handleChange('tel', e.target.value)}
disabled={!canEdit} disabled={!canEdit}
className={clsx( className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
"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>
</div>
{/* 입사일 */} <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<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="block text-sm text-white/70 mb-1">입사일</label> <label className="text-[10px] font-bold text-white/30 uppercase pl-1">입사일</label>
<input <input
type="text" type="text"
value={formData.indate} value={formData.indate}
onChange={(e) => handleChange('indate', e.target.value)} onChange={(e) => handleChange('indate', e.target.value)}
disabled={!canEdit} disabled={!canEdit}
placeholder="YYYY-MM-DD" placeholder="YYYY-MM-DD"
className={clsx( className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
"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>
<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>
<div>
<label className="block text-sm text-white/70 mb-1">퇴사일</label>
<input <input
type="text" type="text"
value={formData.outdate} value={formData.outdate}
onChange={(e) => handleChange('outdate', e.target.value)} onChange={(e) => handleChange('outdate', e.target.value)}
disabled={!canEdit} disabled={!canEdit}
placeholder="YYYY-MM-DD" placeholder="YYYY-MM-DD"
className={clsx( className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
"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>
</div>
</section>
{/* 레벨 */} {/* 관리자 권한 및 메모 */}
<div> <section className="space-y-4">
<label className="block text-sm text-white/70 mb-1">레벨</label> <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 <select
value={formData.level} value={formData.level}
onChange={(e) => handleChange('level', parseInt(e.target.value) || 0)} onChange={(e) => handleChange('level', parseInt(e.target.value) || 0)}
disabled={!canEditAdmin} disabled={!canEditAdmin}
className={clsx( className="w-full bg-transparent border-none text-sm text-white focus:outline-none cursor-pointer"
"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) => ( {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((lv) => (
<option key={lv} value={lv} className="bg-gray-800 text-white"> <option key={lv} value={lv} className="bg-[#1a1c1e] text-white">
{lv} Level {lv}
</option> </option>
))} ))}
</select> </select>
</div> </div>
{/* 메모 */} <div className="md:col-span-3 flex items-center gap-6 px-4">
<div className="col-span-3"> {[
<label className="block text-sm text-white/70 mb-1">메모</label> { 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 <textarea
value={formData.memo} value={formData.memo}
onChange={(e) => handleChange('memo', e.target.value)} onChange={(e) => handleChange('memo', e.target.value)}
disabled={!canEdit} disabled={!canEdit}
rows={2} rows={3}
className={clsx( className="w-full bg-transparent border-none text-sm text-white focus:outline-none resize-none placeholder:text-white/10 mt-1"
"w-full px-3 py-2 border border-white/20 rounded-lg text-white resize-none", placeholder="사용자 관련 특이사항을 입력하세요"
canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
)}
/> />
</div> </div>
</section>
{/* 관리자 전용 설정 */}
<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>
</div>
</div> </div>
</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 <button
onClick={onClose} 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> </button>
{canEdit && ( {canEdit && (
<button <button
onClick={handleSave} onClick={handleSave}
disabled={saving} 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" /> <Save className="w-3.5 h-3.5" />
{saving ? '저장 중...' : '저장'} {saving ? '저장 중...' : '사용자 정보 저장'}
</button> </button>
)} )}
</div> </div>
@@ -380,14 +348,7 @@ export function UserListPage() {
const result = await comms.getUserList(process); const result = await comms.getUserList(process);
if (Array.isArray(result)) { if (Array.isArray(result)) {
setUsers(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 { } else {
console.error('사용자 목록 응답이 배열이 아님:', result);
setUsers([]); setUsers([]);
} }
} catch (error) { } catch (error) {
@@ -415,130 +376,170 @@ export function UserListPage() {
); );
return ( return (
<div className="h-full flex flex-col"> <div className="space-y-6 animate-fade-in pb-4 h-full">
{/* 헤더 */} {/* 사용자 목록 단일 카드 */}
<div className="glass-effect rounded-xl p-4 mb-4"> <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="flex items-center gap-4 flex-wrap"> <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-2"> <div className="flex items-center gap-3">
<label className="text-sm text-white/70">공정</label> <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>
<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 <input
type="text" type="text"
value={process} value={process}
onChange={(e) => setProcess(e.target.value)} onChange={(e) => setProcess(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleRefresh()} 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" 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>
<button {/* 검색창 */}
onClick={handleRefresh} <div className="relative group w-48 md:w-64">
className="flex items-center gap-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition-colors" <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" />
>
<RefreshCw className="w-4 h-4" />
새로고침
</button>
<div className="flex-1" />
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40" />
<input <input
type="text" type="text"
value={filter} value={filter}
onChange={(e) => setFilter(e.target.value)} onChange={(e) => setFilter(e.target.value)}
placeholder="검색..." placeholder="ID, 성명, 정보 검색..."
className="pl-9 pr-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 w-48" 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>
{/* 개수 */}
<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>
{/* 테이블 */} {/* 테이블 헤더 */}
<div className="glass-effect rounded-xl flex-1 overflow-hidden flex flex-col"> <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="p-4 border-b border-white/10 flex items-center gap-2"> <div className="w-12 text-center">ID</div>
<Users className="w-5 h-5 text-white/70" /> <div className="w-32 px-4">성명/직책</div>
<h2 className="text-lg font-semibold text-white">사용자 목록</h2> <div className="flex-1 px-4">이메일/연락처</div>
<span className="text-sm text-white/50">({filteredUsers.length}명)</span> <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>
<div className="flex-1 overflow-auto"> <div className="flex-1 overflow-y-auto custom-scrollbar divide-y divide-white/5">
{loading ? ( {loading ? (
<div className="flex items-center justify-center h-32"> <div className="py-20 text-center">
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-white"></div> <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> </div>
) : ( ) : (
<table className="w-full text-sm"> filteredUsers.map((user) => (
<thead className="bg-white/5 sticky top-0"> <div
<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} key={user.id}
onClick={() => handleRowClick(user)} onClick={() => handleRowClick(user)}
className={clsx( className={clsx(
'hover:bg-white/5 transition-colors cursor-pointer', "px-6 py-3 hover:bg-white/[0.03] transition-all cursor-pointer group flex items-center",
!user.useUserState && 'opacity-50' !user.useUserState && "opacity-40 grayscale-[0.5]"
)} )}
> >
<td className="px-3 py-2 text-white font-mono">{user.id}</td> {/* ID */}
<td className="px-3 py-2 text-white font-medium">{user.name}</td> <div className="w-12 text-center text-xs font-mono text-white/40 group-hover:text-primary-400 Transition-colors">
<td className="px-3 py-2 text-white/70">{user.grade}</td> {user.id}
<td className="px-3 py-2"> </div>
{user.email ? (
<a {/* 성명/직책 */}
href={`mailto:${user.email}`} <div className="w-32 px-4 flex flex-col">
className="text-blue-400 hover:text-blue-300 hover:underline" <div className="text-sm font-bold text-white group-hover:text-primary-300 transition-colors">
onClick={(e) => e.stopPropagation()} {user.name}
> </div>
{user.email} <div className="text-[10px] text-white/30 font-medium uppercase tracking-tighter">
</a> {user.grade || '-'}
) : ( </div>
<span className="text-white/70">-</span> </div>
)}
</td> {/* 정보 */}
<td className="px-3 py-2 text-white/70">{user.tel}</td> <div className="flex-1 px-4 flex flex-col">
<td className="px-3 py-2 text-white/70">{user.processs}</td> <div className="flex items-center gap-1.5 text-xs text-white/60">
<td className="px-3 py-2 text-white/70">{user.state}</td> <Mail className="w-3 h-3 text-white/20" />
<td className="px-3 py-2 text-white text-center">{user.level}</td> {user.email || '-'}
<td className="px-3 py-2 text-center"> </div>
{user.useUserState ? ( <div className="text-[10px] text-white/30 mt-0.5">
<Check className="w-4 h-4 text-green-400 mx-auto" /> {user.tel || user.hp || ''}
) : ( </div>
<X className="w-4 h-4 text-red-400 mx-auto" /> </div>
)}
</td> {/* 공정 */}
<td className="px-3 py-2 text-center"> <div className="w-24 px-4 text-center">
{user.useJobReport ? ( <span className="px-2 py-0.5 bg-white/5 border border-white/5 rounded-md text-[10px] text-white/50 font-bold uppercase">
<Check className="w-4 h-4 text-green-400 mx-auto" /> {user.processs || '-'}
) : ( </span>
<X className="w-4 h-4 text-red-400 mx-auto" /> </div>
)}
</td> {/* 레벨 */}
</tr> <div className="w-20 text-center font-mono text-xs text-white/40">
))} Lv.{user.level}
{filteredUsers.length === 0 && ( </div>
<tr>
<td colSpan={10} className="px-4 py-8 text-center text-white/50"> {/* 계정 상태 */}
{users.length === 0 ? '공정을 입력하고 새로고침하세요.' : '검색 결과가 없습니다.'} <div className="w-16 flex justify-center">
</td> <div className={clsx(
</tr> "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"
</tbody> )}>
</table> {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>
{/* 푸터 */}
<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> </div>
{/* 사용자 상세 다이얼로그 */} {/* 사용자 상세 다이얼로그 */}