Merge pull request #152 from DDD-Community/feature/6.5th-qa

[FEATURE] 6.5차 QA

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 = (
     <div
-      className="flex flex-col justify-center"
+      className="PolaroidCard flex flex-col justify-center"
       style={{ rotate: `${rotate}deg` }}
     >
       <PolaroidCard
@@ -61,7 +61,7 @@ const PolaroidListItem = ({
   )
 
   return (
-    <div ref={ref}>
+    <div ref={ref} className="min-h-64">
       {isVisible &&
         (isFirstItem ? (
           <BoardTutorial

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}`)
   }

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)

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 (
       <div className="flex h-dvh items-center justify-center bg-gray-0">
@@ -90,18 +105,24 @@ const DecorateScreenshot = () => {
 
   return (
     <div className="relative flex h-full touch-none flex-col items-center justify-between gap-5">
-      <header className="my-5 w-full bg-gray-0 bg-transparent">
-        <div>
-          <div className="text-center text-md font-semiBold leading-6">
-            {isDownloaded ? '앨범에 저장되었습니다!' : '보드 꾸미기'}
-          </div>
-        </div>
-      </header>
+      <Header
+        title={isDownloaded ? '앨범에 저장되었습니다!' : '보드 꾸미기'}
+        leftButton={<BackIcon onClick={goBackHandler} />}
+        shadow={false}
+        className="bg-transparent"
+      />
+      <GoBackModal
+        isOpen={isGoBackModalOpen}
+        onClose={() => setIsGoBackModalOpen(false)}
+        goBack={() => router.back()}
+      />
       {previewUrl && (
         <>
-          <OpenStickerModalBtn>
-            <SelectSticker />
-          </OpenStickerModalBtn>
+          {!isDownloaded && (
+            <OpenStickerModalBtn>
+              <SelectSticker />
+            </OpenStickerModalBtn>
+          )}
           <div
             id="preview"
             className="relative aspect-[9/16] w-auto overflow-hidden shadow-screenshot"

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) => (
+  <Modal isOpen={isOpen} onClose={onClose}>
+    <Modal.CenterModal icon={<PolaroidIcon />}>
+      <Modal.Close />
+      <Modal.Title>{'꾸민 스티커가\n사라질 수도 있어요!'}</Modal.Title>
+      <Modal.Content>
+        {
+          '뒤로 가기를 누르면 지금까지 보드에 꾸몄던\n스티커들이 초기화될 수 있어요.'
+        }
+      </Modal.Content>
+      <Modal.CenterConfirmCancel
+        confirmText="뒤로 가기"
+        cancelText="계속 꾸미기"
+        onConfirm={goBack}
+      />
+    </Modal.CenterModal>
+  </Modal>
+)
+
+export default GoBackModal

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 (
     <div
       className={twMerge(
         'flex h-[42px] w-11 cursor-pointer items-center justify-center rounded-lg',
         selectedMenu === menuNum ? 'bg-[#d9d9d9] bg-opacity-30' : '',
       )}
-      onClick={() => setSelectedMenu(menuNum)}
+      onClick={clickHandler}
     >
       {icon}
     </div>

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',
 })

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<StickerMenu, StickerType> = {
+  0: {
+    gtm: 'recent',
+  },
+  1: {
+    gtm: 'doodle',
+  },
+  2: {
+    gtm: 'analog',
+  },
+  3: {
+    gtm: 'polabo',
+  },
+}

src/types/sticker.ts

@@ -13,3 +13,7 @@ export interface StickerStyle {
   angle: string
   file: string
 }
+
+export interface StickerType {
+  gtm: string
+}