UI Unification: Refactor UserList and MailForm to Notepad design system, and finalize Customs management
This commit is contained in:
backuppc
365
Project/frontend/src/components/customs/CustomEditDialog.tsx
Normal file
365
Project/frontend/src/components/customs/CustomEditDialog.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -4,8 +4,6 @@ import {
|
||||
FolderOpen,
|
||||
Download,
|
||||
Search,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
ShieldCheck,
|
||||
@@ -231,218 +229,203 @@ export function LicenseList() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full animate-fade-in bg-white/[0.02]">
|
||||
{/* 리스트 헤더 */}
|
||||
<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="flex items-center gap-4">
|
||||
<div className="p-2 bg-primary-500/20 rounded-lg">
|
||||
<ShieldCheck className="w-6 h-6 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>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 검색 바 */}
|
||||
<div className="relative group w-80">
|
||||
<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" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
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"
|
||||
/>
|
||||
{searchText && (
|
||||
<button
|
||||
onClick={() => setSearchText('')}
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-white/20 hover:text-white transition-colors"
|
||||
>
|
||||
<XCircle className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 건수 */}
|
||||
<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-white/40 text-[10px] uppercase">건</span>
|
||||
</div>
|
||||
|
||||
{/* 새로고침 */}
|
||||
<button
|
||||
onClick={loadData}
|
||||
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"
|
||||
title="새로고침"
|
||||
>
|
||||
<RefreshCw className={clsx("w-4 h-4", loading && "animate-spin")} />
|
||||
</button>
|
||||
|
||||
{/* CSV */}
|
||||
<button
|
||||
onClick={handleExportCSV}
|
||||
disabled={loading}
|
||||
className="p-2 bg-white/5 hover:bg-green-500/20 border border-white/10 rounded-xl text-white/70 hover:text-green-400 transition-all disabled:opacity-50"
|
||||
title="CSV 내보내기"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* 추가 */}
|
||||
<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"
|
||||
title="추가"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-hidden flex flex-col p-6">
|
||||
{/* 테이블 메인 섹션 */}
|
||||
<div className="flex-1 glass-effect rounded-2xl border border-white/10 flex flex-col overflow-hidden shadow-2xl">
|
||||
{/* 컬럼 헤더 */}
|
||||
<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="w-12 text-center text-xs font-medium text-white/70 uppercase">상태</div>
|
||||
<div className="flex-1 flex items-center gap-4">
|
||||
<div className="w-1/4 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-20 text-xs font-medium text-white/70 uppercase text-center">수량</div>
|
||||
<div className="w-32 text-xs font-medium text-white/70 uppercase">사용자</div>
|
||||
<div className="flex-1 text-xs font-medium text-white/70 uppercase">S/N</div>
|
||||
<div className="space-y-6 animate-fade-in pb-4">
|
||||
{/* 라이선스 리스트 카드 (메모장 디자인 통일) */}
|
||||
<div className="glass-effect rounded-3xl overflow-hidden shadow-2xl border border-white/10">
|
||||
<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">
|
||||
<ShieldCheck className="w-5 h-5 text-primary-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white tracking-tight">라이선스 관리</h3>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-white/5 overflow-y-auto custom-scrollbar flex-1">
|
||||
{loading ? (
|
||||
<div className="px-6 py-12 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>
|
||||
) : paginatedList.length === 0 ? (
|
||||
<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" />
|
||||
</div>
|
||||
<p className="text-white/30 font-medium">조회된 라이선스가 없습니다.</p>
|
||||
</div>
|
||||
) : (
|
||||
paginatedList.map((item) => (
|
||||
<div
|
||||
key={item.idx}
|
||||
onClick={() => handleRowClick(item)}
|
||||
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]",
|
||||
item.expire && "bg-danger-500/[0.03]"
|
||||
)}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 검색창 */}
|
||||
<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={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
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"
|
||||
/>
|
||||
{searchText && (
|
||||
<button
|
||||
onClick={() => setSearchText('')}
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-white/20 hover:text-white transition-colors"
|
||||
>
|
||||
<div className="w-12 flex justify-center shrink-0">
|
||||
<div className={clsx(
|
||||
"w-8 h-8 rounded-lg flex items-center justify-center transition-all group-hover:scale-110",
|
||||
item.expire ? "bg-danger-500/20 text-danger-400" : "bg-success-500/20 text-success-400"
|
||||
)}>
|
||||
{item.expire ? (
|
||||
<XCircle className="w-4 h-4" />
|
||||
) : (
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
)}
|
||||
</div>
|
||||
<XCircle className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 개수 */}
|
||||
<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-white/40 text-[10px] uppercase">건</span>
|
||||
</div>
|
||||
|
||||
{/* 새로고침 */}
|
||||
<button
|
||||
onClick={loadData}
|
||||
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"
|
||||
title="새로고침"
|
||||
>
|
||||
<RefreshCw className={clsx("w-4 h-4", loading && "animate-spin")} />
|
||||
</button>
|
||||
|
||||
{/* CSV */}
|
||||
<button
|
||||
onClick={handleExportCSV}
|
||||
disabled={loading}
|
||||
className="p-2 bg-white/5 hover:bg-green-500/20 border border-white/10 rounded-xl text-white/70 hover:text-green-400 transition-all disabled:opacity-50"
|
||||
title="CSV 내보내기"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* 추가 버튼 */}
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
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="라이선스 추가"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 컬럼 헤더 (메모장 디자인 통일) */}
|
||||
<div className="bg-white/10 px-6 py-3 border-b border-white/5 flex items-center gap-4">
|
||||
<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="flex items-center gap-6 shrink-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-32 text-left 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-32 text-left text-xs font-medium text-white/70 uppercase">사용자</div>
|
||||
<div className="w-48 text-left text-xs font-medium text-white/70 uppercase">시리얼 번호</div>
|
||||
</div>
|
||||
<div className="w-8"></div> {/* 액션/폴더 버튼 공간 */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-white/5 max-h-[calc(100vh-280px)] overflow-y-auto custom-scrollbar">
|
||||
{loading ? (
|
||||
<div className="px-6 py-12 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>
|
||||
) : paginatedList.length === 0 ? (
|
||||
<div className="px-6 py-20 text-center">
|
||||
<ShieldCheck className="w-16 h-16 mx-auto text-white/10 mb-4" />
|
||||
<p className="text-white/30 text-base">조회된 라이선스가 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
paginatedList.map((item) => (
|
||||
<div
|
||||
key={item.idx}
|
||||
className={clsx(
|
||||
"px-6 py-2.5 hover:bg-white/[0.03] transition-all cursor-pointer group relative",
|
||||
item.expire && "bg-danger-500/[0.02]"
|
||||
)}
|
||||
onClick={() => handleRowClick(item)}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* 상태 아이콘 */}
|
||||
<div className={clsx(
|
||||
"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 ? (
|
||||
<XCircle className="w-4 h-4" />
|
||||
) : (
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
)}
|
||||
</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">
|
||||
<button
|
||||
onClick={(e) => handleOpenFolder(item, e)}
|
||||
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">
|
||||
{/* 제목 (제품명 / 제조사) */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex flex-col">
|
||||
<h4 className="text-[var(--text-primary)] font-medium group-hover:text-primary-300 transition-colors truncate text-sm">
|
||||
{item.name}
|
||||
</h4>
|
||||
<span className="text-[10px] text-white/30 truncate uppercase tracking-tighter">
|
||||
{item.manu || 'Maker'}
|
||||
</span>
|
||||
</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 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 className="w-20 shrink-0 text-center">
|
||||
<span className="text-sm font-medium text-white/70">{item.qty || 0}</span>
|
||||
</div>
|
||||
<div className="w-32 shrink-0">
|
||||
<span className="text-sm text-white/50 truncate" title={item.uids}>{item.uids || '-'}</span>
|
||||
</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 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>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{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="flex items-center gap-2">
|
||||
<span className="text-white/30 text-[10px] uppercase font-bold tracking-wider">Page</span>
|
||||
<span className="text-white text-sm font-mono font-bold">{currentPage}</span>
|
||||
<span className="text-white/20 text-xs italic">of</span>
|
||||
<span className="text-white/60 text-sm font-mono">{totalPages}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={goToPreviousPage}
|
||||
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"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-1 mx-2">
|
||||
{totalPages <= 5 ? (
|
||||
[...Array(totalPages)].map((_, i) => (
|
||||
<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>
|
||||
|
||||
<button
|
||||
onClick={goToNextPage}
|
||||
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"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
</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>
|
||||
|
||||
{/* 페이징 (메모장 디자인 통일) */}
|
||||
{totalPages > 1 && (
|
||||
<div className="px-6 py-4 border-t border-white/10 flex items-center justify-between bg-white/[0.02]">
|
||||
<div className="text-white/40 text-xs font-medium">
|
||||
총 <span className="text-white">{filteredList.length}</span>건 중
|
||||
<span className="text-white ml-2">{(currentPage - 1) * pageSize + 1}-{Math.min(currentPage * pageSize, filteredList.length)}</span>건 표시
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={goToPreviousPage}
|
||||
disabled={currentPage === 1}
|
||||
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"
|
||||
>
|
||||
«
|
||||
</button>
|
||||
<div className="flex items-center bg-white/5 px-3 h-8 rounded-lg border border-white/10 text-xs font-bold">
|
||||
<span className="text-primary-400">{currentPage}</span>
|
||||
<span className="text-white/30 mx-1.5">/</span>
|
||||
<span className="text-white/70">{totalPages}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={goToNextPage}
|
||||
disabled={currentPage === totalPages}
|
||||
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"
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Edit Dialog */}
|
||||
{/* 편집 다이얼로그 */}
|
||||
<LicenseEditDialog
|
||||
item={selectedItem}
|
||||
isOpen={isDialogOpen}
|
||||
|
||||
Reference in New Issue
Block a user