// star-kit.jsx — shared building blocks for the STAR 무대의상 home 시안 set. // Exports to window so the other babel scripts can use them. const W = 384, H = 832; // phone artboard size // ---- helpers ---- const won = (n) => n.toLocaleString('ko-KR') + '원'; // 5-point star path inside a 100x100 box const STAR_D = 'M50 4 L61.8 35.5 L95.1 37.5 L69 58.5 L77.9 90.5 L50 71 L22.1 90.5 L31 58.5 L4.9 37.5 L38.2 35.5 Z'; function Star({ size = 22, fill = '#FFC700', stroke, glow }) { return ( ); } // Wordmark: ★ STAR function StarLogo({ color = '#1A1A18', size = 26, sub }) { return (
STAR {sub && {sub}}
); } // iOS/Android-ish status bar function StatusBar({ dark, tint }) { const c = dark ? '#fff' : (tint || '#1A1714'); return (
9:41
); } // Placeholder "stage photo" block — uses a real image when given, else a tasteful gradient function Ph({ h = 160, grad, img, imgPos = 'center 28%', label, round = 0, children, dark, style }) { return (
{img ? :
} {label && {label}} {children}
); } // shared product catalog const PRODUCTS = [ { id: 1, name: '큐빅 반짝이 트로트 드레스', cat: '트로트', price: 189000, sale: 149000, rating: 4.9, reviews: 312, grad: 'linear-gradient(150deg,#ff5a98,#ffd166)', tag: '베스트' }, { id: 2, name: '난타 공연 단체 티셔츠 (5인)', cat: '난타', price: 33000, rating: 4.8, reviews: 540, grad: 'linear-gradient(150deg,#ff8a3d,#ffd24a)', tag: '단체인기' }, { id: 3, name: '장구난타 개량한복 세트', cat: '장구난타', price: 128000, sale: 98000, rating: 4.9, reviews: 176, grad: 'linear-gradient(150deg,#c0392b,#f0a04b)', tag: '맞춤제작' }, { id: 4, name: '합창단 새틴 가운 드레스', cat: '합창', price: 96000, rating: 5.0, reviews: 88, grad: 'linear-gradient(150deg,#5b58c9,#9fd3ff)', tag: 'NEW' }, { id: 5, name: '실버 시퀸 무대 자켓', cat: '트로트', price: 142000, rating: 4.7, reviews: 203, grad: 'linear-gradient(150deg,#8e9eab,#eef2f3)', tag: null }, { id: 6, name: '사물놀이 오방색 단체복', cat: '전통', price: 78000, rating: 4.9, reviews: 134, grad: 'linear-gradient(150deg,#2d6cdf,#23b07a)', tag: '단체인기' }, ]; const CATS = [ { name: '저고리', emoji: '👘', grad: 'linear-gradient(145deg,#ff9a9e,#f06595)' }, { name: '치마', emoji: '👗', grad: 'linear-gradient(145deg,#b78cff,#7a3fa0)' }, { name: '원피스', emoji: '💃', grad: 'linear-gradient(145deg,#ffc3a0,#ff5e62)' }, { name: '쾌자', emoji: '🥋', grad: 'linear-gradient(145deg,#8ec5ff,#5b58c9)' }, { name: '자켓', emoji: '🧥', grad: 'linear-gradient(145deg,#ffd24a,#f0a000)' }, { name: '조끼', emoji: '🦺', grad: 'linear-gradient(145deg,#a0e8af,#2b9348)' }, { name: '블라우스', emoji: '👚', grad: 'linear-gradient(145deg,#9bd1ff,#2d6cdf)' }, { name: '셔츠', emoji: '👔', grad: 'linear-gradient(145deg,#d9a7ff,#8e44ad)' }, { name: '바지', emoji: '👖', grad: 'linear-gradient(145deg,#39c,#2b7)' }, { name: '민복', emoji: '🪭', grad: 'linear-gradient(145deg,#ffd6a5,#ff924c)' }, ]; // star rating row function Stars({ r = 5, size = 11, color = '#9A7B4F' }) { return (
{[0,1,2,3,4].map(i => )}
); } // Generic bottom tab bar; theme = {bg, active, inactive, border} function BottomNav({ active = 0, theme = {} }) { const t = { bg: '#fff', active: '#F0A000', inactive: '#A9A29A', border: '#EFEAE0', ...theme }; const items = [ { label: '홈', icon: 'M3 11.5 12 4l9 7.5M5 10v9h5v-5h4v5h5v-9' }, { label: '카테고리', icon: 'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z' }, { label: '단체주문', icon: 'STAR' }, { label: '마이', icon: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM4 21c0-4 4-6 8-6s8 2 8 6' }, { label: '장바구니', icon: 'M5 7h14l-1.2 11.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8L5 7ZM8.5 7a3.5 3.5 0 0 1 7 0' }, ]; return (
{items.map((it, i) => { const on = i === active; const col = on ? t.active : t.inactive; return (
{it.icon === 'STAR' ?
: } {it.label}
); })}
); } // rounded search bar function SearchBar({ placeholder = 'STAR에서 무대의상 검색', bg = '#FBFAF6', color = '#1A1A18', radius = 2, border = '1px solid rgba(26,26,24,.14)' }) { return (
{placeholder}
); } // KakaoPay chip / button function KakaoBtn({ small, label = '카카오페이 간편결제', full }) { return (
{label}
); } Object.assign(window, { W, H, won, Star, StarLogo, StatusBar, Ph, PRODUCTS, CATS, Stars, BottomNav, SearchBar, KakaoBtn });