// app.jsx — Tweaks panel mounting. Applies palette / theme / density to .
// NOTE: hero background and logo are controlled by admin "사이트 설정" (render.js
// → renderSettings) — Tweaks no longer touches them to avoid override conflicts.
const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS;
function applyTweaks(t) {
const body = document.body;
// Theme variant classes
body.classList.remove('theme-dark', 'theme-charcoal', 'theme-mono', 'theme-emerald');
if (t.theme === 'dark') body.classList.add('theme-dark');
if (t.palette === 'charcoal') body.classList.add('theme-charcoal');
if (t.palette === 'mono') body.classList.add('theme-mono');
if (t.palette === 'emerald') body.classList.add('theme-emerald');
body.setAttribute('data-density', t.density);
// Font pairing
const root = document.documentElement;
if (t.fontPair === 'pretendard') {
root.style.setProperty('--f-display', '"Space Grotesk", "Pretendard", system-ui, sans-serif');
root.style.setProperty('--f-sans', '"Pretendard", system-ui, sans-serif');
} else if (t.fontPair === 'serif') {
root.style.setProperty('--f-display', '"Fraunces", "Pretendard", serif');
root.style.setProperty('--f-sans', '"Pretendard", system-ui, sans-serif');
} else if (t.fontPair === 'mono') {
root.style.setProperty('--f-display', '"JetBrains Mono", "Pretendard", monospace');
root.style.setProperty('--f-sans', '"Pretendard", system-ui, sans-serif');
}
// Marquee
const m = document.querySelector('.marquee');
if (m) m.style.display = t.showMarquee ? '' : 'none';
// Hero variant — swap h1 layout
const heroH1 = document.querySelector('.hero h1');
if (heroH1) {
if (t.heroVariant === 'split') {
heroH1.innerHTML =
'통합 솔루션으로
수익은 극대화,
비용은 최소화.';
} else if (t.heroVariant === 'quantum') {
heroH1.innerHTML =
'Quantum-Jump
for 스마트 팩토리.';
} else if (t.heroVariant === 'bold') {
heroH1.innerHTML =
'공장 한 곳에서 시작해,
전 공정을 잇습니다.';
}
}
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
React.useEffect(() => { applyTweaks(t); }, [t]);
return (
setTweak('theme', v)} />
setTweak('palette', v)} />
setTweak('fontPair', v)} />
setTweak('density', v)} />
setTweak('showMarquee', v)} />
setTweak('heroVariant', v)} />
);
}
const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render();