{emoji}

Lv.{level} {name}

다음 레벨까지 {maxExp - currentExp} EXP

{currentExp} EXP

); } // ────────────────────────────────────────────────────────── // TestBadge — 연결된 검사 표시 // ────────────────────────────────────────────────────────── const TEST_META_HUB = { PHQ9: { label:'PHQ-9', emoji:'🌱', desc:'우울 선별' }, GAD7: { label:'GAD-7', emoji:'💙', desc:'불안 선별' }, DASS21: { label:'DASS-21', emoji:'🌊', desc:'스트레스' }, BIG5: { label:'Big5', emoji:'🧠', desc:'성격 분석' }, SCT: { label:'SCT', emoji:'✍️', desc:'문장 완성' }, DSI: { label:'DSI', emoji:'🪞', desc:'자아 분화' }, BURNOUT: { label:'K-MBI+', emoji:'🔥', desc:'번아웃' }, LOST: { label:'LOST', emoji:'🧭', desc:'행동 양식' }, }; function TestBadgeRow({ completedTests = [] }) { const allTests = Object.keys(TEST_META_HUB); return (

연결된 심리검사

{allTests.map(t => { const meta = TEST_META_HUB[t]; const done = completedTests.includes(t); return (

{meta.emoji} {meta.label} {done && ✓}

); })}

{completedTests.length === 0 && (

심리검사를 완료하면 게임이 더 풍성해져요.{' '} 마음풀에서 검사하기 →

)}

); } // ────────────────────────────────────────────────────────── // GameCard — 개별 게임 카드 // ────────────────────────────────────────────────────────── function GameCard({ game, onPlay }) { const [hovered, setHovered] = useState(false); const locked = !game.canPlay; const comingSoon = !game.isAvailable; const cardBg = locked ? 'rgba(255,255,255,0.5)' : hovered ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.8)'; return (

!locked && onPlay(game.id)} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background: cardBg, borderRadius: 20, padding: '24px 20px 20px', cursor: locked ? 'not-allowed' : 'pointer', transition: 'all 0.25s ease', transform: !locked && hovered ? 'translateY(-4px)' : 'none', boxShadow: !locked && hovered ? `0 12px 32px ${C.sage}22` : '0 2px 12px rgba(0,0,0,0.06)', border: `1px solid ${!locked && hovered ? C.sage+'44' : 'rgba(255,255,255,0.6)'}`, backdropFilter: 'blur(8px)', position: 'relative', overflow: 'hidden', opacity: comingSoon ? 0.7 : 1, }} > {/* 준비 중 배지 */} {comingSoon && (

준비 중

)} {/* 레벨 잠금 표시 */} {!comingSoon && !game.isUnlocked && (

Lv.{game.unlockLevel} 해금

)} {/* 이모지 */}

{game.emoji}

{/* 이름 */}

{game.name}

{game.tagline}

{/* 태그 */}

{game.tags.slice(0,3).map(tag => ( {tag} ))}

{/* 크레딧 비용 */}

0 ? '#D4954A' : '#4A7C59' }}> {game.creditCost > 0 ? `🌿 ${game.creditCost} 크레딧` : '무료'}

{/* 필요 검사 */} {game.requiredTests.length > 0 && (

{game.requiredTests.map(t => TEST_META_HUB[t]?.label || t).join(' · ')} 연동

)} {/* 모듈 미리보기 */} {game.modules?.length > 0 && !comingSoon && (

{game.modules.map(m => (

{m.emoji} {m.name}

))}

)} {/* 버튼 */}

); } // ────────────────────────────────────────────────────────── // RecentActivity — 최근 플레이 기록 // ────────────────────────────────────────────────────────── function RecentActivity({ sessions = [] }) { if (sessions.length === 0) return null; const MODULE_LABEL = { breathing: { emoji:'💧', name:'호흡 훈련' }, cbt: { emoji:'🌱', name:'생각 교정' }, efmt: { emoji:'🌸', name:'감정 훈련' }, relax: { emoji:'🏞️', name:'이완 훈련' }, }; return (

📜 최근 플레이 기록

{sessions.map((s, i) => { const m = MODULE_LABEL[s.module_type] || { emoji:'🎮', name:s.module_type }; return (

{m.emoji}

{m.name}

{GameEngine.formatRelativeTime(s.created_at)}

+{s.exp_gained} EXP

점수 {s.score}

); })}

); } // ────────────────────────────────────────────────────────── // LoginGate — 미로그인 상태 안내 // ────────────────────────────────────────────────────────── function LoginGate() { return (

🌿

마음의 정원

마음풀에서 로그인하면
별도 로그인 없이 바로 이용할 수 있어요.
심리검사 결과와 연결하여
나만의 정원을 가꾸세요 🌿

마음풀 로그인하고 시작하기 →

); } // ────────────────────────────────────────────────────────── // AchievementToast — 업적 달성 알림 // ────────────────────────────────────────────────────────── function AchievementToast({ achievements = [], onDismiss }) { const [visible, setVisible] = useState(true); useEffect(() => { const timer = setTimeout(() => { setVisible(false); onDismiss?.(); }, 4000); return () => clearTimeout(timer); }, []); if (!visible || achievements.length === 0) return null; return (

{achievements.map(id => { const a = GameEngine.getAchievementInfo(id); return (

{a.emoji}

업적 달성!

{a.name}

); })}

); } // ────────────────────────────────────────────────────────── // GameHubApp — 메인 앱 // ────────────────────────────────────────────────────────── function GameHubApp() { const [loading, setLoading] = useState(true); const [data, setData] = useState(null); const [error, setError] = useState(''); const [newAchievements, setNewAchievements] = useState([]); const [activeGame, setActiveGame] = useState(null); const [creditModal, setCreditModal] = useState(null); // { gameId, cost, balance } const [spendLoading, setSpendLoading] = useState(false); // 게임 진행 시 사용 const isLoggedIn = !!localStorage.getItem('game_token'); useEffect(() => { if (!isLoggedIn) { setLoading(false); return; } GameEngine.getMe() .then(res => { if (res.success) setData(res.data); else setError(res.error || '데이터 조회 실패'); }) .catch(() => setError('서버 연결 실패')) .finally(() => setLoading(false)); }, []); const handlePlay = useCallback(async (gameId) => { const game = getGameById(gameId); if (!game) return; // 무료 게임은 바로 시작 if (!game.creditCost || game.creditCost <= 0) { setActiveGame(gameId); return; } // 유료 게임: 실시간 잔액 확인 후 모달 표시 try { const res = await GameEngine.getCredits(); const balance = res.success ? res.data.balance : (data?.user?.credits || 0); setCreditModal({ gameId, cost: game.creditCost, balance, gameName: game.name, gameEmoji: game.emoji }); } catch { // 네트워크 오류 시 캐시 잔액 사용 const balance = data?.user?.credits || 0; setCreditModal({ gameId, cost: game.creditCost, balance, gameName: game.name, gameEmoji: game.emoji }); } }, [data]); const handleGameExit = useCallback((result) => { setActiveGame(null); setCreditModal(null); // 허브 데이터 새로고침 (경험치 + 크레딧 잔액 반영) GameEngine.getMe().then(res => { if (res.success) setData(res.data); if (result?.newAchievements?.length) setNewAchievements(result.newAchievements); }); }, []); // 크레딧 차감 확인 후 게임 시작 const handleCreditConfirm = useCallback(async () => { if (!creditModal) return; const { gameId, cost, balance } = creditModal; if (balance < cost) return; // 잔액 부족 — 버튼이 비활성이므로 여기 안 옴 setSpendLoading(true); try { const res = await GameEngine.spendCredit(gameId, cost); if (res.success) { // 잔액 즉시 반영 setData(prev => prev ? { ...prev, user: { ...prev.user, credits: res.data.balance } } : prev); setCreditModal(null); setActiveGame(gameId); } else if (res.errorCode === 'insufficient_credits') { setCreditModal(prev => ({ ...prev, balance: res.balance, insufficient: true })); } else { alert(res.error || '크레딧 차감 실패. 다시 시도해주세요.'); } } catch { alert('네트워크 오류. 다시 시도해주세요.'); } setSpendLoading(false); }, [creditModal]); if (!isLoggedIn) return ; if (loading) return (

🌿

정원을 불러오는 중...

); // 게임 실행 중 if (activeGame === 'garden') return (

); if (activeGame === 'efmt') return (

); if (activeGame === 'gratitude') return (

); if (activeGame === 'tree') return (

); if (error) return (

🌧️

{error}

마음풀으로 돌아가기

); const { user, gameStatus, recentSessions, completedTests, achievements } = data || {}; const levelInfo = GameEngine.getLevelInfo(gameStatus?.total_exp || 0); const gardenTheme = GameEngine.getGardenTheme(gameStatus?.visual_status || 'clearing'); const games = getPlayableGames(completedTests, gameStatus?.garden_level || 1); return (

{/* ── 네비게이션 ── */}

{/* ── 정원 히어로 섹션 ── */}

{/* 정원 SVG */}

{/* 정원 상태 라벨 */}

{gardenTheme.label}

{/* 연속 출석 */} {(gameStatus?.streak_days || 0) > 1 && (

🔥 {gameStatus.streak_days}일 연속

)}

{/* 인사 + 레벨바 */}

안녕하세요, {user?.nickname || user?.email?.split('@')[0]}님 👋

{gardenTheme.desc}

{/* ── 연결된 검사 ── */}

{/* ── 게임 목록 ── */}

🎮 치유 게임

{games.map(game => ( ))}

{/* ── 업적 ── */} {achievements?.length > 0 && (

🏅 획득한 업적

{achievements.map(({ achievement_id }) => { const a = GameEngine.getAchievementInfo(achievement_id); return (

{a.emoji} {a.name}

); })}

)} {/* ── 최근 활동 ── */}

{/* 크레딧 차감 확인 모달 */} {creditModal && (

{ if(e.target===e.currentTarget) setCreditModal(null); }}>

{creditModal.gameEmoji}

{creditModal.gameName}

이 게임은 플레이 시 크레딧이 차감됩니다

{/* 잔액 vs 비용 */}

현재 크레딧 {creditModal.balance} 크레딧

차감 예정 - {creditModal.cost} 크레딧

차감 후 잔액 = creditModal.cost ? '#4A7C59' : '#C05050', }}> {Math.max(0, creditModal.balance - creditModal.cost)} 크레딧

{/* 잔액 부족 경고 */} {(creditModal.insufficient || creditModal.balance < creditModal.cost) && (

크레딧이 부족해요. 마음풀에서 크레딧을 충전한 후 다시 시도해주세요.

)}

{creditModal.balance < creditModal.cost ? ( 크레딧 충전하기 → ) : ( )}

)} {/* 업적 토스트 */} {newAchievements.length > 0 && ( setNewAchievements([])} /> )} {/* 반응형 CSS */}

); } // ── 앱 마운트 ─────────────────────────────────────────────── const rootEl = document.getElementById('root'); if (rootEl) { ReactDOM.createRoot(rootEl).render(React.createElement(GameHubApp)); }