{Array.from({ length: count }).map((_, idx) => (

))}

); } // -------------------------------------------------------------------------- // TOAST NOTIFICATION COMPONENT // -------------------------------------------------------------------------- function Toast({ message, onClose }) { useEffect(() => { const timer = setTimeout(onClose, 3000); return () => clearTimeout(timer); }, [message, onClose]); if (!message) return null; return (

{message}

); } // -------------------------------------------------------------------------- // HEADER COMPONENT // -------------------------------------------------------------------------- function Header({ onOpenLogin, user }) { return (

연운 허브

{user ? (

{user.nickname || '검객'}님

) : ( )}

); } // -------------------------------------------------------------------------- // HERO SEARCH COMPONENT // -------------------------------------------------------------------------- function HeroSearch({ onSearch, recentSearches, onRemoveRecent }) { const [inputVal, setInputVal] = useState(''); const handleSubmit = (e) => { e.preventDefault(); if (inputVal.trim()) { onSearch(inputVal.trim()); } }; return (

최근 검색: {recentSearches.length === 0 ? ( 검색 기록이 없습니다. ) : ( recentSearches.map((item, idx) => ( { setInputVal(item); onSearch(item); }}> {item} )) )}

인기 검색어: { setInputVal('쌍검 빌드'); onSearch('쌍검 빌드'); }}>🔥 쌍검 빌드 { setInputVal('문파 족보'); onSearch('문파 족보'); }}>🔥 문파 족보 { setInputVal('쿠폰'); onSearch('쿠폰'); }}>7월 쿠폰 { setInputVal('보스 패턴'); onSearch('보스 패턴'); }}>보스 패턴

); } // -------------------------------------------------------------------------- // HERO CAROUSEL COMPONENT // -------------------------------------------------------------------------- function HeroCarousel() { const [activeIndex, setActiveIndex] = useState(0); const isHovered = useRef(false); useEffect(() => { const timer = setInterval(() => { if (!isHovered.current) { setActiveIndex((prev) => (prev + 1) % BANNERS.length); } }, 3000); return () => clearInterval(timer); }, []); return (

isHovered.current = true} onMouseLeave={() => isHovered.current = false} > {BANNERS.map((banner, index) => (

{banner.badge}

{banner.title}

{banner.desc}

))}

{BANNERS.map((_, index) => (

); } // -------------------------------------------------------------------------- // HOT META DECK COMPONENT (LOLCHESS STYLE) // -------------------------------------------------------------------------- function HotMetaDeck({ decks, onSelectDeck }) { return (

Today's Hot Meta

{decks.map((deck) => (

onSelectDeck(deck)}>

TIER {deck.tier} {deck.updatedAt}

{deck.title}

{deck.champions.map((img, i) => ( 챔피언

))}

승률: {deck.winRate}% 조회: {deck.views.toLocaleString()} 추천: {deck.likes}

))}

); } // -------------------------------------------------------------------------- // COUPON QUICK COPY COMPONENT // -------------------------------------------------------------------------- function CouponCardItem({ coupon, onCopy }) { return (

{coupon.reward || coupon.title || '쿠폰 내용 없음'}

onCopy(coupon)} title="클릭하여 코드 복사" > {coupon.isCopied ? ( <> 복사 완료! ) : ( <> {coupon.code} )}

); } function CouponQuickCopy({ coupons, onCopy }) { const [expanded, setExpanded] = useState(false); const initialCoupons = coupons.slice(0, 4); const extraCoupons = coupons.slice(4); return (

퀵 쿠폰

{coupons.length > 4 && ( )}

{initialCoupons.map((coupon) => ( ))}

{extraCoupons.length > 0 && (

{extraCoupons.map((coupon) => ( ))}

)}

); } // -------------------------------------------------------------------------- // CATEGORY TABS & VIEW SWITCHER COMPONENT // -------------------------------------------------------------------------- function CategoryTabs({ currentTab, onTabChange, viewMode, onViewModeChange }) { return (

{CATEGORIES.map((cat) => ( ))}

); } // -------------------------------------------------------------------------- // POST LIST & POST CARD COMPONENTS // -------------------------------------------------------------------------- function PostCard({ post, viewMode, onClick }) { if (viewMode === 'card') { const imageSrc = post.image || post.thumbnail || (post.content && (() => { const match = post.content.match(/]+src=["']([^"']+)["']/i) || post.content.match(/!\[.*?\]$(https?:\/\/[^\s$]+)\)/); return match ? match[1] : null; })()); const textSnippet = post.content ? post.content.replace(/<[^>]*>?/gm, '').replace(/!\[.*?\]$.*?$/g, '').replace(/\[(.*?)\]$.*?$/g, '$1').trim() : ''; return (

{imageSrc ? (

) : (

{post.category || '자유'}

)}

{imageSrc && {post.category || '자유'}}

{post.title}

{!imageSrc && textSnippet && (

{textSnippet}

)}

{post.author || '익명'} 조회 {post.views || 0} · 추천 {post.likes || 0}

); } return (

{post.category || '자유'} {post.title}

{post.author || '익명'} {post.created_at ? new Date(post.created_at).toLocaleDateString() : '방금 전'} 조회 {post.views || 0}

); } // -------------------------------------------------------------------------- // JOBO (QUIZ TABLE) COMPONENT // -------------------------------------------------------------------------- function JoboView() { const [joboData, setJoboData] = useState([]); const [query, setQuery] = useState(''); const [loading, setLoading] = useState(true); useEffect(() => { let isMounted = true; if (window.fetchJoboData) { window.fetchJoboData().then((data) => { if (isMounted) { setJoboData(data || []); setLoading(false); } }).catch(() => { if (isMounted) setLoading(false); }); } else { setLoading(false); } return () => { isMounted = false; }; }, []); const filteredData = useMemo(() => { if (!query.trim()) return joboData; const q = query.toLowerCase().trim(); return joboData.filter((item) => (item.hint && item.hint.toLowerCase().includes(q)) || (item.answer && item.answer.toLowerCase().includes(q)) || (item.user && item.user.toLowerCase().includes(q)) ); }, [joboData, query]); if (loading) { return ; } return (

setQuery(e.target.value)} autoComplete="off" /> {query && ( )} {filteredData.length.toLocaleString()}개 족보

자주 찾는 퀴즈: {['홍학', '펭귄', '메기', '너구리', '사막'].map((tag) => ( ))}

이 족보 콘텐츠의 퀴즈 문제 및 정답 데이터는 wwm.tips 사이트에서 제공받아 연동하고 있습니다.

{filteredData.length === 0 ? (

검색 결과가 없습니다.

) : (

{filteredData.map((item, index) => ( ))}

힌트	정답	제공
{item.hint \|\| '-'}	{item.answer \|\| '-'}	{item.user \|\| '-'}

)}

); } function PostList({ posts, viewMode, loading, currentTab, onPostClick }) { if (currentTab === 'jobo') { return ; } if (loading) { return ; } if (!posts || posts.length === 0) { return (

등록된 게시글이 없습니다.

); } return (

{posts.map((post) => ( onPostClick(post)} /> ))}

); } // -------------------------------------------------------------------------- // SIDEBAR COMPONENTS // -------------------------------------------------------------------------- function UserCard({ user, onOpenLogin }) { return (

내 정보

{user ? (

{user.nickname || '검객'} ⚡ {user.points || 1250} P

) : (

로그인하여 포인트를 획득하세요.

)}

); } function RankingWidget() { return (

실시간 랭킹

서비스 개선 중입니다.

); } function MapShortcutWidget() { return (

INTERACTIVE

연운 인터랙티브 지도

); } function Sidebar({ user, onOpenLogin }) { return ( ); } // -------------------------------------------------------------------------- // MOBILE BOTTOM NAV COMPONENT // -------------------------------------------------------------------------- function MobileBottomNav({ currentTab, onTabChange, onOpenWriteModal }) { return ( ); } // -------------------------------------------------------------------------- // MOBILE EXCLUSIVE DASHBOARD COMPONENT // -------------------------------------------------------------------------- function MobileDashboard({ currentTab, setCurrentTab, viewMode, handleViewModeChange, posts, loading, coupons, handleCopyCoupon, handlePostClick, handleOpenWriteModal, user, onOpenLogin }) { return (

{/* Mobile Header */}

연운 허브 M

{user ? ( {user.nickname || '검객'}님 ) : ( )}

{/* Category Tabs (상단 헤더 탭) */} {/* Hero Banner Carousel */} {/* Post List */}

{/* Mobile Bottom Fixed Nav */}

); } // -------------------------------------------------------------------------- // MAIN APP COMPONENT // -------------------------------------------------------------------------- function App() { const [isMobile, setIsMobile] = useState(() => window.innerWidth <= 768); const [currentTab, setCurrentTab] = useState('all'); useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth <= 768); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); const [viewMode, setViewMode] = useState(() => localStorage.getItem('wwm_view_mode') || 'compact'); const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(true); const [toastMessage, setToastMessage] = useState(''); const [recentSearches, setRecentSearches] = useState(['쌍검', '문파 족보', '보스']); const [coupons, setCoupons] = useState(INITIAL_COUPONS); const [metaDecks] = useState(INITIAL_META_DECKS); const [user, setUser] = useState(null); // View mode persistence const handleViewModeChange = (mode) => { setViewMode(mode); localStorage.setItem('wwm_view_mode', mode); }; // Fetch Actual Coupons from 'coupon' category useEffect(() => { let isMounted = true; if (window.fetchPosts) { window.fetchPosts('coupon').then((res) => { if (isMounted && res.posts && res.posts.length > 0) { const loadedCoupons = res.posts.map((post, idx) => { let cleanContent = post.content ? post.content.replace(/<[^>]*>?/gm, '').trim() : ''; const match = cleanContent ? cleanContent.match(/[A-Z0-9_]{5,25}/) : null; const codeVal = post.code || (post.title && /^[A-Z0-9_]{4,25}$/i.test(post.title.trim()) ? post.title.trim() : (match ? match[0] : 'WWM2026SPECIAL')); // 본문 시작 부분에 쿠폰 코드가 중복되면 잘라내기 if (codeVal && cleanContent.startsWith(codeVal)) { cleanContent = cleanContent.slice(codeVal.length).trim(); } // 줄바꿈을 한 줄 공백으로 펴주고 깔끔하게 보상명 추출 let rewardVal = cleanContent.replace(/[\r\n]+/g, ' ').trim(); if (!rewardVal) { rewardVal = (post.title && post.title !== codeVal) ? post.title : '게임 내 특별 보상 아이템'; } return { id: `c_${post.id || idx}`, reward: rewardVal, code: codeVal, isCopied: false }; }); setCoupons(loadedCoupons); } }).catch((e) => console.warn('[Coupons] fetch failed', e)); } return () => { isMounted = false; }; }, []); // Fetch Posts based on Category Tab useEffect(() => { let isMounted = true; setLoading(true); if (window.fetchPosts) { window.fetchPosts(currentTab).then((res) => { if (isMounted) { setPosts(res.posts || []); setLoading(false); } }).catch(() => { if (isMounted) setLoading(false); }); } else { setTimeout(() => { if (isMounted) setLoading(false); }, 500); } return () => { isMounted = false; }; }, [currentTab]); // Handle Search const handleSearch = (keyword) => { if (!recentSearches.includes(keyword)) { setRecentSearches([keyword, ...recentSearches.slice(0, 4)]); } setToastMessage(`'${keyword}' 검색 결과를 불러옵니다.`); }; // Handle Coupon Copy const handleCopyCoupon = (coupon) => { navigator.clipboard.writeText(coupon.code); setCoupons(coupons.map(c => c.id === coupon.id ? { ...c, isCopied: true } : c)); setToastMessage(`쿠폰 코드 [${coupon.code}] 복사 완료!`); }; // Trigger Write Modal const handleOpenWriteModal = () => { window.dispatchEvent(new CustomEvent('open-editor', { detail: { category: currentTab } })); }; // Trigger Post Detail Modal const handlePostClick = (post) => { window.dispatchEvent(new CustomEvent('open-post-detail', { detail: { post } })); }; if (isMobile) { return ( <> window.dispatchEvent(new CustomEvent('open-login'))} /> setToastMessage('')} /> ); } return (

window.dispatchEvent(new CustomEvent('open-login'))} user={user} />

window.dispatchEvent(new CustomEvent('open-login'))} />

setToastMessage('')} />

); } // -------------------------------------------------------------------------- // MOUNT REACT APP // -------------------------------------------------------------------------- const initReactHub = () => { const rootEl = document.getElementById('react-root'); if (rootEl && !rootEl._reactRoot) { const root = ReactDOM.createRoot(rootEl); rootEl._reactRoot = root; root.render(); } }; if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initReactHub); } else { initReactHub(); }