Fix(project): fix amplitude loading issue

apps/client/src/App.tsx

@@ -1,22 +1,14 @@
-import { analytics } from '@pinback/analytics';
 import { router } from '@routes/router';
-import { useGetAmplitudeUserProperties } from '@shared/apis/queries';
-import { useEffect } from 'react';
+import AmplitudeProvider from 'src/providers/AmplitudeProvider';
 import { RouterProvider } from 'react-router-dom';
 import './App.css';
 
 function App() {
-  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} />;
+  return (
+    <AmplitudeProvider>
+      <RouterProvider router={router} />
+    </AmplitudeProvider>
+  );
 }
 
 export default App;

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

@@ -6,76 +6,71 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
+const REDIRECT_URI = import.meta.env.VITE_GOOGLE_REDIRECT_URI;
+
 const GoogleCallback = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const queryClient = useQueryClient();
 
-  useEffect(() => {
-    const code = searchParams.get('code');
+  const saveSession = (params: {
+    accessToken: string | null;
+    refreshToken: string | null;
+    email: string;
+    userId: string;
+    hasJob?: boolean;
+  }) => {
+    const { accessToken, refreshToken, email, userId, hasJob } = params;
 
-    if (!code) {
-      alert('로그인 실패. 다시 시도해주세요.');
-      navigate('/onboarding?step=SOCIAL_LOGIN');
-      return;
+    authStorage.setUserIdentity(email, userId);
+
+    if (accessToken) {
+      authStorage.setAccessToken(accessToken);
+      extensionBridge.syncToken(accessToken);
     }
 
-    loginWithCode(code);
-  }, []);
+    if (refreshToken) {
+      authStorage.setRefreshToken(refreshToken);
+    }
 
-  const handleUserLogin = (
-    isUser: boolean,
-    accessToken: string | null,
-    refreshToken: string | null,
-    hasJob?: boolean
-  ) => {
-    if (isUser) {
-      if (accessToken) {
-        authStorage.setAccessToken(accessToken);
-        extensionBridge.syncToken(accessToken);
-      }
-
-      if (refreshToken) {
-        authStorage.setRefreshToken(refreshToken);
-      }
-
-      if (typeof hasJob === 'boolean') {
-        authStorage.setHasJob(hasJob);
-      }
-      navigate('/');
-    } else {
-      navigate('/onboarding?step=JOB');
+    if (typeof hasJob === 'boolean') {
+      authStorage.setHasJob(hasJob);
     }
   };
 
-  const redirectUri = import.meta.env.VITE_GOOGLE_REDIRECT_URI;
-
   const loginWithCode = async (code: string) => {
     try {
       const res = await apiRequest.post(
         '/api/v3/auth/google',
-        {
-          code,
-          uri: redirectUri,
-        },
-        {
-          withCredentials: true,
-        }
+        { code, uri: REDIRECT_URI },
+        { withCredentials: true }
       );
 
       const { isUser, userId, email, accessToken, refreshToken, hasJob } =
         res.data.data;
 
-      authStorage.setUserIdentity(email, userId);
+      saveSession({ accessToken, refreshToken, email, userId, hasJob });
       queryClient.invalidateQueries({ queryKey: ['amplitudeUserProperties'] });
 
-      handleUserLogin(isUser, accessToken, refreshToken, hasJob);
+      navigate(isUser ? '/' : '/onboarding?step=JOB');
     } catch (error) {
       console.error('로그인 오류:', error);
       navigate('/onboarding?step=SOCIAL_LOGIN');
     }
   };
 
+  useEffect(() => {
+    const code = searchParams.get('code');
+
+    if (!code) {
+      alert('로그인 실패. 다시 시도해주세요.');
+      navigate('/onboarding?step=SOCIAL_LOGIN');
+      return;
+    }
+
+    loginWithCode(code);
+  }, []);
+
   return (
     <div className="flex h-screen flex-col items-center justify-center">
       <LoadingChippi className="mb-6" />

apps/client/src/providers/AmplitudeProvider.tsx

@@ -0,0 +1,19 @@
+import { analytics } from '@pinback/analytics';
+import { useGetAmplitudeUserProperties } from '@shared/apis/queries';
+import { useEffect, type PropsWithChildren } from 'react';
+
+const AmplitudeProvider = ({ children }: PropsWithChildren) => {
+  const { data: userProperties } = useGetAmplitudeUserProperties();
+
+  useEffect(() => {
+    if (!userProperties) return;
+    analytics.identify(
+      String(userProperties.userId),
+      userProperties.jobRole ? { job_role: userProperties.jobRole } : undefined
+    );
+  }, [userProperties]);
+
+  return <>{children}</>;
+};
+
+export default AmplitudeProvider;

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

@@ -229,6 +229,7 @@ export const useGetAmplitudeUserProperties =
       queryFn: getAmplitudeUserProperties,
       staleTime: Infinity,
       retry: false,
+      enabled: authStorage.hasAccessToken(),
     });
   };
 

apps/client/src/shared/apis/setting/axiosInstance.ts

@@ -76,7 +76,7 @@ apiRequest.interceptors.response.use(
 
     if (
       error.response &&
-      (error.response.status === 401 || error.response.status === 403) &&
+      error.response.status === 401 &&
       !originalRequest._retry &&
       !isNoAuth &&
       !isLoginPage

packages/analytics/index.ts

@@ -1,6 +1,6 @@
 import { analytics } from './src/analytics';
-import { amplitudeProvider } from './src/providers/amplitude';
-import { consoleProvider } from './src/providers/console';
+import { amplitudeAdapter } from './src/adapters/amplitude';
+import { consoleAdapter } from './src/adapters/console';
 
 export type { AnalyticsProvider, UserProperties } from './src/types';
 export type * from './src/ampli';
@@ -13,16 +13,16 @@ interface InitAnalyticsOptions {
 
 export const initAnalytics = ({ apiKey, isDev }: InitAnalyticsOptions): void => {
   if (isDev || !apiKey) {
-    analytics.setProvider(consoleProvider);
+    analytics.setProvider(consoleAdapter);
     return;
   }
 
   try {
-    amplitudeProvider.init(apiKey);
-    analytics.setProvider(amplitudeProvider);
+    amplitudeAdapter.init(apiKey);
+    analytics.setProvider(amplitudeAdapter);
   } catch (error) {
-    console.error('[Analytics] Failed to initialize Amplitude, falling back to console provider', error);
-    analytics.setProvider(consoleProvider);
+    console.error('[Analytics] Failed to initialize Amplitude, falling back to console adapter', error);
+    analytics.setProvider(consoleAdapter);
   }
 };
 

packages/analytics/src/providers/amplitude.ts → packages/analytics/src/adapters/amplitude.ts

@@ -2,7 +2,7 @@ import { Identify, identify, setUserId, reset, track, initAll } from '@amplitude
 
 import type { AnalyticsProvider, UserProperties } from '../types';
 
-export const amplitudeProvider: AnalyticsProvider = {
+export const amplitudeAdapter: AnalyticsProvider = {
   init(apiKey: string) {
     initAll(apiKey, {
       analytics: {

packages/analytics/src/providers/console.ts → packages/analytics/src/adapters/console.ts

@@ -1,6 +1,6 @@
 import type { AnalyticsProvider } from '../types';
 
-export const consoleProvider: AnalyticsProvider = {
+export const consoleAdapter: AnalyticsProvider = {
   init: (_apiKey) => console.log('[Analytics] init'),
   track: (name, props) => console.log('[Analytics] track', name, props ?? {}),
   identify: (userId, userProperties) => console.log('[Analytics] identify', { userId, ...userProperties }),

packages/analytics/src/providers/noop.ts → packages/analytics/src/adapters/noop.ts

@@ -1,6 +1,6 @@
 import type { AnalyticsProvider } from '../types';
 
-export const noopProvider: AnalyticsProvider = {
+export const noopAdapter: AnalyticsProvider = {
   init: () => {},
   track: () => {},
   identify: (_userId: string) => {},

packages/analytics/src/analytics.ts

@@ -1,7 +1,7 @@
-import { noopProvider } from './providers/noop';
+import { noopAdapter } from './adapters/noop';
 import type { AnalyticsProvider, UserProperties } from './types';
 
-let provider: AnalyticsProvider = noopProvider;
+let provider: AnalyticsProvider = noopAdapter;
 
 export const analytics = {
   setProvider(newProvider: AnalyticsProvider): void {