diff --git a/src/app/(onboarding)/login/_components/KakaoLogin.tsx b/src/app/(onboarding)/login/_components/KakaoLogin.tsx
index e1d8df5..9ef9fd6 100644
--- a/src/app/(onboarding)/login/_components/KakaoLogin.tsx
+++ b/src/app/(onboarding)/login/_components/KakaoLogin.tsx
@@ -1,6 +1,8 @@
'use client'
import Button from '@/components/Button'
+import { GTM_EVENT } from '@/lib/constants'
+import { sendGTMEvent } from '@next/third-parties/google'
import { signIn } from 'next-auth/react'
import KakaoIcon from 'public/icons/kakao.svg'
@@ -10,6 +12,7 @@ const KakaoLogin = () => {
size="lg"
className="mb-4 flex cursor-pointer items-center justify-center gap-[9px] bg-kakao font-semiBold text-gray-950 shadow-button active:bg-[#FEE500] active:bg-gradient-to-t active:from-[rgba(0,0,0,0.10)] active:to-[rgba(0,0,0,0.10)]"
onClick={async () => {
+ sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_LOGIN })
await signIn('kakao', { callbackUrl: '/signup' })
}}
>
diff --git a/src/app/(onboarding)/login/page.tsx b/src/app/(onboarding)/login/page.tsx
index 2b62413..156c7e0 100644
--- a/src/app/(onboarding)/login/page.tsx
+++ b/src/app/(onboarding)/login/page.tsx
@@ -1,7 +1,7 @@
import Image from 'next/image'
import PolaroidsIcon from 'public/icons/home_polaroids.svg'
import LoginPolaroid from 'public/icons/login_polaroid.png'
-import PolaboLogo from 'public/images/polabo_logo.png'
+import PolaboLogo from 'public/images/polabo-logo-christmas.png'
import KakaoLogin from './_components/KakaoLogin'
import Policy from './_components/Policy'
diff --git a/src/app/board/[boardId]/_components/CreatePolaroidModal/CreatePolaroid.tsx b/src/app/board/[boardId]/_components/CreatePolaroidModal/CreatePolaroid.tsx
index f606acf..0197c9a 100644
--- a/src/app/board/[boardId]/_components/CreatePolaroidModal/CreatePolaroid.tsx
+++ b/src/app/board/[boardId]/_components/CreatePolaroidModal/CreatePolaroid.tsx
@@ -7,6 +7,8 @@ import UploadBtn from '@/app/board/[boardId]/_components/CreatePolaroidModal/Upl
import { Dispatch, SetStateAction, useEffect, useRef } from 'react'
import { FontKeyType, ThemaKeyType } from '@/types'
import PolaroidIcon from 'public/icons/polaroid.svg'
+import { sendGTMEvent } from '@next/third-parties/google'
+import { GTM_EVENT } from '@/lib'
interface CreatePolaroidProps {
image: File | null
@@ -76,13 +78,19 @@ const CreatePolaroid = ({
'font-hesom text-md leading-5',
showFontSelect ? 'border-gray-0 bg-gray-800 text-gray-0' : '',
)}
- onClick={() => setShowFontSelect((prev) => !prev)}
+ onClick={() => {
+ sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_FONT })
+ setShowFontSelect((prev) => !prev)
+ }}
>
폰트 고르기
setShowThemaSelect((prev) => !prev)}
+ onClick={() => {
+ sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_FRAME })
+ setShowThemaSelect((prev) => !prev)
+ }}
>
프레임 고르기
diff --git a/src/app/board/[boardId]/_components/CreatePolaroidModal/FontSelect.tsx b/src/app/board/[boardId]/_components/CreatePolaroidModal/FontSelect.tsx
index 1de1b73..1fe7ee8 100644
--- a/src/app/board/[boardId]/_components/CreatePolaroidModal/FontSelect.tsx
+++ b/src/app/board/[boardId]/_components/CreatePolaroidModal/FontSelect.tsx
@@ -1,8 +1,9 @@
import { FontKeyType } from '@/types'
-import { FONTS } from '@/lib'
+import { FONTS, GTM_EVENT } from '@/lib'
import { twMerge } from 'tailwind-merge'
import TagButton from '@/components/TagButton'
import { forwardRef } from 'react'
+import { sendGTMEvent } from '@next/third-parties/google'
interface FontSelectProps {
selectedFont: FontKeyType
@@ -26,7 +27,12 @@ const FontSelect = forwardRef(
font.className,
)}
key={key}
- onClick={() => onSelect(key as FontKeyType)}
+ onClick={() => {
+ sendGTMEvent({
+ event: GTM_EVENT.CLICK_FONT(key as FontKeyType),
+ })
+ onSelect(key as FontKeyType)
+ }}
>
{font.title}
diff --git a/src/app/board/[boardId]/_components/CreatePolaroidModal/ThemaSelect.tsx b/src/app/board/[boardId]/_components/CreatePolaroidModal/ThemaSelect.tsx
index 16a7ec0..fc63af7 100644
--- a/src/app/board/[boardId]/_components/CreatePolaroidModal/ThemaSelect.tsx
+++ b/src/app/board/[boardId]/_components/CreatePolaroidModal/ThemaSelect.tsx
@@ -1,11 +1,12 @@
-import Image from 'next/image'
-import { twMerge } from 'tailwind-merge'
-import { ThemaKeyType } from '@/types'
-import { THEMAS } from '@/lib'
-import { useEffect, useState } from 'react'
import Button from '@/components/Button'
+import { GTM_EVENT, ORDERED_THEMAS } from '@/lib'
+import { ThemaKeyType } from '@/types'
+import { sendGTMEvent } from '@next/third-parties/google'
+import Image from 'next/image'
import ArrowBackIcon from 'public/icons/arrow_back_ios.svg'
import CheckIcon from 'public/icons/check.svg'
+import { useEffect, useState } from 'react'
+import { twMerge } from 'tailwind-merge'
interface ThemaSelectItemProps {
themaType: ThemaKeyType
@@ -34,7 +35,10 @@ const ThemaSelectItem = ({
alt="polabo"
width={100}
height={100}
- onClick={() => setCurrentThema(themaType)}
+ onClick={() => {
+ sendGTMEvent({ event: GTM_EVENT.CLICK_FRAME(themaType) })
+ setCurrentThema(themaType)
+ }}
/>
+ 