572 lines
26 KiB
TypeScript
572 lines
26 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
Mail,
|
|
Plus,
|
|
Edit2,
|
|
Trash2,
|
|
X,
|
|
RefreshCw,
|
|
Search,
|
|
Type,
|
|
FileText,
|
|
User,
|
|
CheckCircle2
|
|
} from 'lucide-react';
|
|
import { comms } from '@/communication';
|
|
import { MailFormItem } from '@/types';
|
|
import { clsx } from 'clsx';
|
|
|
|
const initialFormData: Partial<MailFormItem> = {
|
|
cate: '',
|
|
title: '',
|
|
tolist: '',
|
|
bcc: '',
|
|
cc: '',
|
|
subject: '',
|
|
tail: '',
|
|
body: '',
|
|
selfTo: false,
|
|
selfCC: false,
|
|
selfBCC: false,
|
|
exceptmail: '',
|
|
exceptmailcc: '',
|
|
};
|
|
|
|
export function MailFormPage() {
|
|
const [loading, setLoading] = useState(false);
|
|
const [mailForms, setMailForms] = useState<MailFormItem[]>([]);
|
|
const [searchKey, setSearchKey] = useState('');
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [editingItem, setEditingItem] = useState<MailFormItem | null>(null);
|
|
const [formData, setFormData] = useState<Partial<MailFormItem>>(initialFormData);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const loadData = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const response = await comms.getMailFormList();
|
|
if (response.Success && response.Data) {
|
|
setMailForms(response.Data);
|
|
}
|
|
} catch (error) {
|
|
console.error('데이터 로드 오류:', error);
|
|
alert('데이터를 불러오는 중 오류가 발생했습니다.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [loadData]);
|
|
|
|
const filteredItems = mailForms.filter(item =>
|
|
!searchKey ||
|
|
item.title?.toLowerCase().includes(searchKey.toLowerCase()) ||
|
|
item.cate?.toLowerCase().includes(searchKey.toLowerCase()) ||
|
|
item.subject?.toLowerCase().includes(searchKey.toLowerCase())
|
|
);
|
|
|
|
const openAddModal = () => {
|
|
setEditingItem(null);
|
|
setFormData(initialFormData);
|
|
setShowModal(true);
|
|
};
|
|
|
|
const openEditModal = (item: MailFormItem) => {
|
|
setEditingItem(item);
|
|
setFormData({
|
|
cate: item.cate || '',
|
|
title: item.title || '',
|
|
tolist: item.tolist || '',
|
|
bcc: item.bcc || '',
|
|
cc: item.cc || '',
|
|
subject: item.subject || '',
|
|
tail: item.tail || '',
|
|
body: item.body || '',
|
|
selfTo: item.selfTo || false,
|
|
selfCC: item.selfCC || false,
|
|
selfBCC: item.selfBCC || false,
|
|
exceptmail: item.exceptmail || '',
|
|
exceptmailcc: item.exceptmailcc || '',
|
|
});
|
|
setShowModal(true);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!formData.title?.trim()) {
|
|
alert('양식명을 입력해주세요.');
|
|
return;
|
|
}
|
|
|
|
setSaving(true);
|
|
try {
|
|
let response;
|
|
if (editingItem) {
|
|
response = await comms.editMailForm(
|
|
editingItem.idx,
|
|
formData.cate || '',
|
|
formData.title || '',
|
|
formData.tolist || '',
|
|
formData.bcc || '',
|
|
formData.cc || '',
|
|
formData.subject || '',
|
|
formData.tail || '',
|
|
formData.body || '',
|
|
formData.selfTo || false,
|
|
formData.selfCC || false,
|
|
formData.selfBCC || false,
|
|
formData.exceptmail || '',
|
|
formData.exceptmailcc || ''
|
|
);
|
|
} else {
|
|
response = await comms.addMailForm(
|
|
formData.cate || '',
|
|
formData.title || '',
|
|
formData.tolist || '',
|
|
formData.bcc || '',
|
|
formData.cc || '',
|
|
formData.subject || '',
|
|
formData.tail || '',
|
|
formData.body || '',
|
|
formData.selfTo || false,
|
|
formData.selfCC || false,
|
|
formData.selfBCC || false,
|
|
formData.exceptmail || '',
|
|
formData.exceptmailcc || ''
|
|
);
|
|
}
|
|
|
|
if (response.Success) {
|
|
setShowModal(false);
|
|
loadData();
|
|
} else {
|
|
alert(response.Message || '저장에 실패했습니다.');
|
|
}
|
|
} catch (error) {
|
|
console.error('저장 오류:', error);
|
|
alert('저장 중 오류가 발생했습니다.');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (item: MailFormItem) => {
|
|
if (!confirm(`"${item.title}" 양식을 삭제하시겠습니까?`)) return;
|
|
|
|
try {
|
|
const response = await comms.deleteMailForm(item.idx);
|
|
if (response.Success) {
|
|
loadData();
|
|
} else {
|
|
alert(response.Message || '삭제에 실패했습니다.');
|
|
}
|
|
} catch (error) {
|
|
console.error('삭제 오류:', error);
|
|
alert('삭제 중 오류가 발생했습니다.');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6 animate-fade-in pb-4 h-full">
|
|
{/* 메일양식 메인 카드 */}
|
|
<div className="glass-effect rounded-3xl overflow-hidden shadow-2xl border border-white/10 flex flex-col h-full max-h-[calc(100vh-140px)]">
|
|
<div className="px-6 py-4 border-b border-white/10 flex flex-col md:flex-row items-center justify-between gap-4 bg-white/[0.02] shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-primary-500/20 rounded-lg">
|
|
<Mail className="w-5 h-5 text-primary-400" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold text-white tracking-tight">메일양식 관리</h3>
|
|
<p className="text-white/30 text-[10px] uppercase font-bold tracking-widest mt-0.5">
|
|
Email Template System
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
{/* 검색창 */}
|
|
<div className="relative group w-48 md:w-64">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-white/40 group-focus-within:text-primary-400 transition-colors" />
|
|
<input
|
|
type="text"
|
|
value={searchKey}
|
|
onChange={(e) => setSearchKey(e.target.value)}
|
|
placeholder="양식명, 제목, 분류 검색..."
|
|
className="w-full bg-white/5 border border-white/10 rounded-xl pl-9 pr-4 py-1.5 text-xs text-white placeholder-white/20 focus:outline-none focus:ring-1 focus:ring-primary-500/50 transition-all backdrop-blur-sm h-[40px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* 개수 */}
|
|
<div className="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-xl border border-white/10 h-[40px]">
|
|
<span className="text-primary-400 font-bold text-sm">{filteredItems.length}</span>
|
|
<span className="text-white/40 text-[10px] uppercase">건</span>
|
|
</div>
|
|
|
|
{/* 새로고침 */}
|
|
<button
|
|
onClick={loadData}
|
|
disabled={loading}
|
|
className="p-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-white/70 hover:text-white transition-all disabled:opacity-50 h-[40px] w-[40px] flex items-center justify-center"
|
|
title="새로고침"
|
|
>
|
|
<RefreshCw className={clsx("w-4 h-4", loading && "animate-spin")} />
|
|
</button>
|
|
|
|
{/* 추가 버튼 */}
|
|
<button
|
|
onClick={openAddModal}
|
|
className="p-2 bg-primary-500 hover:bg-primary-600 border border-white/20 rounded-xl text-white transition-all shadow-lg shadow-primary-500/20 active:scale-95 h-[40px] w-[40px] flex items-center justify-center group"
|
|
title="새 양식 추가"
|
|
>
|
|
<Plus className="w-4 h-4 group-hover:rotate-90 transition-transform" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 리스트 헤더 */}
|
|
<div className="bg-white/5 px-6 py-3 border-b border-white/5 flex items-center text-[10px] font-bold text-white/30 uppercase tracking-widest shrink-0">
|
|
<div className="w-24 px-4 text-center">분류</div>
|
|
<div className="flex-1 px-4">양식 정보</div>
|
|
<div className="w-64 px-4">메일 제목</div>
|
|
<div className="w-32 px-4 text-center">수신 옵션</div>
|
|
<div className="w-20 text-center">작업</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto custom-scrollbar divide-y divide-white/5">
|
|
{loading ? (
|
|
<div className="py-20 text-center">
|
|
<RefreshCw className="w-10 h-10 mx-auto mb-4 animate-spin text-primary-500/50" />
|
|
<p className="text-white/50 font-medium text-sm">양식 데이터를 불러오는 중...</p>
|
|
</div>
|
|
) : filteredItems.length === 0 ? (
|
|
<div className="py-32 text-center">
|
|
<Mail className="w-16 h-16 mx-auto text-white/10 mb-4" />
|
|
<p className="text-white/30 text-base font-bold">등록된 메일양식이 없습니다</p>
|
|
<p className="text-white/10 text-[10px] mt-2 uppercase tracking-[0.2em]">No email templates available</p>
|
|
</div>
|
|
) : (
|
|
filteredItems.map((item) => (
|
|
<div
|
|
key={item.idx}
|
|
className="px-6 py-3 hover:bg-white/[0.03] transition-all group flex items-center"
|
|
>
|
|
{/* 분류 */}
|
|
<div className="w-24 px-4 text-center">
|
|
<span className="px-2 py-0.5 bg-white/5 border border-white/5 rounded-md text-[10px] text-white/40 font-bold uppercase truncate block">
|
|
{item.cate || '미분류'}
|
|
</span>
|
|
</div>
|
|
|
|
{/* 양식명 */}
|
|
<div className="flex-1 px-4 flex flex-col">
|
|
<div className="text-sm font-bold text-white group-hover:text-primary-300 transition-colors">
|
|
{item.title}
|
|
</div>
|
|
<div className="text-[10px] text-white/20 mt-0.5 flex items-center gap-1.5">
|
|
<FileText className="w-2.5 h-2.5" />
|
|
ID: {item.idx}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 제목 */}
|
|
<div className="w-64 px-4 text-xs text-white/50 truncate italic">
|
|
{item.subject || '(제목 없음)'}
|
|
</div>
|
|
|
|
{/* 발신 옵션 (To/CC/BCC Self) */}
|
|
<div className="w-32 px-4 flex justify-center gap-1.5">
|
|
{[
|
|
{ label: 'T', active: item.selfTo, color: 'text-primary-400', bg: 'bg-primary-500/10' },
|
|
{ label: 'C', active: item.selfCC, color: 'text-amber-400', bg: 'bg-amber-500/10' },
|
|
{ label: 'B', active: item.selfBCC, color: 'text-emerald-400', bg: 'bg-emerald-500/10' }
|
|
].map((opt, i) => (
|
|
<div
|
|
key={i}
|
|
className={clsx(
|
|
"w-6 h-6 rounded flex items-center justify-center text-[10px] font-bold border border-white/5",
|
|
opt.active ? `${opt.bg} ${opt.color} border-${opt.color}/20` : "bg-white/5 text-white/10"
|
|
)}
|
|
title={`${opt.label === 'T' ? 'To' : opt.label === 'C' ? 'CC' : 'BCC'} Self-include`}
|
|
>
|
|
{opt.label}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* 작업 버튼 */}
|
|
<div className="w-20 flex justify-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button
|
|
onClick={() => openEditModal(item)}
|
|
className="p-1.5 hover:bg-white/10 rounded-lg text-white/40 hover:text-white transition-colors"
|
|
>
|
|
<Edit2 className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(item)}
|
|
className="p-1.5 hover:bg-red-500/10 rounded-lg text-white/40 hover:text-red-400 transition-colors"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{/* 푸터 */}
|
|
<div className="px-6 py-2 flex items-center justify-between bg-white/[0.02] border-t border-white/5 shrink-0">
|
|
<div className="text-white/20 text-[9px] font-bold uppercase tracking-[0.2em] py-2">
|
|
Template Management Hub <span className="text-white/5 mx-2">/</span>
|
|
Total <span className="text-primary-400/50 font-mono tracking-normal">{filteredItems.length}</span>
|
|
</div>
|
|
<div className="text-[9px] text-white/10 italic">
|
|
Reference date: {new Date().toLocaleDateString()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 편집 모달 */}
|
|
{showModal && (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
|
<div
|
|
className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in"
|
|
onClick={() => setShowModal(false)}
|
|
/>
|
|
|
|
<div className="relative w-full max-w-4xl bg-[#1a1c1e] border border-white/10 rounded-3xl shadow-2xl overflow-hidden animate-scale-in flex flex-col max-h-[90vh]">
|
|
{/* 모달 헤더 */}
|
|
<div className="px-6 py-5 border-b border-white/10 flex items-center justify-between bg-white/[0.02] shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-primary-500/20 rounded-xl text-primary-400">
|
|
<Mail className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-bold text-white tracking-tight">
|
|
{editingItem ? '메일양식 수정' : '새 메일양식 등록'}
|
|
</h2>
|
|
<p className="text-white/30 text-[10px] uppercase font-bold tracking-widest mt-0.5">
|
|
Template Configuration
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowModal(false)}
|
|
className="p-2 hover:bg-white/10 rounded-xl text-white/40 hover:text-white transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* 모달 내용 */}
|
|
<div className="flex-1 overflow-y-auto p-6 space-y-8 custom-scrollbar">
|
|
{/* 기본 정보 */}
|
|
<section className="space-y-4">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<Type className="w-4 h-4 text-primary-500" />
|
|
<h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">분류 및 명칭</h4>
|
|
<div className="flex-1 h-px bg-white/5"></div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
|
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">분류 (Category)</label>
|
|
<input
|
|
type="text"
|
|
value={formData.cate || ''}
|
|
onChange={(e) => setFormData({ ...formData, cate: e.target.value })}
|
|
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
|
placeholder="업무, 공지 등"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
|
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">양식 명칭 *</label>
|
|
<input
|
|
type="text"
|
|
value={formData.title || ''}
|
|
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
|
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
|
placeholder="구분이 쉬운 양식 이름을 입력하세요"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
|
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">메일 제목 (Subject)</label>
|
|
<input
|
|
type="text"
|
|
value={formData.subject || ''}
|
|
onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
|
|
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
|
placeholder="발송 시 자동으로 채워질 제목"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 수신자 설정 */}
|
|
<section className="space-y-4">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<User className="w-4 h-4 text-amber-500" />
|
|
<h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">수신자 기본값</h4>
|
|
<div className="flex-1 h-px bg-white/5"></div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{/* To */}
|
|
<div className="space-y-3">
|
|
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
|
<label className="text-[10px] font-bold text-white/30 uppercase pl-1 flex items-center justify-between">
|
|
To (수신)
|
|
<span className="flex items-center gap-1.5 cursor-pointer text-primary-400">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.selfTo || false}
|
|
onChange={(e) => setFormData({ ...formData, selfTo: e.target.checked })}
|
|
className="w-3 h-3 rounded"
|
|
/>
|
|
Self
|
|
</span>
|
|
</label>
|
|
<textarea
|
|
value={formData.tolist || ''}
|
|
onChange={(e) => setFormData({ ...formData, tolist: e.target.value })}
|
|
rows={3}
|
|
className="w-full bg-transparent border-none text-xs text-white focus:outline-none resize-none placeholder:text-white/10"
|
|
placeholder="주소를 입력하세요 (줄바꿈 구분)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CC */}
|
|
<div className="space-y-3">
|
|
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
|
<label className="text-[10px] font-bold text-white/30 uppercase pl-1 flex items-center justify-between">
|
|
CC (참조)
|
|
<span className="flex items-center gap-2 cursor-pointer text-amber-400">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.selfCC || false}
|
|
onChange={(e) => setFormData({ ...formData, selfCC: e.target.checked })}
|
|
className="w-3 h-3 rounded"
|
|
/>
|
|
Self
|
|
</span>
|
|
</label>
|
|
<textarea
|
|
value={formData.cc || ''}
|
|
onChange={(e) => setFormData({ ...formData, cc: e.target.value })}
|
|
rows={3}
|
|
className="w-full bg-transparent border-none text-xs text-white focus:outline-none resize-none placeholder:text-white/10"
|
|
placeholder="주소를 입력하세요 (줄바꿈 구분)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* BCC */}
|
|
<div className="space-y-3">
|
|
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
|
<label className="text-[10px] font-bold text-white/30 uppercase pl-1 flex items-center justify-between">
|
|
BCC (숨은참조)
|
|
<span className="flex items-center gap-2 cursor-pointer text-emerald-400">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.selfBCC || false}
|
|
onChange={(e) => setFormData({ ...formData, selfBCC: e.target.checked })}
|
|
className="w-3 h-3 rounded"
|
|
/>
|
|
Self
|
|
</span>
|
|
</label>
|
|
<textarea
|
|
value={formData.bcc || ''}
|
|
onChange={(e) => setFormData({ ...formData, bcc: e.target.value })}
|
|
rows={3}
|
|
className="w-full bg-transparent border-none text-xs text-white focus:outline-none resize-none placeholder:text-white/10"
|
|
placeholder="주소를 입력하세요 (줄바꿈 구분)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
|
<label className="text-[10px] font-bold text-white/30 uppercase pl-1 italic">Expect Mail (To 제외 주소)</label>
|
|
<input
|
|
type="text"
|
|
value={formData.exceptmail || ''}
|
|
onChange={(e) => setFormData({ ...formData, exceptmail: e.target.value })}
|
|
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
|
<label className="text-[10px] font-bold text-white/30 uppercase pl-1 italic">Expect Mail CC (참조 제외 주소)</label>
|
|
<input
|
|
type="text"
|
|
value={formData.exceptmailcc || ''}
|
|
onChange={(e) => setFormData({ ...formData, exceptmailcc: e.target.value })}
|
|
className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 본문 에디터 영역 */}
|
|
<section className="space-y-4">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<FileText className="w-4 h-4 text-emerald-500" />
|
|
<h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">본문 및 꼬리말</h4>
|
|
<div className="flex-1 h-px bg-white/5"></div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5 px-3 py-3 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
|
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">메일 본문 (HTML 가능)</label>
|
|
<textarea
|
|
value={formData.body || ''}
|
|
onChange={(e) => setFormData({ ...formData, body: e.target.value })}
|
|
rows={8}
|
|
className="w-full bg-transparent border-none text-sm text-white focus:outline-none resize-none placeholder:text-white/10 mt-1 font-mono"
|
|
placeholder="메일 본문 내용을 입력하세요"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5 px-3 py-3 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
|
|
<label className="text-[10px] font-bold text-white/30 uppercase pl-1">꼬리말 (Tail/Signature)</label>
|
|
<textarea
|
|
value={formData.tail || ''}
|
|
onChange={(e) => setFormData({ ...formData, tail: e.target.value })}
|
|
rows={3}
|
|
className="w-full bg-transparent border-none text-sm text-white focus:outline-none resize-none placeholder:text-white/10 mt-1"
|
|
placeholder="하단에 공통으로 표시될 꼬리말"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{/* 모달 푸터 */}
|
|
<div className="px-6 py-5 bg-white/[0.02] border-t border-white/10 flex items-center justify-end gap-3 shrink-0">
|
|
<button
|
|
onClick={() => setShowModal(false)}
|
|
className="px-5 py-2 text-white/40 hover:text-white font-bold text-xs transition-colors"
|
|
>
|
|
취소
|
|
</button>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="flex items-center gap-2 px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-xl font-bold text-xs shadow-lg shadow-primary-500/20 transition-all disabled:opacity-50 active:scale-95"
|
|
>
|
|
{saving ? (
|
|
<RefreshCw className="w-3.5 h-3.5 animate-spin" />
|
|
) : (
|
|
<CheckCircle2 className="w-3.5 h-3.5" />
|
|
)}
|
|
<span>{editingItem ? '양식 변경 사항 저장' : '새 메일양식 저장'}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|