refactor: GTM 전송 로직 유틸리티 분리 및 Lint 에러 수정

Author: kangdy25

app/create/page.tsx

@@ -7,6 +7,7 @@ import { useCreateMeeting } from '@/hooks/api/mutation/useCreateMeeting';
 import type { MeetingCreateRequest } from '@/types/api';
 import { useToast } from '@/hooks/useToast';
 import Toast from '@/components/ui/toast';
+import { pushDataLayer } from '@/lib/gtm';
 
 export default function Page() {
   const [meetingName, setMeetingName] = useState('');
@@ -157,9 +158,7 @@ export default function Page() {
           localStorage.setItem(`is_host_${meetingId}`, 'true');
 
           // ⭐️ 방 만든 브라우저가 누구인지 식별자를 담아서 이벤트 전송 (dataLayer 직접 Push)
-          const w = window as any;
-          w.dataLayer = w.dataLayer || [];
-          w.dataLayer.push({
+          pushDataLayer({
             event: 'url_created', // 객체 내부의 키로 이벤트명 삽입
             meeting_url_id: meetingId,
             participant_count_expected: capacity,

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 { pushDataLayer } from '@/lib/gtm';
 
 interface StationInfo {
   line: string;
@@ -82,9 +83,7 @@ export default function Page() {
         localStorage.setItem('browser_id', browserId);
       }
 
-      const w = window as any;
-      w.dataLayer = w.dataLayer || [];
-      w.dataLayer.push({
+      pushDataLayer({
         event: 'share_link',
         meeting_url_id: id,
         location: 'creation_complete',
@@ -148,9 +147,7 @@ export default function Page() {
               const isHost = localStorage.getItem(`is_host_${id}`) === 'true';
               const userRole = isHost ? 'host' : 'participant';
 
-              const w = window as any;
-              w.dataLayer = w.dataLayer || [];
-              w.dataLayer.push({
+              pushDataLayer({
                 event: 'departure_location_submitted',
                 meeting_url_id: id,
                 user_cookie_id: browserId,
@@ -182,9 +179,7 @@ export default function Page() {
       const userRole = isHost ? 'host' : 'participant';
       const browserId = localStorage.getItem('browser_id');
 
-      const w = window as any;
-      w.dataLayer = w.dataLayer || [];
-      w.dataLayer.push({
+      pushDataLayer({
         event: 'midpoint_calculated',
         meeting_url_id: id,
         browser_id: browserId,

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 { pushDataLayer } from '@/lib/gtm';
 
 function RecommendContent() {
   const router = useRouter();
@@ -153,9 +154,7 @@ function RecommendContent() {
       const userRole = isHost ? 'host' : 'participant';
       const candidateId = `place_${String(place.id).padStart(2, '0')}`;
 
-      const w = window as any;
-      w.dataLayer = w.dataLayer || [];
-      w.dataLayer.push({
+      pushDataLayer({
         event: 'external_map_opened',
         meeting_url_id: meetingId,
         user_cookie_id: browserId,
@@ -177,9 +176,7 @@ function RecommendContent() {
     if (typeof window !== 'undefined' && meetingId) {
       const candidateId = `place_${String(place.id).padStart(2, '0')}`;
 
-      const w = window as any;
-      w.dataLayer = w.dataLayer || [];
-      w.dataLayer.push({
+      pushDataLayer({
         event: 'place_list_viewed',
         meeting_url_id: meetingId,
         candidate_id: candidateId,

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 { pushDataLayer } from '@/lib/gtm';
 
 export default function Page() {
   const queryClient = useQueryClient();
@@ -168,9 +169,7 @@ export default function Page() {
         localStorage.setItem('browser_id', browserId);
       }
 
-      const w = window as any;
-      w.dataLayer = w.dataLayer || [];
-      w.dataLayer.push({
+      pushDataLayer({
         event: 'share_link',
         meeting_url_id: id,
         location: 'place_list', // PM님 명세: 결과 리스트 페이지

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 { pushDataLayer } from '@/lib/gtm';
 
 interface JoinFormProps {
   meetingId: string;
@@ -77,10 +78,7 @@ export default function JoinForm({ meetingId }: JoinFormProps) {
       const isHost = localStorage.getItem(`is_host_${meetingId}`) === 'true';
       const userRole = isHost ? 'host' : 'participant';
 
-      // dataLayer 직접 Push
-      const w = window as any;
-      w.dataLayer = w.dataLayer || [];
-      w.dataLayer.push({
+      pushDataLayer({
         event: 'participant_registration',
         meeting_url_id: meetingId,
         user_cookie_id: browserId,

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 { pushDataLayer } from '@/lib/gtm';
 
 interface ShareContentProps {
   id: string;
@@ -27,9 +28,7 @@ export default function ShareContent({ id }: ShareContentProps) {
       }
 
       // dataLayer 직접 Push (이벤트명을 키값으로!)
-      const w = window as any;
-      w.dataLayer = w.dataLayer || [];
-      w.dataLayer.push({
+      pushDataLayer({
         event: 'share_link',
         meeting_url_id: id,
         location: 'creation_complete',

lib/gtm.ts

@@ -0,0 +1,8 @@
+export const pushDataLayer = (data: Record<string, unknown>) => {
+  if (typeof window !== 'undefined') {
+    const w = window as unknown as { dataLayer: object[] };
+
+    w.dataLayer = w.dataLayer || [];
+    w.dataLayer.push(data);
+  }
+};