From 72092943c40a841e15bb6e6cf6405d1bd4628818 Mon Sep 17 00:00:00 2001 From: hwanheejung Date: Thu, 9 Jan 2025 23:58:02 +0900 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20=EC=A0=80=EC=9E=A5=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=20=ED=99=94=EB=A9=B4=EC=97=90=EC=84=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=8B=B0=EC=BB=A4=20=EC=A7=84=EC=9E=85=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[boardId]/decorate/_components/DecorateScreenshot.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx index 57ad603..8e68d88 100644 --- a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx +++ b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx @@ -99,9 +99,11 @@ const DecorateScreenshot = () => { {previewUrl && ( <> - - - + {!isDownloaded && ( + + + + )}
Date: Fri, 10 Jan 2025 00:22:59 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=EB=B3=B4=EB=93=9C=20=EA=BE=B8?= =?UTF-8?q?=EB=AF=B8=EA=B8=B0=20=EC=B7=A8=EC=86=8C=20=ED=8C=9D=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/DecorateScreenshot.tsx | 40 +++++++++++-------- .../decorate/_components/GoBackModal.tsx | 29 ++++++++++++++ src/components/Modal/index.tsx | 13 ++++-- 3 files changed, 63 insertions(+), 19 deletions(-) create mode 100644 src/app/board/[boardId]/decorate/_components/GoBackModal.tsx diff --git a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx index 8e68d88..26624f1 100644 --- a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx +++ b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx @@ -1,20 +1,23 @@ '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 { 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 GoBackModal from './GoBackModal' const DecorateScreenshot = () => { const { boardId } = useParams<{ boardId: string }>() @@ -26,6 +29,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(() => { @@ -90,13 +94,17 @@ const DecorateScreenshot = () => { return (
-
-
-
- {isDownloaded ? '앨범에 저장되었습니다!' : '보드 꾸미기'} -
-
-
+
setIsGoBackModalOpen(true)} />} + shadow={false} + className="bg-transparent" + /> + setIsGoBackModalOpen(false)} + goBack={() => router.back()} + /> {previewUrl && ( <> {!isDownloaded && ( diff --git a/src/app/board/[boardId]/decorate/_components/GoBackModal.tsx b/src/app/board/[boardId]/decorate/_components/GoBackModal.tsx new file mode 100644 index 0000000..9724da0 --- /dev/null +++ b/src/app/board/[boardId]/decorate/_components/GoBackModal.tsx @@ -0,0 +1,29 @@ +import Modal from '@/components/Modal' +import PolaroidIcon from 'public/icons/modal.svg' + +interface GoBackModalProps { + isOpen: boolean + onClose: () => void + goBack: () => void +} + +const GoBackModal = ({ isOpen, onClose, goBack }: GoBackModalProps) => ( + + }> + + {'꾸민 스티커가\n사라질 수도 있어요!'} + + { + '뒤로 가기를 누르면 지금까지 보드에 꾸몄던\n스티커들이 초기화될 수 있어요.' + } + + + + +) + +export default GoBackModal diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 1301ed5..c7078a8 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -202,24 +202,31 @@ const CenterConfirmCancel = ({ cancelText, confirmText, onConfirm = () => {}, + onCancel = () => {}, }: { cancelText: string confirmText: string onConfirm?: () => void + onCancel?: () => void }) => { const { onClose } = useContext(ModalContext) - const clickHandler = () => { + const confirmHandler = () => { onClose() onConfirm() } + const cancelHandler = () => { + onClose() + onCancel() + } + return (
- -
From de4993737aa411c74c9483aa13040beaf5bd8242 Mon Sep 17 00:00:00 2001 From: hwanheejung Date: Fri, 10 Jan 2025 00:27:15 +0900 Subject: [PATCH 3/6] fix: polaroid lazy loading --- .../[boardId]/_components/PolaroidList/PolaroidListItem.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 ? ( Date: Fri, 10 Jan 2025 00:52:44 +0900 Subject: [PATCH 4/6] feat: add gtm to decorate --- .../_components/PolaroidList/index.tsx | 3 +++ .../[boardId]/_components/Share/index.tsx | 1 + .../_components/DecorateScreenshot.tsx | 5 ++++- .../_components/SelectStickerModal/Menu.tsx | 9 ++++++++- src/lib/constants/gtmEvent.ts | 8 ++++++++ src/lib/constants/stickerConfig.ts | 18 ++++++++++++++++-- src/types/sticker.ts | 4 ++++ 7 files changed, 44 insertions(+), 4 deletions(-) diff --git a/src/app/board/[boardId]/_components/PolaroidList/index.tsx b/src/app/board/[boardId]/_components/PolaroidList/index.tsx index 8eea445..081cd6d 100644 --- a/src/app/board/[boardId]/_components/PolaroidList/index.tsx +++ b/src/app/board/[boardId]/_components/PolaroidList/index.tsx @@ -8,6 +8,8 @@ import PolaroidDetailModal from '@/components/Polaroid/PolaroidDetail' import { useRouter } from 'next/navigation' import { useState } from 'react' import { createPolaroidSearchParams } from '@/lib/utils/query' +import { sendGTMEvent } from '@next/third-parties/google' +import { GTM_EVENT } from '@/lib' const PolaroidList = () => { 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 26624f1..dde6e9f 100644 --- a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx +++ b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx @@ -8,7 +8,7 @@ import { useSticker } from '@/app/board/[boardId]/decorate/_contexts/StickerCont import { getStickerStyles } from '@/app/board/[boardId]/decorate/_utils/getStickerStyles' import Button from '@/components/Button' import Header from '@/components/Header' -import { getBoard } from '@/lib' +import { GTM_EVENT, getBoard } from '@/lib' import { ensureArray } from '@/lib/utils/array' import { downloadImage } from '@/lib/utils/image' import Image from 'next/image' @@ -17,6 +17,7 @@ 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 = () => { @@ -62,6 +63,7 @@ const DecorateScreenshot = () => { }, []) const takeScreenshot = () => { + sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_SAVE }) setIsLoadingDownload(true) fetch(`/board/api/screenshot`, { method: 'POST', @@ -81,6 +83,7 @@ const DecorateScreenshot = () => { } const routeToHome = () => { + sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_GOTOMAIN }) router.push('/') } 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 +} From 687840845ada16f391623cb788c41b28f6105fe5 Mon Sep 17 00:00:00 2001 From: hwanheejung Date: Fri, 10 Jan 2025 20:35:09 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=A0=80=EC=9E=A5=20=ED=9B=84=20=EB=92=A4=EB=A1=9C=EA=B0=80?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C?= =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=20=EC=95=88=EB=9C=A8=EA=B2=8C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../decorate/_components/DecorateScreenshot.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx index dde6e9f..17aa19f 100644 --- a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx +++ b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx @@ -87,6 +87,14 @@ const DecorateScreenshot = () => { router.push('/') } + const goBackHandler = () => { + if (isDownloaded) { + router.back() + return + } + setIsGoBackModalOpen(true) + } + if (isLoadingPreview) { return (
@@ -99,7 +107,7 @@ const DecorateScreenshot = () => {
setIsGoBackModalOpen(true)} />} + leftButton={} shadow={false} className="bg-transparent" /> From ab6bfc2ec08663b807df1e1459ca2e05de573d25 Mon Sep 17 00:00:00 2001 From: hwanheejung Date: Sat, 11 Jan 2025 00:15:25 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0?= =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=20=EB=B2=84=ED=8A=BC=20=EC=88=9C=EC=84=9C?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[boardId]/decorate/_components/GoBackModal.tsx | 6 +++--- src/components/Modal/index.tsx | 13 +++---------- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/src/app/board/[boardId]/decorate/_components/GoBackModal.tsx b/src/app/board/[boardId]/decorate/_components/GoBackModal.tsx index 9724da0..b88bb23 100644 --- a/src/app/board/[boardId]/decorate/_components/GoBackModal.tsx +++ b/src/app/board/[boardId]/decorate/_components/GoBackModal.tsx @@ -18,9 +18,9 @@ const GoBackModal = ({ isOpen, onClose, goBack }: GoBackModalProps) => ( } diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index c7078a8..1301ed5 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -202,31 +202,24 @@ const CenterConfirmCancel = ({ cancelText, confirmText, onConfirm = () => {}, - onCancel = () => {}, }: { cancelText: string confirmText: string onConfirm?: () => void - onCancel?: () => void }) => { const { onClose } = useContext(ModalContext) - const confirmHandler = () => { + const clickHandler = () => { onClose() onConfirm() } - const cancelHandler = () => { - onClose() - onCancel() - } - return (
- -