믹스패널 유저 identify 호출 (#565)

* refactor: mixpanel type 설정 및 identify 유틸 생성

* chore: 불필요 주석 삭제

* chore: 불필요 주석 삭제

* feat: 로그인 시 mixpanel identify 설정

* test: mixpanel 유틸

@types/global.d.ts

@@ -3,6 +3,10 @@ declare global {
     ReactNativeWebView: {
       postMessage(msg: string): void;
     };
+    mixpanel: {
+      track(event_name: string, ...props: unknown): void;
+      identify(userId: string): void;
+    };
   }
 }
 

src/components/common/UserProvider/UserProvider.tsx

@@ -31,7 +31,6 @@ export function UserProvider({ children }: PropsWithChildren<unknown>) {
 
   const { isRouterGuardPassed } = useRouterGuard({ isLoaded });
 
-  // 컴포넌트 마운트 시
   useDidMount(() => {
     if (isLoaded) return;
 

src/hooks/api/member/useGetUserInformation.ts

@@ -4,11 +4,11 @@ import { get } from '~/libs/api/client';
 
 export const USER_INFORMATION_QUERY_KEY = 'userInformation';
 
-export default function useGetUserInformation(onSuccess?: (data: UserInformationType) => void) {
-  const fetchUserInformation = () => {
-    return get<UserInformationType>(`/v1/members/info`);
-  };
+export const fetchUserInformation = () => {
+  return get<UserInformationType>(`/v1/members/info`);
+};
 
+export default function useGetUserInformation(onSuccess?: (data: UserInformationType) => void) {
   const query = useQuery<UserInformationType>(
     [USER_INFORMATION_QUERY_KEY],
     async () => await fetchUserInformation(),

src/hooks/common/useUser/useUser.ts

@@ -2,8 +2,10 @@ import { useCallback, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { localStorageUserTokenKeys } from '~/constants/localStorage';
+import { fetchUserInformation } from '~/hooks/api/member/useGetUserInformation';
 import useInternalRouter from '~/hooks/common/useInternalRouter';
 import { replaceAccessTokenForRequestInstance } from '~/libs/api/client';
+import { setMixpanelIdentify } from '~/libs/mixpanel';
 
 const SYNC_YGT_RT = 'SYNC_YGT_RT';
 
@@ -21,6 +23,13 @@ export function useUser() {
     }
   };
 
+  const setMixpanelIdentifyWhenLogedIn = async () => {
+    const { nickName, email } = await fetchUserInformation();
+    if (!nickName || !email) return;
+
+    setMixpanelIdentify(`${nickName} - ${email}`);
+  };
+
   /**
    * 유저 로그인 시에 사용합니다.
    * @param accessToken 엑세스 토큰 값
@@ -42,6 +51,8 @@ export function useUser() {
       localStorage.setItem(localStorageUserTokenKeys.refreshToken, refreshToken);
       postRefreshTokenReactNativeWebView(refreshToken);
       queryClient.clear();
+
+      setMixpanelIdentifyWhenLogedIn();
     },
     [queryClient]
   );

src/libs/mixpanel/index.test.ts

@@ -0,0 +1,11 @@
+import { mixpanelTrack, setMixpanelIdentify } from './index';
+
+describe('libs/mixpanel/index', () => {
+  it('mixpanelTrack이 정의되어 있어야 함', () => {
+    expect(mixpanelTrack).toBeDefined();
+  });
+
+  it('setMixpanelIdentify이 정의되어 있어야 함', () => {
+    expect(setMixpanelIdentify).toBeDefined();
+  });
+});

src/libs/mixpanel/index.ts

@@ -1 +1 @@
-export { mixpanelTrack } from './mixpanel';
+export { mixpanelTrack, setMixpanelIdentify } from './mixpanel';

src/libs/mixpanel/mixpanel.test.ts

@@ -0,0 +1,49 @@
+import { mixpanelTrack, setMixpanelIdentify } from './mixpanel';
+
+describe('libs/mixpanel/mixpanel', () => {
+  const mixpanelTrackSpy = jest.fn();
+  const mixpanelIdentifySpy = jest.fn();
+
+  const setWindowMixpanelWithSpy = () => {
+    Object.assign(window, { mixpanel: { track: mixpanelTrackSpy, identify: mixpanelIdentifySpy } });
+  };
+
+  const setWindowMixpanelToUndefined = () => {
+    Object.assign(window, { mixpanel: undefined });
+  };
+
+  describe('window에 mixpanel이 없을 시', () => {
+    beforeEach(() => {
+      setWindowMixpanelToUndefined();
+    });
+
+    it('window.mixpanel.track이 호출되지 않음', () => {
+      mixpanelTrack('test', { test: 'test' });
+      expect(mixpanelTrackSpy).not.toHaveBeenCalled();
+    });
+
+    it('window.mixpanel.identify가 호출되지 않음', () => {
+      setMixpanelIdentify('test');
+      expect(mixpanelIdentifySpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('window에 mixpanel이 있을 시', () => {
+    beforeEach(() => {
+      setWindowMixpanelWithSpy();
+    });
+
+    it('window.mixpanel.track이 호출됨', () => {
+      setWindowMixpanelWithSpy();
+      mixpanelTrack('test', { test: 'test' });
+      expect(mixpanelTrackSpy).toHaveBeenCalled();
+      expect(mixpanelTrackSpy).toHaveBeenCalledWith('test', [{ test: 'test' }]);
+    });
+
+    it('mixpanel.identify가 호출됨', () => {
+      setMixpanelIdentify('test');
+      expect(mixpanelIdentifySpy).toHaveBeenCalled();
+      expect(mixpanelIdentifySpy).toHaveBeenCalledWith('test');
+    });
+  });
+});

src/libs/mixpanel/mixpanel.ts

@@ -1,9 +1,21 @@
-export function mixpanelTrack(event_name: string, ...props: any) {
+function callWhenMixpanelReady(callback: VoidFunction) {
   try {
-    if ((window as any).mixpanel) {
-      (window as any).mixpanel.track(event_name, props);
+    if (window?.mixpanel) {
+      callback();
     }
   } catch (e) {
-    console.log(e);
+    console.error(e);
   }
 }
+
+export function mixpanelTrack(event_name: string, ...props: any) {
+  callWhenMixpanelReady(() => {
+    window.mixpanel.track(event_name, props);
+  });
+}
+
+export function setMixpanelIdentify(userId: string) {
+  callWhenMixpanelReady(() => {
+    window.mixpanel.identify(userId);
+  });
+}

src/pages/login/index.tsx

@@ -62,7 +62,6 @@ export default function Login() {
   }, [password.debouncedValue]);
 
   useDidUpdate(() => {
-    //
     if (loginMutationData && loginMutationData.data) {
       userLogin({
         accessToken: loginMutationData.data.accessToken,