// app.jsx — Sidebar, top bar, routing, theme switching, Tweaks panel. const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "light", "density": "regular", "accent": "#3182F6", "simState": "live" }/*EDITMODE-END*/; function App(){ const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [route, setRoute] = React.useState({ name: 'overview' }); const [currentOrg, setCurrentOrg] = React.useState(''); const [scraperList, setScraperList] = React.useState([]); const [approvalCount, setApprovalCount] = React.useState(0); const [stats, setStats] = React.useState(null); // 서버 DB에서 스크래퍼 목록 + 승인 큐 카운트 + 통계 로드, 30초마다 자동 갱신 const refreshScrapers = React.useCallback(() => { fetch('/api/scrapers') .then(r => r.json()) .then(data => { if (Array.isArray(data)) setScraperList(data); }) .catch(() => {}); }, []); const refreshApprovals = React.useCallback(() => { fetch('/api/approvals') .then(r => r.json()) .then(data => { if (Array.isArray(data)) setApprovalCount(data.length); }) .catch(() => {}); }, []); const refreshStats = React.useCallback(() => { fetch('/api/stats') .then(r => r.json()) .then(data => setStats(data)) .catch(() => {}); }, []); const handleRefresh = React.useCallback(() => { refreshScrapers(); refreshApprovals(); refreshStats(); }, [refreshScrapers, refreshApprovals, refreshStats]); React.useEffect(() => { handleRefresh(); const timer = setInterval(handleRefresh, 30000); return () => clearInterval(timer); }, [handleRefresh]); // theme — also persisted in localStorage so refresh keeps state React.useEffect(()=>{ const stored = localStorage.getItem('doma.theme'); if (stored && stored !== t.theme) setTweak('theme', stored); }, []); // eslint-disable-line React.useEffect(()=>{ document.documentElement.dataset.theme = t.theme; localStorage.setItem('doma.theme', t.theme); }, [t.theme]); // density React.useEffect(()=>{ const px = t.density==='compact' ? 12.5 : t.density==='comfy' ? 14 : 13.5; document.body.style.fontSize = px+'px'; }, [t.density]); // accent React.useEffect(()=>{ document.documentElement.style.setProperty('--accent', t.accent); document.documentElement.style.setProperty('--accent-soft', hexA(t.accent, 0.10)); document.documentElement.style.setProperty('--accent-line', hexA(t.accent, 0.28)); }, [t.accent]); const go = (name, payload) => setRoute({ name, payload }); const toggleTheme = () => setTweak('theme', t.theme==='light'?'dark':'light'); const handleScraperUpdate = (updated) => { setScraperList(prev => prev.map(c => c.id === updated.id ? updated : c)); }; const handleDeleteScraper = async (id) => { try { await fetch(`/api/scrapers/${id}`, { method: 'DELETE' }); } catch {} setScraperList(prev => prev.filter(c => c.id !== id)); refreshStats(); go('overview'); }; const handleApprovalAction = () => { refreshApprovals(); refreshScrapers(); go('approvals'); }; const handleRegister = async (newScraper) => { setScraperList(prev => [newScraper, ...prev]); try { const resp = await fetch('/api/scrapers', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newScraper), }); if (resp.ok) { const saved = await resp.json(); setScraperList(prev => prev.map(c => c.id === saved.id ? saved : c)); } } catch { // optimistic entry stays; will sync on next auto-refresh } }; return ( <>
{route.name==='overview' && go('detail', c)} onGoApprovals={()=>go('approvals')} onNewScraper={()=>go('new')} onRefresh={handleRefresh} onDeleteScraper={handleDeleteScraper} />} {route.name==='approvals' && go('overview')} onAction={handleApprovalAction} />} {route.name==='detail' && go('overview')} onScraperUpdate={handleScraperUpdate} onDelete={handleDeleteScraper}/>} {route.name==='new' && go('overview')} onRegister={handleRegister}/>} {route.name==='delivery' && } {route.name==='settings' && } {route.name==='activity' && } {route.name==='templates' && go('new')}/>}
setTweak('theme', v)}/> setTweak('density', v)}/> setTweak('accent', v)}/> setTweak('simState', v)}/> ); } function hexA(hex, a){ const h = hex.replace('#',''); const r=parseInt(h.slice(0,2),16), g=parseInt(h.slice(2,4),16), b=parseInt(h.slice(4,6),16); return `rgba(${r},${g},${b},${a})`; } function BlankScreen({title, subtitle}){ return (
{subtitle}
이 화면은 데모에서 생략되었습니다.
); } // ─── Sidebar ─────────────────────────────────────────────────────────────── function Sidebar({route, onGo, currentOrg, approvalCount}){ const sections = [ { hdr:'워크스페이스', items:[ {id:'overview', label:'스크래퍼', icon:'scraper'}, {id:'approvals', label:'승인 큐', icon:'inbox', count:approvalCount||null, accent:'warn'}, {id:'templates', label:'템플릿', icon:'sparkles'}, {id:'activity', label:'활동', icon:'history'}, ]}, { hdr:'데이터 출력', items:[ {id:'delivery', label:'전송 채널', icon:'rocket'}, ]}, { hdr:'관리', items:[ {id:'settings', label:'설정', icon:'settings'}, ]}, ]; return ( ); } function Logo(){ return ( ); } // ─── Top bar ─────────────────────────────────────────────────────────────── function TopBar({route, onGo, currentOrg, theme, onToggleTheme}){ const titleMap = { overview:'스크래퍼', approvals:'승인 큐', detail:'스크래퍼 상세', new:'새 스크래퍼', delivery:'전송 채널', settings:'설정', activity:'활동', templates:'템플릿' }; return (
{currentOrg} {titleMap[route.name] || route.name}
); } ReactDOM.createRoot(document.getElementById('app')).render();