team-ppointer · gudusol · Mar 30, 2025 · Mar 29, 2025 · Mar 29, 2025 · Mar 30, 2025
diff --git a/apps/service/package.json b/apps/service/package.json
@@ -10,6 +10,7 @@
     "openapi": "pnpm dlx openapi-typescript https://dev.math-pointer.com/v3/api-docs --output ./src/types/api/schema.d.ts && prettier --write ./src/types/api/schema.d.ts"
   },
   "dependencies": {
+    "@next/third-parties": "^15.2.4",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "dayjs": "^1.11.13",

diff --git a/apps/service/src/app/(home)/page.tsx b/apps/service/src/app/(home)/page.tsx
@@ -1,10 +1,11 @@
 'use client';
-import Link from 'next/link';
 import { Button } from '@components';
 import { IcSearch } from '@svg';
 import { getHomeFeed } from '@apis';
 import dayjs from 'dayjs';
 import { DailyProgress } from '@types';
+import { useTrackEvent } from '@hooks';
+import { useRouter } from 'next/navigation';
 
 import {
   GuideButton,
@@ -15,6 +16,8 @@ import {
 } from '@/components/home';
 
 const Page = () => {
+  const router = useRouter();
+  const { trackEvent } = useTrackEvent();
   const { data } = getHomeFeed();
   const homeFeedData = data?.data;
 
@@ -26,6 +29,11 @@ const Page = () => {
   const progress: DailyProgress[] =
     dailyProgresses?.map((progress) => progress.progressStatus ?? 'NOT_STARTED') ?? [];
 
+  const handleClickAllProblem = () => {
+    trackEvent('home_all_problem_button_click');
+    router.push('/problem/calandar');
+  };
+
   return (
     <>
       <HomeHeader name='홍길동' grade={2} />
@@ -43,12 +51,10 @@ const Page = () => {
         <ProblemSwiper problemSets={problemSets ?? []} />
       </div>
       <footer className='bg-background mt-[2.4rem] px-[2rem] pb-[3.3rem]'>
-        <Link href='/problem/calandar'>
-          <Button variant='light'>
-            <IcSearch width={24} height={24} />
-            전체 문제 보기
-          </Button>
-        </Link>
+        <Button variant='light' onClick={handleClickAllProblem}>
+          <IcSearch width={24} height={24} />
+          전체 문제 보기
+        </Button>
       </footer>
     </>
   );

diff --git a/apps/service/src/app/layout.tsx b/apps/service/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import { Suspense } from 'react';
 import type { Metadata, Viewport } from 'next';
+import { GoogleAnalytics } from '@next/third-parties/google';
 
 import Providers from './providers';
 
@@ -57,6 +58,7 @@ export default function RootLayout({
           </Suspense>
           <div id='modal'></div>
         </Providers>
+        <GoogleAnalytics gaId='G-7C9ETDHB0G' />
       </body>
     </html>
   );

diff --git a/apps/service/src/app/problem/solve/[publishId]/[problemId]/SolveButtonsClient.tsx b/apps/service/src/app/problem/solve/[publishId]/[problemId]/SolveButtonsClient.tsx
@@ -2,6 +2,7 @@
 import { SolveButton } from '@components';
 import { getChildData, postChildProblemSubmit, postProblemSubmit } from '@apis';
 import { useRouter } from 'next/navigation';
+import { useTrackEvent } from '@hooks';
 
 interface SolveButtonsClientProps {
   publishId: string;
@@ -10,15 +11,18 @@ interface SolveButtonsClientProps {
 
 const SolveButtonsClient = ({ publishId, problemId }: SolveButtonsClientProps) => {
   const router = useRouter();
+  const { trackEvent } = useTrackEvent();
   const { data } = getChildData(publishId, problemId);
   const childProblemId = data?.data?.childProblemIds[0].toString();
 
   const handleClickDirect = async () => {
+    trackEvent('problem_solve_direct_button_click');
     await postProblemSubmit(publishId, problemId);
     router.push(`/problem/solve/${publishId}/${problemId}/main-problem`);
   };
 
   const handleClickStep = async () => {
+    trackEvent('problem_solve_step_button_click');
     await postChildProblemSubmit(publishId, problemId);
     router.push(`/problem/solve/${publishId}/${problemId}/child-problem/${childProblemId}`);
   };

diff --git a/...ice/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx b/...ice/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx
@@ -15,7 +15,7 @@ import {
   TwoButtonModalTemplate,
   AnswerModalTemplate,
 } from '@components';
-import { useInvalidate, useModal } from '@hooks';
+import { useInvalidate, useModal, useTrackEvent } from '@hooks';
 import { components } from '@schema';
 
 import { useChildProblemContext } from '@/hooks/problem';
@@ -29,6 +29,7 @@ const Page = () => {
     childProblemId: string;
   }>();
   const router = useRouter();
+  const { trackEvent } = useTrackEvent();
   const { childProblemLength, mainProblemImageUrl, onPrev, onNext } = useChildProblemContext();
   const { invalidateAll } = useInvalidate();
 
@@ -72,6 +73,11 @@ const Page = () => {
   const isSolved = status === 'CORRECT' || status === 'RETRY_CORRECT';
   const isSubmitted = status === 'CORRECT' || status === 'RETRY_CORRECT' || status === 'INCORRECT';
 
+  const handleClickShowMainProblem = () => {
+    trackEvent('problem_child_solve_show_main_problem_modal_button_click');
+    router.push(`/image-modal?imageUrl=${mainProblemImageUrl}`);
+  };
+
   const handleSubmitAnswer: SubmitHandler<{ answer: string }> = async ({ answer }) => {
     const { data } = await putChildProblemSubmit(publishId, childProblemId, answer);
     const resultData = data?.data;
@@ -83,12 +89,49 @@ const Page = () => {
     }
   };
 
+  const handleClickPrev = () => {
+    trackEvent('problem_child_solve_footer_prev_button_click', {
+      buttonLabel: prevButtonLabel,
+    });
+    onPrev();
+  };
+
+  const handleClickNext = () => {
+    trackEvent('problem_child_solve_footer_next_button_click', {
+      buttonLabel: nextButtonLabel,
+    });
+    onNext();
+  };
+
+  const handleClickFooterSkipButton = () => {
+    trackEvent('problem_child_solve_footer_skip_button_click', {
+      buttonLabel: nextButtonLabel,
+    });
+    openSkipModal();
+  };
+
+  const handleClickCloseCheckModal = () => {
+    trackEvent('problem_child_solve_check_modal_close_button_click');
+    closeModal();
+  };
+
+  const handleClickNextProblemButton = () => {
+    trackEvent('problem_child_solve_check_modal_next_problem_button_click');
+    onNext();
+  };
+
   const handleClickShowAnswer = () => {
+    trackEvent('problem_child_solve_check_modal_show_answer_button_click');
     closeModal();
     openAnswerModal();
   };
+  const handleClickCloseSkipModal = () => {
+    trackEvent('problem_child_solve_skip_modal_close_button_click');
+    closeSkipModal();
+  };
 
-  const handleSkip = async () => {
+  const handleClickSkipButton = async () => {
+    trackEvent('problem_child_solve_modal_skip_button_click');
     await putChildProblemSkip(publishId, childProblemId);
     invalidateAll();
     onNext();
@@ -109,10 +152,7 @@ const Page = () => {
           />
 
           <div className='mt-[0.6rem] mb-[0.4rem] flex items-center justify-end'>
-            <SmallButton
-              variant='underline'
-              sizeType='small'
-              onClick={() => router.push(`/image-modal?imageUrl=${mainProblemImageUrl}`)}>
+            <SmallButton variant='underline' sizeType='small' onClick={handleClickShowMainProblem}>
               메인 문제 다시보기
             </SmallButton>
           </div>
@@ -137,15 +177,15 @@ const Page = () => {
       <NavigationFooter
         prevLabel={prevButtonLabel}
         nextLabel={nextButtonLabel}
-        onClickPrev={onPrev}
-        onClickNext={isSubmitted ? onNext : () => openSkipModal()}
+        onClickPrev={handleClickPrev}
+        onClickNext={isSubmitted ? handleClickNext : handleClickFooterSkipButton}
       />
 
       <PortalModal isOpen={isOpen} onClose={closeModal}>
         <ChildAnswerCheckModalTemplate
           result={result}
-          onClose={closeModal}
-          handleClickButton={onNext}
+          onClose={handleClickCloseCheckModal}
+          handleClickButton={handleClickNextProblemButton}
           handleClickShowAnswer={handleClickShowAnswer}
         />
       </PortalModal>
@@ -160,8 +200,8 @@ const Page = () => {
           text={`제출하지 않은 새끼 문제는\n오답 처리 돼요!`}
           topButtonText='다시 풀어보기'
           bottomButtonText='오답 처리 하고 넘어가기'
-          handleClickTopButton={closeSkipModal}
-          handleClickBottomButton={handleSkip}
+          handleClickTopButton={handleClickCloseSkipModal}
+          handleClickBottomButton={handleClickSkipButton}
         />
       </PortalModal>
     </>

diff --git a/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx b/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx
@@ -14,7 +14,7 @@ import {
   SmallButton,
   NavigationFooter,
 } from '@components';
-import { useInvalidate, useModal } from '@hooks';
+import { useInvalidate, useModal, useTrackEvent } from '@hooks';
 import { ProblemStatus } from '@types';
 
 import { useChildProblemContext } from '@/hooks/problem';
@@ -36,6 +36,7 @@ const statusColor: Record<string, 'green' | 'red' | 'gray'> = {
 const Page = () => {
   const { publishId, problemId } = useParams<{ publishId: string; problemId: string }>();
   const router = useRouter();
+  const { trackEvent } = useTrackEvent();
   const { childProblemLength } = useChildProblemContext();
   const { invalidateAll } = useInvalidate();
 
@@ -80,6 +81,33 @@ const Page = () => {
     }
   };
 
+  const handleClickStepSolve = () => {
+    trackEvent('problem_main_solve_step_solve_button_click');
+    router.push(`/problem/solve/${publishId}/${problemId}`);
+  };
+
+  const handleClickPrev = () => {
+    trackEvent('problem_main_solve_footer_prev_button_click', {
+      buttonLabel: prevButtonLabel,
+    });
+    router.back();
+  };
+
+  const handleClickNext = () => {
+    trackEvent('problem_main_solve_footer_show_commentary_button_click');
+    router.push(`/report/${publishId}/${problemId}/analysis`);
+  };
+
+  const handleClickSolveAgain = () => {
+    trackEvent('problem_main_solve_check_modal_solve_again_button_click');
+    closeModal();
+  };
+
+  const handleClickShowReport = () => {
+    trackEvent('problem_main_solve_check_modal_commentary_button_click');
+    router.push(`/report/${publishId}/${problemId}/analysis`);
+  };
+
   return (
     <>
       <ProgressHeader progress={100} />
@@ -97,10 +125,7 @@ const Page = () => {
 
           {isDirect && (
             <div className='mt-[0.6rem] flex items-center justify-end'>
-              <SmallButton
-                variant='underline'
-                sizeType='small'
-                onClick={() => router.push(`/problem/solve/${publishId}/${problemId}`)}>
+              <SmallButton variant='underline' sizeType='small' onClick={handleClickStepSolve}>
                 단계별로 풀어보기
               </SmallButton>
             </div>
@@ -144,17 +169,15 @@ const Page = () => {
       <NavigationFooter
         prevLabel={prevButtonLabel}
         nextLabel={isSubmitted ? nextButtonLabel : undefined}
-        onClickPrev={() => router.back()}
-        onClickNext={
-          isSubmitted ? () => router.push(`/report/${publishId}/${problemId}/analysis`) : undefined
-        }
+        onClickPrev={handleClickPrev}
+        onClickNext={isSubmitted ? handleClickNext : undefined}
       />
 
       <PortalModal isOpen={isOpen} onClose={closeModal}>
         <MainAnswerCheckModalTemplate
           result={result}
-          onClose={closeModal}
-          handleClickButton={() => router.push(`/report/${publishId}/${problemId}/analysis`)}
+          onClose={handleClickSolveAgain}
+          handleClickButton={handleClickShowReport}
         />
       </PortalModal>
     </>

diff --git a/apps/service/src/app/report/[publishId]/[problemId]/advanced/page.tsx b/apps/service/src/app/report/[publishId]/[problemId]/advanced/page.tsx
@@ -1,27 +1,45 @@
 'use client';
 import { NavigationFooter, SmallButton, ProgressHeader } from '@components';
 import { useParams, useRouter } from 'next/navigation';
+import { useTrackEvent } from '@hooks';
 
 import { useReportContext } from '@/hooks/report';
 
 const Page = () => {
   const { publishId, problemId } = useParams();
   const router = useRouter();
+  const { trackEvent } = useTrackEvent();
 
   const { problemNumber, seniorTipImageUrl, prescription } = useReportContext();
 
   const mainImageUrl = prescription?.mainProblem?.imageUrl;
 
+  const handleClickShowMainProblem = () => {
+    trackEvent('report_advanced_show_main_problem_button_click');
+    router.push(`/image-modal?imageUrl=${mainImageUrl}`);
+  };
+
+  const handleClickPrev = () => {
+    trackEvent('report_advanced_prev_button_click', {
+      buttonLabel: '해설',
+    });
+    router.push(`/report/${publishId}/${problemId}/analysis`);
+  };
+
+  const handleClickNext = () => {
+    trackEvent('report_advanced_next_button_click', {
+      buttonLabel: '포인팅',
+    });
+    router.push(`/report/${publishId}/${problemId}/prescription`);
+  };
+
   return (
     <>
       <ProgressHeader progress={66} />
       <main className='px-[2rem] py-[8rem]'>
         <div className='flex items-center justify-between'>
           <h1 className='font-bold-18 text-main my-[0.8rem]'>한 걸음 더</h1>
-          <SmallButton
-            variant='underline'
-            sizeType='small'
-            onClick={() => router.push(`/image-modal?imageUrl=${mainImageUrl}`)}>
+          <SmallButton variant='underline' sizeType='small' onClick={handleClickShowMainProblem}>
             메인 문제 {problemNumber}번 다시 보기
           </SmallButton>
         </div>
@@ -35,8 +53,8 @@ const Page = () => {
         <NavigationFooter
           prevLabel='해설'
           nextLabel='포인팅'
-          onClickPrev={() => router.push(`/report/${publishId}/${problemId}/analysis`)}
-          onClickNext={() => router.push(`/report/${publishId}/${problemId}/prescription`)}
+          onClickPrev={handleClickPrev}
+          onClickNext={handleClickNext}
         />
       </main>
     </>