71 lines
3.4 KiB
React
71 lines
3.4 KiB
React
/* eslint-disable */
|
|
// ─────────────────────────────────────────────────────────────
|
|
// searchgg · 전적검색(프로필) 화면 — 메인 헤더 유지 + 검색 서브헤더
|
|
// 섹션 컴포넌트는 sa-profile-sections.jsx (window 전역)
|
|
// ─────────────────────────────────────────────────────────────
|
|
|
|
function ProfileScreen({ player, onClose, onPick, onLogin, onClan, onCommunity }) {
|
|
const SA = window.SA;
|
|
const p = player;
|
|
const [tab, setTab] = React.useState('전적');
|
|
const tabs = ['전적', '통계'];
|
|
return (
|
|
<div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'var(--bg2)', display: 'flex', flexDirection: 'column', animation: 'sgFade .22s ease' }}>
|
|
<Nav active="전적검색" onLogin={onLogin} onClan={() => onClan && onClan(p.clan || '불곰부대')} onCommunity={onCommunity} />
|
|
{/* 검색 서브헤더 */}
|
|
<div style={{ flexShrink: 0, background: '#fff', borderBottom: '1px solid var(--line2)' }}>
|
|
<div style={{ maxWidth: 1180, margin: '0 auto', padding: '11px 28px', display: 'flex', alignItems: 'center', gap: 14 }}>
|
|
<div style={{ flex: 1, maxWidth: 520 }}>
|
|
<SearchBar onPick={onPick} placeholder="다른 유저의 닉네임을 검색하세요" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 본문 */}
|
|
<div style={{ flex: 1, overflowY: 'auto' }}>
|
|
<div style={{ maxWidth: 1180, width: '100%', margin: '0 auto', padding: '24px 28px 44px' }}>
|
|
<ProfileSummary p={p} />
|
|
|
|
{/* 서브탭 바 */}
|
|
<div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--line2)', marginBottom: 18 }}>
|
|
{tabs.map((t) => {
|
|
const on = tab === t;
|
|
return (
|
|
<button key={t} onClick={() => setTab(t)} style={{ position: 'relative', padding: '12px 22px', border: 'none', background: 'transparent', cursor: 'pointer',
|
|
fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 14.5, color: on ? 'var(--ink)' : 'var(--t3)' }}>
|
|
{t}
|
|
{on && <span style={{ position: 'absolute', left: 12, right: 12, bottom: -1, height: 3, background: p.rank.color, borderRadius: 2 }} />}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{tab === '전적' && (
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 18, alignItems: 'start' }}>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 18, minWidth: 0 }}>
|
|
<RankedSeasons p={p} />
|
|
<ClanRecords p={p} />
|
|
<MatchHistory p={p} />
|
|
</div>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
|
|
<RecentTrend p={p} />
|
|
<Companions p={p} onPick={onPick} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{tab === '통계' && (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
|
|
<TrendChart p={p} />
|
|
<ModeRecords p={p} />
|
|
<MapRecords p={p} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Object.assign(window, { ProfileScreen });
|