메일 관리 작업 저장용 커밋

frontend/components/mail/MailTemplateEditorModal.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { X, Save, Eye } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { MailTemplate, CreateMailTemplateDto, UpdateMailTemplateDto } from '@/lib/api/mail';
+import MailDesigner from './MailDesigner';
+
+interface MailTemplateEditorModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (data: CreateMailTemplateDto | UpdateMailTemplateDto) => Promise<void>;
+  template?: MailTemplate | null;
+  mode: 'create' | 'edit';
+}
+
+export default function MailTemplateEditorModal({
+  isOpen,
+  onClose,
+  onSave,
+  template,
+  mode,
+}: MailTemplateEditorModalProps) {
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleSave = async (designerData: any) => {
+    setIsSaving(true);
+    try {
+      // MailDesigner가 보내는 데이터 구조에 맞춰서 처리
+      await onSave({
+        name: designerData.name || designerData.templateName || '제목 없음',
+        subject: designerData.subject || '제목 없음',
+        components: designerData.components || [],
+        category: designerData.category,
+      });
+      onClose();
+    } catch (error) {
+      console.error('템플릿 저장 실패:', error);
+      alert(error instanceof Error ? error.message : '저장 중 오류가 발생했습니다.');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-white">
+      {/* 헤더 */}
+      <div className="sticky top-0 bg-gradient-to-r from-orange-500 to-orange-600 px-6 py-4 flex items-center justify-between shadow-lg z-10">
+        <div className="flex items-center gap-3">
+          <h2 className="text-xl font-bold text-white">
+            {mode === 'create' ? '새 메일 템플릿 만들기' : '메일 템플릿 수정'}
+          </h2>
+        </div>
+        <button
+          onClick={onClose}
+          disabled={isSaving}
+          className="text-white hover:bg-white/20 rounded-lg p-2 transition disabled:opacity-50"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+
+      {/* MailDesigner 컴포넌트 */}
+      <div className="h-[calc(100vh-73px)] overflow-hidden">
+        <MailDesigner
+          templateId={template?.id}
+          onSave={handleSave}
+          onPreview={(data) => {
+            // 미리보기 로직은 MailDesigner 내부에서 처리
+            console.log('Preview:', data);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+