배지 도감
{ownedCount} / {total}
{ownedCount === 0 && (
아직 받은 배지가 없어요. 첫 게시물을 올리면 첫 한 컵을 바로 받아요.
)}
{tabs.map(t => (
setFilter(t)} style={{ flexShrink: 0, font: '600 13px/1 var(--font-family)', padding: '9px 13px', borderRadius: 999, cursor: 'pointer', background: filter === t ? 'var(--bg-ink)' : 'var(--surface-1)', color: filter === t ? '#fff' : 'var(--text-secondary)', border: filter === t ? '1px solid transparent' : '1px solid var(--border)' }}>{t}
))}
미획득 배지는 조건과 진행도를 함께 보여줘요
setOwnedOnly(v => !v)} style={{ flexShrink: 0, display: 'flex', alignItems: 'center', gap: 5, cursor: 'pointer', font: '600 12px/1 var(--font-family)', color: ownedOnly ? 'var(--text-accent)' : 'var(--text-secondary)' }}>
보유만
{ownedOnly && !list.length && (
보유한 배지가 없어요
체크를 풀면 받을 수 있는 배지 40개와
조건을 볼 수 있어요
setOwnedOnly(false)} style={{ marginTop: 6, font: '600 13px/1 var(--font-family)', color: 'var(--text-accent)', cursor: 'pointer' }}>전체 보기
)}
{groups.map(g => {
const items = list.filter(b => b.s === g);
if (!items.length) return null;
const S = BADGE_SERIES[g];
const gOwned = CAT.filter(b => b.s === g && b.got).length, gAll = CAT.filter(b => b.s === g).length;
return (
{g}
{S.desc}
{gOwned}/{gAll}
{items.map(b => onOpen(b)} />)}
);
})}
);
}
window.BadgeCollection = BadgeCollection;
function BadgeDetailSheet({ badge, onClose }) {
const b = badge, S = BADGE_SERIES[b.s], owned = !!b.got, secret = !owned && b.r === '숨김';
const rc = rarityChip(b.r), cur = b.cur || 0, max = b.max || 1;
return (
e.stopPropagation()} style={{ width: '100%', background: 'var(--surface-1)', borderRadius: '20px 20px 0 0', padding: '10px 20px 26px' }}>
아직 보유한 배지가 없어요
배지를 하나라도 받으면 프로필 사진 옆에
대표로 걸어둘 수 있어요
(onSeeAll || onClose)()} style={{ textAlign: 'center', background: 'var(--bg-ink)', color: '#fff', borderRadius: 999, padding: '15px 0', font: '600 15px/1 var(--font-family)', cursor: 'pointer' }}>받을 수 있는 배지 보기
닫기
);
return (
e.stopPropagation()} style={{ width: '100%', background: 'var(--surface-1)', borderRadius: '20px 20px 0 0', padding: '10px 0 26px', maxHeight: '82%', display: 'flex', flexDirection: 'column' }}>
대표 배지
프로필 사진 옆과 게시물에 하나만 보여요 · 보유 {owned.length}개
setSel(null)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 14px', borderRadius: 'var(--radius-tile)', background: 'var(--surface-2)', cursor: 'pointer', marginBottom: 12, border: selName === null ? '2px solid var(--text-accent)' : '2px solid transparent' }}>
표시하지 않기
{selName === null &&
}
{owned.map(b => {
const S = BADGE_SERIES[b.s], on = selName === b.n;
return (
setSel(b)} style={{ background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '15px 8px 13px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7, cursor: 'pointer', border: on ? '2px solid var(--text-accent)' : '2px solid transparent', position: 'relative' }}>
{b.n}
{on &&
}
);
})}
취소
onSelect(sel)} style={{ flex: 2, textAlign: 'center', background: 'var(--bg-ink)', color: '#fff', borderRadius: 999, padding: '15px 0', font: '600 15px/1 var(--font-family)', cursor: 'pointer' }}>저장
);
}
window.FeaturedBadgeSheet = FeaturedBadgeSheet;