Feat(project): amplitude event 연결 (#328)

* chore: update ampli interface

* chore: update ampli interface

* feat: connect Clicked_Shared_Bookmark, Clicked_Reminder, Clicked_My_Bookmark events

* feat: connect Triggered_Reminder, Clicked_alarm events in service worker

* feat: connect Saved_Article event on bookmark save

* chore: ampli pull - Viewed_Saved_Content를 Impression_Saved_Content로 교체

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: analytics 패키지에서 ampli 타입 전체 re-export

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: 카드 노출 트래킹용 AnalyticsCardWrapper 공통 컴포넌트 추가

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: Remind, MyBookmark, JobPins 카드에 Impression_Saved_Content 이벤트 연결

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore: consistent-type-imports ESLint 룰 추가 및 저장 시 자동 수정 활성화

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: consistent-type-imports 룰 적용 및 AnalyticsCardWrapper exhaustive-deps 수정

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore: fallback 리뷰 반영

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: constantly-dev

.vscode/settings.json

@@ -12,7 +12,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
+    "source.fixAll.eslint": "always",
     "source.organizeImports": "always"
   },
   "tailwindCSS.suggestions": true,

apps/client/public/firebase-messaging-sw.js

@@ -1,6 +1,25 @@
 /* eslint-env serviceworker */
 /* eslint-disable no-undef */
 
+const AMPLITUDE_API_KEY = 'bb48a29e445e2f350a1d23ad67f38d55';
+
+const trackAmplitudeEvent = (eventType) => {
+  const isProd = self.location.hostname === 'pinback.today';
+  if (!isProd) {
+    console.log('[Analytics] track', eventType);
+    return;
+  }
+
+  fetch('https://api2.amplitude.com/2/httpapi', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      api_key: AMPLITUDE_API_KEY,
+      events: [{ device_id: 'serviceworker', event_type: eventType }],
+    }),
+  }).catch((err) => console.warn('[Amplitude] 이벤트 전송 실패', err));
+};
+
 const firebaseConfig = {
   apiKey: 'AIzaSyD3KM0IQ4Ro3Dd2fyAY8fnhE1bQ_NesrBc',
   authDomain: 'pinback-c55de.firebaseapp.com',
@@ -35,6 +54,8 @@ firebase.initializeApp(firebaseConfig);
 const messaging = firebase.messaging();
 
 messaging.onBackgroundMessage((payload) => {
+  trackAmplitudeEvent('Triggered_Reminder');
+
   const url = payload.data?.url || 'https://pinback.today';
   const notificationTitle = payload.notification?.title || 'pinback';
   const notificationOptions = {
@@ -50,6 +71,8 @@ messaging.onBackgroundMessage((payload) => {
 self.addEventListener('notificationclick', (event) => {
   const targetUrl = event.notification.data?.url || 'https://pinback.today';
 
+  trackAmplitudeEvent('Clicked_alarm');
+
   fetch(
     `https://www.google-analytics.com/mp/collect?measurement_id=G-847ZNSCC3J&api_secret=1hei57fPTKyGX5Cw73rwgA`,
     {

apps/client/src/pages/jobPins/JobPins.tsx

@@ -6,7 +6,9 @@ import JobPinsBottomNotice from '@pages/jobPins/components/JobPinsBottomNotice';
 import MemoPopup from '@pages/jobPins/components/MemoPopup';
 import { useJobPinsBottomNotice } from '@pages/jobPins/hooks/useJobPinsBottomNotice';
 import Footer from '@pages/myBookmark/components/footer/Footer';
+import { analytics } from '@pinback/analytics';
 import { Card } from '@pinback/design-system/ui';
+import AnalyticsCardWrapper from '@shared/components/analyticsCardWrapper/AnalyticsCardWrapper';
 import { useInfiniteScroll } from '@shared/hooks/useInfiniteScroll';
 
 const JobPins = () => {
@@ -67,18 +69,30 @@ const JobPins = () => {
             const displayImageUrl = article.thumbnailUrl || undefined;
 
             return (
-              <Card
+              <AnalyticsCardWrapper
                 key={article.articleId}
-                type="bookmark"
-                variant="save"
-                title={displayTitle}
-                imageUrl={displayImageUrl}
-                content={article.memo}
-                category={article.category?.categoryName}
-                categoryColor={article.category?.categoryColor}
-                nickname={article.ownerName}
-                onClick={() => getJobPinDetail(article.articleId)}
-              />
+                bookmarkType="jobpin"
+              >
+                <Card
+                  type="bookmark"
+                  variant="save"
+                  title={displayTitle}
+                  imageUrl={displayImageUrl}
+                  content={article.memo}
+                  category={article.category?.categoryName}
+                  categoryColor={article.category?.categoryColor}
+                  nickname={article.ownerName}
+                  onClick={() => {
+                    analytics.track('Clicked_Shared_Bookmark', {
+                      article_id: String(article.articleId),
+                      category_id: article.category
+                        ? String(article.category.categoryId)
+                        : undefined,
+                    });
+                    getJobPinDetail(article.articleId);
+                  }}
+                />
+              </AnalyticsCardWrapper>
             );
           })}
 

apps/client/src/pages/jobPins/apis/axios.ts

@@ -1,4 +1,4 @@
-import { JobPinsResponse } from '@pages/jobPins/types/api';
+import { type JobPinsResponse } from '@pages/jobPins/types/api';
 import apiRequest from '@shared/apis/setting/axiosInstance';
 
 interface ApiResponse<T> {

apps/client/src/pages/jobPins/apis/queries.ts

@@ -1,9 +1,9 @@
-import { JobPinsResponse } from '@pages/jobPins/types/api';
+import { type JobPinsResponse } from '@pages/jobPins/types/api';
 import { useInfiniteQuery, useMutation } from '@tanstack/react-query';
 import {
   getJobPinsArticleDetail,
   getJobPinsArticles,
-  JobPinsDetailResponse,
+  type JobPinsDetailResponse,
 } from './axios';
 
 const PAGE_SIZE = 20;

apps/client/src/pages/level/Level.tsx

@@ -1,5 +1,5 @@
 import LevelScene from '@pages/level/components/LevelScene';
-import { TreeLevel } from '@pages/level/types/treeLevelType';
+import { type TreeLevel } from '@pages/level/types/treeLevelType';
 import { Icon } from '@pinback/design-system/icons';
 import { Badge } from '@pinback/design-system/ui';
 import { cn } from '@pinback/design-system/utils';

apps/client/src/pages/level/components/LevelInfoCard.tsx

@@ -1,4 +1,4 @@
-import { TREE_LEVEL_TABLE, TreeLevel } from '@pages/level/types/treeLevelType';
+import { TREE_LEVEL_TABLE, type TreeLevel } from '@pages/level/types/treeLevelType';
 import { Level } from '@pinback/design-system/ui';
 import { cn } from '@pinback/design-system/utils';
 

apps/client/src/pages/level/components/LevelScene.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@pinback/design-system/utils';
-import { TreeLevel } from '@pages/level/types/treeLevelType';
-import { HTMLAttributes } from 'react';
+import { type TreeLevel } from '@pages/level/types/treeLevelType';
+import { type HTMLAttributes } from 'react';
 
 import chippi_level1 from '../../../assets/Lv.1.webp';
 import chippi_level2 from '../../../assets/Lv.2.webp';

apps/client/src/pages/myBookmark/MyBookmark.tsx

@@ -101,7 +101,6 @@ const MyBookmark = () => {
             onBadgeChange={setActiveBadge}
             updateToReadStatus={updateToReadStatus}
             openMenu={openMenu}
-            queryClient={queryClient}
             scrollContainerRef={scrollContainerRef}
           />
         </ErrorBoundary>

apps/client/src/pages/myBookmark/apis/axios.ts

@@ -1,7 +1,7 @@
 import {
-  BookmarkArticlesCountResponse,
-  BookmarkArticlesResponse,
-  CategoryBookmarkArticleResponse,
+  type BookmarkArticlesCountResponse,
+  type BookmarkArticlesResponse,
+  type CategoryBookmarkArticleResponse,
 } from '@pages/myBookmark/types/api';
 import apiRequest from '@shared/apis/setting/axiosInstance';