Setting(project): amplitude initial setting (#326)

* setting: @pinback/analytics workspace 의존성 추가

* setting: AnalyticsProvider types 정의

* setting: turbo.json globalEnv 설정 추가

* feat: noopProvider 구현

* feat: consoleProvider 구현

* setting: amplitudeProvider 구현

* setting: amplitude default set analytics 구현

* feat: initAnalytics, trackEvent 추가

* feat: UserProperties job_role 제외 필드 삭제

* setting: @amplitude/ampli 의존 추가

* setting: ampli interface index 파일 추가 (ampli pull)

* feat: login, logout userProperties 설정 로직 추가

* refactor: consoleProvider init apiKey 종속 제거

* chore: apps/landing @pinback/analytics 의존 제거

* feat: refresh 로그인 대비 임시 jobRole 상태 추가

* setting: client, extension initAnalytics 추가

* fix: update pnpm-lock

* feat: amplitude user properties API 연동

* refactor: amplitude identify 로직을 전용 API 기반으로 교체

* fix: consoleProvider identify에 userProperties 출력 추가

* fix: session replay 설정 제거

* fix: 로그인 후 amplitude identify 누락 문제 수정

Author: constantly-dev

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"