/* global React, L */
// ===========================================================
// 꾸미기 — 스킨 갤러리 미니 UI 프리뷰 (설명 문구 없음)
// ===========================================================
function SkinGalleryPreview({ skinId }) {
if (skinId === "excel") return ;
if (skinId === "notion") return ;
return ;
}
function SkinMiniKawaii() {
return (
);
}
function SkinMiniBw() {
return (
);
}
function SkinMiniSpreadsheet() {
return (
);
}
function SkinGalleryCard({ skin, active, locked, onSelect }) {
const [bouncing, setBouncing] = React.useState(false);
const bounceEndRef = React.useRef(null);
const wasActiveRef = React.useRef(active);
const triggerBounce = React.useCallback(() => {
if (bounceEndRef.current) clearTimeout(bounceEndRef.current);
setBouncing(false);
requestAnimationFrame(() => {
setBouncing(true);
bounceEndRef.current = setTimeout(() => setBouncing(false), 460);
});
}, []);
React.useEffect(() => {
if (active && !wasActiveRef.current) triggerBounce();
wasActiveRef.current = active;
}, [active, triggerBounce]);
React.useEffect(() => () => {
if (bounceEndRef.current) clearTimeout(bounceEndRef.current);
}, []);
const handleClick = () => {
onSelect();
if (!locked && active) triggerBounce();
};
return (
);
}
window.SkinGalleryPreview = SkinGalleryPreview;
window.SkinGalleryCard = SkinGalleryCard;