diff --git a/src/app/board/[boardId]/_components/PolaroidList/PolaroidListItem.tsx b/src/app/board/[boardId]/_components/PolaroidList/PolaroidListItem.tsx index 2479159..30fae1b 100644 --- a/src/app/board/[boardId]/_components/PolaroidList/PolaroidListItem.tsx +++ b/src/app/board/[boardId]/_components/PolaroidList/PolaroidListItem.tsx @@ -31,7 +31,7 @@ const PolaroidListItem = ({ observer.disconnect() } }, - { threshold: 0.05 }, + { threshold: 0.1 }, ) if (ref.current) observer.observe(ref.current) @@ -49,7 +49,7 @@ const PolaroidListItem = ({ const renderItem = (
+
{isVisible && (isFirstItem ? ( { const { board, boardId } = useBoard() @@ -39,6 +41,7 @@ const PolaroidList = () => { } const onSelectComplete = () => { + sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_CHOOSE_POLAROID }) const polaroidIdsSearchParam = createPolaroidSearchParams(selectedIds) router.push(`/board/${boardId}/decorate?${polaroidIdsSearchParam}`) } diff --git a/src/app/board/[boardId]/_components/Share/index.tsx b/src/app/board/[boardId]/_components/Share/index.tsx index 3ebd0da..b3c4708 100644 --- a/src/app/board/[boardId]/_components/Share/index.tsx +++ b/src/app/board/[boardId]/_components/Share/index.tsx @@ -76,6 +76,7 @@ const ShareBtn = () => { } const onClickDecorateBoard = () => { + sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_DECORATE_BOARD }) setShowShareModal(false) if (board && board.items.length > 0) { setIsSelectMode(true) diff --git a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx index 57ad603..17aa19f 100644 --- a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx +++ b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx @@ -1,20 +1,24 @@ 'use client' -import React, { useEffect, useState } from 'react' +import OpenStickerModalBtn from '@/app/board/[boardId]/decorate/_components/OpenStickerModalBtn' +import SelectSticker from '@/app/board/[boardId]/decorate/_components/SelectStickerModal' import Sticker from '@/app/board/[boardId]/decorate/_components/Sticker' -import Image from 'next/image' import SubmitBtn from '@/app/board/[boardId]/decorate/_components/SubmitBtn' -import { ensureArray } from '@/lib/utils/array' +import { useSticker } from '@/app/board/[boardId]/decorate/_contexts/StickerContext' import { getStickerStyles } from '@/app/board/[boardId]/decorate/_utils/getStickerStyles' +import Button from '@/components/Button' +import Header from '@/components/Header' +import { GTM_EVENT, getBoard } from '@/lib' +import { ensureArray } from '@/lib/utils/array' import { downloadImage } from '@/lib/utils/image' +import Image from 'next/image' import { useParams, useRouter, useSearchParams } from 'next/navigation' -import { getBoard } from '@/lib' -import OpenStickerModalBtn from '@/app/board/[boardId]/decorate/_components/OpenStickerModalBtn' -import SelectSticker from '@/app/board/[boardId]/decorate/_components/SelectStickerModal' -import ScreenshotLoading from 'public/images/screenshot_loading.gif' -import Button from '@/components/Button' -import { useSticker } from '@/app/board/[boardId]/decorate/_contexts/StickerContext' +import BackIcon from 'public/icons/arrow_back_ios.svg' import DownloadIcon from 'public/icons/download.svg' +import ScreenshotLoading from 'public/images/screenshot_loading.gif' +import { useEffect, useState } from 'react' +import { sendGTMEvent } from '@next/third-parties/google' +import GoBackModal from './GoBackModal' const DecorateScreenshot = () => { const { boardId } = useParams<{ boardId: string }>() @@ -26,6 +30,7 @@ const DecorateScreenshot = () => { const [isLoadingDownload, setIsLoadingDownload] = useState(false) const [isDownloaded, setIsDownloaded] = useState(false) const { isDecorating, setIsDecorating } = useSticker() + const [isGoBackModalOpen, setIsGoBackModalOpen] = useState(false) const router = useRouter() useEffect(() => { @@ -58,6 +63,7 @@ const DecorateScreenshot = () => { }, []) const takeScreenshot = () => { + sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_SAVE }) setIsLoadingDownload(true) fetch(`/board/api/screenshot`, { method: 'POST', @@ -77,9 +83,18 @@ const DecorateScreenshot = () => { } const routeToHome = () => { + sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_GOTOMAIN }) router.push('/') } + const goBackHandler = () => { + if (isDownloaded) { + router.back() + return + } + setIsGoBackModalOpen(true) + } + if (isLoadingPreview) { return (
@@ -90,18 +105,24 @@ const DecorateScreenshot = () => { return (
-
-
-
- {isDownloaded ? '앨범에 저장되었습니다!' : '보드 꾸미기'} -
-
-
+
} + shadow={false} + className="bg-transparent" + /> + setIsGoBackModalOpen(false)} + goBack={() => router.back()} + /> {previewUrl && ( <> - - - + {!isDownloaded && ( + + + + )}
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 +}