// ═══════════════════════════════════════════════════════════════
// 정책 > 보안관리 (3-1, 마스터)
// ═══════════════════════════════════════════════════════════════
const SecurityView = () => {
const toast = useToast();
const isMobile = useIsMobile();
const [s, setS] = React.useState({
login: true,
capture: true,
copy: true,
pcWatermark: true, pcAlways: false,
mobileWatermark: true, mobileAlways: true,
kakaoId: true,
align: 'center',
color: '#8e7fbf',
lineBreak: 20,
opacity: 15,
watermarkText: '',
clipboardText: '',
});
const up = (k, v) => setS(p => ({ ...p, [k]: v }));
// ── 토글 저장 헬퍼: 즉시 상태 반영 + 서버 저장 (실패 시 롤백) ──
const saveToggle = (key, value, endpoint, bodyKey) => {
up(key, value);
TSL_API.saveSetting(endpoint, { [bodyKey]: value }).catch(err => {
console.error('saveSetting', endpoint, err);
up(key, !value); // 롤백
});
};
const saveMode = (key, value, endpoint, bodyKey) => {
up(key, value);
const modeVal = value ? 'always' : 'when_disabled';
TSL_API.saveSetting(endpoint, { [bodyKey]: modeVal }).catch(err => {
console.error('saveSetting mode', endpoint, err);
up(key, !value);
});
};
const saveWatermarkContent = () => {
TSL_API.saveSetting('watermark-content', {
watermark_show_id: s.kakaoId,
watermark_custom_text: s.watermarkText,
watermark_align: s.align,
watermark_color: s.color,
watermark_max_chars: s.lineBreak,
watermark_opacity: s.opacity,
}).then(() => toast('success', '워터마크 설정이 저장되었습니다'))
.catch(err => { console.error(err); toast('error', '저장 실패: ' + err.message); });
};
const saveClipboardText = () => {
TSL_API.saveSetting('capture-clipboard-text', { capture_clipboard_text: s.clipboardText })
.then(() => toast('success', '클립보드 문구가 저장되었습니다'))
.catch(err => { console.error(err); toast('error', '저장 실패: ' + err.message); });
};
// ── Fetch live settings on mount (read-only) ──
React.useEffect(() => {
const safe = (name, fn) => TSL_API.setting(name).then(fn).catch(() => {});
safe('watermark-content', d => setS(p => ({
...p,
watermarkText: d.watermark_custom_text || '',
kakaoId: d.watermark_show_id !== false,
align: d.watermark_align || 'center',
color: d.watermark_color || '#000000',
lineBreak: d.watermark_max_chars || 20,
opacity: d.watermark_opacity || 15,
})));
// 실제 API 응답 필드명 (user-management-server.js 기준):
// login-toggle → { login_required: bool }
// capture-toggle → { capture_protection: bool }
// copy-toggle → { copy_protection: bool }
// watermark-toggle → { watermark_enabled: bool }
// mobile-watermark-toggle → { mobile_watermark_enabled: bool }
// watermark-mode → { watermark_mode: 'always'|'when_disabled' }
// mobile-watermark-mode → { mobile_watermark_mode: ... }
// capture-clipboard-text → { capture_clipboard_text: string }
// bonus-gift-toggle → { bonus_gift_enabled: bool }
safe('login-toggle', d => setS(p => ({ ...p, login: !!d.login_required })));
safe('capture-toggle', d => setS(p => ({ ...p, capture: !!d.capture_protection })));
safe('copy-toggle', d => setS(p => ({ ...p, copy: !!d.copy_protection })));
safe('watermark-toggle', d => setS(p => ({ ...p, pcWatermark: !!d.watermark_enabled })));
safe('mobile-watermark-toggle', d => setS(p => ({ ...p, mobileWatermark: !!d.mobile_watermark_enabled })));
safe('watermark-mode', d => setS(p => ({ ...p, pcAlways: d.watermark_mode === 'always' })));
safe('mobile-watermark-mode', d => setS(p => ({ ...p, mobileAlways: d.mobile_watermark_mode === 'always' })));
safe('capture-clipboard-text', d => setS(p => ({ ...p, clipboardText: d.capture_clipboard_text || '' })));
}, []);
// Drag-reorder state for ALL policy blocks (mini + wmedit + clipboard)
const defaultOrder = ['login', 'capture', 'copy', 'pcWM', 'mobileWM', 'wmEdit', 'clipboard'];
const [order, setOrder] = React.useState(() => {
try { return JSON.parse(localStorage.getItem('tsl.security.order')) || defaultOrder; } catch { return defaultOrder; }
});
React.useEffect(() => { localStorage.setItem('tsl.security.order', JSON.stringify(order)); }, [order]);
const [dragId, setDragId] = React.useState(null);
const [overId, setOverId] = React.useState(null);
// 슬라이더 조작 중에는 블록 드래그 비활성화
const [sliderBusy, setSliderBusy] = React.useState(false);
const onDragStart = (id) => setDragId(id);
const onDragOver = (id) => (e) => { e.preventDefault(); if (id !== overId) setOverId(id); };
const onDragLeave = () => setOverId(null);
const onDrop = (targetId) => (e) => {
e.preventDefault();
if (!dragId || dragId === targetId) { setDragId(null); setOverId(null); return; }
setOrder(o => {
const next = [...o];
const from = next.indexOf(dragId);
const to = next.indexOf(targetId);
next.splice(from, 1);
next.splice(to, 0, dragId);
return next;
});
setDragId(null); setOverId(null);
};
const onDragEnd = () => { setDragId(null); setOverId(null); };
// 원본 adminLoginStatus 포맷: ON · {설명} / OFF · {설명}
const stateText = (on, onMsg = '활성화', offMsg = '비활성화') => on
? ON · {onMsg}
: OFF · {offMsg};
// Card definitions by id
const cards = {
login: saveToggle('login', !s.login, 'login-toggle', 'login_required')} />}
state={stateText(s.login, '로그인 후 이용 가능', '누구나 이용 가능')} />,
capture: saveToggle('capture', !s.capture, 'capture-toggle', 'capture_protection')} />}
state={stateText(s.capture, '캡처 차단 중', '캡처 허용')} />,
copy: saveToggle('copy', !s.copy, 'copy-toggle', 'copy_protection')} />}
state={stateText(s.copy, '복사 차단 중', '복사 허용')} />,
pcWM: saveToggle('pcWatermark', !s.pcWatermark, 'watermark-toggle', 'watermark_enabled')} />}
state={stateText(s.pcWatermark, 'PC 워터마크 표시', 'PC 워터마크 숨김')}
extra={
} />,
mobileWM: saveToggle('mobileWatermark', !s.mobileWatermark, 'mobile-watermark-toggle', 'mobile_watermark_enabled')} />}
state={stateText(s.mobileWatermark, '모바일 워터마크 표시', '모바일 워터마크 숨김')}
extra={
} />,
wmEdit: (
} onClick={saveWatermarkContent}>적용}>
{/* 왼쪽: 텍스트, 오른쪽: 카카오ID / [정렬 + 글자색 1줄] */}