UI Unification: Refactor UserList and MailForm to Notepad design system, and finalize Customs management
This commit is contained in:
backuppc
@@ -4,14 +4,17 @@ import {
|
||||
Plus,
|
||||
Edit2,
|
||||
Trash2,
|
||||
Save,
|
||||
X,
|
||||
Loader2,
|
||||
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: '',
|
||||
@@ -165,305 +168,399 @@ export function MailFormPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 헤더 */}
|
||||
<div className="glass-effect rounded-2xl p-6">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-3 bg-primary-500/20 rounded-xl">
|
||||
<Mail className="w-6 h-6 text-primary-400" />
|
||||
<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>
|
||||
<h1 className="text-2xl font-bold text-white">메일양식</h1>
|
||||
<p className="text-white/60 text-sm">메일 템플릿 관리</p>
|
||||
<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 space-x-3">
|
||||
{/* 검색 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-white/40" />
|
||||
<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="pl-10 pr-4 py-2 bg-white/10 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:border-primary-500 w-48"
|
||||
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="flex items-center space-x-2 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white transition-colors disabled:opacity-50"
|
||||
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={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
<RefreshCw className={clsx("w-4 h-4", loading && "animate-spin")} />
|
||||
</button>
|
||||
|
||||
{/* 추가 버튼 */}
|
||||
<button
|
||||
onClick={openAddModal}
|
||||
className="flex items-center space-x-2 px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg text-white transition-colors"
|
||||
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" />
|
||||
<span>새 양식</span>
|
||||
<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>
|
||||
|
||||
{/* 목록 */}
|
||||
<div className="glass-effect rounded-2xl overflow-hidden">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<Loader2 className="w-8 h-8 text-white animate-spin" />
|
||||
</div>
|
||||
) : filteredItems.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-white/50">
|
||||
<Mail className="w-12 h-12 mb-4 opacity-50" />
|
||||
<p>등록된 메일양식이 없습니다.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-white/10">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase w-24">분류</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase">양식명</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-white/70 uppercase">제목</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-medium text-white/70 uppercase w-20">To</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-medium text-white/70 uppercase w-20">CC</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-medium text-white/70 uppercase w-20">BCC</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-medium text-white/70 uppercase w-24">작업</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{filteredItems.map((item) => (
|
||||
<tr key={item.idx} className="hover:bg-white/5 transition-colors">
|
||||
<td className="px-4 py-3 text-white/70 text-sm">{item.cate || '-'}</td>
|
||||
<td className="px-4 py-3 text-white text-sm font-medium">{item.title}</td>
|
||||
<td className="px-4 py-3 text-white/70 text-sm">{item.subject || '-'}</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
{item.selfTo && (
|
||||
<span className="inline-block w-5 h-5 bg-success-500/20 text-success-400 rounded text-xs leading-5">S</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
{item.selfCC && (
|
||||
<span className="inline-block w-5 h-5 bg-warning-500/20 text-warning-400 rounded text-xs leading-5">S</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
{item.selfBCC && (
|
||||
<span className="inline-block w-5 h-5 bg-primary-500/20 text-primary-400 rounded text-xs leading-5">S</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<button
|
||||
onClick={() => openEditModal(item)}
|
||||
className="p-1.5 hover:bg-white/10 rounded text-white/70 hover:text-white transition-colors"
|
||||
title="수정"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(item)}
|
||||
className="p-1.5 hover:bg-danger-500/20 rounded text-white/70 hover:text-danger-400 transition-colors"
|
||||
title="삭제"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 편집 모달 */}
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||||
<div className="bg-slate-800 rounded-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
|
||||
<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="flex items-center justify-between px-6 py-4 border-b border-white/10">
|
||||
<h2 className="text-xl font-bold text-white">
|
||||
{editingItem ? '메일양식 수정' : '새 메일양식'}
|
||||
</h2>
|
||||
<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-lg text-white/70 hover:text-white transition-colors"
|
||||
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-4">
|
||||
{/* 1행: 분류, 양식명 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-white/70 text-sm mb-1">분류</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.cate || ''}
|
||||
onChange={(e) => setFormData({ ...formData, cate: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary-500"
|
||||
/>
|
||||
<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>
|
||||
<label className="block text-white/70 text-sm mb-1">양식명 *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.title || ''}
|
||||
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2행: 제목 */}
|
||||
<div>
|
||||
<label className="block text-white/70 text-sm mb-1">메일 제목</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.subject || ''}
|
||||
onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 3행: 수신자 */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-white/70 text-sm mb-1">To (수신)</label>
|
||||
<textarea
|
||||
value={formData.tolist || ''}
|
||||
onChange={(e) => setFormData({ ...formData, tolist: e.target.value })}
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:border-primary-500 resize-none"
|
||||
placeholder="이메일 주소 (줄바꿈으로 구분)"
|
||||
/>
|
||||
<label className="flex items-center mt-1 text-sm text-white/60">
|
||||
<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="checkbox"
|
||||
checked={formData.selfTo || false}
|
||||
onChange={(e) => setFormData({ ...formData, selfTo: e.target.checked })}
|
||||
className="mr-2"
|
||||
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="업무, 공지 등"
|
||||
/>
|
||||
본인 포함
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-white/70 text-sm mb-1">CC (참조)</label>
|
||||
<textarea
|
||||
value={formData.cc || ''}
|
||||
onChange={(e) => setFormData({ ...formData, cc: e.target.value })}
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:border-primary-500 resize-none"
|
||||
placeholder="이메일 주소 (줄바꿈으로 구분)"
|
||||
/>
|
||||
<label className="flex items-center mt-1 text-sm text-white/60">
|
||||
</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="checkbox"
|
||||
checked={formData.selfCC || false}
|
||||
onChange={(e) => setFormData({ ...formData, selfCC: e.target.checked })}
|
||||
className="mr-2"
|
||||
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="구분이 쉬운 양식 이름을 입력하세요"
|
||||
/>
|
||||
본인 포함
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-white/70 text-sm mb-1">BCC (숨은참조)</label>
|
||||
<textarea
|
||||
value={formData.bcc || ''}
|
||||
onChange={(e) => setFormData({ ...formData, bcc: e.target.value })}
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:border-primary-500 resize-none"
|
||||
placeholder="이메일 주소 (줄바꿈으로 구분)"
|
||||
/>
|
||||
<label className="flex items-center mt-1 text-sm text-white/60">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.selfBCC || false}
|
||||
onChange={(e) => setFormData({ ...formData, selfBCC: e.target.checked })}
|
||||
className="mr-2"
|
||||
/>
|
||||
본인 포함
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 4행: 제외 메일 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-white/70 text-sm mb-1">To 제외 메일</label>
|
||||
<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.exceptmail || ''}
|
||||
onChange={(e) => setFormData({ ...formData, exceptmail: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:border-primary-500"
|
||||
placeholder="제외할 이메일 주소"
|
||||
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>
|
||||
<div>
|
||||
<label className="block text-white/70 text-sm mb-1">CC 제외 메일</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.exceptmailcc || ''}
|
||||
onChange={(e) => setFormData({ ...formData, exceptmailcc: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:border-primary-500"
|
||||
placeholder="제외할 이메일 주소"
|
||||
</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>
|
||||
|
||||
{/* 5행: 본문 */}
|
||||
<div>
|
||||
<label className="block text-white/70 text-sm mb-1">메일 본문</label>
|
||||
<textarea
|
||||
value={formData.body || ''}
|
||||
onChange={(e) => setFormData({ ...formData, body: e.target.value })}
|
||||
rows={6}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary-500 resize-none"
|
||||
placeholder="메일 본문 내용..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 6행: 꼬리말 */}
|
||||
<div>
|
||||
<label className="block text-white/70 text-sm mb-1">꼬리말</label>
|
||||
<textarea
|
||||
value={formData.tail || ''}
|
||||
onChange={(e) => setFormData({ ...formData, tail: e.target.value })}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary-500 resize-none"
|
||||
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="flex items-center justify-end space-x-3 px-6 py-4 border-t border-white/10">
|
||||
<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-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white transition-colors"
|
||||
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 space-x-2 px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg text-white transition-colors disabled:opacity-50"
|
||||
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 ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<RefreshCw className="w-3.5 h-3.5 animate-spin" />
|
||||
) : (
|
||||
<Save className="w-4 h-4" />
|
||||
<CheckCircle2 className="w-3.5 h-3.5" />
|
||||
)}
|
||||
<span>저장</span>
|
||||
<span>{editingItem ? '양식 변경 사항 저장' : '새 메일양식 저장'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user