Merge pull request #46 from SWYP-mingling/chore/ga4-event

kangdy25 · web-flow · commit e96a30505e56 · 2026-03-02T00:24:32.000+09:00
diff --git a/app/create/page.tsx b/app/create/page.tsx
@@ -145,7 +145,7 @@ export default function Page() {
 
         // --- [GA4 이벤트 전송 로직 추가] ---
         if (typeof window !== 'undefined') {
-          // 1. 브라우저 식별자(browser_id) 확인 및 생성 (Get or Create)
+          // 브라우저 식별자(browser_id) 확인 및 생성 (Get or Create)
           let browserId = localStorage.getItem('browser_id');
           if (!browserId) {
             // 없으면 새로 발급해서 브라우저에 각인!
@@ -154,7 +154,10 @@ export default function Page() {
             localStorage.setItem('browser_id', browserId);
           }
 
-          // 2. 방 만든 브라우저가 누구인지 식별자를 담아서 이벤트 전송
+          // 방장임을 증명하는 마패(로컬스토리지) 발급!
+          localStorage.setItem(`is_host_${meetingId}`, 'true');
+
+          // 방 만든 브라우저가 누구인지 식별자를 담아서 이벤트 전송
           sendGAEvent('event', 'url_created', {
             meeting_url_id: meetingId,
             participant_count_expected: capacity,
diff --git a/app/meeting/[id]/page.tsx b/app/meeting/[id]/page.tsx
@@ -15,6 +15,7 @@ import MeetingInfoSection from '@/components/meeting/MeetingInfoSection';
 import { useToast } from '@/hooks/useToast';
 import Toast from '@/components/ui/toast';
 import { getMeetingUserId, removeMeetingUserId } from '@/lib/storage';
+import { sendGAEvent } from '@next/third-parties/google';
 
 interface StationInfo {
   line: string;
@@ -73,8 +74,33 @@ export default function Page() {
     }
   }, [isError, error, id]);
 
+  // GA4 전송 전용 도우미 함수
+  const trackShareEvent = () => {
+    if (typeof window !== 'undefined') {
+      let browserId = localStorage.getItem('browser_id');
+      if (!browserId) {
+        browserId = `bid_${Math.random().toString(36).substring(2, 15)}${Date.now().toString(36)}`;
+        localStorage.setItem('browser_id', browserId);
+      }
+
+      sendGAEvent('event', 'share_link', {
+        meeting_url_id: id,
+        location: 'creation_complete',
+        browser_id: browserId,
+      });
+    }
+  };
+
+  // 공유하기 버튼 전용 핸들러
   const handleShareClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     openModal('SHARE', { meetingId: id }, e);
+    trackShareEvent();
+  };
+
+  // 재촉하기 버튼 전용 핸들러
+  const handleNudgeClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    openModal('NUDGE', { meetingId: id }, e);
+    trackShareEvent();
   };
 
   const handleSelectStation = (stationName: string | null) => {
@@ -109,6 +135,23 @@ export default function Page() {
         {
           onSuccess: () => {
             refetch();
+
+            if (typeof window !== 'undefined') {
+              let browserId = localStorage.getItem('browser_id');
+              if (!browserId) {
+                browserId = `bid_${Math.random().toString(36).substring(2, 15)}${Date.now().toString(36)}`;
+                localStorage.setItem('browser_id', browserId);
+              }
+
+              const isHost = localStorage.getItem(`is_host_${id}`) === 'true';
+              const userRole = isHost ? 'host' : 'participant';
+
+              sendGAEvent('event', 'departure_location_submitted', {
+                meeting_url_id: id,
+                user_cookie_id: browserId,
+                role: userRole,
+              });
+            }
           },
           onError: () => {
             setErrorMessage('출발지 등록에 실패했습니다.');
@@ -244,7 +287,7 @@ export default function Page() {
             <button
               type="button"
               className="bg-blue-5 hover:bg-blue-8 flex h-21 w-full cursor-pointer items-center justify-between rounded p-4 text-left text-white transition-transform active:scale-[0.98]"
-              onClick={(e) => openModal('NUDGE', { meetingId: id }, e)}
+              onClick={handleNudgeClick}
             >
               <div className="flex flex-col gap-0.5">
                 <span className="text-lg leading-[1.44] font-semibold">
diff --git a/app/result/[id]/page.tsx b/app/result/[id]/page.tsx
@@ -11,6 +11,7 @@ import { getMeetingUserId } from '@/lib/storage';
 import { useQueryClient } from '@tanstack/react-query';
 import Loading from '@/components/loading/loading';
 import { getRandomHexColor } from '@/lib/color';
+import { sendGAEvent } from '@next/third-parties/google';
 
 export default function Page() {
   const queryClient = useQueryClient();
@@ -159,6 +160,26 @@ export default function Page() {
     router.replace(`/meeting/${id}`);
   };
 
+  const handleResultShareClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    // 1. GA 데이터 먼저 전송!
+    if (typeof window !== 'undefined') {
+      let browserId = localStorage.getItem('browser_id');
+      if (!browserId) {
+        browserId = `bid_${Math.random().toString(36).substring(2, 15)}${Date.now().toString(36)}`;
+        localStorage.setItem('browser_id', browserId);
+      }
+
+      sendGAEvent('event', 'share_link', {
+        meeting_url_id: id,
+        location: 'place_list', // PM님 명세: 결과 리스트 페이지
+        browser_id: browserId,
+      });
+    }
+
+    // 2. 안전하게 전송 후 모달 띄우기
+    openModal('SHARE', { meetingId: id }, e);
+  };
+
   useEffect(() => {
     clearRelatedCache();
 
@@ -266,7 +287,7 @@ export default function Page() {
                           <div
                             key={result.id}
                             onClick={() => setSelectedResultId(result.id)}
-                            className={`flex cursor-pointer flex-col gap-3.75 rounded-[4px] border bg-white p-5 ${
+                            className={`flex cursor-pointer flex-col gap-3.75 rounded border bg-white p-5 ${
                               selectedResultId === result.id
                                 ? 'border-blue-5 border-2'
                                 : 'border-gray-2 hover:bg-gray-1'
@@ -296,7 +317,7 @@ export default function Page() {
                             <div className="flex gap-2">
                               <button
                                 onClick={handleRecommendClick}
-                                className="bg-gray-8 hover:bg-gray-9 h-10 flex-1 cursor-pointer rounded-[4px] text-[15px] font-normal text-white transition-colors"
+                                className="bg-gray-8 hover:bg-gray-9 h-10 flex-1 cursor-pointer rounded text-[15px] font-normal text-white transition-colors"
                                 type="button"
                               >
                                 주변 장소 추천
@@ -314,7 +335,7 @@ export default function Page() {
                                     e
                                   );
                                 }}
-                                className="bg-gray-1 hover:bg-gray-2 text-blue-5 h-10 flex-1 cursor-pointer rounded-[4px] text-[15px] font-normal transition-colors"
+                                className="bg-gray-1 hover:bg-gray-2 text-blue-5 h-10 flex-1 cursor-pointer rounded text-[15px] font-normal transition-colors"
                                 type="button"
                               >
                                 환승 경로 보기
@@ -328,7 +349,7 @@ export default function Page() {
                 </div>
 
                 <button
-                  onClick={(e) => openModal('SHARE', { meetingId: id }, e)}
+                  onClick={handleResultShareClick}
                   className="bg-blue-5 hover:bg-blue-8 absolute right-5 bottom-0 left-5 flex h-12 items-center justify-center gap-2.5 rounded text-lg font-semibold text-white transition-transform active:scale-[0.98] md:right-0 md:left-0"
                 >
                   <Image src="/icon/share-white.svg" alt="공유 아이콘" width={20} height={20} />
diff --git a/components/join/joinForm.tsx b/components/join/joinForm.tsx
@@ -10,6 +10,7 @@ import { useIsLoggedIn } from '@/hooks/useIsLoggedIn';
 import { setMeetingUserId } from '@/lib/storage';
 import Image from 'next/image';
 import { getRandomHexColor } from '@/lib/color';
+import { sendGAEvent } from '@next/third-parties/google';
 
 interface JoinFormProps {
   meetingId: string;
@@ -65,6 +66,28 @@ export default function JoinForm({ meetingId }: JoinFormProps) {
     e.preventDefault();
     if (!isFormValid || !meetingId) return;
 
+    // ⭐️ 1. 비즈니스 로직 실행 전 GA 이벤트 선(先) 전송!
+    if (typeof window !== 'undefined') {
+      let browserId = localStorage.getItem('browser_id');
+      if (!browserId) {
+        browserId = `bid_${Math.random().toString(36).substring(2, 15)}${Date.now().toString(36)}`;
+        localStorage.setItem('browser_id', browserId);
+      }
+
+      // ⭐️ 개발자님의 완벽한 엣지케이스 방어 로직!
+      // 로컬스토리지에 '이 방의 생성자(방장)'라는 징표가 있는지 확인
+      const isHost = localStorage.getItem(`is_host_${meetingId}`) === 'true';
+      const userRole = isHost ? 'host' : 'participant';
+
+      sendGAEvent('event', 'participant_registration', {
+        meeting_url_id: meetingId,
+        user_cookie_id: browserId, // 생성 때 썼던 그 browserId와 일치하게 됨!
+        role: userRole, // 완벽하게 방장/참여자 구분 완료
+        remember_me: isRemembered ? 'yes' : 'no',
+      });
+    }
+
+    // ⭐️ 2. 기존 참여 API 호출 로직
     try {
       // @ts-ignore
       const result = await participantEnter.mutateAsync({
diff --git a/components/share/shareContent.tsx b/components/share/shareContent.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import Toast from '@/components/ui/toast';
 import { useShareMeeting } from '@/hooks/api/query/useShareMeeting';
 import Image from 'next/image';
+import { sendGAEvent } from '@next/third-parties/google';
 
 interface ShareContentProps {
   id: string;
@@ -14,6 +15,28 @@ export default function ShareContent({ id }: ShareContentProps) {
   // useParams() 대신 부모(Page)에서 전달받은 id 사용
   const { shareUrl, isError, isLoading, handleCopyLink, isVisible } = useShareMeeting(id);
 
+  // 복사 버튼 클릭 시 실행할 래퍼 함수 생성
+  const handleCopyClickWithGA = () => {
+    handleCopyLink();
+
+    // 2. GA4 이벤트 전송 로직 인라인 처리
+    if (typeof window !== 'undefined') {
+      // 브라우저 식별자(browser_id) 확인 및 생성 (Get or Create)
+      let browserId = localStorage.getItem('browser_id');
+      if (!browserId) {
+        const randomStr = Math.random().toString(36).substring(2, 15);
+        browserId = `bid_${randomStr}${Date.now().toString(36)}`;
+        localStorage.setItem('browser_id', browserId);
+      }
+
+      sendGAEvent('event', 'share_link', {
+        meeting_url_id: id,
+        location: 'creation_complete',
+        browser_id: browserId,
+      });
+    }
+  };
+
   if (isError) notFound();
   if (isLoading) return null;
 
@@ -44,7 +67,7 @@ export default function ShareContent({ id }: ShareContentProps) {
         />
         <button
           type="button"
-          onClick={handleCopyLink}
+          onClick={handleCopyClickWithGA}
           className="bg-gray-1 text-gray-6 border-gray-1 hover:bg-gray-2 cursor-pointer rounded-r-sm border px-3.5 py-3 text-sm font-semibold whitespace-nowrap transition-colors"
         >
           복사
