feat: @apps-in-toss/analytics 이벤트 트래킹 구현 (JSA-32)

- 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>
This commit is contained in:
2026-04-01 00:29:14 +09:00
commit 56bc71a71a
8 changed files with 1623 additions and 0 deletions

61
pages/index.tsx Normal file
View File

@@ -0,0 +1,61 @@
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>
);
}