Merge pull request #294 from JEOLLOGA/feat/#292/event-logging

[FEAT] 홈페이지 이벤트 로깅 추가

Author: seong-hui

.gitignore

@@ -26,3 +26,7 @@ dist-ssr
 *storybook.log
 
 .env
+
+.next
+next-env.d.ts
+dist

src/components/card/popularCard/PopularCard.tsx

@@ -13,6 +13,7 @@ interface PopularCardProps {
   isLiked?: boolean;
   onLikeToggle: (liked: boolean) => void;
   link: string;
+  onClick: () => void;
 }
 
 const PopularCard = ({
@@ -24,6 +25,7 @@ const PopularCard = ({
   isLiked = false,
   onLikeToggle,
   link,
+  onClick,
 }: PopularCardProps) => {
   const [liked, setLiked] = useState(isLiked);
 
@@ -42,7 +44,7 @@ const PopularCard = ({
   };
 
   return (
-    <a href={link} className={styles.cardWrapper}>
+    <a href={link} className={styles.cardWrapper} onClick={onClick}>
       <div>
         <div className={styles.imgBox} style={{ backgroundImage: `url(${templeImg})` }}>
           <RankBtn ranking={ranking} />

src/components/card/templeStayCard/TempleStayCard.tsx

@@ -66,7 +66,11 @@ const TempleStayCard = ({
     <a
       href={link}
       className={isHorizontal ? styles.horizontalContainer : styles.verticalContainer}
-      onClick={() => logClickEvent('click_card_detail')}>
+      onClick={() =>
+        logClickEvent('click_card_detail', {
+          label: String(templestayId),
+        })
+      }>
       {imgUrl ? (
         <section className={isHorizontal ? styles.horizontalImgSection : styles.verticalImgSection}>
           <img

src/components/carousel/curationCarousel/CurationCarousel.tsx

@@ -2,6 +2,7 @@ import CurationCard from '@components/curation/curationCard/CurationCard';
 import { CURATION_INFO } from '@constants/curationInfo';
 import useCarousel from '@hooks/useCarousel';
 import registDragEvent from '@utils/registDragEvent';
+import useEventLogger from 'src/gtm/hooks/useEventLogger';
 
 import * as styles from './curationCarousel.css';
 
@@ -11,6 +12,8 @@ const CurationCarousel = () => {
     moveDistance: 295,
   });
 
+  const { logClickEvent } = useEventLogger('home_pick');
+
   return (
     <section ref={carouselRef} className={styles.carouselWrapper}>
       <div className={styles.emptyBox} />
@@ -28,6 +31,11 @@ const CurationCarousel = () => {
             title={data.title}
             subtitle={data.subtitle}
             link={`/curation/${index + 1}`}
+            onClick={() => {
+              logClickEvent('click_curation_card', {
+                label: index + 1,
+              });
+            }}
           />
         ))}
       </div>

src/components/carousel/popularCarousel/PopularCarousel.tsx

@@ -6,6 +6,7 @@ import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
 import useCarousel from '@hooks/useCarousel';
 import { useQueryClient } from '@tanstack/react-query';
 import registDragEvent from '@utils/registDragEvent';
+import useEventLogger from 'src/gtm/hooks/useEventLogger';
 
 import * as styles from './popularCarousel.css';
 
@@ -28,6 +29,8 @@ const PopularCarousel = ({ onRequireLogin }: PopularCarouselProps) => {
       moveDistance: 355,
     });
 
+  const { logClickEvent } = useEventLogger('home_popularity_component');
+
   if (isLoading) {
     return <ExceptLayout type="loading" />;
   }
@@ -65,7 +68,7 @@ const PopularCarousel = ({ onRequireLogin }: PopularCarouselProps) => {
             onDragEnd: handleDragEnd,
           })}>
           {data?.rankings &&
-            data.rankings.map((rankings) => (
+            data.rankings.map((rankings, index) => (
               <PopularCard
                 key={rankings.templestayId}
                 ranking={rankings.ranking}
@@ -76,6 +79,11 @@ const PopularCarousel = ({ onRequireLogin }: PopularCarouselProps) => {
                 tag={rankings.tag}
                 onLikeToggle={(liked: boolean) => handleLikeToggle(rankings.templestayId, liked)}
                 link={`/detail/${rankings.templestayId}`}
+                onClick={() => {
+                  logClickEvent('click_popularity_card', {
+                    label: index + 1,
+                  });
+                }}
               />
             ))}
         </div>

src/components/curation/curationCard/CurationCard.tsx

@@ -5,11 +5,16 @@ interface CurationCardProps {
   title: string;
   subtitle: string;
   link: string;
+  onClick: () => void;
 }
 
-const CurationCard = ({ bgImage, title, subtitle, link }: CurationCardProps) => {
+const CurationCard = ({ bgImage, title, subtitle, link, onClick }: CurationCardProps) => {
   return (
-    <a href={link} className={styles.cardContainer} style={{ backgroundImage: `url(${bgImage})` }}>
+    <a
+      href={link}
+      className={styles.cardContainer}
+      style={{ backgroundImage: `url(${bgImage})` }}
+      onClick={onClick}>
       <div className={styles.textbox}>
         <p className={styles.title}>{title}</p>
         <p className={styles.subtitle}>{subtitle}</p>

src/stories/CurationCard.stories.ts

@@ -24,6 +24,7 @@ const meta = {
     title: '고양이 있는 절 봤어?',
     subtitle: '용문사에 있는 고양이 좀 봐. 귀엽지?',
     link: 'https://www.gototemplestay.com/',
+    onClick: () => {},
   },
 } satisfies Meta<typeof CurationCard>;
 

src/stories/PopularCard.stories.ts

@@ -42,6 +42,7 @@ const meta = {
     link: 'https://www.gototemplestay.com/',
     isLiked: false,
     onLikeToggle: () => alert('Liked'),
+    onClick: () => {},
   },
 } satisfies Meta<typeof PopularCard>;