{a.title}
{cat?.label}
{a.body.length > 50 ? a.body.slice(0, 50).replace(/\n/g, ' ') + '…' : a.body.replace(/\n/g, ' ')}
|
{(a.audience.actualCount ?? a.audience.estimatedCount).toLocaleString()}명
{audienceText} · {recipientText}
|
{ch.label}
|
{a.status === 'sent' && (
{D.fmt.timestamp(a.sentAt)}
발송 완료
)}
{a.status === 'scheduled' && (
{D.fmt.timestamp(a.scheduledAt)}
예약됨 · 자동 발송
)}
{a.status === 'draft' && (
{shortWhen(a.createdAt)} 작성
)}
{a.status === 'cancelled' && (
취소됨
)}
|
{a.stats ? (
{a.stats.read}/{a.stats.sent}
읽음
{a.stats.failed > 0 && (
실패 {a.stats.failed}
)}
) : (
{status.label}
)}
|
{a.status === 'draft' && (
편집
발송
)}
{a.status === 'scheduled' && (
취소
편집
)}
{a.status === 'sent' && (
상세
)}
|
);
}
// ────────────────────────────────────────────────────────────
// Compose modal
// ────────────────────────────────────────────────────────────
function ComposeAnnouncementModal({ open, editing, onClose, onSave }) {
const isEdit = !!editing;
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
const [category, setCategory] = useState('etc');
const [audKind, setAudKind] = useState('all');
const [audStatus, setAudStatus] = useState(['ACTIVE']);
const [audTeachers, setAudTeachers] = useState([]);
const [audPassType, setAudPassType] = useState([]);
const [audMemberIds, setAudMemberIds] = useState([]);
const [recipients, setRecipients] = useState('both');
const [channel, setChannel] = useState('sms');
const [schedKind, setSchedKind] = useState('now'); // 'now' | 'later'
const [schedAt, setSchedAt] = useState(suggestNextSendTime());
// Initialize on open with editing or defaults
React.useEffect(() => {
if (!open) return;
if (editing) {
setTitle(editing.title);
setBody(editing.body);
setCategory(editing.category);
setAudKind(editing.audience.kind);
setAudStatus(editing.audience.filters?.status || ['ACTIVE']);
setAudTeachers(editing.audience.filters?.teacherIds || []);
setAudPassType(editing.audience.filters?.passType || []);
setAudMemberIds(editing.audience.memberIds || []);
setRecipients(editing.audience.recipients);
setChannel(editing.channel);
setSchedKind(editing.scheduledAt ? 'later' : 'now');
setSchedAt(editing.scheduledAt || suggestNextSendTime());
} else {
setTitle(''); setBody(''); setCategory('etc');
setAudKind('all'); setAudStatus(['ACTIVE']);
setAudTeachers([]); setAudPassType([]); setAudMemberIds([]);
setRecipients(D.announcementPolicy.audienceDefaults.recipients);
setChannel(D.announcementPolicy.defaultChannel);
setSchedKind('now'); setSchedAt(suggestNextSendTime());
}
}, [open, editing]);
// Audience estimate (live)
const audienceFilter = useMemo(() => {
if (audKind === 'all') return { status: ['ACTIVE'] };
if (audKind === 'individual') return { /* memberIds handled below */ };
return {
status: audStatus.length ? audStatus : ['ACTIVE'],
teacherIds: audTeachers,
passType: audPassType,
};
}, [audKind, audStatus, audTeachers, audPassType]);
const estimatedCount = useMemo(() => {
if (audKind === 'individual') {
return D.estimateAudience({ memberIds: audMemberIds }, recipients);
}
return D.estimateAudience(audienceFilter, recipients);
}, [audKind, audMemberIds, audienceFilter, recipients]);
const estimatedCost = useMemo(() => {
return D.estimateCost(estimatedCount, channel, body.length);
}, [estimatedCount, channel, body]);
const canSave = title.trim().length > 0 && body.trim().length > 0 && estimatedCount > 0;
function buildPayload(status) {
return {
title: title.trim(),
body: body.trim(),
category,
scheduledAt: schedKind === 'later' ? schedAt : null,
sentAt: status === 'sent' ? nowStr() : null,
status,
audience: {
kind: audKind,
filters: audKind === 'individual'
? {}
: (audKind === 'all'
? { status: ['ACTIVE'] }
: { status: audStatus, teacherIds: audTeachers, passType: audPassType }),
memberIds: audKind === 'individual' ? audMemberIds : undefined,
recipients,
estimatedCount,
},
channel,
stats: status === 'sent' ? simulateStats({ audience: { estimatedCount } }) : null,
};
}
return (