700 lines
25 KiB
TypeScript
700 lines
25 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import {
|
|
Inbox,
|
|
Search,
|
|
Filter,
|
|
Eye,
|
|
Trash2,
|
|
RefreshCw,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Mail,
|
|
Calendar,
|
|
User,
|
|
Paperclip,
|
|
Loader2,
|
|
X,
|
|
File,
|
|
ChevronRight,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Send,
|
|
AlertCircle,
|
|
} from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
SentMailHistory,
|
|
getSentMailList,
|
|
deleteSentMail,
|
|
getMailAccounts,
|
|
MailAccount,
|
|
getMailStatistics,
|
|
} from "@/lib/api/mail";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
|
|
export default function SentMailPage() {
|
|
const router = useRouter();
|
|
const { toast } = useToast();
|
|
const [mails, setMails] = useState<SentMailHistory[]>([]);
|
|
const [accounts, setAccounts] = useState<MailAccount[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [selectedMail, setSelectedMail] = useState<SentMailHistory | null>(null);
|
|
const [showFilters, setShowFilters] = useState(false);
|
|
|
|
// 통계
|
|
const [stats, setStats] = useState({
|
|
totalSent: 0,
|
|
successCount: 0,
|
|
failedCount: 0,
|
|
todayCount: 0,
|
|
});
|
|
|
|
// 필터 및 페이징
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [filterStatus, setFilterStatus] = useState<'all' | 'success' | 'failed'>('all');
|
|
const [filterAccountId, setFilterAccountId] = useState<string>('all');
|
|
const [sortBy, setSortBy] = useState<'sentAt' | 'subject'>('sentAt');
|
|
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
|
|
const [page, setPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [total, setTotal] = useState(0);
|
|
|
|
useEffect(() => {
|
|
loadAccounts();
|
|
loadStats();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
loadMails();
|
|
}, [page, filterStatus, filterAccountId, sortBy, sortOrder]);
|
|
|
|
const loadAccounts = async () => {
|
|
try {
|
|
const data = await getMailAccounts();
|
|
setAccounts(data);
|
|
} catch (error: unknown) {
|
|
const err = error as Error;
|
|
toast({
|
|
title: "계정 로드 실패",
|
|
description: err.message,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
};
|
|
|
|
const loadStats = async () => {
|
|
try {
|
|
const data = await getMailStatistics();
|
|
setStats({
|
|
totalSent: data.totalSent,
|
|
successCount: data.successCount,
|
|
failedCount: data.failedCount,
|
|
todayCount: data.todayCount,
|
|
});
|
|
} catch (error: unknown) {
|
|
console.error('통계 로드 실패:', error);
|
|
}
|
|
};
|
|
|
|
const loadMails = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const result = await getSentMailList({
|
|
page,
|
|
limit: 20,
|
|
searchTerm: searchTerm || undefined,
|
|
status: filterStatus,
|
|
accountId: filterAccountId !== 'all' ? filterAccountId : undefined,
|
|
sortBy,
|
|
sortOrder,
|
|
});
|
|
|
|
setMails(result.items);
|
|
setTotalPages(result.totalPages);
|
|
setTotal(result.total);
|
|
} catch (error: unknown) {
|
|
const err = error as Error;
|
|
toast({
|
|
title: "발송 이력 로드 실패",
|
|
description: err.message,
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSearch = () => {
|
|
setPage(1);
|
|
loadMails();
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm("이 발송 이력을 삭제하시겠습니까?")) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await deleteSentMail(id);
|
|
toast({
|
|
title: "삭제 완료",
|
|
description: "발송 이력이 삭제되었습니다.",
|
|
});
|
|
loadMails();
|
|
loadStats();
|
|
} catch (error: unknown) {
|
|
const err = error as Error;
|
|
toast({
|
|
title: "삭제 실패",
|
|
description: err.message,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
};
|
|
|
|
const formatDate = (dateString: string) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleString('ko-KR', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
};
|
|
|
|
const formatFileSize = (bytes: number) => {
|
|
if (bytes === 0) return "0 Bytes";
|
|
const k = 1024;
|
|
const sizes = ["Bytes", "KB", "MB"];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
|
|
};
|
|
|
|
if (loading && page === 1 && mails.length === 0) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-6 space-y-6 bg-background min-h-screen">
|
|
{/* 헤더 */}
|
|
<div className="bg-card rounded-lg border p-6 space-y-4">
|
|
{/* 브레드크럼브 */}
|
|
<nav className="flex items-center gap-2 text-sm">
|
|
<Link
|
|
href="/admin/mail/dashboard"
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
메일 관리
|
|
</Link>
|
|
<ChevronRight className="w-4 h-4 text-muted-foreground" />
|
|
<span className="text-foreground font-medium">발송 내역</span>
|
|
</nav>
|
|
|
|
<Separator />
|
|
|
|
{/* 제목 및 빠른 액션 */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-foreground flex items-center gap-2">
|
|
<Inbox className="w-8 h-8" />
|
|
보낸메일함
|
|
</h1>
|
|
<p className="mt-2 text-muted-foreground">총 {total}개의 발송 이력</p>
|
|
</div>
|
|
<Button onClick={loadMails} variant="outline" size="sm">
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
새로고침
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 통계 카드 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">전체 발송</p>
|
|
<p className="text-2xl font-bold text-foreground mt-1">{stats.totalSent}</p>
|
|
</div>
|
|
<div className="p-3 bg-muted rounded-lg">
|
|
<Send className="w-6 h-6 text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">발송 성공</p>
|
|
<p className="text-2xl font-bold text-foreground mt-1">{stats.successCount}</p>
|
|
</div>
|
|
<div className="p-3 bg-muted rounded-lg">
|
|
<CheckCircle2 className="w-6 h-6 text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">발송 실패</p>
|
|
<p className="text-2xl font-bold text-foreground mt-1">{stats.failedCount}</p>
|
|
</div>
|
|
<div className="p-3 bg-muted rounded-lg">
|
|
<XCircle className="w-6 h-6 text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">오늘 발송</p>
|
|
<p className="text-2xl font-bold text-foreground mt-1">{stats.todayCount}</p>
|
|
</div>
|
|
<div className="p-3 bg-muted rounded-lg">
|
|
<Calendar className="w-6 h-6 text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 검색 및 필터 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Search className="w-5 h-5" />
|
|
<CardTitle>검색</CardTitle>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setShowFilters(!showFilters)}
|
|
>
|
|
<Filter className="w-4 h-4 mr-2" />
|
|
고급 필터
|
|
{showFilters ? <ChevronUp className="w-4 h-4 ml-1" /> : <ChevronDown className="w-4 h-4 ml-1" />}
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* 기본 검색 */}
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
|
placeholder="제목 또는 받는사람으로 검색..."
|
|
className="flex-1"
|
|
/>
|
|
<Button onClick={handleSearch}>
|
|
<Search className="w-4 h-4 mr-2" />
|
|
검색
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 고급 필터 (접기/펼치기) */}
|
|
{showFilters && (
|
|
<div className="pt-4 border-t space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{/* 상태 필터 */}
|
|
<div>
|
|
<Label>발송 상태</Label>
|
|
<Select value={filterStatus} onValueChange={(v: any) => {
|
|
setFilterStatus(v);
|
|
setPage(1);
|
|
}}>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">전체</SelectItem>
|
|
<SelectItem value="success">✓ 성공</SelectItem>
|
|
<SelectItem value="failed">✗ 실패</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 계정 필터 */}
|
|
<div>
|
|
<Label>발송 계정</Label>
|
|
<Select value={filterAccountId} onValueChange={(v) => {
|
|
setFilterAccountId(v);
|
|
setPage(1);
|
|
}}>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">전체 계정</SelectItem>
|
|
{accounts.map((acc) => (
|
|
<SelectItem key={acc.id} value={acc.id}>
|
|
{acc.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 정렬 */}
|
|
<div>
|
|
<Label>정렬</Label>
|
|
<Select value={`${sortBy}-${sortOrder}`} onValueChange={(v) => {
|
|
const [by, order] = v.split('-');
|
|
setSortBy(by as 'sentAt' | 'subject');
|
|
setSortOrder(order as 'asc' | 'desc');
|
|
setPage(1);
|
|
}}>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="sentAt-desc">최신순</SelectItem>
|
|
<SelectItem value="sentAt-asc">오래된순</SelectItem>
|
|
<SelectItem value="subject-asc">제목 (가나다순)</SelectItem>
|
|
<SelectItem value="subject-desc">제목 (역순)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 필터 초기화 */}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
setSearchTerm("");
|
|
setFilterStatus('all');
|
|
setFilterAccountId('all');
|
|
setSortBy('sentAt');
|
|
setSortOrder('desc');
|
|
setPage(1);
|
|
}}
|
|
>
|
|
<X className="w-4 h-4 mr-2" />
|
|
필터 초기화
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 메일 목록 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Mail className="w-5 h-5" />
|
|
발송 이력 ({total}건)
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="w-6 h-6 animate-spin text-primary" />
|
|
</div>
|
|
) : mails.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<Inbox className="w-16 h-16 mx-auto text-muted-foreground mb-4" />
|
|
<p className="text-muted-foreground">발송 이력이 없습니다</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{mails.map((mail) => (
|
|
<div
|
|
key={mail.id}
|
|
className="p-4 border rounded-lg hover:bg-muted/50 transition-colors"
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
{/* 메일 정보 */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
{/* 상태 배지 */}
|
|
{mail.status === 'success' ? (
|
|
<Badge variant="default" className="bg-green-100 text-green-700 hover:bg-green-100">
|
|
<CheckCircle2 className="w-3 h-3 mr-1" />
|
|
발송 성공
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="destructive">
|
|
<XCircle className="w-3 h-3 mr-1" />
|
|
발송 실패
|
|
</Badge>
|
|
)}
|
|
|
|
{/* 첨부파일 */}
|
|
{mail.attachmentCount > 0 && (
|
|
<Badge variant="outline">
|
|
<Paperclip className="w-3 h-3 mr-1" />
|
|
{mail.attachmentCount}개
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
{/* 제목 */}
|
|
<h3 className="font-semibold text-foreground mb-1 truncate">
|
|
{mail.subject || "(제목 없음)"}
|
|
</h3>
|
|
|
|
{/* 수신자 및 날짜 */}
|
|
<div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
|
|
<span className="flex items-center gap-1">
|
|
<User className="w-3 h-3" />
|
|
{Array.isArray(mail.to) ? mail.to.join(", ") : mail.to}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Calendar className="w-3 h-3" />
|
|
{formatDate(mail.sentAt)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* 실패 메시지 */}
|
|
{mail.status === 'failed' && mail.errorMessage && (
|
|
<div className="mt-2 text-sm text-red-600 flex items-center gap-1">
|
|
<AlertCircle className="w-3 h-3" />
|
|
{mail.errorMessage}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 액션 버튼 */}
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setSelectedMail(mail)}
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleDelete(mail.id)}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 페이징 */}
|
|
{totalPages > 1 && (
|
|
<div className="flex items-center justify-between mt-6 pt-6 border-t">
|
|
<p className="text-sm text-muted-foreground">
|
|
페이지 {page} / {totalPages}
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setPage(Math.max(1, page - 1))}
|
|
disabled={page === 1}
|
|
>
|
|
이전
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setPage(Math.min(totalPages, page + 1))}
|
|
disabled={page === totalPages}
|
|
>
|
|
다음
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 메일 상세 모달 */}
|
|
{selectedMail && (
|
|
<Dialog open={!!selectedMail} onOpenChange={() => setSelectedMail(null)}>
|
|
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<Mail className="w-5 h-5" />
|
|
발송 상세정보
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-6">
|
|
{/* 상태 */}
|
|
<div>
|
|
{selectedMail.status === 'success' ? (
|
|
<Badge variant="default" className="bg-green-100 text-green-700 hover:bg-green-100">
|
|
<CheckCircle2 className="w-4 h-4 mr-1" />
|
|
발송 성공
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="destructive">
|
|
<XCircle className="w-4 h-4 mr-1" />
|
|
발송 실패
|
|
</Badge>
|
|
)}
|
|
{selectedMail.status === 'failed' && selectedMail.errorMessage && (
|
|
<p className="mt-2 text-sm text-red-600">{selectedMail.errorMessage}</p>
|
|
)}
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 발신 정보 */}
|
|
<div className="space-y-4">
|
|
<h3 className="font-semibold text-foreground">발신 정보</h3>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex">
|
|
<span className="w-24 text-muted-foreground">보낸사람:</span>
|
|
<span className="flex-1 font-medium">{selectedMail.from}</span>
|
|
</div>
|
|
<div className="flex">
|
|
<span className="w-24 text-muted-foreground">받는사람:</span>
|
|
<span className="flex-1">
|
|
{Array.isArray(selectedMail.to) ? selectedMail.to.join(", ") : selectedMail.to}
|
|
</span>
|
|
</div>
|
|
{selectedMail.cc && selectedMail.cc.length > 0 && (
|
|
<div className="flex">
|
|
<span className="w-24 text-muted-foreground">참조:</span>
|
|
<span className="flex-1">{selectedMail.cc.join(", ")}</span>
|
|
</div>
|
|
)}
|
|
{selectedMail.bcc && selectedMail.bcc.length > 0 && (
|
|
<div className="flex">
|
|
<span className="w-24 text-muted-foreground">숨은참조:</span>
|
|
<span className="flex-1">{selectedMail.bcc.join(", ")}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex">
|
|
<span className="w-24 text-muted-foreground">발송일시:</span>
|
|
<span className="flex-1">{formatDate(selectedMail.sentAt)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 메일 내용 */}
|
|
<div className="space-y-4">
|
|
<h3 className="font-semibold text-foreground">메일 내용</h3>
|
|
<div>
|
|
<p className="text-sm text-muted-foreground mb-2">제목</p>
|
|
<p className="font-medium">{selectedMail.subject || "(제목 없음)"}</p>
|
|
</div>
|
|
{selectedMail.templateUsed && (
|
|
<div>
|
|
<p className="text-sm text-muted-foreground mb-2">사용 템플릿</p>
|
|
<Badge variant="outline">{selectedMail.templateUsed}</Badge>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className="text-sm text-muted-foreground mb-2">본문</p>
|
|
<div
|
|
className="p-4 border rounded-lg bg-muted/30 max-h-96 overflow-y-auto"
|
|
dangerouslySetInnerHTML={{ __html: selectedMail.htmlBody || selectedMail.textBody || "" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 첨부파일 */}
|
|
{selectedMail.attachments && selectedMail.attachments.length > 0 && (
|
|
<>
|
|
<Separator />
|
|
<div className="space-y-4">
|
|
<h3 className="font-semibold text-foreground flex items-center gap-2">
|
|
<Paperclip className="w-4 h-4" />
|
|
첨부파일 ({selectedMail.attachments.length}개)
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{selectedMail.attachments.map((att, idx) => (
|
|
<div key={idx} className="flex items-center justify-between p-3 border rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<File className="w-5 h-5 text-muted-foreground" />
|
|
<div>
|
|
<p className="text-sm font-medium">{att.filename}</p>
|
|
<p className="text-xs text-muted-foreground">{formatFileSize(att.size || 0)}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* 수신 결과 (성공/실패 목록) */}
|
|
{selectedMail.acceptedRecipients && selectedMail.acceptedRecipients.length > 0 && (
|
|
<>
|
|
<Separator />
|
|
<div className="space-y-2">
|
|
<h3 className="font-semibold text-foreground text-sm">수신 성공</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{selectedMail.acceptedRecipients.map((email, idx) => (
|
|
<Badge key={idx} variant="default" className="bg-green-100 text-green-700 hover:bg-green-100">
|
|
{email}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{selectedMail.rejectedRecipients && selectedMail.rejectedRecipients.length > 0 && (
|
|
<>
|
|
<Separator />
|
|
<div className="space-y-2">
|
|
<h3 className="font-semibold text-foreground text-sm">수신 실패</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{selectedMail.rejectedRecipients.map((email, idx) => (
|
|
<Badge key={idx} variant="destructive">
|
|
{email}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|