fix(homepage): white screen fix + login message + vibe coding manual

- useMemberAuth: return null to loading spinner
- MemberOnly: add login/register message
- manual/40: vibe coding guide (closed/open network)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-TKLFCPRython 2026-05-31 16:55:19 +09:00
parent c67a9d2037
commit a2e4f49b81

View File

@ -58,21 +58,41 @@ export function MemberOnly({ children, feature = '이 기능' }) {
const { isLoggedIn, loaded } = useMemberAuth();
const navigate = useNavigate();
if (!loaded) return null;
if (!loaded) {
return (
<div style={{ minHeight: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#94a3b8' }}>
<span>로딩 ...</span>
</div>
);
}
if (!isLoggedIn) {
return (
<div className="member-guard" style={{ position:'relative', minHeight:120 }}>
{children}
<div className="member-guard-overlay">
<div className="member-guard-icon">🔒</div>
<div className="member-guard-text">{feature} 회원 전용입니다</div>
<div className="member-guard-sub">로그인 이용하실 있습니다</div>
<div style={{
minHeight: 260, display: 'flex', flexDirection: 'column',
alignItems: 'center', justifyContent: 'center', padding: '40px 24px',
background: '#f8fafc', borderRadius: 12, border: '1px solid #e2e8f0',
margin: '20px 0', textAlign: 'center', gap: 12,
}}>
<div style={{ fontSize: 40 }}>🔒</div>
<div style={{ fontSize: 16, fontWeight: 700, color: '#1e293b' }}>
로그인 또는 회원가입을 하셔야 사용할 있는 기능입니다.
</div>
<div style={{ fontSize: 14, color: '#64748b' }}>
{feature} 서비스는 회원 전용입니다.
</div>
<div style={{ display: 'flex', gap: 10, marginTop: 8 }}>
<button
onClick={() => navigate('/login')}
style={{ marginTop:8, padding:'8px 24px', background:'#1a5fd8', color:'#fff',
border:'none', borderRadius:8, cursor:'pointer', fontWeight:600, fontSize:14 }}>
로그인 / 회원가입
style={{ padding: '10px 28px', background: '#1a5fd8', color: '#fff',
border: 'none', borderRadius: 8, cursor: 'pointer', fontWeight: 700, fontSize: 14 }}>
로그인
</button>
<button
onClick={() => navigate('/login?tab=register')}
style={{ padding: '10px 28px', background: '#fff', color: '#1a5fd8',
border: '2px solid #1a5fd8', borderRadius: 8, cursor: 'pointer', fontWeight: 700, fontSize: 14 }}>
회원가입
</button>
</div>
</div>