From a2e4f49b811ae869612b0e3c158c8f11d507dfff Mon Sep 17 00:00:00 2001
From: DESKTOP-TKLFCPRython <ythong86@gmail.com>
Date: Sun, 31 May 2026 16:55:19 +0900
Subject: [PATCH] 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>
---
 frontend/src/hooks/useMemberAuth.jsx | 40 +++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/frontend/src/hooks/useMemberAuth.jsx b/frontend/src/hooks/useMemberAuth.jsx
index 4b0222b..4f970ca 100644
--- a/frontend/src/hooks/useMemberAuth.jsx
+++ b/frontend/src/hooks/useMemberAuth.jsx
@@ -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>