402 lines
13 KiB
TypeScript
402 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Mail,
|
|
Type,
|
|
Image as ImageIcon,
|
|
Square,
|
|
MousePointer,
|
|
Eye,
|
|
Send,
|
|
Save,
|
|
Plus,
|
|
Trash2,
|
|
Settings
|
|
} from "lucide-react";
|
|
|
|
export interface MailComponent {
|
|
id: string;
|
|
type: "text" | "button" | "image" | "spacer" | "table";
|
|
content?: string;
|
|
text?: string;
|
|
url?: string;
|
|
src?: string;
|
|
height?: number;
|
|
styles?: Record<string, string>;
|
|
}
|
|
|
|
export interface QueryConfig {
|
|
id: string;
|
|
name: string;
|
|
sql: string;
|
|
parameters: Array<{
|
|
name: string;
|
|
type: string;
|
|
value?: any;
|
|
}>;
|
|
}
|
|
|
|
interface MailDesignerProps {
|
|
templateId?: string;
|
|
onSave?: (data: any) => void;
|
|
onPreview?: (data: any) => void;
|
|
onSend?: (data: any) => void;
|
|
}
|
|
|
|
export default function MailDesigner({
|
|
templateId,
|
|
onSave,
|
|
onPreview,
|
|
onSend,
|
|
}: MailDesignerProps) {
|
|
const [components, setComponents] = useState<MailComponent[]>([]);
|
|
const [selectedComponent, setSelectedComponent] = useState<string | null>(null);
|
|
const [templateName, setTemplateName] = useState("");
|
|
const [subject, setSubject] = useState("");
|
|
const [queries, setQueries] = useState<QueryConfig[]>([]);
|
|
|
|
// 컴포넌트 타입 정의
|
|
const componentTypes = [
|
|
{ type: "text", icon: Type, label: "텍스트", color: "bg-primary/20 hover:bg-blue-200" },
|
|
{ type: "button", icon: MousePointer, label: "버튼", color: "bg-green-100 hover:bg-green-200" },
|
|
{ type: "image", icon: ImageIcon, label: "이미지", color: "bg-purple-100 hover:bg-purple-200" },
|
|
{ type: "spacer", icon: Square, label: "여백", color: "bg-gray-100 hover:bg-gray-200" },
|
|
];
|
|
|
|
// 컴포넌트 추가
|
|
const addComponent = (type: string) => {
|
|
const newComponent: MailComponent = {
|
|
id: `comp-${Date.now()}`,
|
|
type: type as any,
|
|
content: type === "text" ? "<p>텍스트를 입력하세요...</p>" : undefined,
|
|
text: type === "button" ? "버튼" : undefined,
|
|
url: type === "button" || type === "image" ? "https://example.com" : undefined,
|
|
src: type === "image" ? "https://placehold.co/600x200/e5e7eb/64748b?text=Image" : undefined,
|
|
height: type === "spacer" ? 20 : undefined,
|
|
styles: {
|
|
padding: "10px",
|
|
backgroundColor: type === "button" ? "#007bff" : "transparent",
|
|
color: type === "button" ? "#fff" : "#333",
|
|
},
|
|
};
|
|
|
|
setComponents([...components, newComponent]);
|
|
};
|
|
|
|
// 컴포넌트 삭제
|
|
const removeComponent = (id: string) => {
|
|
setComponents(components.filter(c => c.id !== id));
|
|
if (selectedComponent === id) {
|
|
setSelectedComponent(null);
|
|
}
|
|
};
|
|
|
|
// 컴포넌트 선택
|
|
const selectComponent = (id: string) => {
|
|
setSelectedComponent(id);
|
|
};
|
|
|
|
// 컴포넌트 내용 업데이트
|
|
const updateComponent = (id: string, updates: Partial<MailComponent>) => {
|
|
setComponents(
|
|
components.map(c => c.id === id ? { ...c, ...updates } : c)
|
|
);
|
|
};
|
|
|
|
// 저장
|
|
const handleSave = () => {
|
|
const data = {
|
|
name: templateName,
|
|
subject,
|
|
components,
|
|
queries,
|
|
};
|
|
|
|
if (onSave) {
|
|
onSave(data);
|
|
}
|
|
};
|
|
|
|
// 미리보기
|
|
const handlePreview = () => {
|
|
if (onPreview) {
|
|
onPreview({ components, subject });
|
|
}
|
|
};
|
|
|
|
// 발송
|
|
const handleSend = () => {
|
|
if (onSend) {
|
|
onSend({ components, subject, queries });
|
|
}
|
|
};
|
|
|
|
// 선택된 컴포넌트 가져오기
|
|
const selected = components.find(c => c.id === selectedComponent);
|
|
|
|
return (
|
|
<div className="flex h-screen bg-gray-50">
|
|
{/* 왼쪽: 컴포넌트 팔레트 */}
|
|
<div className="w-64 bg-white border-r p-4 space-y-4 overflow-y-auto">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-gray-700 mb-3 flex items-center">
|
|
<Mail className="w-4 h-4 mr-2 text-orange-500" />
|
|
컴포넌트
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{componentTypes.map(({ type, icon: Icon, label, color }) => (
|
|
<Button
|
|
key={type}
|
|
onClick={() => addComponent(type)}
|
|
variant="outline"
|
|
className={`w-full justify-start ${color} border-gray-300`}
|
|
>
|
|
<Icon className="w-4 h-4 mr-2" />
|
|
{label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 템플릿 정보 */}
|
|
<Card>
|
|
<CardHeader className="p-4 pb-2">
|
|
<CardTitle className="text-sm">템플릿 정보</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-4 pt-2 space-y-3">
|
|
<div>
|
|
<Label className="text-xs">템플릿 이름</Label>
|
|
<Input
|
|
value={templateName}
|
|
onChange={(e) => setTemplateName(e.target.value)}
|
|
placeholder="예: 고객 환영 메일"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs">제목</Label>
|
|
<Input
|
|
value={subject}
|
|
onChange={(e) => setSubject(e.target.value)}
|
|
placeholder="예: {customer_name}님 환영합니다!"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 액션 버튼 */}
|
|
<div className="space-y-2">
|
|
<Button onClick={handleSave} className="w-full" variant="default">
|
|
<Save className="w-4 h-4 mr-2" />
|
|
저장
|
|
</Button>
|
|
<Button onClick={handlePreview} className="w-full" variant="outline">
|
|
<Eye className="w-4 h-4 mr-2" />
|
|
미리보기
|
|
</Button>
|
|
<Button onClick={handleSend} variant="default" className="w-full">
|
|
<Send className="w-4 h-4 mr-2" />
|
|
발송
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 중앙: 캔버스 */}
|
|
<div className="flex-1 p-8 overflow-y-auto">
|
|
<Card className="max-w-3xl mx-auto">
|
|
<CardHeader className="bg-gradient-to-r from-orange-50 to-amber-50 border-b">
|
|
<CardTitle className="flex items-center justify-between">
|
|
<span>메일 미리보기</span>
|
|
<span className="text-sm text-gray-500 font-normal">
|
|
{components.length}개 컴포넌트
|
|
</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
{/* 제목 영역 */}
|
|
{subject && (
|
|
<div className="p-6 bg-gray-50 border-b">
|
|
<p className="text-sm text-gray-500">제목:</p>
|
|
<p className="font-semibold text-lg">{subject}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* 컴포넌트 렌더링 */}
|
|
<div className="p-6 space-y-4">
|
|
{components.length === 0 ? (
|
|
<div className="text-center py-16 text-gray-400">
|
|
<Mail className="w-16 h-16 mx-auto mb-4 opacity-20" />
|
|
<p>왼쪽에서 컴포넌트를 추가하세요</p>
|
|
</div>
|
|
) : (
|
|
components.map((comp) => (
|
|
<div
|
|
key={comp.id}
|
|
onClick={() => selectComponent(comp.id)}
|
|
className={`relative group cursor-pointer rounded-lg transition-all ${
|
|
selectedComponent === comp.id
|
|
? "ring-2 ring-orange-500 bg-orange-50/30"
|
|
: "hover:ring-2 hover:ring-gray-300"
|
|
}`}
|
|
style={comp.styles}
|
|
>
|
|
{/* 삭제 버튼 */}
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
removeComponent(comp.id);
|
|
}}
|
|
className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-destructive text-white rounded-full p-1 hover:bg-destructive/90"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
|
|
{/* 컴포넌트 내용 */}
|
|
{comp.type === "text" && (
|
|
<div dangerouslySetInnerHTML={{ __html: comp.content || "" }} />
|
|
)}
|
|
{comp.type === "button" && (
|
|
<a
|
|
href={comp.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-block px-6 py-3 rounded-md"
|
|
style={comp.styles}
|
|
>
|
|
{comp.text}
|
|
</a>
|
|
)}
|
|
{comp.type === "image" && (
|
|
<img src={comp.src} alt="메일 이미지" className="w-full rounded" />
|
|
)}
|
|
{comp.type === "spacer" && (
|
|
<div style={{ height: `${comp.height}px` }} />
|
|
)}
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 오른쪽: 속성 패널 */}
|
|
<div className="w-80 bg-white border-l p-4 overflow-y-auto">
|
|
{selected ? (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-sm font-semibold text-gray-700 flex items-center">
|
|
<Settings className="w-4 h-4 mr-2 text-orange-500" />
|
|
속성 편집
|
|
</h3>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => setSelectedComponent(null)}
|
|
>
|
|
닫기
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 텍스트 컴포넌트 */}
|
|
{selected.type === "text" && (
|
|
<div>
|
|
<Label className="text-xs">내용 (HTML)</Label>
|
|
<Textarea
|
|
value={selected.content || ""}
|
|
onChange={(e) =>
|
|
updateComponent(selected.id, { content: e.target.value })
|
|
}
|
|
rows={8}
|
|
className="mt-1 font-mono text-xs"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 버튼 컴포넌트 */}
|
|
{selected.type === "button" && (
|
|
<>
|
|
<div>
|
|
<Label className="text-xs">버튼 텍스트</Label>
|
|
<Input
|
|
value={selected.text || ""}
|
|
onChange={(e) =>
|
|
updateComponent(selected.id, { text: e.target.value })
|
|
}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs">링크 URL</Label>
|
|
<Input
|
|
value={selected.url || ""}
|
|
onChange={(e) =>
|
|
updateComponent(selected.id, { url: e.target.value })
|
|
}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs">배경색</Label>
|
|
<Input
|
|
type="color"
|
|
value={selected.styles?.backgroundColor || "#007bff"}
|
|
onChange={(e) =>
|
|
updateComponent(selected.id, {
|
|
styles: { ...selected.styles, backgroundColor: e.target.value },
|
|
})
|
|
}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* 이미지 컴포넌트 */}
|
|
{selected.type === "image" && (
|
|
<div>
|
|
<Label className="text-xs">이미지 URL</Label>
|
|
<Input
|
|
value={selected.src || ""}
|
|
onChange={(e) =>
|
|
updateComponent(selected.id, { src: e.target.value })
|
|
}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 여백 컴포넌트 */}
|
|
{selected.type === "spacer" && (
|
|
<div>
|
|
<Label className="text-xs">높이 (px)</Label>
|
|
<Input
|
|
type="number"
|
|
value={selected.height || 20}
|
|
onChange={(e) =>
|
|
updateComponent(selected.id, { height: parseInt(e.target.value) })
|
|
}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-16 text-gray-400">
|
|
<Settings className="w-12 h-12 mx-auto mb-4 opacity-20" />
|
|
<p className="text-sm">컴포넌트를 선택하세요</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|