Merge pull request #35 from mbti-nf-team/refactor/ga-event

refacotor: useActivityLog hook 구현 및 local 폰트위치 변경

src/app/fonts/index.ts

@@ -0,0 +1,31 @@
+import localFont from 'next/font/local';
+
+const dungGeunMoFont = localFont({
+  src: [
+    {
+      path: './korean/DungGeunMo.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  preload: true,
+  fallback: [
+    'DungGeunMo',
+    '-apple-system',
+    'BlinkMacSystemFont',
+    'system-ui',
+    'Roboto',
+    'Helvetica Neue',
+    'Segoe UI',
+    'Apple SD Gothic Neo',
+    'Noto Sans KR',
+    'Malgun Gothic',
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'sans-serif',
+  ],
+});
+
+export default dungGeunMoFont;

src/app/layout.tsx

@@ -1,11 +1,11 @@
 import ReactGA from 'react-ga4';
 
-import localFont from 'next/font/local';
 import Script from 'next/script';
 
 import Toast from '@/components/common/Toast';
 import Layout from '@/components/Layout';
 
+import dungGeunMoFont from './fonts';
 import Providers from './providers';
 
 import 'src/styles/normalize.css';
@@ -30,33 +30,6 @@ export const metadata = {
   },
 };
 
-const dungGeunMoFont = localFont({
-  src: [
-    {
-      path: './fonts/korean/DungGeunMo.woff2',
-      weight: '400',
-      style: 'normal',
-    },
-  ],
-  display: 'swap',
-  fallback: [
-    'DungGeunMo',
-    '-apple-system',
-    'BlinkMacSystemFont',
-    'system-ui',
-    'Roboto',
-    'Helvetica Neue',
-    'Segoe UI',
-    'Apple SD Gothic Neo',
-    'Noto Sans KR',
-    'Malgun Gothic',
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-    'sans-serif',
-  ],
-});
-
 ReactGA.initialize(process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID, {
   testMode: process.env.NODE_ENV === 'development',
 });

src/components/main/BirthSongContainer/index.tsx

@@ -1,9 +1,8 @@
 'use client';
 
 import { useCallback, useState } from 'react';
-import ReactGA from 'react-ga4';
 
-import { GA4_EVENT_ACTION, GA4_EVENT_NAME, GA4_EVENT_TYPE } from '@/lib/constants/ga4';
+import useActivityLog from '@/hooks/useActivityLog';
 
 import BirthSongForm from '../BirthSongForm';
 import BirthSongResult from '../BirthSongResult';
@@ -13,15 +12,19 @@ type Props = {
 };
 
 function BirthSongContainer({ defaultBirthDate }: Props) {
+  const { sendEvent } = useActivityLog();
   const [birthDate, setBirthDate] = useState<string>(defaultBirthDate);
 
   const onSubmit = useCallback((date: string) => {
     setBirthDate(date);
 
-    ReactGA.event(GA4_EVENT_NAME.view_result_song_clicked, {
-      action: GA4_EVENT_ACTION.click,
-      type: GA4_EVENT_TYPE.success,
-      date,
+    sendEvent({
+      name: 'view_result_song_clicked',
+      action: 'click',
+      type: 'success',
+      value: {
+        date,
+      },
     });
   }, []);
 

src/components/main/BirthSongResult/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useCallback, useEffect, useRef } from 'react';
-import ReactGA from 'react-ga4';
 
 import { removeNullable } from '@nf-team/core';
 import { DelayRenderComponent } from '@nf-team/react';
@@ -12,8 +11,8 @@ import dayjs from 'dayjs';
 import Button from '@/components/common/Button';
 import FrameTitle from '@/components/common/FrameTitle';
 import ProgressBar from '@/components/common/ProgressBar';
+import useActivityLog from '@/hooks/useActivityLog';
 import { fetchSongResult } from '@/lib/apis/search';
-import { GA4_EVENT_ACTION, GA4_EVENT_NAME, GA4_EVENT_TYPE } from '@/lib/constants/ga4';
 import { FindSong } from '@/lib/types/song';
 import useToastStore from '@/stores/toast';
 
@@ -26,6 +25,7 @@ type Props = {
 };
 
 function BirthSongResult({ birthDate }: Props) {
+  const { sendEvent } = useActivityLog();
   const { renderToast } = useToastStore(['renderToast']);
   const resultContainerRef = useRef<HTMLDivElement>(null);
 
@@ -55,20 +55,26 @@ function BirthSongResult({ birthDate }: Props) {
 
       renderToast({ description: 'URL을 복사했습니다.', type: 'success' });
 
-      ReactGA.event(GA4_EVENT_NAME.share_link_success_clicked, {
-        action: GA4_EVENT_ACTION.click,
-        type: GA4_EVENT_TYPE.success,
-        url: shareUrl,
-        date: birthDate,
+      sendEvent({
+        name: 'share_link_success_clicked',
+        type: 'success',
+        action: 'click',
+        value: {
+          url: shareUrl,
+          date: birthDate,
+        },
       });
     } catch (error) {
       renderToast({ description: 'URL 복사에 실패했습니다.', type: 'error' });
 
-      ReactGA.event(GA4_EVENT_NAME.share_link_failed_clicked, {
-        action: GA4_EVENT_ACTION.click,
-        type: GA4_EVENT_TYPE.error,
-        error,
-        date: birthDate,
+      sendEvent({
+        name: 'share_link_failed_clicked',
+        type: 'error',
+        action: 'click',
+        value: {
+          error,
+          date: birthDate,
+        },
       });
     }
   }, [birthDate]);
@@ -81,11 +87,14 @@ function BirthSongResult({ birthDate }: Props) {
 
   useEffect(() => {
     if (isError) {
-      ReactGA.event(GA4_EVENT_NAME.result_song_load_failed, {
-        action: GA4_EVENT_ACTION.fail,
-        type: GA4_EVENT_TYPE.error,
-        errorCode: errorFindBirthSong?.code,
-        errorMessage: errorFindBirthSong?.message,
+      sendEvent({
+        name: 'result_song_load_failed',
+        type: 'error',
+        action: 'fail',
+        value: {
+          errorCode: errorFindBirthSong?.code,
+          errorMessage: errorFindBirthSong?.message,
+        },
       });
     }
   }, [isError, errorFindBirthSong]);

src/hooks/useActivityLog.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import ga4 from 'react-ga4';
+
+import { SendEvent } from '@/lib/types/event';
+
+function useActivityLog() {
+  const sendEvent = useCallback(({
+    action, name, type, value = {},
+  }: SendEvent) => {
+    ga4.event(name, {
+      action,
+      ...(type ? { type } : {}),
+      ...value,
+    });
+  }, []);
+
+  return {
+    sendEvent,
+  };
+}
+
+export default useActivityLog;

src/lib/types/event.ts

@@ -0,0 +1,16 @@
+export type EventName =
+  | 'share_link_success_clicked'
+  | 'share_link_failed_clicked'
+  | 'result_song_load_failed'
+  | 'view_result_song_clicked';
+
+export type EventAction = 'click' | 'fail';
+
+export type EventType = 'success' | 'error';
+
+export type SendEvent = {
+  name: EventName;
+  action: EventAction;
+  type?: EventType;
+  value?: Record<string, any>;
+};