void
+ goBack: () => void
+}
+
+const GoBackModal = ({ isOpen, onClose, goBack }: GoBackModalProps) => (
+
+ }>
+
+ {'꾸민 스티커가\n사라질 수도 있어요!'}
+
+ {
+ '뒤로 가기를 누르면 지금까지 보드에 꾸몄던\n스티커들이 초기화될 수 있어요.'
+ }
+
+
+
+
+)
+
+export default GoBackModal
diff --git a/src/app/board/[boardId]/decorate/_components/SelectStickerModal/Menu.tsx b/src/app/board/[boardId]/decorate/_components/SelectStickerModal/Menu.tsx
index 3d9efe4..602e6c2 100644
--- a/src/app/board/[boardId]/decorate/_components/SelectStickerModal/Menu.tsx
+++ b/src/app/board/[boardId]/decorate/_components/SelectStickerModal/Menu.tsx
@@ -3,6 +3,8 @@
import { StickerMenu } from '@/types'
import { ReactNode } from 'react'
import { twMerge } from 'tailwind-merge'
+import { sendGTMEvent } from '@next/third-parties/google'
+import { GTM_EVENT } from '@/lib'
import { useSticker } from '../../_contexts/StickerContext'
const Menu = ({ children }: { children: ReactNode }) => (
@@ -14,13 +16,18 @@ const Menu = ({ children }: { children: ReactNode }) => (
const Item = ({ icon, menuNum }: { icon: ReactNode; menuNum: StickerMenu }) => {
const { selectedMenu, setSelectedMenu } = useSticker()
+ const clickHandler = () => {
+ sendGTMEvent({ event: GTM_EVENT.CLICK_STICKER(menuNum) })
+ setSelectedMenu(menuNum)
+ }
+
return (
setSelectedMenu(menuNum)}
+ onClick={clickHandler}
>
{icon}
diff --git a/src/lib/constants/gtmEvent.ts b/src/lib/constants/gtmEvent.ts
index f263eff..f7f4d97 100644
--- a/src/lib/constants/gtmEvent.ts
+++ b/src/lib/constants/gtmEvent.ts
@@ -2,11 +2,13 @@ import {
BoardThemaKeyType,
FontKeyType,
SnsKeyType,
+ StickerMenu,
ThemaKeyType,
} from '@/types'
import { BOARDTHEMAS } from './boardConfig'
import { SNS } from './snsConfig'
import { FONTS, THEMAS } from './polaroidConfig'
+import { STICKERS } from './stickerConfig'
export const GTM_EVENT = Object.freeze({
CLICK_BTN_NEWBOARD: 'click_btn_newboard',
@@ -36,4 +38,10 @@ export const GTM_EVENT = Object.freeze({
CLICK_BTN_EDIT_BOARDNAME: 'click_btn_editboardname',
CLICK_BTN_DELETE_BOARD: 'click_btn_deleteboard',
CLICK_BTN_INTRODUCTION: 'click_btn_introduction',
+ CLICK_BTN_DECORATE_BOARD: 'click_btn_decorateboard',
+ CLICK_BTN_CHOOSE_POLAROID: 'click_btn_choosepolaroid',
+ CLICK_STICKER: (sticker: StickerMenu) =>
+ `click_sticker_${STICKERS[sticker].gtm}`,
+ CLICK_BTN_SAVE: 'click_btn_save',
+ CLICK_BTN_GOTOMAIN: 'click_btn_gotomain',
})
diff --git a/src/lib/constants/stickerConfig.ts b/src/lib/constants/stickerConfig.ts
index d39a4a1..7bb1bbc 100644
--- a/src/lib/constants/stickerConfig.ts
+++ b/src/lib/constants/stickerConfig.ts
@@ -1,5 +1,19 @@
-import { StickerMenu } from '@/types'
+import { StickerMenu, StickerType } from '@/types'
export const STICKER_MENU: StickerMenu[] = [0, 1, 2, 3]
-
export const GUEST_STICKER_MENU: StickerMenu[] = [1, 2, 3]
+
+export const STICKERS: Record
= {
+ 0: {
+ gtm: 'recent',
+ },
+ 1: {
+ gtm: 'doodle',
+ },
+ 2: {
+ gtm: 'analog',
+ },
+ 3: {
+ gtm: 'polabo',
+ },
+}
diff --git a/src/types/sticker.ts b/src/types/sticker.ts
index 70fa2d9..4f26ed6 100644
--- a/src/types/sticker.ts
+++ b/src/types/sticker.ts
@@ -13,3 +13,7 @@ export interface StickerStyle {
angle: string
file: string
}
+
+export interface StickerType {
+ gtm: string
+}