// Shared UI primitives for workup
const { useState, useEffect, useRef, useMemo } = React;
// ── 에러 바운더리 — 화면 오류 시 팝업 + 뒤로가기 ──
class WuErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false, error: null, errorInfo: null };
}
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
componentDidCatch(error, errorInfo) {
this.setState({ errorInfo });
console.error('WuErrorBoundary caught:', error, errorInfo);
}
render() {
if (this.state.hasError) {
const err = this.state.error;
const info = this.state.errorInfo;
const goBack = this.props.onBack;
return React.createElement('div', {
style: { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: 'var(--wu-bg)', padding: 24 }
},
React.createElement('div', {
style: { width: '100%', maxWidth: 400, background: 'var(--wu-paper)', border: '1px solid var(--wu-line)', boxShadow: '0 8px 32px rgba(0,0,0,0.12)', overflow: 'hidden', borderRadius: 8 }
},
// 헤더
React.createElement('div', {
style: { padding: '16px 20px', background: 'var(--wu-ink)', color: '#fff', display: 'flex', alignItems: 'center', gap: 10 }
},
React.createElement('span', { style: { fontSize: 20 } }, '⚠️'),
React.createElement('div', null,
React.createElement('div', {
style: { fontSize: 16, fontWeight: 700, fontFamily: 'Pretendard' }
}, '화면 표시 오류'),
React.createElement('div', {
style: { fontSize: 11, color: 'var(--wu-mute)', marginTop: 2, fontFamily: 'JetBrains Mono' }
}, 'RENDER ERROR')
)
),
// 에러 메시지
React.createElement('div', {
style: { padding: '16px 20px' }
},
React.createElement('div', {
style: { fontSize: 12, color: '#C44', fontWeight: 700, fontFamily: 'Pretendard', marginBottom: 8 }
}, '오류 내용:'),
React.createElement('div', {
style: { padding: 12, background: '#FFF5F5', border: '1px solid #FCC', borderRadius: 6, fontSize: 12, fontFamily: 'JetBrains Mono', color: '#333', lineHeight: 1.5, maxHeight: 120, overflow: 'auto', wordBreak: 'break-all' }
}, err ? err.toString() : 'Unknown error'),
info && info.componentStack && React.createElement('details', {
style: { marginTop: 8 }
},
React.createElement('summary', {
style: { fontSize: 11, color: 'var(--wu-mute)', cursor: 'pointer', fontFamily: 'Pretendard' }
}, '상세 스택 보기'),
React.createElement('pre', {
style: { fontSize: 10, color: '#666', marginTop: 4, maxHeight: 150, overflow: 'auto', whiteSpace: 'pre-wrap', wordBreak: 'break-all', background: 'var(--wu-bg)', padding: 8, borderRadius: 4 }
}, info.componentStack)
)
),
// 버튼
React.createElement('div', {
style: { padding: '12px 20px 16px', display: 'flex', gap: 8 }
},
goBack && React.createElement('button', {
onClick: goBack,
style: { flex: 1, padding: '12px', fontSize: 14, fontWeight: 700, fontFamily: 'Pretendard', background: 'var(--wu-ink)', color: '#fff', border: 'none', cursor: 'pointer', borderRadius: 6 }
}, '← 뒤로가기'),
React.createElement('button', {
onClick: function() { location.reload(); },
style: { flex: 1, padding: '12px', fontSize: 14, fontWeight: 700, fontFamily: 'Pretendard', background: 'var(--wu-orange)', color: '#fff', border: 'none', cursor: 'pointer', borderRadius: 6 }
}, '↻ 새로고침')
)
)
);
}
return this.props.children;
}
}
window.WuErrorBoundary = WuErrorBoundary;
// Logo — workup wordmark
function WuLogo({ size = 22, color = 'var(--wu-ink)', accent = 'var(--wu-orange)' }) {
return (
워크
업
);
}
// Striped product placeholder
function WuPhoto({ label = 'PRODUCT', dark = false, ratio = '1/1', children, style, tint }) {
return (
{children || {label}}
);
}
// Chip / pill
function WuChip({ active, children, onClick, dark = false }) {
return (
);
}
// Price formatter
function wuPrice(n) { return '₩' + n.toLocaleString('ko-KR'); }
// Product card — variant A: editorial, big type
function WuProductCard({ p, variant = 'A', onFav, faved, dark = false, onClick }) {
if (variant === 'A') {
return (
{p.tag &&
{p.tag}}
{p.colors?.map((c, i) =>
)}
);
}
// variant B: mono / catalog strip
if (variant === 'B') {
return (
{p.code}
{p.tag &&
● {p.tag}}
{p.kr}
{p.colors?.map((c, i) =>
)}
{wuPrice(p.retail)}
);
}
// variant C: poster — full bleed with overlay
return (
{p.tag && {p.tag}}
{p.code}
{p.en}
{p.kr}
{p.colors?.map((c, i) =>
)}
{wuPrice(p.retail)}
);
}
// Bottom tab bar — 무신사 스타일 하단 고정
function WuTabBar({ active = 'home', onChange, variant = 'pill', dark = false }) {
const tabs = [
{ id: 'shop', kr: '검색',
svg: (c, w) => },
{ id: 'map', kr: '매장',
svg: (c, w) => },
{ id: 'board', kr: '게시판',
svg: (c, w) => },
{ id: 'home', kr: '홈',
svg: (c, w) => },
{ id: 'wishlist', kr: '좋아요',
svg: (c, w) => },
{ id: 'me', kr: '마이',
svg: (c, w) => },
];
return (
{tabs.map(t => {
const isActive = active === t.id;
const color = isActive ? '#1A1A1A' : '#999';
const weight = isActive ? 2 : 1.5;
return (
);
})}
);
}
Object.assign(window, { WuLogo, WuPhoto, WuChip, WuProductCard, WuTabBar, wuPrice });