Skip to content

Feat(project): amplitude event 연결 #328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
constantly-dev merged 12 commits into from
Apr 7, 2026
Merged

Feat(project): amplitude event 연결 #328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1ffe1ed
chore: update ampli interface
constantly-dev Apr 5, 2026
7743ebe
chore: update ampli interface
constantly-dev Apr 5, 2026
072946a
feat: connect Clicked_Shared_Bookmark, Clicked_Reminder, Clicked_My_B…
constantly-dev Apr 5, 2026
82a398c
feat: connect Triggered_Reminder, Clicked_alarm events in service worker
constantly-dev Apr 5, 2026
b8e3dab
feat: connect Saved_Article event on bookmark save
constantly-dev Apr 5, 2026
b77fdcd
chore: ampli pull - Viewed_Saved_Content를 Impression_Saved_Content로 교체
constantly-dev Apr 6, 2026
88e376b
feat: analytics 패키지에서 ampli 타입 전체 re-export
constantly-dev Apr 6, 2026
f2d7b56
feat: 카드 노출 트래킹용 AnalyticsCardWrapper 공통 컴포넌트 추가
constantly-dev Apr 6, 2026
5101d12
feat: Remind, MyBookmark, JobPins 카드에 Impression_Saved_Content 이벤트 연결
constantly-dev Apr 6, 2026
586d248
chore: consistent-type-imports ESLint 룰 추가 및 저장 시 자동 수정 활성화
constantly-dev Apr 6, 2026
1c42161
fix: consistent-type-imports 룰 적용 및 AnalyticsCardWrapper exhaustive-d…
constantly-dev Apr 6, 2026
06f757a
chore: fallback 리뷰 반영
constantly-dev Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
23 changes: 23 additions & 0 deletions apps/client/public/firebase-messaging-sw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -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 = {
Expand All @@ -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`,
{
Expand Down
36 changes: 25 additions & 11 deletions apps/client/src/pages/jobPins/JobPins.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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,
});
Comment on lines +86 to +91
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

카테고리 없는 카드 클릭 시 런타임 에러 가능성이 있습니다.

Line 85는 article.category가 없을 때 예외가 발생할 수 있습니다. 이미 다른 props에서 optional 접근을 쓰고 있어 여기서도 동일하게 방어가 필요합니다.

수정 제안 
                     analytics.track('Clicked_Shared_Bookmark', {
                       article_id: String(article.articleId),
-                      category_id: String(article.category.categoryId),
+                      category_id: article.category
+                        ? String(article.category.categoryId)
+                        : undefined,
                     });
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
analytics.track('Clicked_Shared_Bookmark', {
article_id: String(article.articleId),
category_id: String(article.category.categoryId),
});
analytics.track('Clicked_Shared_Bookmark', {
article_id: String(article.articleId),
category_id: article.category
? String(article.category.categoryId)
: undefined,
});
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/client/src/pages/jobPins/JobPins.tsx` around lines 83 - 86, The
analytics.track call can throw when article.category is undefined; update the
analytics.track('Clicked_Shared_Bookmark', ...) invocation to defensively access
category by using optional chaining or a fallback (e.g.,
String(article.category?.categoryId ?? '')) so category_id is always a string
and no runtime error occurs; locate the analytics.track call in JobPins.tsx and
replace the direct article.category.categoryId access with a safe expression.

getJobPinDetail(article.articleId);
}}
/>
</AnalyticsCardWrapper>
);
})}

Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/jobPins/apis/axios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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> {
Expand Down
4 changes: 2 additions & 2 deletions apps/client/src/pages/jobPins/apis/queries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/level/Level.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/level/components/LevelInfoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
4 changes: 2 additions & 2 deletions apps/client/src/pages/level/components/LevelScene.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
1 change: 0 additions & 1 deletion apps/client/src/pages/myBookmark/MyBookmark.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@ const MyBookmark = () => {
onBadgeChange={setActiveBadge}
updateToReadStatus={updateToReadStatus}
openMenu={openMenu}
queryClient={queryClient}
scrollContainerRef={scrollContainerRef}
/>
</ErrorBoundary>
Expand Down
6 changes: 3 additions & 3 deletions apps/client/src/pages/myBookmark/apis/axios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/myBookmark/apis/queries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
useSuspenseInfiniteQuery,
useSuspenseQuery,
} from '@tanstack/react-query';
import { CategoryBookmarkArticleResponse } from '../types/api';
import { type CategoryBookmarkArticleResponse } from '../types/api';
import {
getBookmarkArticles,
getBookmarkArticlesCount,
Expand Down
101 changes: 54 additions & 47 deletions apps/client/src/pages/myBookmark/components/myBookmarkContent/MyBookmarkContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import NoArticles from '@pages/myBookmark/components/NoArticles/NoArticles';
import NoUnreadArticles from '@pages/myBookmark/components/noUnreadArticles/NoUnreadArticles';
import { useMyBookmarkContentData } from '@pages/myBookmark/hooks/useMyBookmarkContentData';
import { analytics } from '@pinback/analytics';
import { Badge, Card } from '@pinback/design-system/ui';
import { MutableRefObject } from 'react';
import AnalyticsCardWrapper from '@shared/components/analyticsCardWrapper/AnalyticsCardWrapper';
import { useQueryClient } from '@tanstack/react-query';
import { type MutableRefObject } from 'react';

interface MyBookmarkContentProps {
activeBadge: 'all' | 'notRead';
Expand All @@ -11,7 +14,6 @@ interface MyBookmarkContentProps {
categoryId: string | null;
updateToReadStatus: (id: number, options?: any) => void;
openMenu: (id: number, anchor: HTMLElement) => void;
queryClient: any;
scrollContainerRef: MutableRefObject<HTMLDivElement | null>;
}

Expand All @@ -22,9 +24,9 @@ const MyBookmarkContent = ({
categoryId,
updateToReadStatus,
openMenu,
queryClient,
scrollContainerRef,
}: MyBookmarkContentProps) => {
const queryClient = useQueryClient();
const { view, list, counts, pagination } = useMyBookmarkContentData({
activeBadge,
category,
Expand Down Expand Up @@ -65,50 +67,55 @@ const MyBookmarkContent = ({
className="scrollbar-hide mt-[2.6rem] flex h-screen flex-wrap content-start gap-[1.6rem] overflow-y-auto scroll-smooth"
>
{list.articles.map((article) => (
<Card
key={article.articleId}
type="bookmark"
title={article.title || '제목 없음'}
imageUrl={article.thumbnailUrl || undefined}
content={article.memo ?? undefined}
category={
view.isCategoryView
? view.categoryName
: article.category?.categoryName
}
categoryColor={
view.isCategoryView
? undefined
: article.category?.categoryColor
}
date={new Date(article.createdAt).toLocaleDateString('ko-KR')}
onClick={() => {
window.open(article.url, '_blank');
updateToReadStatus(article.articleId, {
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: ['bookmarkArticles'],
});
queryClient.invalidateQueries({
queryKey: ['bookmarkArticlesCount'],
});
queryClient.invalidateQueries({
queryKey: ['categoryBookmarkArticlesCount'],
});
queryClient.invalidateQueries({
queryKey: ['categoryBookmarkArticles'],
});
},
onError: (error: any) => {
console.error(error);
},
});
}}
onOptionsClick={(e) => {
e.stopPropagation();
openMenu(article.articleId, e.currentTarget);
}}
/>
<AnalyticsCardWrapper key={article.articleId} bookmarkType="own">
<Card
type="bookmark"
title={article.title || '제목 없음'}
imageUrl={article.thumbnailUrl || undefined}
content={article.memo ?? undefined}
category={
view.isCategoryView
? view.categoryName
: article.category?.categoryName
}
categoryColor={
view.isCategoryView
? undefined
: article.category?.categoryColor
}
date={new Date(article.createdAt).toLocaleDateString('ko-KR')}
onClick={() => {
analytics.track('Clicked_My_Bookmark', {
article_id: String(article.articleId),
category_id: article.category?.categoryId?.toString(),
});
window.open(article.url, '_blank');
updateToReadStatus(article.articleId, {
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: ['bookmarkArticles'],
});
queryClient.invalidateQueries({
queryKey: ['bookmarkArticlesCount'],
});
queryClient.invalidateQueries({
queryKey: ['categoryBookmarkArticlesCount'],
});
queryClient.invalidateQueries({
queryKey: ['categoryBookmarkArticles'],
});
},
onError: (error: any) => {
console.error(error);
},
});
}}
onOptionsClick={(e) => {
e.stopPropagation();
openMenu(article.articleId, e.currentTarget);
}}
/>
</AnalyticsCardWrapper>
))}

<div
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/myBookmark/hooks/useMyBookmarkContentData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
useGetCategoryBookmarkArticlesCount,
} from '@pages/myBookmark/apis/queries';
import { useInfiniteScroll } from '@shared/hooks/useInfiniteScroll';
import { MutableRefObject } from 'react';
import { type MutableRefObject } from 'react';

interface UseMyBookmarkContentDataParams {
activeBadge: 'all' | 'notRead';
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {
Step,
StepType,
type StepType,
storySteps,
} from '@pages/onBoarding/constants/onboardingSteps';
import { useOnboardingFunnel } from '@pages/onBoarding/hooks/useOnboardingFunnel';
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/onBoarding/components/funnel/step/job/JobStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Suspense } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import dotori from '/assets/onBoarding/icons/dotori.svg';
import { Checkbox } from '@pinback/design-system/ui';
import { JobsResponse } from '@shared/types/api';
import { type JobsResponse } from '@shared/types/api';
import JobCards from '@shared/components/jobSelectionFunnel/step/job/JobCards';
import JobCardsSkeleton from '@shared/components/jobSelectionFunnel/step/job/JobCardsSkeleton';

Expand Down
4 changes: 2 additions & 2 deletions apps/client/src/pages/onBoarding/components/timePicker/TimePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import {
Button,
WheelPicker,
WheelPickerOption,
type WheelPickerOption,
WheelPickerWrapper,
} from '@pinback/design-system/ui';
import { MouseEventHandler, useState } from 'react';
import { type MouseEventHandler, useState } from 'react';

const createArray = (length: number, add = 0): WheelPickerOption[] =>
Array.from({ length }, (_, i) => {
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/onBoarding/hooks/useOnboardingFunnel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { AlarmsType } from '@constants/alarms';
import {
Step,
stepOrder,
StepType,
type StepType,
} from '@pages/onBoarding/constants/onboardingSteps';
import { normalizeTime } from '@pages/onBoarding/utils/formatRemindTime';
import { registerServiceWorker } from '@pages/onBoarding/utils/registerServiceWorker';
Expand Down
Loading
Loading