<template>
  <div class="public-layout">
    <main>
      <slot />
    </main>
  </div>
</template>

<script setup>
import { useGtag } from 'vue-gtag-next'

// Google Analytics(GA) 추적용 gtag 인스턴스 사용
const gtag = useGtag()

// 컴포넌트 마운트 시 페이지뷰 이벤트 발생
// (퍼블릭 레이아웃 진입 시 추적)
gtag.pageview({
  page_title: '퍼블릭 레이아웃',
  page_path: window.location.pathname,
  page_location: window.location.href
})

// 주요 버튼 클릭 등 액션 추적용 함수 예시
const trackPublicAction = (actionName) => {
  gtag.event('button_click', {
    event_category: '퍼블릭',
    event_label: actionName,
    value: 1
  })
}
</script>

<style scoped>
.public-layout,
.public-layout > main {
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
