From 291a2cdfff7b29754568b5fd75a61bc701df5015 Mon Sep 17 00:00:00 2001
From: HYUN-SIUU <hyunsoo6542@gmail.com>
Date: Fri, 6 Feb 2026 14:29:10 +0900
Subject: [PATCH] =?UTF-8?q?GTM=201=EC=B0=A8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(plain)/exercise/class/[id]/page.tsx  |  2 +-
 .../class/[id]/panel/WorkoutVideoPlayer.tsx   |  2 +-
 .../(exercise)/exercise/done/[id]/page.tsx    |  2 +-
 .../(exercise)/panel/ThematicRoutine.tsx      |  2 +-
 .../record/panel/SurveyActionButton.tsx       |  7 +++++++
 .../record/panel/SurveySection.tsx            | 11 ++++++++---
 src/app/layout.tsx                            |  7 +++----
 src/components/Carousel.tsx                   |  4 ++--
 src/utils/gtm.ts                              | 19 ++++++++++++++++---
 9 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/app/(plain)/exercise/class/[id]/page.tsx b/src/app/(plain)/exercise/class/[id]/page.tsx
index 93d36a2..a77f62a 100644
--- a/src/app/(plain)/exercise/class/[id]/page.tsx
+++ b/src/app/(plain)/exercise/class/[id]/page.tsx
@@ -23,7 +23,7 @@ const Page = () => {
     else if (!selectedProgram) {
       router.push("/");
     } else if (!startFired.current) {
-      pushGtmEvent("click_Start", getGtmClassType(type));
+      pushGtmEvent("class_Start", getGtmClassType(type));
       startFired.current = true;
     }
     return () => {};
diff --git a/src/app/(plain)/exercise/class/[id]/panel/WorkoutVideoPlayer.tsx b/src/app/(plain)/exercise/class/[id]/panel/WorkoutVideoPlayer.tsx
index 4ecef8e..83b1aab 100644
--- a/src/app/(plain)/exercise/class/[id]/panel/WorkoutVideoPlayer.tsx
+++ b/src/app/(plain)/exercise/class/[id]/panel/WorkoutVideoPlayer.tsx
@@ -168,7 +168,7 @@ export default function WorkoutVideoPlaylist({
   useEffect(() => {
     const halfDuration = Math.floor(duration * 30);
     if (!progressFired.current && seconds >= halfDuration && halfDuration > 0) {
-      pushGtmEvent("click_Progress", getGtmClassType(type));
+      pushGtmEvent("class_Progress", getGtmClassType(type));
       progressFired.current = true;
     }
   }, [seconds, duration, type]);
diff --git a/src/app/(with-container)/(exercise)/exercise/done/[id]/page.tsx b/src/app/(with-container)/(exercise)/exercise/done/[id]/page.tsx
index dda980a..e75d59b 100644
--- a/src/app/(with-container)/(exercise)/exercise/done/[id]/page.tsx
+++ b/src/app/(with-container)/(exercise)/exercise/done/[id]/page.tsx
@@ -40,7 +40,7 @@ const Page = () => {
   useEffect(() => {
     mutate();
     if (selectedProgram && seconds >= selectedProgram.duration * 60) {
-      pushGtmEvent("click_Finish", getGtmClassType(type));
+      pushGtmEvent("class_Finish", getGtmClassType(type));
     }
   }, [mutate, selectedProgram, seconds, type]);
 
diff --git a/src/app/(with-container)/(exercise)/panel/ThematicRoutine.tsx b/src/app/(with-container)/(exercise)/panel/ThematicRoutine.tsx
index 39bb152..64a64aa 100644
--- a/src/app/(with-container)/(exercise)/panel/ThematicRoutine.tsx
+++ b/src/app/(with-container)/(exercise)/panel/ThematicRoutine.tsx
@@ -10,7 +10,7 @@ const ThematicRoutine = ({ authenticated }: { authenticated: boolean }) => {
   const { isPhone } = useMedia();
   return (
     <Button
-      id={"Click_Topic"}
+      id={"click_Topic"}
       fullWidth
       component={Link}
       href={
diff --git a/src/app/(with-container)/record/panel/SurveyActionButton.tsx b/src/app/(with-container)/record/panel/SurveyActionButton.tsx
index e26f44e..00ba00d 100644
--- a/src/app/(with-container)/record/panel/SurveyActionButton.tsx
+++ b/src/app/(with-container)/record/panel/SurveyActionButton.tsx
@@ -9,6 +9,7 @@ import type { Elder, ElderUpdatePayload } from "./SurveyElderCard";
 import { axiosClient } from "@/apis/axiosClient";
 import { isAuthError } from "@/apis/errors";
 import SenifitDialog from "@/components/SenifitDialog";
+import { getGtmClassTypeFromRoutineKind, pushGtmEvent } from "@/utils/gtm";
 
 type Mode = "write" | "detail" | "update";
 type ConfirmKind = null | "editConfirm" | "saveConfirm";
@@ -30,6 +31,7 @@ type Props = {
   gap?: number;
   alignRight?: boolean;
   mobileStepper?: StepperProps;
+  routineKind?: string;
 };
 
 export default function SurveyActionButton({
@@ -41,6 +43,7 @@ export default function SurveyActionButton({
   gap = 2,
   alignRight = true,
   mobileStepper,
+  routineKind,
 }: Props) {
   const router = useRouter();
   const qc = useQueryClient();
@@ -90,6 +93,10 @@ export default function SurveyActionButton({
       await axiosClient.put(`/records/${recordId}/surveys`, payload);
     },
     onSuccess: () => {
+      pushGtmEvent(
+        "record_Finish",
+        getGtmClassTypeFromRoutineKind(routineKind),
+      );
       qc.invalidateQueries({ queryKey: ["surveys", recordId] });
       router.push(afterSaveHref);
     },
diff --git a/src/app/(with-container)/record/panel/SurveySection.tsx b/src/app/(with-container)/record/panel/SurveySection.tsx
index 2e47500..871bf10 100644
--- a/src/app/(with-container)/record/panel/SurveySection.tsx
+++ b/src/app/(with-container)/record/panel/SurveySection.tsx
@@ -58,7 +58,9 @@ export default function SurveySection({ recordId, mode }: Props) {
   );
 
   // GET
-  const { data: elders = [] } = useSuspenseQuery<Elder[]>({
+  const {
+    data: { elders, routineKind } = { elders: [], routineKind: undefined },
+  } = useSuspenseQuery<{ elders: Elder[]; routineKind?: string }>({
     queryKey: ["surveys", recordId],
     queryFn: async () => {
       // 서버 환경(SSR)에서 상대 경로 fetch가 실패하는 문제를 해결하기 위해 BASE_URL 처리
@@ -77,6 +79,8 @@ export default function SurveySection({ recordId, mode }: Props) {
 
       console.log("GET /api/records/" + recordId + "/surveys response:", json);
 
+      const routineKind = json?.data?.record?.routineKind;
+
       const reverseTroublePartMap: Record<string, string> = {
         workout_kinds_calisthenic_targets_shoulders: "어깨",
         workout_kinds_calisthenic_targets_arms: "팔",
@@ -85,7 +89,7 @@ export default function SurveySection({ recordId, mode }: Props) {
         workout_kinds_calisthenic_targets_abs: "배",
       };
 
-      const surveys = (json?.data?.surveys ?? []).map((s: unknown) => {
+      const surveyList = (json?.data?.surveys ?? []).map((s: unknown) => {
         const raw = s as {
           troubleParts?: (string | { target: string })[];
           memo?: string;
@@ -106,7 +110,7 @@ export default function SurveySection({ recordId, mode }: Props) {
         };
       });
 
-      return surveys as Elder[];
+      return { elders: surveyList as Elder[], routineKind };
     },
   });
 
@@ -253,6 +257,7 @@ export default function SurveySection({ recordId, mode }: Props) {
         mode={mode}
         elders={elders}
         pending={pending}
+        routineKind={routineKind}
         afterSaveHref={"/record"}
         mobileStepper={
           isPhone
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index dad8789..72a683b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -8,7 +8,7 @@ import timezone from "dayjs/plugin/timezone";
 import QueryProviders from "./panel/QueryClientProvider";
 import LoadingFallback from "./panel/LoadingFallback";
 import Toast from "@/components/Toast";
-import Script from "next/script";
+// import Script from "next/script";
 
 // dayjs locale 설정, time zone 설정
 dayjs.locale("ko");
@@ -58,9 +58,8 @@ export default function RootLayout({
     <html lang={"ko"}>
       <head>
         {/* Google Tag Manager */}
-        <Script
-          id={"google-tag-manager"}
-          strategy={"afterInteractive"}
+        {/* eslint-disable-next-line @next/next/next-script-for-ga */}
+        <script
           dangerouslySetInnerHTML={{
             __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
index e331677..e73bbd4 100644
--- a/src/components/Carousel.tsx
+++ b/src/components/Carousel.tsx
@@ -48,7 +48,7 @@ const Carousel = <T,>({
     <Box ref={containerRef} sx={{ position: "relative", overflow: "hidden" }}>
       {/* 이전 버튼 */}
       <IconButton
-        id={"click_click_Carousel"}
+        id={"click_Carousel"}
         sx={{
           ...iconButtonStyle,
           left: "1rem",
@@ -65,7 +65,7 @@ const Carousel = <T,>({
 
       {/* 다음 버튼 */}
       <IconButton
-        id={"click_click_Carousel"}
+        id={"click_Carousel"}
         sx={{
           ...iconButtonStyle,
           right: "1rem",
diff --git a/src/utils/gtm.ts b/src/utils/gtm.ts
index b3d8671..fdee9e3 100644
--- a/src/utils/gtm.ts
+++ b/src/utils/gtm.ts
@@ -1,9 +1,9 @@
 export type GTM_EVENT_TYPE =
   | "click_classStart"
-  | "click_Start"
-  | "click_Progress"
+  | "class_Start"
+  | "class_Progress"
   | "click_classStop"
-  | "click_Finish"
+  | "class_Finish"
   | "record_Finish"
   | "login_Success"
   | "customized_optionError";
@@ -43,3 +43,16 @@ export const getGtmClassType = (type: unknown) => {
   if (Array.isArray(type) && type[0] === "thematic") return "주제별";
   return undefined;
 };
+
+export const getGtmClassTypeFromRoutineKind = (routineKind?: string) => {
+  switch (routineKind) {
+    case "workout_programs_selections_byPopular":
+      return "인기";
+    case "workout_programs_selections_byPersonal":
+      return "맞춤형";
+    case "workout_programs_selections_byTarget":
+      return "주제별";
+    default:
+      return undefined;
+  }
+};