372 lines
16 KiB
TypeScript
372 lines
16 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Mail, Search, RefreshCw, Calendar, ChevronLeft, ChevronRight, X } from 'lucide-react';
|
|
import { comms } from '@/communication';
|
|
import { MailItem, UserInfo } from '@/types';
|
|
import { MailTestDialog } from '@/components/mail/MailTestDialog';
|
|
import { DateRangePicker } from '@/components/DateRangePicker';
|
|
import { clsx } from 'clsx';
|
|
|
|
export function MailList() {
|
|
const [mailList, setMailList] = useState<MailItem[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [startDate, setStartDate] = useState('');
|
|
const [endDate, setEndDate] = useState('');
|
|
const [searchKey, setSearchKey] = useState('');
|
|
const [selectedItem, setSelectedItem] = useState<MailItem | null>(null);
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [showTestDialog, setShowTestDialog] = useState(false);
|
|
const [currentUser, setCurrentUser] = useState<UserInfo | null>(null);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const pageSize = 25;
|
|
|
|
const formatDateLocal = (date: Date) => {
|
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
|
};
|
|
|
|
useEffect(() => {
|
|
// 로그인 정보 로드
|
|
const loadLoginInfo = async () => {
|
|
try {
|
|
const response = await comms.checkLoginStatus();
|
|
if (response.Success && response.IsLoggedIn && response.User) {
|
|
setCurrentUser(response.User);
|
|
}
|
|
} catch (error) {
|
|
console.error('로그인 정보 로드 오류:', error);
|
|
}
|
|
};
|
|
|
|
loadLoginInfo();
|
|
|
|
const now = new Date();
|
|
const tenDaysAgo = new Date();
|
|
tenDaysAgo.setDate(now.getDate() - 10);
|
|
|
|
const start = formatDateLocal(tenDaysAgo);
|
|
const end = formatDateLocal(now);
|
|
|
|
setStartDate(start);
|
|
setEndDate(end);
|
|
|
|
// 날짜 설정 후 바로 데이터 로드
|
|
setTimeout(() => {
|
|
loadDataWithDates(start, end);
|
|
}, 100);
|
|
}, []);
|
|
|
|
const loadDataWithDates = async (start: string, end: string) => {
|
|
setLoading(true);
|
|
try {
|
|
console.log('메일내역 조회:', { start, end, searchKey });
|
|
const response = await comms.getMailList(start, end, searchKey);
|
|
console.log('메일내역 응답:', response);
|
|
if (response.Success && response.Data) {
|
|
setMailList(response.Data);
|
|
} else {
|
|
console.warn('메일내역 없음:', response.Message);
|
|
setMailList([]);
|
|
}
|
|
} catch (error) {
|
|
console.error('메일내역 로드 오류:', error);
|
|
alert('데이터를 불러오는 중 오류가 발생했습니다.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadData = async () => {
|
|
if (!startDate || !endDate) return;
|
|
await loadDataWithDates(startDate, endDate);
|
|
};
|
|
|
|
const handleSearch = () => {
|
|
if (new Date(startDate) > new Date(endDate)) {
|
|
alert('시작일은 종료일보다 늦을 수 없습니다.');
|
|
return;
|
|
}
|
|
setCurrentPage(1);
|
|
loadData();
|
|
};
|
|
|
|
// 페이징 계산
|
|
const totalPages = Math.ceil(mailList.length / pageSize);
|
|
const paginatedList = mailList.slice(
|
|
(currentPage - 1) * pageSize,
|
|
currentPage * pageSize
|
|
);
|
|
|
|
const handleRowClick = (item: MailItem) => {
|
|
// 레벨 9 이상(개발자)만 상세보기 가능
|
|
if (!currentUser || currentUser.Level < 9) {
|
|
return;
|
|
}
|
|
setSelectedItem(item);
|
|
setShowModal(true);
|
|
};
|
|
|
|
const formatDate = (dateStr: string | null) => {
|
|
if (!dateStr) return '-';
|
|
try {
|
|
const date = new Date(dateStr);
|
|
const yy = String(date.getFullYear()).slice(-2);
|
|
const mm = String(date.getMonth() + 1).padStart(2, '0');
|
|
const dd = String(date.getDate()).padStart(2, '0');
|
|
const hh = String(date.getHours()).padStart(2, '0');
|
|
const mi = String(date.getMinutes()).padStart(2, '0');
|
|
return `${yy}.${mm}.${dd} ${hh}:${mi}`;
|
|
} catch {
|
|
return dateStr;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6 animate-fade-in">
|
|
|
|
|
|
{/* 메일 내역 목록 */}
|
|
<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 xl:flex-row items-center justify-between gap-4 bg-white/5">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-primary-500/20 rounded-lg">
|
|
<Mail className="w-5 h-5 text-primary-400" />
|
|
</div>
|
|
<h3 className="text-lg font-bold text-white tracking-tight">메일 발신 내역</h3>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
{/* 공용 날짜 컨트롤 */}
|
|
<DateRangePicker
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
onChange={(start, end) => {
|
|
setStartDate(start);
|
|
setEndDate(end);
|
|
loadDataWithDates(start, end);
|
|
}}
|
|
/>
|
|
|
|
{/* 검색창 */}
|
|
<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={searchKey}
|
|
onChange={(e) => setSearchKey(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
|
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"
|
|
/>
|
|
{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"
|
|
>
|
|
<X 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">{mailList.length}</span>
|
|
<span className="text-white/40 text-[10px] uppercase">건</span>
|
|
</div>
|
|
|
|
{/* 새로고침 */}
|
|
<button
|
|
onClick={handleSearch}
|
|
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>
|
|
|
|
{/* 테스트 버튼 */}
|
|
{currentUser && currentUser.Level >= 9 && (
|
|
<button
|
|
onClick={() => setShowTestDialog(true)}
|
|
className="px-4 py-1.5 bg-success-500 hover:bg-success-600 border border-white/20 rounded-xl text-white text-xs font-bold transition-all shadow-lg shadow-success-500/20 active:scale-95 flex items-center gap-2"
|
|
title="메일 발송 테스트"
|
|
>
|
|
<Mail className="w-3.5 h-3.5" />
|
|
테스트
|
|
</button>
|
|
)}
|
|
</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>
|
|
) : mailList.length === 0 ? (
|
|
<div className="px-6 py-20 text-center">
|
|
<div className="relative inline-block mb-4">
|
|
<Mail 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}
|
|
className={clsx(
|
|
"group px-6 py-3.5 transition-all relative border-b border-white/[0.02]",
|
|
currentUser && currentUser.Level >= 9 ? 'hover:bg-white/[0.03] cursor-pointer' : 'cursor-default'
|
|
)}
|
|
onClick={() => handleRowClick(item)}
|
|
>
|
|
<div className="flex items-center justify-between gap-6">
|
|
<div className="flex-1 min-w-0">
|
|
<h4 className="text-sm font-bold text-white group-hover:text-primary-400 transition-colors mb-2 truncate">
|
|
{item.subject}
|
|
</h4>
|
|
<div className="flex items-center gap-4 text-xs font-medium uppercase tracking-tight">
|
|
{item.cate && (
|
|
<span className="px-1.5 py-0.5 bg-primary-500/10 text-primary-400 font-bold rounded border border-primary-500/20 mr-1">
|
|
{item.cate}
|
|
</span>
|
|
)}
|
|
{item.project && (
|
|
<span className="px-1.5 py-0.5 bg-white/5 text-white/40 font-bold rounded border border-white/10 mr-1">
|
|
{item.project}
|
|
</span>
|
|
)}
|
|
<div className="flex items-center gap-1.5 text-white/30">
|
|
<span className="text-white/20 italic font-bold">FROM:</span>
|
|
<span className="text-white/60 truncate max-w-[180px]">{item.fromlist}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-white/30">
|
|
<span className="text-white/20 italic font-bold">TO:</span>
|
|
<span className="text-white/60 truncate max-w-[180px]">{item.tolist}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-end gap-2 shrink-0">
|
|
<div className="flex items-center gap-2 px-3 py-1.5 bg-white/5 rounded-lg border border-white/5">
|
|
<Calendar className="w-3.5 h-3.5 text-white/30" />
|
|
<span className="text-sm text-white/50 font-mono">{formatDate(item.wdate)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{/* 페이징 */}
|
|
{totalPages > 1 && (
|
|
<div className="flex items-center justify-center gap-2 px-6 py-3 border-t border-white/10">
|
|
<button
|
|
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
|
disabled={currentPage === 1}
|
|
className="p-1 rounded hover:bg-white/10 disabled:opacity-30 text-white/70"
|
|
>
|
|
<ChevronLeft className="w-5 h-5" />
|
|
</button>
|
|
<span className="text-white/70 text-sm">
|
|
{currentPage} / {totalPages}
|
|
</span>
|
|
<button
|
|
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
|
disabled={currentPage === totalPages}
|
|
className="p-1 rounded hover:bg-white/10 disabled:opacity-30 text-white/70"
|
|
>
|
|
<ChevronRight className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 상세 모달 */}
|
|
{showModal && selectedItem && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-md animate-fade-in">
|
|
<div className="bg-[#1a1b2e]/90 rounded-3xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden border border-white/10 flex flex-col backdrop-blur-xl">
|
|
{/* 헤더 */}
|
|
<div className="flex items-center justify-between px-8 py-6 border-b border-white/10 bg-white/5">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
{selectedItem.cate && (
|
|
<span className="px-2.5 py-1 bg-primary-500/10 text-primary-400 text-[10px] font-bold rounded-md border border-primary-500/20 uppercase tracking-wider">
|
|
{selectedItem.cate}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<h2 className="text-xl font-bold text-white tracking-tight">{selectedItem.subject}</h2>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowModal(false)}
|
|
className="p-2 hover:bg-white/10 rounded-full text-white/40 hover:text-white transition-all transform hover:rotate-90"
|
|
>
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* 메타 정보 */}
|
|
<div className="px-8 py-6 border-b border-white/5 bg-white/[0.02] space-y-3">
|
|
<div className="flex items-start gap-4">
|
|
<span className="text-[10px] font-bold text-white/20 uppercase tracking-widest w-20 pt-1">발신자</span>
|
|
<span className="text-sm text-white/80 font-medium">{selectedItem.fromlist}</span>
|
|
</div>
|
|
<div className="flex items-start gap-4 border-t border-white/5 pt-3">
|
|
<span className="text-[10px] font-bold text-white/20 uppercase tracking-widest w-20 pt-1">수신자</span>
|
|
<span className="text-sm text-white/80 font-medium">{selectedItem.tolist}</span>
|
|
</div>
|
|
{selectedItem.cclist && (
|
|
<div className="flex items-start gap-4 border-t border-white/5 pt-3">
|
|
<span className="text-[10px] font-bold text-white/20 uppercase tracking-widest w-20 pt-1">참조</span>
|
|
<span className="text-sm text-white/80 font-medium">{selectedItem.cclist}</span>
|
|
</div>
|
|
)}
|
|
{selectedItem.bcclist && (
|
|
<div className="flex items-start gap-4 border-t border-white/5 pt-3">
|
|
<span className="text-[10px] font-bold text-white/20 uppercase tracking-widest w-20 pt-1">숨은참조</span>
|
|
<span className="text-sm text-white/80 font-medium">{selectedItem.bcclist}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-2 pt-3 text-[10px] font-bold text-white/30 uppercase tracking-widest border-t border-white/5">
|
|
<Calendar className="w-3.5 h-3.5" />
|
|
<span>발송 일시:</span>
|
|
<span className="text-white/50">{formatDate(selectedItem.wdate)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 본문 */}
|
|
<div className="flex-1 overflow-y-auto p-8 bg-white/5 custom-scrollbar">
|
|
<div
|
|
className="prose prose-invert max-w-none text-white/90 leading-relaxed text-[15px]"
|
|
dangerouslySetInnerHTML={{ __html: selectedItem.htmlbody }}
|
|
/>
|
|
</div>
|
|
|
|
{/* 푸터 */}
|
|
<div className="flex items-center justify-end px-8 py-6 border-t border-white/10 bg-white/5">
|
|
<button
|
|
onClick={() => setShowModal(false)}
|
|
className="px-6 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 text-white/70 hover:text-white text-sm font-bold transition-all active:scale-95"
|
|
>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 메일 테스트 다이얼로그 */}
|
|
<MailTestDialog
|
|
isOpen={showTestDialog}
|
|
onClose={() => {
|
|
setShowTestDialog(false);
|
|
loadData(); // 목록 새로고침
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|