gtag 추가

frontend/src/views/auth/Login.vue

@@ -22,7 +22,7 @@
         </div>
         <Button type="submit" label="로그인" class="w-full" :loading="loading" />
         <div class="register-link">
-          <p>계정이 없으신가요? <a href="#" @click.prevent="showRegisterForm = true">회원가입</a></p>
+          <p>계정이 없으신가요? <a href="#" @click.prevent="showRegisterForm = true; gtag.event('show_register_form', { 'event_category': '인증', 'event_label': '회원가입 폼 표시' });">회원가입</a></p>
         </div>
       </form>
 
@@ -65,7 +65,7 @@
 
         <Button type="submit" label="회원가입" class="w-full" :loading="loading" />
         <div class="login-link">
-          <p>이미 계정이 있으신가요? <a href="#" @click.prevent="showRegisterForm = false">로그인</a></p>
+          <p>이미 계정이 있으신가요? <a href="#" @click.prevent="showRegisterForm = false; gtag.event('show_login_form', { 'event_category': '인증', 'event_label': '로그인 폼 표시' });">로그인</a></p>
         </div>
       </form>
     </div>
@@ -74,14 +74,16 @@
 </template>
 
 <script setup>
-import { ref, computed, inject } from 'vue';
+import { ref, computed, inject, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useToast } from 'primevue/usetoast';
+import { useGtag } from 'vue-gtag-next';
 import authService from '@/services/authService';
 
 const user = inject('user');
 const router = useRouter();
 const toast = useToast();
+const gtag = useGtag();
 
 const username = ref('');
 const password = ref('');
@@ -177,6 +179,13 @@ const validateRegisterForm = () => {
 const handleLogin = async () => {
   if (!validateForm()) return;
   
+  // Google Analytics 이벤트 추적 - 로그인 시도
+  gtag.event('login_attempt', {
+    'event_category': '인증',
+    'event_label': '로그인 시도',
+    'value': 1
+  });
+  
   loading.value = true;
   
   try {
@@ -198,6 +207,12 @@ const handleLogin = async () => {
     // 로그인 성공 메시지
     toast.add({ severity: 'success', summary: '성공', detail: '로그인에 성공했습니다.', life: 3000 });
     
+    // Google Analytics 이벤트 추적 - 로그인 성공
+    gtag.event('login', {
+      'method': 'id_password',
+      'user_role': userData.role
+    });
+    
     // 사용자 정보 및 메뉴 아이템 로드 이벤트 발생
     window.dispatchEvent(new CustomEvent('user-logged-in'));
     
@@ -210,6 +225,13 @@ const handleLogin = async () => {
   } catch (error) {
     console.error('로그인 오류:', error);
     
+    // Google Analytics 이벤트 추적 - 로그인 실패
+    gtag.event('login_failed', {
+      'event_category': '인증',
+      'event_label': error.response?.data?.message || '인증 실패',
+      'value': 1
+    });
+    
     // 오류 메시지 처리
     const errorMessage = error.response?.data?.message || '로그인에 실패했습니다. 이메일과 비밀번호를 확인해주세요.';
     toast.add({ severity: 'error', summary: '오류', detail: errorMessage, life: 3000 });
@@ -222,6 +244,13 @@ const handleLogin = async () => {
 const handleRegister = async () => {
   if (!validateRegisterForm()) return;
   
+  // Google Analytics 이벤트 추적 - 회원가입 시도
+  gtag.event('sign_up_attempt', {
+    'event_category': '인증',
+    'event_label': '회원가입 시도',
+    'value': 1
+  });
+  
   loading.value = true;
   
   try {
@@ -235,6 +264,11 @@ const handleRegister = async () => {
     // 회원가입 성공 메시지
     toast.add({ severity: 'success', summary: '성공', detail: '회원가입에 성공했습니다. 로그인해주세요.', life: 3000 });
     
+    // Google Analytics 이벤트 추적 - 회원가입 성공
+    gtag.event('sign_up', {
+      'method': 'form'
+    });
+    
     // 로그인 폼으로 전환
     showRegisterForm.value = false;
     
@@ -251,6 +285,13 @@ const handleRegister = async () => {
   } catch (error) {
     console.error('회원가입 오류:', error);
     
+    // Google Analytics 이벤트 추적 - 회원가입 실패
+    gtag.event('sign_up_failed', {
+      'event_category': '인증',
+      'event_label': error.response?.data?.message || '회원가입 실패',
+      'value': 1
+    });
+    
     // 오류 메시지 처리
     const errorMessage = error.response?.data?.message || '회원가입에 실패했습니다. 다시 시도해주세요.';
     toast.add({ severity: 'error', summary: '오류', detail: errorMessage, life: 3000 });

frontend/src/views/auth/Profile.vue

@@ -83,6 +83,7 @@
 
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue';
+import { useGtag } from 'vue-gtag-next';
 import { useToast } from 'primevue/usetoast';
 import { useVuelidate } from '@vuelidate/core';
 import { required, email, minLength, sameAs, helpers } from '@vuelidate/validators';
@@ -134,7 +135,14 @@ const rules = computed(() => ({
 const v$ = useVuelidate(rules, form);
 
 // 페이지 로드 시 사용자 정보 가져오기
+// 페이지 진입 시 Google Analytics 페이지뷰 추적
 onMounted(async () => {
+  const gtag = useGtag();
+  gtag.pageview({
+    page_title: '프로필',
+    page_path: window.location.pathname,
+    page_location: window.location.href
+  });
   await fetchUserProfile();
 });