first commit
This commit is contained in:
@@ -0,0 +1,94 @@
|
||||
/* eslint-disable */
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// searchgg · 클랜홈 메인 화면 (브랜드 컬러 고정)
|
||||
// window.ClanHome · 의존: Nav, Panel, Icon, Emblem, ClanDB, 섹션들(window)
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
function ClanHome({ clanName, onClose, onPick, onLogin, onCommunity }) {
|
||||
const clan = window.ClanDB(clanName);
|
||||
const t = '#48515f'; // 브랜드 포인트 컬러(올리브)
|
||||
|
||||
const stat = (label, value, sub) => (
|
||||
<div style={{ flex: 1, textAlign: 'center', padding: '12px 6px', display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: 60 }}>
|
||||
<div style={{ fontSize: 10.5, color: 'var(--t3)', fontWeight: 600, marginBottom: 5 }}>{label}</div>
|
||||
<div style={{ fontFamily: "'Chakra Petch',sans-serif", fontWeight: 700, fontSize: 15, color: 'var(--ink)', lineHeight: 1.1 }}>{value}</div>
|
||||
{sub && <div style={{ fontSize: 10, color: t, fontWeight: 700, fontFamily: "'Chakra Petch',sans-serif", marginTop: 3 }}>{sub}</div>}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'var(--bg2)', display: 'flex', flexDirection: 'column', animation: 'sgFade .22s ease' }}>
|
||||
<window.Nav active="클랜" onLogin={onLogin} onCommunity={onCommunity} />
|
||||
<div style={{ flex: 1, overflowY: 'auto' }}>
|
||||
{/* 히어로 배너 */}
|
||||
<div style={{ position: 'relative', background: '#1c1f24' }}>
|
||||
<image-slot id={`clan-banner-${clan.name}`} shape="rect" placeholder="클랜 대표 배너 이미지를 끌어다 놓으세요" style={{ display: 'block', width: '100%', height: 210, color: 'rgba(255,255,255,.78)' }}></image-slot>
|
||||
<div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, ${t}26 0%, rgba(20,22,26,.34) 46%, rgba(20,22,26,.9) 100%)`, pointerEvents: 'none' }} />
|
||||
<div style={{ position: 'absolute', top: 14, left: 0, right: 0, maxWidth: 1180, margin: '0 auto', padding: '0 28px', display: 'flex', justifyContent: 'flex-end', pointerEvents: 'none' }}>
|
||||
<button onClick={onClose} style={{ pointerEvents: 'auto', display: 'flex', alignItems: 'center', gap: 5, padding: '7px 13px', borderRadius: 6, border: 'none', background: 'rgba(0,0,0,.42)', color: '#fff', cursor: 'pointer', fontWeight: 600, fontSize: 12.5, fontFamily: "'Pretendard',sans-serif" }}>
|
||||
<Icon name="chevL" size={15} stroke="#fff" /> 닫기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 엠블럼 + 정체성 */}
|
||||
<div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, maxWidth: 1180, margin: '0 auto', padding: '0 28px 20px', display: 'flex', alignItems: 'flex-end', gap: 20 }}>
|
||||
<div style={{ flexShrink: 0 }}><window.Emblem cfg={clan.emblem} size={104} /></div>
|
||||
<div style={{ flex: 1, minWidth: 0, paddingBottom: 4 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
|
||||
<h1 style={{ margin: 0, fontSize: 30, fontWeight: 800, color: '#fff', letterSpacing: '-.6px', textShadow: '0 2px 12px rgba(0,0,0,.4)' }}>{clan.name}</h1>
|
||||
{clan.isMine && <span style={{ padding: '3px 10px', borderRadius: 5, background: t, color: '#fff', fontWeight: 700, fontSize: 11.5 }}>내 클랜</span>}
|
||||
</div>
|
||||
<div style={{ marginTop: 7, fontSize: 14.5, color: 'rgba(255,255,255,.9)', fontWeight: 500, fontStyle: 'italic' }}>“{clan.slogan}”</div>
|
||||
</div>
|
||||
{!clan.isMine && (
|
||||
<div style={{ flexShrink: 0, paddingBottom: 4 }}>
|
||||
<button style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 20px', borderRadius: 7, border: 'none', cursor: 'pointer', background: t, color: '#fff', fontWeight: 700, fontSize: 13.5, fontFamily: "'Pretendard',sans-serif", boxShadow: '0 3px 12px rgba(0,0,0,.25)' }}>
|
||||
가입 신청
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 스탯 스트립 */}
|
||||
<div style={{ background: '#fff', borderBottom: '1px solid var(--line2)' }}>
|
||||
<div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 28px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'stretch' }}>
|
||||
{stat('클랜 랭킹', `${clan.rank}위`)}
|
||||
<span style={{ width: 1, background: 'var(--line)' }} />
|
||||
{stat('클랜원', `${clan.totalMembers}명`)}
|
||||
<span style={{ width: 1, background: 'var(--line)' }} />
|
||||
{stat('창설일', clan.founded)}
|
||||
<span style={{ width: 1, background: 'var(--line)' }} />
|
||||
{stat('클랜 경험치', `${window.SA.fmt(clan.expTotal)} EXP`, `▲ ${window.SA.fmt(clan.expWeek)} 이번 주`)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 본문 */}
|
||||
<div style={{ maxWidth: 1180, margin: '0 auto', padding: '22px 28px 44px' }}>
|
||||
{/* 소개 */}
|
||||
<div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 6, padding: '16px 18px', marginBottom: 18, borderLeft: `4px solid ${t}` }}>
|
||||
<div style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--t3)', marginBottom: 7 }}>클랜 소개</div>
|
||||
<p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.65, color: '#3a4049' }}>{clan.intro}</p>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 322px', gap: 18, alignItems: 'start' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 18, minWidth: 0 }}>
|
||||
<window.ClanNotices clan={clan} />
|
||||
<window.ClanFeed clan={clan} />
|
||||
<window.ClanGuestbook clan={clan} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
|
||||
<window.ClanSchedule clan={clan} />
|
||||
<window.ClanActivity clan={clan} />
|
||||
<window.ClanWeeklyMatches clan={clan} />
|
||||
<window.ClanMembers clan={clan} onPick={onPick} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
window.ClanHome = ClanHome;
|
||||
Reference in New Issue
Block a user