- src/analytics.ts: initAnalytics / trackGameEvent 유틸 추가 - _app.tsx: 앱 시작 시 Analytics.init 호출 - pages/index.tsx: app_open 이벤트 (플랫폼 시간, 보유 원소 수, 골드, 강화 레벨 합계) - FusionScreen: fusion_completed (결과 tier/name, 골드 획득, 재료 ID) - EvolutionScreen: enhancement_completed + level_up (원소 ID/이름, 새 레벨, 비용) - ShopScreen: item_purchased (아이템 ID/이름, 가격, 희귀도) - OfflineRewardModal: offline_reward_claimed (오프라인 시간, 골드, 원소 종류 수) - package.json: @apps-in-toss/analytics ^2.3.0 명시적 추가 Co-Authored-By: Paperclip <noreply@paperclip.ing>
62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import { css } from '@emotion/react';
|
|
import { useEffect } from 'react';
|
|
import { BottomTabBar } from '../src/components/BottomTabBar';
|
|
import { OfflineRewardModal } from '../src/components/OfflineRewardModal';
|
|
import { ElementsScreen } from '../src/components/screens/ElementsScreen';
|
|
import { EvolutionScreen } from '../src/components/screens/EvolutionScreen';
|
|
import { FusionScreen } from '../src/components/screens/FusionScreen';
|
|
import { ShopScreen } from '../src/components/screens/ShopScreen';
|
|
import { useIdleTick } from '../src/hooks/useIdleTick';
|
|
import { useGameStore } from '../src/store/useGameStore';
|
|
import { trackGameEvent } from '../src/analytics';
|
|
|
|
const rootStyle = css`
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #f7f8fa;
|
|
overflow: hidden;
|
|
font-family:
|
|
'Pretendard',
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
sans-serif;
|
|
`;
|
|
|
|
const contentStyle = css`
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding-bottom: 72px;
|
|
`;
|
|
|
|
export default function IndexPage() {
|
|
const { activeTab, setActiveTab, elements, gold, elementLevels } = useGameStore();
|
|
useIdleTick();
|
|
|
|
useEffect(() => {
|
|
const ownedCount = Object.values(elements).filter((c) => c > 0).length;
|
|
const totalLevel = Object.values(elementLevels).reduce((sum, lv) => sum + lv, 0);
|
|
trackGameEvent('app_open', {
|
|
platform: 'web',
|
|
platform_time: new Date().toISOString(),
|
|
owned_element_count: ownedCount,
|
|
gold,
|
|
total_enhance_level: totalLevel,
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div css={rootStyle}>
|
|
<OfflineRewardModal />
|
|
<div css={contentStyle}>
|
|
{activeTab === 'elements' && <ElementsScreen />}
|
|
{activeTab === 'evolution' && <EvolutionScreen />}
|
|
{activeTab === 'fusion' && <FusionScreen />}
|
|
{activeTab === 'shop' && <ShopScreen />}
|
|
</div>
|
|
<BottomTabBar activeTab={activeTab} onTabChange={setActiveTab} />
|
|
</div>
|
|
);
|
|
}
|