// Common small components + helpers
const { useState, useEffect, useMemo, useRef } = React;
const STATUS_LABEL = {
pending: '대기',
approved: '승인',
scheduled: '예약됨',
published: '게시완료',
failed: '실패',
held: '보류',
draft: '작성중',
};
const STATUS_ORDER = ['pending', 'approved', 'scheduled', 'published'];
function fmtTime(iso) {
if (!iso) return '—';
const d = new Date(iso);
const mo = String(d.getMonth()+1).padStart(2,'0');
const dd = String(d.getDate()).padStart(2,'0');
const hh = String(d.getHours()).padStart(2,'0');
const mm = String(d.getMinutes()).padStart(2,'0');
return `${mo}/${dd} ${hh}:${mm}`;
}
function fmtRelative(iso) {
if (!iso) return '';
const now = new Date('2026-04-20T14:30:00+09:00').getTime();
const t = new Date(iso).getTime();
const diff = Math.round((t - now) / 60000);
const abs = Math.abs(diff);
if (abs < 1) return '방금';
if (abs < 60) return diff < 0 ? `${abs}분 전` : `${abs}분 후`;
const h = Math.round(abs/60);
if (h < 24) return diff < 0 ? `${h}시간 전` : `${h}시간 후`;
const d = Math.round(h/24);
return diff < 0 ? `${d}일 전` : `${d}일 후`;
}
function Badge({ status, children }) {
const label = children || STATUS_LABEL[status] || status;
return {label};
}
function Icon({ name, size = 14 }) {
const paths = {
search: <>,
plus: <>,
bell: <>,
settings: <>,
home: <>,
calendar: <>,
chat: <>,
users: <>,
check: <>,
x: <>,
chevronRight: <>,
chevronDown: <>,
play: <>,
pause: <>,
more: <>,
edit: <>,
clock: <>,
eye: <>,
heart: <>,
filter: <>,
grid: <>,
list: <>,
columns: <>,
refresh: <>,
sparkle: <>,
sun: <>,
moon: <>,
send: <>,
alert: <>,
sliders: <>,
trash: <>,
};
return (
);
}
function AccountAvatar({ acc, size = 28 }) {
const letters = acc.handle.replace('@','').split('.')[1] || acc.handle.slice(1,3);
return (
{letters.slice(0,2).toUpperCase()}
{size >= 24 && }
);
}
function ZodiacBadge({ z }) {
const meta = window.SAJU.ZODIAC.find(x => x.key === z);
if (!meta) return null;
return (
{meta.emoji}
{meta.ko}
);
}
function StatusFlow({ current }) {
// order: pending -> approved -> scheduled -> published (+ failed/held branches)
if (current === 'failed') return 대기→승인→예약됨→실패
;
if (current === 'held') return 대기→보류
;
const idx = STATUS_ORDER.indexOf(current);
return (
{STATUS_ORDER.map((s, i) => (
{STATUS_LABEL[s]}
{i < STATUS_ORDER.length - 1 && →}
))}
);
}
// Mini sparkline (SVG)
function Sparkline({ data, w = 80, h = 28, color = 'var(--accent)' }) {
const max = Math.max(...data, 1);
const min = Math.min(...data, 0);
const range = max - min || 1;
const points = data.map((v, i) => {
const x = (i / (data.length - 1)) * w;
const y = h - ((v - min) / range) * h;
return `${x.toFixed(1)},${y.toFixed(1)}`;
}).join(' ');
return (
);
}
function Bars({ data, w = 80, h = 28, color = 'var(--accent)' }) {
const max = Math.max(...data, 1);
const bw = w / data.length - 2;
return (
);
}
// Export
Object.assign(window, { Badge, Icon, AccountAvatar, ZodiacBadge, StatusFlow, Sparkline, Bars, fmtTime, fmtRelative, STATUS_LABEL, STATUS_ORDER });