Merge pull request #47 from SWYP-mingling/feature/GA-Evaluation-Metric

Author: kangdy25

app/meeting/[id]/page.tsx

@@ -16,7 +16,6 @@ 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;
   name: string;
@@ -170,6 +169,21 @@ export default function Page() {
       show();
       return;
     }
+
+    if (typeof window !== 'undefined') {
+      const calculationType = id ? 'recalculated' : 'first';
+      const isHost = localStorage.getItem(`is_host_${id}`) === 'true';
+      const userRole = isHost ? 'host' : 'participant';
+      const browserId = localStorage.getItem('browser_id');
+
+      sendGAEvent('event', 'midpoint_calculated', {
+        meeting_url_id: id,
+        browser_id: browserId,
+        role: userRole,
+        calculation_type: calculationType,
+      });
+    }
+
     router.push(`/result/${id}`);
   };
 

app/recommend/page.tsx

@@ -6,6 +6,7 @@ import Image from 'next/image';
 import KakaoMapRecommend from '@/components/map/kakaoMapRecommend';
 import { useRecommend } from '@/hooks/api/query/useRecommend';
 import { useCheckMeeting } from '@/hooks/api/query/useCheckMeeting';
+import { sendGAEvent } from '@next/third-parties/google';
 
 function RecommendContent() {
   const router = useRouter();
@@ -139,15 +140,49 @@ function RecommendContent() {
     router.back();
   };
 
-  const handleOpenKakaoMap = (e: React.MouseEvent, placeUrl?: string) => {
+  const handleOpenKakaoMap = (
+    e: React.MouseEvent,
+    placeUrl?: string,
+    place?: (typeof places)[0]
+  ) => {
     e.stopPropagation();
+
+    // 카카오맵에서 보기 클릭 시 GA 전송 (external_map_opened)
+    if (typeof window !== 'undefined' && meetingId && place) {
+      const browserId = localStorage.getItem('browser_id');
+      const isHost = localStorage.getItem(`is_host_${meetingId}`) === 'true';
+      const userRole = isHost ? 'host' : 'participant';
+      const candidateId = `place_${String(place.id).padStart(2, '0')}`;
+
+      sendGAEvent('event', 'external_map_opened', {
+        meeting_url_id: meetingId,
+        user_cookie_id: browserId,
+        role: userRole,
+        candidate_id: candidateId,
+      });
+    }
+
     if (placeUrl) {
       window.open(placeUrl, '_blank', 'noopener,noreferrer');
     } else {
       window.open('https://map.kakao.com', '_blank', 'noopener,noreferrer');
     }
   };
 
+  // 장소 리스트 중 하나 클릭 시 GA 전송 (place_list_viewed)
+  const handlePlaceClick = (place: (typeof places)[0]) => {
+    setSelectedPlaceId(place.id);
+    if (meetingId) {
+      const candidateId = `place_${String(place.id).padStart(2, '0')}`;
+      sendGAEvent('event', 'place_list_viewed', {
+        meeting_url_id: meetingId,
+        candidate_id: candidateId,
+        place_category: place.category,
+        rank_order: place.id,
+      });
+    }
+  };
+
   return (
     <div className="flex items-center justify-center p-0 md:min-h-[calc(100vh-200px)] md:py-25">
       <div className="flex h-full w-full flex-col bg-white md:h-175 md:w-174 md:flex-row md:gap-2 lg:w-215">
@@ -194,7 +229,7 @@ function RecommendContent() {
                 {places.map((place) => (
                   <div
                     key={place.id}
-                    onClick={() => setSelectedPlaceId(place.id)}
+                    onClick={() => handlePlaceClick(place)}
                     className={`flex cursor-pointer flex-col gap-2 rounded border p-4 ${
                       selectedPlaceId === place.id
                         ? 'border-blue-5 border-2'
@@ -247,7 +282,7 @@ function RecommendContent() {
                     {/* 하단 버튼은 조건부 렌더링 */}
                     {selectedPlaceId === place.id ? (
                       <button
-                        onClick={(e) => handleOpenKakaoMap(e, place.placeUrl)}
+                        onClick={(e) => handleOpenKakaoMap(e, place.placeUrl, place)}
                         className="bg-gray-8 w-full rounded py-2 text-[15px] text-white"
                       >
                         카카오맵에서 보기

app/result/[id]/page.tsx

@@ -149,6 +149,37 @@ export default function Page() {
 
   const [selectedResultId, setSelectedResultId] = useState<number>(1);
 
+  // 중간지점 후보 조회 GA 이벤트
+  const trackMidpointCandidateViewed = useCallback(
+    (candidateRankOrder: number, candidateId: string) => {
+      if (typeof window === 'undefined' || !id) return;
+      const browserId = localStorage.getItem('browser_id');
+      const isHost = localStorage.getItem(`is_host_${id}`) === 'true';
+      const userRole = isHost ? 'host' : 'participant';
+
+      sendGAEvent('event', 'midpoint_candidate_viewed', {
+        meeting_url_id: id,
+        user_cookie_id: browserId,
+        role: userRole,
+        candidate_rank_order: candidateRankOrder,
+        candidate_id: candidateId,
+      });
+    },
+    [id]
+  );
+
+  // 장소 리스트에서 결과보기 페이지로 돌아왔을 때 midpoint_candidate_viewed 전송
+  useEffect(() => {
+    if (typeof window === 'undefined' || !id || locationResults.length === 0) return;
+    const fromRecommend = sessionStorage.getItem(`from_recommend_${id}`);
+    if (fromRecommend !== '1') return;
+
+    sessionStorage.removeItem(`from_recommend_${id}`);
+    const selected = locationResults.find((r) => r.id === selectedResultId) ?? locationResults[0];
+    const candidateId = `mid_${selected.endStation.replace(/\s+/g, '_')}`;
+    trackMidpointCandidateViewed(selected.id, candidateId);
+  }, [id, locationResults, selectedResultId, trackMidpointCandidateViewed]);
+
   // 뒤로 가기 클릭 시 캐시 데이터 무효화
   const clearRelatedCache = useCallback(() => {
     queryClient.removeQueries({ queryKey: ['midpoint', id] });
@@ -280,13 +311,20 @@ export default function Page() {
                           if (meetingType) params.append('meetingType', meetingType);
                           if (categoryParam) params.append('category', categoryParam);
 
+                          if (typeof window !== 'undefined') {
+                            sessionStorage.setItem(`from_recommend_${id}`, '1');
+                          }
                           router.push(`/recommend?${params.toString()}`);
                         };
 
                         return (
                           <div
                             key={result.id}
-                            onClick={() => setSelectedResultId(result.id)}
+                            onClick={() => {
+                              setSelectedResultId(result.id);
+                              const candidateId = `mid_${result.endStation.replace(/\s+/g, '_')}`;
+                              trackMidpointCandidateViewed(result.id, candidateId);
+                            }}
                             className={`flex cursor-pointer flex-col gap-3.75 rounded border bg-white p-5 ${
                               selectedResultId === result.id
                                 ? 'border-blue-5 border-2'