커밋 메세지 메뉴별 대중소 정리

frontend/app/(main)/admin/automaticMng/mail/bulk-send/page.tsx

@@ -0,0 +1,524 @@
+"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 { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Upload,
+  Send,
+  FileText,
+  Users,
+  AlertCircle,
+  CheckCircle2,
+  Loader2,
+  Download,
+  X,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { useToast } from "@/hooks/use-toast";
+import {
+  MailAccount,
+  MailTemplate,
+  getMailAccounts,
+  getMailTemplates,
+  sendBulkMail,
+} from "@/lib/api/mail";
+
+interface RecipientData {
+  email: string;
+  variables: Record<string, string>;
+}
+
+export default function BulkSendPage() {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const [accounts, setAccounts] = useState<MailAccount[]>([]);
+  const [templates, setTemplates] = useState<MailTemplate[]>([]);
+  const [selectedAccountId, setSelectedAccountId] = useState<string>("");
+  const [selectedTemplateId, setSelectedTemplateId] = useState<string>("");
+  const [useTemplate, setUseTemplate] = useState<boolean>(true); // 템플릿 사용 여부
+  const [customHtml, setCustomHtml] = useState<string>(""); // 직접 작성한 HTML
+  const [subject, setSubject] = useState<string>("");
+  const [recipients, setRecipients] = useState<RecipientData[]>([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [sendProgress, setSendProgress] = useState({ sent: 0, total: 0 });
+
+  useEffect(() => {
+    loadAccounts();
+    loadTemplates();
+  }, []);
+
+  const loadAccounts = async () => {
+    try {
+      const data = await getMailAccounts();
+      setAccounts(data.filter((acc) => acc.status === 'active'));
+    } catch (error: unknown) {
+      const err = error as Error;
+      toast({
+        title: "계정 로드 실패",
+        description: err.message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const loadTemplates = async () => {
+    try {
+      const data = await getMailTemplates();
+      setTemplates(data);
+    } catch (error: unknown) {
+      const err = error as Error;
+      toast({
+        title: "템플릿 로드 실패",
+        description: err.message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.name.endsWith(".csv")) {
+      toast({
+        title: "파일 형식 오류",
+        description: "CSV 파일만 업로드 가능합니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setCsvFile(file);
+    setLoading(true);
+
+    try {
+      const text = await file.text();
+      const lines = text.split("\n").filter((line) => line.trim());
+      
+      if (lines.length < 2) {
+        throw new Error("CSV 파일에 데이터가 없습니다.");
+      }
+
+      // 첫 줄은 헤더
+      const headers = lines[0].split(",").map((h) => h.trim());
+      
+      if (!headers.includes("email")) {
+        throw new Error("CSV 파일에 'email' 컬럼이 필요합니다.");
+      }
+
+      const emailIndex = headers.indexOf("email");
+      const variableHeaders = headers.filter((h) => h !== "email");
+
+      const parsedRecipients: RecipientData[] = lines.slice(1).map((line) => {
+        const values = line.split(",").map((v) => v.trim());
+        const email = values[emailIndex];
+        const variables: Record<string, string> = {};
+
+        variableHeaders.forEach((header, index) => {
+          const valueIndex = headers.indexOf(header);
+          variables[header] = values[valueIndex] || "";
+        });
+
+        return { email, variables };
+      });
+
+      setRecipients(parsedRecipients);
+      toast({
+        title: "파일 업로드 성공",
+        description: `${parsedRecipients.length}명의 수신자를 불러왔습니다.`,
+      });
+    } catch (error: unknown) {
+      const err = error as Error;
+      toast({
+        title: "파일 파싱 실패",
+        description: err.message,
+        variant: "destructive",
+      });
+      setCsvFile(null);
+      setRecipients([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSend = async () => {
+    if (!selectedAccountId) {
+      toast({
+        title: "계정 선택 필요",
+        description: "발송할 메일 계정을 선택해주세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // 템플릿 또는 직접 작성 중 하나는 있어야 함
+    if (useTemplate && !selectedTemplateId) {
+      toast({
+        title: "템플릿 선택 필요",
+        description: "사용할 템플릿을 선택해주세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (!useTemplate && !customHtml.trim()) {
+      toast({
+        title: "내용 입력 필요",
+        description: "메일 내용을 입력해주세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (!subject.trim()) {
+      toast({
+        title: "제목 입력 필요",
+        description: "메일 제목을 입력해주세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (recipients.length === 0) {
+      toast({
+        title: "수신자 없음",
+        description: "CSV 파일을 업로드해주세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setSending(true);
+    setSendProgress({ sent: 0, total: recipients.length });
+
+    try {
+      await sendBulkMail({
+        accountId: selectedAccountId,
+        templateId: useTemplate ? selectedTemplateId : undefined,
+        customHtml: !useTemplate ? customHtml : undefined,
+        subject,
+        recipients,
+        onProgress: (sent, total) => {
+          setSendProgress({ sent, total });
+        },
+      });
+
+      toast({
+        title: "대량 발송 완료",
+        description: `${recipients.length}명에게 메일을 발송했습니다.`,
+      });
+
+      // 초기화
+      setSelectedAccountId("");
+      setSelectedTemplateId("");
+      setSubject("");
+      setRecipients([]);
+      setCsvFile(null);
+    } catch (error: unknown) {
+      const err = error as Error;
+      toast({
+        title: "발송 실패",
+        description: err.message,
+        variant: "destructive",
+      });
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const downloadSampleCsv = () => {
+    const sample = `email,name,company
+example1@example.com,홍길동,ABC회사
+example2@example.com,김철수,XYZ회사`;
+
+    const blob = new Blob([sample], { type: "text/csv;charset=utf-8;" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = "sample.csv";
+    link.click();
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="mx-auto w-full space-y-6 px-6 py-8">
+        {/* 헤더 */}
+        <div className="flex items-center justify-between rounded-lg border bg-card p-8">
+          <div className="flex items-center gap-4">
+            <div className="rounded-lg bg-primary/10 p-4">
+              <Users className="h-8 w-8 text-primary" />
+            </div>
+            <div>
+              <h1 className="mb-1 text-3xl font-bold text-foreground">대량 메일 발송</h1>
+              <p className="text-muted-foreground">CSV 파일로 여러 수신자에게 메일을 발송하세요</p>
+            </div>
+          </div>
+          <Link href="/admin/mail/dashboard">
+            <Button variant="outline" size="lg">
+              대시보드로
+            </Button>
+          </Link>
+        </div>
+
+        <div className="grid gap-6 lg:grid-cols-2">
+          {/* 왼쪽: 설정 */}
+          <div className="space-y-6">
+            {/* 계정 선택 */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">발송 설정</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div>
+                  <Label htmlFor="account">발송 계정</Label>
+                  <Select value={selectedAccountId} onValueChange={setSelectedAccountId}>
+                    <SelectTrigger id="account">
+                      <SelectValue placeholder="계정 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {accounts.map((account) => (
+                        <SelectItem key={account.id} value={account.id}>
+                          {account.name} ({account.email})
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div>
+                  <Label htmlFor="mode">발송 방식</Label>
+                  <Select value={useTemplate ? "template" : "custom"} onValueChange={(v) => setUseTemplate(v === "template")}>
+                    <SelectTrigger id="mode">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="template">템플릿 사용</SelectItem>
+                      <SelectItem value="custom">직접 작성</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {useTemplate ? (
+                  <div>
+                    <Label htmlFor="template">템플릿</Label>
+                    <Select value={selectedTemplateId} onValueChange={setSelectedTemplateId}>
+                      <SelectTrigger id="template">
+                        <SelectValue placeholder="템플릿 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {templates.map((template) => (
+                          <SelectItem key={template.id} value={template.id}>
+                            {template.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                ) : (
+                  <div>
+                    <Label htmlFor="customHtml">메일 내용</Label>
+                    <Textarea
+                      id="customHtml"
+                      value={customHtml}
+                      onChange={(e) => setCustomHtml(e.target.value)}
+                      placeholder="메일 내용을 작성하세요..."
+                      rows={10}
+                      className="text-sm"
+                    />
+                    {/* <p className="mt-1 text-xs text-muted-foreground">
+                      HTML 태그를 사용할 수 있습니다
+                    </p> */}
+                  </div>
+                )}
+
+                <div>
+                  <Label htmlFor="subject">제목</Label>
+                  <Input
+                    id="subject"
+                    value={subject}
+                    onChange={(e) => setSubject(e.target.value)}
+                    placeholder="메일 제목을 입력하세요"
+                  />
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* CSV 업로드 */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">수신자 업로드</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div>
+                  <Label htmlFor="csv">CSV 파일</Label>
+                  <div className="mt-2 flex gap-2">
+                    <Input
+                      id="csv"
+                      type="file"
+                      accept=".csv"
+                      onChange={handleFileUpload}
+                      disabled={loading}
+                    />
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={downloadSampleCsv}
+                      title="샘플 다운로드"
+                    >
+                      <Download className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  <p className="mt-2 text-xs text-muted-foreground">
+                    첫 번째 줄은 헤더(email, name, company 등)여야 합니다.
+                  </p>
+                </div>
+
+                {csvFile && (
+                  <div className="flex items-center justify-between rounded-md border bg-muted p-3">
+                    <div className="flex items-center gap-2">
+                      <FileText className="h-4 w-4 text-muted-foreground" />
+                      <span className="text-sm">{csvFile.name}</span>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        setCsvFile(null);
+                        setRecipients([]);
+                      }}
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+                )}
+
+                {recipients.length > 0 && (
+                  <div className="rounded-md border bg-muted p-4">
+                    <div className="flex items-center gap-2 text-sm">
+                      <CheckCircle2 className="h-4 w-4 text-green-600" />
+                      <span className="font-medium">{recipients.length}명의 수신자</span>
+                    </div>
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      변수: {Object.keys(recipients[0]?.variables || {}).join(", ")}
+                    </p>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* 오른쪽: 미리보기 & 발송 */}
+          <div className="space-y-6">
+            {/* 발송 버튼 */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">발송 실행</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {sending && (
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between text-sm">
+                      <span>발송 진행 중...</span>
+                      <span className="font-medium">
+                        {sendProgress.sent} / {sendProgress.total}
+                      </span>
+                    </div>
+                    <div className="h-2 overflow-hidden rounded-full bg-muted">
+                      <div
+                        className="h-full bg-primary transition-all duration-300"
+                        style={{
+                          width: `${(sendProgress.sent / sendProgress.total) * 100}%`,
+                        }}
+                      />
+                    </div>
+                  </div>
+                )}
+
+                <Button
+                  onClick={handleSend}
+                  disabled={sending || recipients.length === 0}
+                  className="w-full"
+                  size="lg"
+                >
+                  {sending ? (
+                    <>
+                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                      발송 중...
+                    </>
+                  ) : (
+                    <>
+                      <Send className="mr-2 h-5 w-5" />
+                      {recipients.length}명에게 발송
+                    </>
+                  )}
+                </Button>
+
+                <div className="rounded-md border bg-muted p-4">
+                  <div className="flex items-start gap-2">
+                    <AlertCircle className="mt-0.5 h-4 w-4 text-muted-foreground" />
+                    <div className="text-xs text-muted-foreground">
+                      <p className="font-medium">주의사항</p>
+                      <ul className="mt-1 list-inside list-disc space-y-1">
+                        <li>발송 속도는 계정 설정에 따라 제한됩니다</li>
+                        <li>대량 발송 시 스팸으로 분류될 수 있습니다</li>
+                        <li>발송 후 취소할 수 없습니다</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* 수신자 목록 미리보기 */}
+            {recipients.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-lg">수신자 목록 미리보기</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="max-h-96 space-y-2 overflow-y-auto">
+                    {recipients.slice(0, 10).map((recipient, index) => (
+                      <div
+                        key={index}
+                        className="rounded-md border bg-muted p-3 text-sm"
+                      >
+                        <div className="font-medium">{recipient.email}</div>
+                        <div className="mt-1 text-xs text-muted-foreground">
+                          {Object.entries(recipient.variables).map(([key, value]) => (
+                            <span key={key} className="mr-2">
+                              {key}: {value}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                    {recipients.length > 10 && (
+                      <p className="text-center text-xs text-muted-foreground">
+                        외 {recipients.length - 10}명
+                      </p>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+