Merge pull request #123 from Team-Senifit/release-1.0.1

GTM 1차 수정

Author: HYUN-SIUU

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 () => {};

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]);

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]);
 

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={

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);
     },

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

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],

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",

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;
+  }
+};