feat: add ga events (#52)

package.json

@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@feature-sliced/eslint-config": "^0.1.1",
+    "@types/gtag.js": "^0.0.20",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/features/resort-detail/ui/vote-dialog.tsx

@@ -43,6 +43,7 @@ const VoteDialog = ({ id, trigger }: VoteDialogProps) => {
       voteData[id.toString()] = formatDate(new Date());
       saveVoteData(voteData);
       toast.success('고마워요! 투표의 결과가 반영되었어요');
+      gtag('event', 'details_webcam_vote', { detail_type: id });
     }
   }, [id, isPositive, mutateAsync]);
 

src/features/slope/ui/slope-status-list.tsx

@@ -7,13 +7,15 @@ import { cn } from '@/shared/lib';
 import useSlopeStore from '../hooks/useSlopeStore';
 
 interface SlopeStatusListProps {
+  resortId: number;
   slopes?: Slope[];
 }
 
-const SlopeStatusList = ({ slopes }: SlopeStatusListProps) => {
+const SlopeStatusList = ({ resortId, slopes }: SlopeStatusListProps) => {
   const { selectedSlope, setSelectedSlope } = useSlopeStore();
 
   const handleSlopClick = ({ id }: { id: string }) => {
+    gtag('event', 'details_slope_slope_click', { detail_type: resortId, slope_type: id });
     setSelectedSlope(id);
   };
   return (

src/views/resort-detail/ui/resort-detail-page.tsx

@@ -2,7 +2,7 @@
 
 import { useQuery } from '@tanstack/react-query';
 import Image from 'next/image';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { toast } from 'sonner';
 import blind1 from '@public/blinds/blind_01.png';
 import { Header } from '@/widgets/header/ui';
@@ -72,11 +72,15 @@ const ResortDetailPage = ({ params }: { params: { resortId: string } }) => {
     }
   }, [isPositive, mutateAsync, params?.resortId]);
 
+  useEffect(() => {
+    gtag('event', 'page_view_details', { detail_type: params?.resortId });
+  }, []);
+
   if (!resortInfo || !resort) return;
 
   return (
     <div className={cn('size-full')}>
-      <Header resortName={resort.name} hasBackButton hasShareButton />
+      <Header resortId={resort.resortId} resortName={resort.name} hasBackButton hasShareButton />
       <ResortSummary {...resort} {...resortInfo.url} />
       <ul className={cn('relative z-10 flex size-full h-[53px] bg-white')}>
         {ResortContentTabList.map((tab) => (

src/views/resort-list/ui/resort-list-page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import Header from '@/widgets/header/ui/header';
 import ResortList from '@/widgets/resort/ui/resort-list';
 import { resortApi } from '@/entities/resort';
@@ -9,6 +10,13 @@ import { cn } from '@/shared/lib';
 const ResortListPage = () => {
   const { data: resorts } = useQuery(resortApi.resortQueries.list());
 
+  useEffect(() => {
+    gtag('event', 'home_view');
+    return () => {
+      gtag('event', 'home_exit');
+    };
+  }, []);
+
   if (!resorts) return null;
 
   return (

src/views/slope-status/ui/slope-status-page.tsx

@@ -28,7 +28,7 @@ const SlopeStatusPage = ({ resortId }: { resortId: number }) => {
           slopes={RESORT_DOMAIN[key].slopes}
         />
       </section>
-      <SlopeStatusList slopes={slopeData?.slopes} />
+      <SlopeStatusList resortId={resortId} slopes={slopeData?.slopes} />
     </main>
   );
 };

src/views/webcam/ui/webcam-mobile-map-page.tsx

@@ -23,6 +23,7 @@ const WebCamMobileMapPage = ({ resortId }: { resortId?: number }) => {
   }, []);
 
   const handleFocusSlopCamClick = ({ id, scale }: { id: string; scale: number }) => {
+    gtag('event', 'details_webcam_webcam_click', { detail_type: resortId, webcam_type: id });
     const { width, height } = containerRef.current!.getBoundingClientRect();
     const { boundedX, boundedY } = calculateWebcamPosition({
       containerPosition: { left: 0, top: 0, width, height },

src/widgets/header/ui/header.tsx

@@ -6,20 +6,24 @@ import { ChevronLeftIcon, ShareIcon } from '@/shared/icons';
 import { cn } from '@/shared/lib';
 
 interface HeaderProps {
+  resortId?: number;
   resortName?: string;
   hasBackButton?: boolean;
   hasShareButton?: boolean;
 }
 
-const Header = ({ resortName, hasBackButton, hasShareButton }: HeaderProps) => {
+const Header = ({ resortId, resortName, hasBackButton, hasShareButton }: HeaderProps) => {
   const router = useRouter();
 
   return (
     <div className={cn('relative h-16 md:h-20')}>
       {hasBackButton && (
         <button
           className={cn('absolute left-7 top-1/2 -translate-y-1/2')}
-          onClick={() => router.push('/')}
+          onClick={() => {
+            gtag('event', 'details_webcam_exit', { detail_type: resortId });
+            router.push('/');
+          }}
         >
           <ChevronLeftIcon />
         </button>

src/widgets/resort/ui/resort-card.tsx

@@ -24,7 +24,10 @@ const ResortCard = ({
         'box-border flex cursor-pointer flex-col gap-[15px] pb-4 pt-[34px] md:pb-[26px] md:pt-10',
         'transition-all hover:scale-[1.02] hover:border-2 hover:border-main-1/60 hover:pb-[15px] hover:pt-[33px] hover:md:pb-[25px] hover:md:pt-[39px]'
       )}
-      onClick={() => router.push(`/${resortId}`)}
+      onClick={() => {
+        gtag('event', 'home_click_details', { detail_type: resortId });
+        router.push(`/${resortId}`);
+      }}
     >
       <div className={cn('mx-[30px] flex flex-col items-center gap-[5px] md:mx-[42px]')}>
         <div className={cn('flex w-full items-center justify-between')}>

yarn.lock

@@ -576,6 +576,11 @@
   dependencies:
     "@tsparticles/engine" "^3.5.0"
 
+"@types/gtag.js@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/@types/gtag.js/-/gtag.js-0.0.20.tgz#e47edabb4ed5ecac90a079275958e6c929d7c08a"
+  integrity sha512-wwAbk3SA2QeU67unN7zPxjEHmPmlXwZXZvQEpbEUQuMCRGgKyE1m6XDuTUA9b6pCGb/GqJmdfMOY5LuDjJSbbg==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"