/* ============================================================================ * Wildy — 공통 우측 사이드바 (Home / Wilds / 게임 다운로드 / 프로필) * ---------------------------------------------------------------------------- * 용어 정의 (사용자 확정): * · Wild = 게임별 네트워킹 허브 전체 (실시간채팅+DM+공지+이벤트+소통) * = World + Guild + You * · 길드 = Wild 안에서 사용자가 만드는 작은 그룹/채팅방 단위 * → 사이드바의 "내 Wild"는 사용자가 팔로우한 Wild 목록. * * 섹션: * 1. 내 Wild — followedGames prop(단일 진실)의 id로 wilds 조회 * 2. Wild 추천 — followedGames에 없는 인기 wilds * 3. 베타 가입자 혜택 (정적) * * ⚠ 데이터 소스 통일: wild_subscriptions를 직접 쿼리하지 않고 * App의 followedGames prop을 신뢰. App이 DB와 동기화 책임. * → BrowsePage에서 팔로우 토글 시 사이드바 즉시 반영. * * 사용: * ...} * onToggleFollow={(wildId) => ...} * onNavigate={(page) => ...} * /> * * 글로벌 노출: * window.WildyComponents.RightSidebar * ========================================================================= */ (function (global) { 'use strict'; if (typeof React === 'undefined') { console.error('[right-sidebar.jsx] React not loaded'); return; } const { useState, useEffect } = React; function localizeWild(w, lang) { if (!w) return ''; if (lang === 'en' && w.title_en) return w.title_en; if (lang === 'ja' && w.title_ja) return w.title_ja; if (lang === 'zh' && w.title_zh) return w.title_zh; if (lang === 'id' && w.title_id) return w.title_id; return w.short_name || w.name || w.id; } function compactCount(n) { if (!n || n < 1) return ''; if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'; if (n >= 1_000) return (n / 1_000).toFixed(1) + 'k'; return String(n); } function withTimeout(promise, ms, fallback) { return Promise.race([ promise, new Promise(resolve => setTimeout(() => resolve(fallback), ms)), ]); } function RightSidebar({ supabaseClient, user, lang = 'ko', followedGames = [], onOpenWild, onToggleFollow, onNavigate, }) { const cache = global.__WILDY_RIGHT_RAIL_CACHE || (global.__WILDY_RIGHT_RAIL_CACHE = { wilds: null, wildsAt: 0, pulse: [], pulseAt: 0, }); const [allWilds, setAllWilds] = useState(cache.wilds); // null = loading — wilds metadata cache const [pulsePosts, setPulsePosts] = useState(cache.pulse || []); const [pulseLoading, setPulseLoading] = useState(false); // wilds 메타데이터 일괄 로드 (한 번) — 내 Wild + 추천 모두 여기서 매핑 useEffect(() => { if (!supabaseClient) { setAllWilds([]); return; } if (cache.wilds && Date.now() - cache.wildsAt < 5 * 60 * 1000) { setAllWilds(cache.wilds); return; } let active = true; (async () => { try { // ⚠ wilds 스키마(002): 활동량 = active_now, 활성 플래그 = is_curated. // 과거 코드에서 존재하지 않는 is_active/active_users_count 를 참조해 // PostgREST 422 → setAllWilds([]) → "내 Wild" 박스 영구 빈 상태였음. // 필터 없이 limit(200) — 028 시드 45개 + 016 legacy ~15개 모두 커버. // followedGames 의 wild_id 가 빠짐없이 매핑돼야 박스가 그려짐. const { data, error } = await withTimeout( supabaseClient .from('wilds') .select('id,name,short_name,emoji,member_count,active_now,title_en,title_ja,title_zh,title_id') .order('member_count', { ascending: false, nullsFirst: false }) .limit(200), 3000, { data: [], error: new Error('wilds_timeout') } ); if (!active) return; if (error) throw error; const fallback = (global.WILDY_GAMES || []).map(g => ({ id: g.id, name: g.name, short_name: g.short, emoji: g.emoji, member_count: parseFloat(String(g.users || '0')) * (String(g.users || '').toLowerCase().includes('k') ? 1000 : 1), active_now: 0, })); const byId = new Map([...fallback, ...(data || [])].map(w => [w.id, w])); const nextWilds = Array.from(byId.values()); cache.wilds = nextWilds; cache.wildsAt = Date.now(); setAllWilds(nextWilds); } catch (e) { console.warn('[RightSidebar] wilds load', e.message); if (active) { const fallbackWilds = (global.WILDY_GAMES || []).map(g => ({ id: g.id, name: g.name, short_name: g.short, emoji: g.emoji, member_count: parseFloat(String(g.users || '0')) * (String(g.users || '').toLowerCase().includes('k') ? 1000 : 1), active_now: 0, })); cache.wilds = fallbackWilds; cache.wildsAt = Date.now(); setAllWilds(fallbackWilds); } } })(); return () => { active = false; }; }, [supabaseClient]); useEffect(() => { if (!supabaseClient) { setPulsePosts([]); setPulseLoading(false); return; } if (Date.now() - cache.pulseAt < 60 * 1000) { setPulsePosts(cache.pulse || []); setPulseLoading(false); return; } let active = true; setPulseLoading(true); (async () => { try { const { data, error } = await withTimeout( supabaseClient .from('posts') .select('id,text,game_tag,created_at,type') .eq('is_deleted', false) .eq('visibility', 'public') .eq('type', 'pulse') .order('created_at', { ascending: false }) .limit(3), 2000, { data: [], error: null } ); if (!active) return; if (error) throw error; cache.pulse = data || []; cache.pulseAt = Date.now(); setPulsePosts(cache.pulse); } catch (e) { console.warn('[RightSidebar] pulse load', e?.message || e); if (active) setPulsePosts([]); } finally { if (active) setPulseLoading(false); } })(); return () => { active = false; }; }, [supabaseClient]); // followedGames(단일 진실) → 내 Wild / 추천 분리 const followedSet = new Set(followedGames || []); const myWilds = allWilds === null ? null : (followedGames || []) .map(id => allWilds.find(w => w.id === id)) .filter(Boolean); const recommended = allWilds === null ? null : allWilds.filter(w => !followedSet.has(w.id)).slice(0, 4); const showRec = Array.isArray(recommended) && recommended.length > 0; return ( ); } global.WildyComponents = global.WildyComponents || {}; global.WildyComponents.RightSidebar = RightSidebar; })(typeof window !== 'undefined' ? window : globalThis);