rt.modals.close()} />
{m.title &&
{m.title} }
{m.content}
);
}
/** 확인 창 — shell-toast-modal 의 modals 위에서. */
function skConfirm(rt, title, body, okLabel = '확인', danger) {
return new Promise((resolve) => {
rt.modals.open(
{body}
rt.modals.close(null, false)}>취소
rt.modals.close(null, true)}>{okLabel}
,
{ title, onClose: (r) => resolve(r === true) });
});
}
/* ---------------------------------------------------------------
platform-dirty-guard — 저장 안 된 카드가 있으면 하단 막대 + 이탈 경고
--------------------------------------------------------------- */
function SkDirtyBar({ rt }) {
React.useEffect(() => rt.dirty.bindUnload(window), [rt]);
const s = rt.dirty.state;
if (!s.count) return null;
return (
{rt.dirty.message({ one: '저장 안 된 변경이 있습니다: {{labels}}', many: '{{n}}개 카드에 저장 안 된 변경이 있습니다: {{labels}}' })
.replace('{{labels}}', s.labels.join(', ')).replace('{{n}}', s.count)}
{ await rt.dirty.saveAll(); rt.emit(); }}>모두 저장
);
}
/** 카드의 초안을 dirty-guard 에 등록합니다. */
function useSkDirty(rt, id, label, read, saveFn) {
React.useEffect(() => rt.dirty.register(id, { read, label, save: saveFn }), [rt, id]);
}
/* =================================================================
설정 › 스킬 센터 — 카드 하나가 스킬 하나 이상을 실제로 구동합니다
================================================================= */
function SkSettingsCenter({ rt, theme, setTheme }) {
if (!rt) return null;
const admin = rt.isAdmin();
const sections = [
['sk-brand', '브랜드'], ['sk-theme', '테마'], ['sk-font', '글꼴'], ['sk-layout', '레이아웃'], ['sk-tz', '시간대'],
['sk-menu', '메뉴'], ['sk-perms', '권한'], ['sk-notice', '공지'], ['sk-demo', '데모'], ['sk-lang', '문구'],
['sk-staff', '직원'], ['sk-teams', '팀'], ['sk-perf', '평가'], ['sk-slots', '일일보고'], ['sk-video', '영상'],
['sk-sound', '알림음'], ['sk-changelog', '변경이력'], ['sk-backup', '백업'], ['sk-data', '데이터'],
['sk-int', '연동'], ['sk-access', '접근'],
];
return (
스킬 설정 센터
Skills/ 의 46개 패키지가 아래 카드에서 실제로 동작합니다.
{sections.map(([id, l]) => (
skJump(id)} className="text-[11px] font-semibold px-2 py-1 rounded-md"
style={{ background: 'var(--surface-3)', color: 'var(--ink-2)' }}>{l}
))}
{!admin &&
대부분의 설정은 관리자만 바꿀 수 있습니다. 스킬이 권한을 직접 확인하므로 저장 시 거절됩니다. }
);
}
/* ---- setting-brand + data-file-storage ---- */
function SkBrandCard({ rt }) {
const cfg = rt.cfg;
const [f, setF] = React.useState({ company: cfg.BRAND_COMPANY || '', system: cfg.BRAND_SYSTEM || '', tagline: cfg.BRAND_TAGLINE || '' });
const [msg, setMsg] = React.useState(null);
const fRef = React.useRef(f); fRef.current = f;
const saveFn = async () => { const r = await rt.brand.apply(fRef.current); rt.modules['setting-brand'].paintBrand(rt.brand.view()); return r; };
useSkDirty(rt, 'brand', '브랜드', () => ({ ...fRef.current, draft: rt.brand.draft || null }), saveFn);
const v = rt.brand.view();
const onLogo = async (file) => {
if (!file) return;
const ok = rt.brand.validateLogoFile(file);
if (ok && ok.ok === false) return setMsg({ tone: 'danger', text: rt.t(ok.reason === 'size' ? 'toast.brandLogoBig' : 'toast.brandLogoType', { mb: rt.modules['setting-brand'].LOGO_MAX_MB }) });
let url = await skReadFile(file, 'url');
if (!/svg/.test(file.type)) {
const img = await new Promise((res) => { const i = new Image(); i.onload = () => res(i); i.src = url; });
const box = rt.brand.scaleTo(img.width, img.height);
const c = document.createElement('canvas'); c.width = box.w; c.height = box.h;
c.getContext('2d').drawImage(img, 0, 0, box.w, box.h);
url = c.toDataURL('image/png');
}
rt.brand.setDraftLogo(url); rt.emit();
setMsg({ tone: 'info', text: '미리보기 중 — 저장해야 반영됩니다.' });
};
return (
{v.system}
{v.company} · {v.tagline}
{rt.brand.hasCustomLogo() &&
{ rt.brand.removeLogo(); rt.emit(); }}>로고 제거 }
{ await rt.brand.reset(); setF({ company: '', system: '', tagline: '' }); rt.modules['setting-brand'].paintBrand(rt.brand.view()); }}>기본값
{ const r = await saveFn(); rt.dirty.commit('brand'); setMsg(skResult(r, '저장됨 — 화면에 반영했습니다')); }}>저장
{msg && {msg.text} }
);
}
/* ---- header-theme-mode ---- */
function SkThemeCard({ rt, theme, setTheme }) {
const sw = { velrano: ['#2a78d6', '#121418'], neutral: ['#f4f5f7', '#1b1f26'], warm: ['#faf6f0', '#231d19'], cool: ['#f1f5fa', '#172029'] };
return (
{rt.theme.palettes().map((p) => {
const on = rt.theme.palette === p.id;
return (
{ rt.theme.setPalette(p.id); rt.audit.push({ action: 'update', module: 'settings', label: 'palette:' + p.id }); }}
className="rounded-xl p-2.5 text-left" style={{ border: '2px solid ' + (on ? 'var(--accent)' : 'var(--border)') }}>
{(sw[p.id] || []).map((c) =>
{p.label}
);
})}
{['light', 'dark'].map((m) => (
setTheme(m)}>
))}
);
}
/* ---- setting-font ---- */
function SkFontCard({ rt }) {
useSkDirty(rt, 'font', '글꼴', () => rt.font.readDraft(), () => rt.font.commit());
return (
{ rt.font.discardDraft(); rt.emit(); }}>되돌리기
{ await rt.font.commit(); rt.dirty.commit('font'); rt.toaster.ok('글꼴을 저장했습니다'); }}>저장
}>
{rt.font.options().map((o) => {
const on = rt.font.current() === o.id;
return (
{ rt.font.preview(o.id); rt.emit(); }}
className="rounded-xl p-3 text-left" style={{ border: '2px solid ' + (on ? 'var(--accent)' : 'var(--border)'), fontFamily: o.stack }}>
{o.sample}
{o.label}{rt.font.key() === o.id ? ' · 저장됨' : ''}
);
})}
);
}
/* ---- shell-layout-switch ---- */
function SkLayoutCard({ rt }) {
const cur = rt.layout.layout;
return (
{[['sidebar', '사이드바', 'Menu'], ['topnav', '상단바', 'SlidersHorizontal']].map(([id, l, ic]) => (
rt.layout.setLayout(id)} className="rounded-xl p-3 flex items-center gap-2.5"
style={{ border: '2px solid ' + (cur === id ? 'var(--accent)' : 'var(--border)') }}>
{l}
))}
);
}
/* ---- setting-timezone + header-clock ---- */
function SkTimezoneCard({ rt }) {
const [zone, setZone] = React.useState(rt.tz.timeZone());
const [off, setOff] = React.useState(rt.tz.offsetMinutes());
const [msg, setMsg] = React.useState(null);
const v = rt.tz.validate({ timeZone: zone, offsetMinutes: Number(off) });
return (
setZone(e.target.value)}>
{rt.tz.options().map((o) => {o.label} · {o.utc} )}
{!v.ok && {v.errors.map((e) => e.field + ': ' + e.code).join(', ')} }
현재: {rt.tz.label()} {rt.clockView ? ' · ' + rt.clockView.date + ' ' + rt.clockView.time : ''}
{
if (!(await skConfirm(rt, '시간대 변경', '다음 항목이 새 기준으로 바뀝니다:\n' + rt.tz.impact().join(', '), '변경'))) return;
const r = await rt.tz.apply({ timeZone: zone, offsetMinutes: Number(off) });
setMsg(skResult(r, '적용됨 — 상단 시계가 바뀌었습니다'));
}}>적용
{msg && {msg.text} }
);
}
/* ---- setting-sidebar-menu + shell-sidebar-nav ---- */
function SkMenuCard({ rt }) {
useSkDirty(rt, 'menu', '메뉴', () => rt.menu.readDraft(), () => rt.menu.commit());
const rows = rt.menu.rows();
const go = (fn) => { fn(); rt.emit(); };
return (
);
}
/* ---- setting-permissions + auth-role-guard ---- */
function SkPermsCard({ rt }) {
useSkDirty(rt, 'perms', '권한', () => rt.perms.readDraft(), () => rt.perms.commit());
const [role, setRole] = React.useState('employee');
const table = rt.perms.table().find((x) => x.role === role) || { rows: [] };
const acts = ['read', 'create', 'update', 'delete'];
const label = { read: '조회', create: '생성', update: '수정', delete: '삭제' };
return (
{ const r = await rt.perms.commit(); rt.dirty.commit('perms'); rt.toaster.show(r && r.ok === false ? '저장 실패: ' + r.reason : '권한을 저장했습니다', r && r.ok === false ? 'danger' : 'ok'); }}>저장}>
{rt.perms.roles().map((r) => setRole(r)}>{r === 'manager' ? '매니저' : '직원'} )}
);
}
/* ---- setting-admin-notice + notify-sound-alerts + header-notification-center ---- */
function SkNoticeCard({ rt }) {
const stored = rt.notice.stored();
const [text, setText] = React.useState(stored ? stored.text : '');
const [hours, setHours] = React.useState(24);
const [msg, setMsg] = React.useState(null);
const active = rt.notice.active();
return (