fix: main 로깅 충돌 해결

Author: seong-hui

.gitignore

@@ -29,6 +29,7 @@ dist-ssr
 
 .next
 next-env.d.ts
+
 dist
 
 CLAUDE.md

src/components/card/popularCard/PopularCard.tsx

@@ -16,6 +16,7 @@ interface PopularCardProps {
   onLikeToggle: (templestayId: number) => void;
   templestayId: number;
   link: string;
+  onClick: () => void;
 }
 
 const PopularCard = ({
@@ -28,6 +29,7 @@ const PopularCard = ({
   onLikeToggle,
   templestayId,
   link,
+  onClick,
 }: PopularCardProps) => {
   const handleLikeClick = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -41,7 +43,8 @@ const PopularCard = ({
       href={link}
       className={styles.cardWrapper}
       draggable={false}
-      onDragStart={(e) => e.preventDefault()}>
+      onDragStart={(e) => e.preventDefault()}
+      onClick={onClick}>
       <div>
         <div className={styles.imgBox}>
           <Image

src/components/card/templeStayCard/TempleStayCard.tsx

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

src/components/carousel/curationCarousel/CurationCarousel.tsx

@@ -4,6 +4,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';
 
@@ -13,6 +14,8 @@ const CurationCarousel = () => {
     moveDistance: 295,
   });
 
+  const { logClickEvent } = useEventLogger('home_pick');
+
   return (
     <section ref={carouselRef} className={styles.carouselWrapper}>
       <div className={styles.emptyBox} />
@@ -30,6 +33,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

@@ -7,6 +7,7 @@ import useCarousel from '@hooks/useCarousel';
 import { useQueryClient } from '@tanstack/react-query';
 import registDragEvent from '@utils/registDragEvent';
 import { getCookie } from 'cookies-next';
+import useEventLogger from 'src/gtm/hooks/useEventLogger';
 
 import * as styles from './popularCarousel.css';
 
@@ -27,6 +28,8 @@ const PopularCarousel = ({ onRequireLogin }: PopularCarouselProps) => {
       moveDistance: 355,
     });
 
+  const { logClickEvent } = useEventLogger('home_popularity_component');
+
   if (isLoading) {
     return <ExceptLayout type="loading" />;
   }
@@ -78,6 +81,11 @@ const PopularCarousel = ({ onRequireLogin }: PopularCarouselProps) => {
                 templestayId={temple.id}
                 onLikeToggle={handleLikeToggle}
                 link={`/detail/${temple.id}`}
+                onClick={() => {
+                  logClickEvent('click_popularity_card', {
+                    label: temple.id,
+                  });
+                }}
               />
             ))}
         </div>

src/components/curation/curationCard/CurationCard.tsx

@@ -7,15 +7,18 @@ 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}
       draggable={false}
-      onDragStart={(e) => e.preventDefault()}>
+      onDragStart={(e) => e.preventDefault()}
+      onClick={onClick}>
+      
       <Image src={bgImage} alt={title} fill style={{ objectFit: 'cover' }} />
       <div className={styles.textbox}>
         <p className={styles.title}>{title}</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

@@ -43,6 +43,7 @@ const meta = {
     isLiked: false,
     templestayId: 123,
     onLikeToggle: (id) => alert(`Toggled like for ID: ${id}`),
+    onClick: () => alert('Card clicked!'),
   },
 } satisfies Meta<typeof PopularCard>;