/* =========================================================
UI 공용 컴포넌트 — Icon / Reveal / Counter
========================================================= */
const { useState, useEffect, useRef, useCallback } = React;
/* ---------- Icon set (stroke-based, 24x24) ---------- */
const ICONS = {
leaf: ,
snow: ,
ruler: ,
doc: ,
shield: ,
hand: ,
phone: ,
check: ,
plus: ,
arrowRight: ,
chevronRight: ,
chevronLeft: ,
zoom: ,
x: ,
menu: ,
star: ,
mail: ,
pin: ,
user: ,
spark: ,
clock: ,
bolt: ,
};
function Icon({ name, size, strokeWidth = 1.8, className, style }) {
const fillIcons = ["star"];
const isFill = fillIcons.includes(name);
return (
);
}
/* ---------- Reveal on scroll ---------- */
function Reveal({ children, className = "", delay = 0, as = "div", style, ...rest }) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
if (typeof IntersectionObserver === "undefined") { setShown(true); return; }
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.unobserve(e.target); } });
}, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
io.observe(el);
const fb = setTimeout(() => setShown(true), 900);
return () => { io.disconnect(); clearTimeout(fb); };
}, []);
const Tag = as;
const delayCls = delay ? ` reveal-${delay}` : "";
return (
{children}
);
}
/* ---------- Count-up number ---------- */
function Counter({ to, suffix = "", duration = 1500 }) {
const ref = useRef(null);
const [val, setVal] = useState(0);
const started = useRef(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const run = () => {
if (started.current) return;
started.current = true;
const t0 = performance.now();
const tick = (t) => {
const p = Math.min((t - t0) / duration, 1);
const eased = 1 - Math.pow(1 - p, 3);
setVal(Math.round(eased * to));
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
};
if (typeof IntersectionObserver === "undefined") { run(); return; }
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { run(); io.unobserve(e.target); } });
}, { threshold: 0.5 });
io.observe(el);
const fb = setTimeout(run, 1100);
return () => { io.disconnect(); clearTimeout(fb); };
}, [to, duration]);
return {val}{suffix};
}
Object.assign(window, { Icon, Reveal, Counter, useState, useEffect, useRef, useCallback });