Setting(project): amplitude initial setting

apps/client/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@pinback/contracts": "workspace:*",
+    "@pinback/analytics": "workspace:*",
     "@tanstack/react-query": "^5.85.3",
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",

apps/client/src/App.tsx

@@ -1,12 +1,22 @@
+import { analytics } from '@pinback/analytics';
 import { router } from '@routes/router';
+import { useGetAmplitudeUserProperties } from '@shared/apis/queries';
+import { useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
 import './App.css';
+
 function App() {
-  return (
-    <>
-      <RouterProvider router={router} />
-    </>
-  );
+  const { data: userProperties } = useGetAmplitudeUserProperties();
+
+  useEffect(() => {
+    if (!userProperties) return;
+    analytics.identify(
+      String(userProperties.userId),
+      userProperties.jobRole ? { job_role: userProperties.jobRole } : undefined
+    );
+  }, [userProperties]);
+
+  return <RouterProvider router={router} />;
 }
 
 export default App;

apps/client/src/layout/Layout.tsx

@@ -9,6 +9,7 @@ import { Outlet, useLocation } from 'react-router-dom';
 const Layout = () => {
   const location = useLocation();
   const queryClient = useQueryClient();
+  const isLoggedIn = authStorage.hasAccessToken();
 
   const isPolicyPage =
     location.pathname === ROUTES_CONFIG.privacyPolicy.path ||
@@ -20,7 +21,6 @@ const Layout = () => {
     location.pathname.startsWith(ROUTES_CONFIG.onboardingCallback.path);
 
   const isSidebarHidden = isAuthPage || isPolicyPage;
-  const isLoggedIn = authStorage.hasAccessToken();
 
   const { data: hasJobData, isLoading: isHasJobLoading } = useGetHasJob(
     isLoggedIn && !isAuthPage

apps/client/src/main.tsx

@@ -1,6 +1,12 @@
+import { initAnalytics } from '@pinback/analytics';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
+
+initAnalytics({
+  apiKey: import.meta.env.VITE_AMPLITUDE_API_KEY,
+  isDev: import.meta.env.DEV,
+});
 import { QueryClientProvider } from '@tanstack/react-query';
 import getQueryClient from '@shared/apis/setting/query/getQueryClient.ts';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

apps/client/src/pages/onBoarding/GoogleCallback.tsx

@@ -2,12 +2,14 @@ import apiRequest from '@shared/apis/setting/axiosInstance';
 import LoadingChippi from '@shared/components/loadingChippi/LoadingChippi';
 import { authStorage } from '@shared/utils/authStorage';
 import { extensionBridge } from '@shared/utils/extensionBridge';
+import { useQueryClient } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
 const GoogleCallback = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
+  const queryClient = useQueryClient();
 
   useEffect(() => {
     const code = searchParams.get('code');
@@ -65,6 +67,7 @@ const GoogleCallback = () => {
         res.data.data;
 
       authStorage.setUserIdentity(email, userId);
+      queryClient.invalidateQueries({ queryKey: ['amplitudeUserProperties'] });
 
       handleUserLogin(isUser, accessToken, refreshToken, hasJob);
     } catch (error) {

apps/client/src/shared/apis/axios.ts

@@ -1,5 +1,6 @@
 import apiRequest from '@shared/apis/setting/axiosInstance';
 import {
+  AmplitudeUserPropertiesResponse,
   EditArticleRequest,
   HasJobResponse,
   JobsResponse,
@@ -117,3 +118,9 @@ export const getCategoryDetail = async (categoryId: number) => {
   const { data } = await apiRequest.get(`/api/v3/categories/${categoryId}`);
   return data.data;
 };
+
+export const getAmplitudeUserProperties =
+  async (): Promise<AmplitudeUserPropertiesResponse> => {
+    const { data } = await apiRequest.get('/api/v3/users/properties');
+    return data.data;
+  };

apps/client/src/shared/apis/queries.ts

@@ -2,6 +2,7 @@ import {
   deleteCategory,
   deleteRemindArticle,
   getAcorns,
+  getAmplitudeUserProperties,
   getArticleDetail,
   getCategoryDetail,
   getDashboardCategories,
@@ -20,6 +21,7 @@ import {
 } from '@shared/apis/axios';
 import {
   AcornsResponse,
+  AmplitudeUserPropertiesResponse,
   ArticleDetailResponse,
   ArticleReadStatusResponse,
   CategoryDetailResponse,
@@ -220,6 +222,16 @@ export const useSuspenseGetJobs = () => {
   });
 };
 
+export const useGetAmplitudeUserProperties =
+  (): UseQueryResult<AmplitudeUserPropertiesResponse, AxiosError> => {
+    return useQuery({
+      queryKey: ['amplitudeUserProperties'],
+      queryFn: getAmplitudeUserProperties,
+      staleTime: Infinity,
+      retry: false,
+    });
+  };
+
 export const usePatchUserJob = () => {
   const queryClient = useQueryClient();
 
@@ -229,6 +241,9 @@ export const usePatchUserJob = () => {
       queryClient.invalidateQueries({
         queryKey: ['hasJob'],
       });
+      queryClient.invalidateQueries({
+        queryKey: ['amplitudeUserProperties'],
+      });
     },
   });
 };

apps/client/src/shared/components/profilePopup/ProfilePopup.tsx

@@ -1,3 +1,4 @@
+import { analytics } from '@pinback/analytics';
 import { Icon } from '@pinback/design-system/icons';
 import { Button } from '@pinback/design-system/ui';
 import { useQueryClient } from '@tanstack/react-query';
@@ -44,6 +45,7 @@ export default function ProfilePopup({
   if (!open) return null;
 
   const handleLogout = () => {
+    analytics.reset();
     authStorage.clearSession();
     queryClient.clear();
     extensionBridge.logout();

apps/client/src/shared/types/api.ts

@@ -60,3 +60,8 @@ export interface CategoryDetailResponse {
 export interface HasJobResponse {
   hasJob: boolean;
 }
+
+export interface AmplitudeUserPropertiesResponse {
+  userId: string;
+  jobRole: string | null;
+}

apps/extension/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@pinback/contracts": "workspace:*",
     "@tanstack/react-query": "^5.85.5",
+    "@pinback/analytics": "workspace:*",
     "axios": "^1.11.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"

apps/extension/src/popup.tsx

@@ -1,8 +1,14 @@
+import { initAnalytics } from '@pinback/analytics';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 import { QueryClientProvider } from '@tanstack/react-query';
 import getQueryClient from './apis/query/getQueryClient';
 
+initAnalytics({
+  apiKey: import.meta.env.VITE_AMPLITUDE_API_KEY,
+  isDev: import.meta.env.DEV,
+});
+
 const queryClient = getQueryClient();
 
 const rootEl = document.getElementById('root');

packages/analytics/ampli.json

@@ -0,0 +1,14 @@
+{
+  "Zone": "us",
+  "OrgId": "416251",
+  "WorkspaceId": "b45d1b45-76f3-4ffc-a3df-3d2ba02b40a7",
+  "SourceId": "549df154-226b-4813-b3fa-2e6975515641",
+  "Branch": "main",
+  "Version": "1.0.0",
+  "VersionId": "a8d7f423-b996-4b7f-b836-cd64e2319f47",
+  "Runtime": "browser:typescript-ampli-v2",
+  "Platform": "Browser",
+  "Language": "TypeScript",
+  "SDK": "@amplitude/analytics-browser@^1.0",
+  "Path": "./src/ampli"
+}

packages/analytics/index.ts

@@ -0,0 +1,34 @@
+import { analytics } from './src/analytics';
+import { amplitudeProvider } from './src/providers/amplitude';
+import { consoleProvider } from './src/providers/console';
+
+export type { AnalyticsProvider, UserProperties } from './src/types';
+export { analytics };
+
+interface InitAnalyticsOptions {
+  apiKey: string;
+  isDev: boolean;
+}
+
+export const initAnalytics = ({ apiKey, isDev }: InitAnalyticsOptions): void => {
+  if (isDev || !apiKey) {
+    analytics.setProvider(consoleProvider);
+    return;
+  }
+
+  try {
+    amplitudeProvider.init(apiKey);
+    analytics.setProvider(amplitudeProvider);
+  } catch (error) {
+    console.error('[Analytics] Failed to initialize Amplitude, falling back to console provider', error);
+    analytics.setProvider(consoleProvider);
+  }
+};
+
+// 타입된 이벤트(Ampli 등)로 처리하기 어려운 예외 케이스용 fallback
+export const trackEvent = (
+  eventName: string,
+  properties?: Record<string, unknown>
+): void => {
+  analytics.track(eventName, properties);
+};

packages/analytics/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@pinback/analytics",
+  "version": "1.0.0",
+  "main": "index.ts",
+  "scripts": {
+    "ampli:pull": "ampli pull"
+  },
+  "dependencies": {
+    "@amplitude/unified": "^1.0.10"
+  },
+  "devDependencies": {
+    "@amplitude/ampli": "^1.36.2"
+  }
+}