597 lines
22 KiB
TypeScript
597 lines
22 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 { 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,
|
|
Upload,
|
|
X
|
|
} from "lucide-react";
|
|
import { getMailTemplates } from "@/lib/api/mail";
|
|
|
|
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 [isLoading, setIsLoading] = useState(false);
|
|
|
|
// 템플릿 데이터 로드 (수정 모드)
|
|
useEffect(() => {
|
|
if (templateId) {
|
|
loadTemplate(templateId);
|
|
}
|
|
}, [templateId]);
|
|
|
|
const loadTemplate = async (id: string) => {
|
|
try {
|
|
setIsLoading(true);
|
|
const templates = await getMailTemplates();
|
|
const template = templates.find(t => t.id === id);
|
|
|
|
if (template) {
|
|
setTemplateName(template.name);
|
|
setSubject(template.subject);
|
|
setComponents(template.components || []);
|
|
console.log('✅ 템플릿 로드 완료:', {
|
|
name: template.name,
|
|
components: template.components?.length || 0
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('❌ 템플릿 로드 실패:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// 컴포넌트 타입 정의
|
|
const componentTypes = [
|
|
{ type: "text", icon: Type, label: "텍스트", color: "bg-primary/20 hover:bg-blue-200" },
|
|
{ type: "button", icon: MousePointer, label: "버튼", color: "bg-success/20 hover:bg-success/30" },
|
|
{ type: "image", icon: ImageIcon, label: "이미지", color: "bg-purple-100 hover:bg-purple-200" },
|
|
{ type: "spacer", icon: Square, label: "여백", color: "bg-muted hover:bg-muted/80" },
|
|
];
|
|
|
|
// 컴포넌트 추가
|
|
const addComponent = (type: string) => {
|
|
const newComponent: MailComponent = {
|
|
id: `comp-${Date.now()}`,
|
|
type: type as any,
|
|
content: type === "text" ? "" : undefined, // 🎯 빈 문자열로 시작 (HTML 태그 제거)
|
|
text: type === "button" ? "버튼 텍스트" : undefined, // 🎯 더 명확한 기본값
|
|
url: type === "button" || type === "image" ? "" : undefined, // 🎯 빈 문자열로 시작
|
|
src: type === "image" ? "https://placehold.co/600x200/e5e7eb/64748b?text=이미지를+업로드하세요" : undefined, // 🎯 한글 안내
|
|
height: type === "spacer" ? 30 : undefined, // 🎯 기본값 30px로 증가 (더 적절한 간격)
|
|
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);
|
|
|
|
// 로딩 중일 때
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-screen bg-muted/30">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-500 mx-auto mb-4"></div>
|
|
<p className="text-muted-foreground">템플릿을 불러오는 중...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-screen bg-muted/30">
|
|
{/* 왼쪽: 컴포넌트 팔레트 */}
|
|
<div className="w-64 bg-white border-r p-4 space-y-4 overflow-y-auto">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-foreground mb-3 flex items-center">
|
|
<Mail className="w-4 h-4 mr-2 text-primary" />
|
|
컴포넌트
|
|
</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`}
|
|
>
|
|
<Icon className="w-4 h-4 mr-2" />
|
|
{label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 템플릿 정보 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-sm">템플릿 정보</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="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-muted to-muted border-b">
|
|
<CardTitle className="flex items-center justify-between">
|
|
<span>메일 미리보기</span>
|
|
<span className="text-sm text-muted-foreground font-normal">
|
|
{components.length}개 컴포넌트
|
|
</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
{/* 제목 영역 */}
|
|
{subject && (
|
|
<div className="p-6 bg-muted/30 border-b">
|
|
<p className="text-sm text-muted-foreground">제목:</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-muted-foreground/50">
|
|
<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-background 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-foreground flex items-center">
|
|
<Settings className="w-4 h-4 mr-2 text-primary" />
|
|
속성 편집
|
|
</h3>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => setSelectedComponent(null)}
|
|
>
|
|
닫기
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 텍스트 컴포넌트 */}
|
|
{selected.type === "text" && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label className="text-sm font-medium text-foreground flex items-center gap-2">
|
|
내용
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground mt-1 mb-2">
|
|
메일에 표시될 텍스트를 입력하세요
|
|
</p>
|
|
<Textarea
|
|
value={(() => {
|
|
// 🎯 HTML 태그 자동 제거 (비개발자 친화적)
|
|
const content = selected.content || "";
|
|
const tmp = document.createElement("DIV");
|
|
tmp.innerHTML = content;
|
|
return tmp.textContent || tmp.innerText || "";
|
|
})()}
|
|
onChange={(e) =>
|
|
updateComponent(selected.id, { content: e.target.value })
|
|
}
|
|
onFocus={(e) => {
|
|
// 🎯 클릭 시 placeholder 같은 텍스트 자동 제거
|
|
const currentValue = e.target.value.trim();
|
|
if (currentValue === '텍스트를 입력하세요' ||
|
|
currentValue === '텍스트를 입력하세요...') {
|
|
e.target.value = '';
|
|
updateComponent(selected.id, { content: '' });
|
|
}
|
|
}}
|
|
rows={8}
|
|
className="mt-1"
|
|
placeholder="예) 안녕하세요! 특별한 소식을 전해드립니다..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 버튼 컴포넌트 */}
|
|
{selected.type === "button" && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label className="text-sm font-medium text-foreground flex items-center gap-2">
|
|
버튼 텍스트
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground mt-1 mb-2">
|
|
버튼에 표시될 글자를 입력하세요
|
|
</p>
|
|
<Input
|
|
value={selected.text || ""}
|
|
onChange={(e) =>
|
|
updateComponent(selected.id, { text: e.target.value })
|
|
}
|
|
className="mt-1"
|
|
placeholder="예) 자세히 보기, 지금 시작하기"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-sm font-medium text-foreground flex items-center gap-2">
|
|
연결할 주소
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground mt-1 mb-2">
|
|
버튼을 클릭하면 이동할 웹사이트 주소를 입력하세요
|
|
</p>
|
|
<Input
|
|
value={selected.url || ""}
|
|
onChange={(e) =>
|
|
updateComponent(selected.id, { url: e.target.value })
|
|
}
|
|
className="mt-1"
|
|
placeholder="예) https://www.example.com"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-sm font-medium text-foreground flex items-center gap-2">
|
|
버튼 색상
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground mt-1 mb-2">
|
|
버튼의 배경색을 선택하세요
|
|
</p>
|
|
<div className="flex items-center gap-3">
|
|
<Input
|
|
type="color"
|
|
value={selected.styles?.backgroundColor || "#007bff"}
|
|
onChange={(e) =>
|
|
updateComponent(selected.id, {
|
|
styles: { ...selected.styles, backgroundColor: e.target.value },
|
|
})
|
|
}
|
|
className="w-16 h-10 cursor-pointer"
|
|
/>
|
|
<span className="text-sm text-muted-foreground">
|
|
{selected.styles?.backgroundColor || "#007bff"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 이미지 컴포넌트 */}
|
|
{selected.type === "image" && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label className="text-sm font-medium text-foreground flex items-center gap-2">
|
|
이미지 선택
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground mt-1 mb-2">
|
|
컴퓨터에서 이미지 파일을 선택하세요
|
|
</p>
|
|
|
|
{/* 파일 업로드 버튼 */}
|
|
<div className="space-y-3">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
className="w-full"
|
|
onClick={() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.accept = 'image/*';
|
|
input.onchange = (e: any) => {
|
|
const file = e.target?.files?.[0];
|
|
if (file) {
|
|
// 파일을 Base64로 변환
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
updateComponent(selected.id, {
|
|
src: event.target?.result as string
|
|
});
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
};
|
|
input.click();
|
|
}}
|
|
>
|
|
<Upload className="w-4 h-4 mr-2" />
|
|
이미지 파일 선택
|
|
</Button>
|
|
|
|
{/* 구분선 */}
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<div className="w-full border-t border"></div>
|
|
</div>
|
|
<div className="relative flex justify-center text-xs">
|
|
<span className="px-2 bg-white text-muted-foreground">또는</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* URL 입력 */}
|
|
<div>
|
|
<Label className="text-xs text-muted-foreground mb-1 block">
|
|
이미지 웹 주소 입력
|
|
</Label>
|
|
<Input
|
|
value={selected.src || ""}
|
|
onChange={(e) =>
|
|
updateComponent(selected.id, { src: e.target.value })
|
|
}
|
|
className="text-sm"
|
|
placeholder="예) https://example.com/image.jpg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 미리보기 */}
|
|
{selected.src && (
|
|
<div className="mt-4">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<p className="text-xs text-muted-foreground">미리보기:</p>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => updateComponent(selected.id, { src: "" })}
|
|
className="h-6 text-xs text-red-600 hover:text-red-700 hover:bg-red-50"
|
|
>
|
|
<X className="w-3 h-3 mr-1" />
|
|
이미지 제거
|
|
</Button>
|
|
</div>
|
|
<div className="border rounded-lg p-2 bg-muted/30">
|
|
<img
|
|
src={selected.src}
|
|
alt="미리보기"
|
|
className="w-full rounded"
|
|
onError={(e) => {
|
|
(e.target as HTMLImageElement).src = 'https://placehold.co/600x200?text=이미지+로드+실패';
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 여백 컴포넌트 */}
|
|
{selected.type === "spacer" && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label className="text-sm font-medium text-foreground flex items-center gap-2">
|
|
여백 크기
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground mt-1 mb-2">
|
|
요소 사이의 간격을 조절하세요
|
|
</p>
|
|
<div className="flex items-center gap-3">
|
|
<Input
|
|
type="number"
|
|
value={selected.height || 20}
|
|
onChange={(e) =>
|
|
updateComponent(selected.id, { height: parseInt(e.target.value) || 20 })
|
|
}
|
|
className="w-24"
|
|
min="0"
|
|
max="200"
|
|
/>
|
|
<span className="text-sm text-muted-foreground">픽셀</span>
|
|
</div>
|
|
<div className="mt-3 p-3 bg-primary/10 rounded-lg border border-primary/20">
|
|
<p className="text-xs text-primary">
|
|
<strong>추천값:</strong><br/>
|
|
• 좁은 간격: 10~20 픽셀<br/>
|
|
• 보통 간격: 30~50 픽셀<br/>
|
|
• 넓은 간격: 60~100 픽셀
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-16 text-muted-foreground">
|
|
<Settings className="w-12 h-12 mx-auto mb-4 opacity-20" />
|
|
<p className="text-sm">컴포넌트를 선택하세요</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|