Merge remote-tracking branch 'refs/remotes/origin/feature/gtm' into d…

…evelop

# Conflicts:
#	src/app/board/[boardId]/_components/Share/index.tsx
#	src/types/index.ts

src/app/(home)/_components/CopyLinkBtn.tsx

@@ -4,6 +4,8 @@ import LinkIcon from 'public/icons/linkcopy.svg'
 import { useState } from 'react'
 import LinkCopiedModal from '@/app/(home)/_components/LinkCopiedModal'
 import { copyToClipboard } from '@/lib/utils'
+import { sendGTMEvent } from '@next/third-parties/google'
+import { GTM_EVENT } from '@/lib/constants'
 
 const CopyLinkBtn = () => {
   const [isLinkCopiedModalOpen, setIsLinkCopiedModalOpen] = useState(false)
@@ -12,6 +14,7 @@ const CopyLinkBtn = () => {
   const closeLinkCopiedModal = () => setIsLinkCopiedModalOpen(false)
 
   const copyCurrentUrl = () => {
+    sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_COPYLINK_MAIN })
     const currentURL = window.location.href
     return copyToClipboard(currentURL).then(openLinkCopiedModal)
   }

src/app/(home)/_components/CreateBoardBtn.tsx

@@ -4,6 +4,8 @@ import Button from '@/components/Button'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import { useSession } from 'next-auth/react'
+import { sendGTMEvent } from '@next/third-parties/google'
+import { GTM_EVENT } from '@/lib/constants'
 import GoToLoginModal from './GoToLoginModal'
 
 const CreateBoardBtn = () => {
@@ -13,6 +15,7 @@ const CreateBoardBtn = () => {
   const { status } = useSession()
 
   const handleCreateButtonClick = () => {
+    sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_NEWBOARD })
     if (status === 'authenticated') {
       router.push('/board/create')
     } else {

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

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)
+              }}
             >
               폰트 고르기
             </TagButton>
             <TagButton
               className="flex gap-2 p-2.5 text-sm leading-4"
-              onClick={() => setShowThemaSelect((prev) => !prev)}
+              onClick={() => {
+                sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_FRAME })
+                setShowThemaSelect((prev) => !prev)
+              }}
             >
               <PolaroidIcon />
               프레임 고르기

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<HTMLDivElement, FontSelectProps>(
                 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}
             </TagButton>

src/app/board/[boardId]/_components/CreatePolaroidModal/ThemaSelect.tsx

@@ -1,6 +1,7 @@
 import Button from '@/components/Button'
-import { ORDERED_THEMAS } from '@/lib'
+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'
@@ -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)
+        }}
       />
     </div>
   )

src/app/board/[boardId]/_components/CreatePolaroidModal/UploadBtn.tsx

@@ -1,5 +1,7 @@
 import Button from '@/components/Button'
 import { useState } from 'react'
+import { sendGTMEvent } from '@next/third-parties/google'
+import { GTM_EVENT } from '@/lib'
 import FinalModal from '../modals/FinalModal'
 
 interface UploadBtnProps {
@@ -12,6 +14,7 @@ const UploadBtn = ({ submitForm, btnDisabled }: UploadBtnProps) => {
   const [isPending, setIsPending] = useState<boolean>(false)
 
   const onSubmit = async () => {
+    sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_UPLOAD })
     setIsPending(true)
     await submitForm()
     setIsPending(false)

src/app/board/[boardId]/_components/Header/index.tsx

@@ -5,7 +5,7 @@ import { useSelect } from '@/app/board/[boardId]/_contexts/SelectModeContext'
 import DefaultHeader from '@/app/board/[boardId]/_components/Header/DefaultHeader'
 import SelectModeHeader from '@/app/board/[boardId]/_components/Header/SelectModeHeader'
 import { useBoard } from '@/app/board/[boardId]/_contexts/BoardContext'
-import { BOARDTHEMAS } from '@/lib/constants/boardConfig'
+import { BOARDTHEMAS } from '@/lib/constants'
 
 const Header = () => {
   const { isSelectMode } = useSelect()

src/app/board/[boardId]/_components/Share/index.tsx

@@ -16,6 +16,10 @@ import IGIcon from 'public/icons/sns/sns-ig.svg'
 import KakaoIcon from 'public/icons/sns/sns-kakao.svg'
 import XIcon from 'public/icons/sns/sns-x.svg'
 import { useState } from 'react'
+import { sendGTMEvent } from '@next/third-parties/google'
+import { GTM_EVENT } from '@/lib'
+import { SnsKeyType } from '@/types'
+import { SNS } from '@/lib/constants/snsConfig'
 import useSnsShare from '../../_hooks/useSnsShare'
 import Section from './Section'
 
@@ -33,13 +37,27 @@ const ShareBtn = () => {
     if (run) nextStep()
   }
 
-  const handleShare = (shareFn: () => void) => {
-    shareFn()
-    setShowShareModal(false)
-  }
+  const handleShare = (snsType: SnsKeyType) => {
+    sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_SHARE_SNS(snsType) })
+
+    switch (snsType) {
+      case 'KAKAO':
+        shareToKakao(board.title)
+        break
+      case 'INSTAGRAM':
+        shareToInsta()
+        break
+      case 'X':
+        shareToX()
+        break
+      case 'FACEBOOK':
+        shareToFacebook()
+        break
+      default:
+        break
+    }
 
-  const handleKakaoShare = () => {
-    handleShare(() => shareToKakao(board.title))
+    setShowShareModal(false)
   }
 
   const [showCopyCompleteToast, setShowCopyCompleteToast] = useState(false)
@@ -49,6 +67,8 @@ const ShareBtn = () => {
   const closeNoPolaroidToast = () => setShowNoPolaroidToast(false)
 
   const copyLink = () => {
+    sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_COPYLINK_BOARD })
+    setShowShareModal(false)
     const currentURL = window.location.href
     return navigator.clipboard.writeText(currentURL).then(() => {
       setShowCopyCompleteToast(true)
@@ -66,7 +86,13 @@ const ShareBtn = () => {
 
   return (
     <>
-      <Share onClick={() => setShowShareModal(true)} className="w-6" />
+      <Share
+        onClick={() => {
+          sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_SHARE })
+          setShowShareModal(true)
+        }}
+        className="w-6"
+      />
       <CopyCompleteToast
         show={showCopyCompleteToast}
         close={closeCopyCompleteToast}
@@ -84,32 +110,31 @@ const ShareBtn = () => {
               icon={<CopyIcon className="-rotate-45 scale-150" />}
               bg="bg-gray-900"
               desc="링크 복사"
-              onClick={() => handleShare(copyLink)}
+              onClick={copyLink}
             />
-
             <Section.Item
               icon={<KakaoIcon />}
-              bg="bg-kakao"
-              desc="카카오톡"
-              onClick={handleKakaoShare}
+              bg={SNS.KAKAO.bg}
+              desc={SNS.KAKAO.name}
+              onClick={() => handleShare('KAKAO')}
             />
             <Section.Item
               icon={<IGIcon />}
-              bg="bg-[url('/icons/sns/sns-ig-bg.png')]"
-              desc="인스타그램"
-              onClick={() => handleShare(shareToInsta)}
+              bg={SNS.INSTAGRAM.bg}
+              desc={SNS.INSTAGRAM.name}
+              onClick={() => handleShare('INSTAGRAM')}
             />
             <Section.Item
               icon={<XIcon />}
-              bg="bg-gray-1000"
-              desc="X"
-              onClick={() => handleShare(shareToX)}
+              bg={SNS.X.bg}
+              desc={SNS.X.name}
+              onClick={() => handleShare('X')}
             />
             <Section.Item
               icon={<FacebookIcon />}
-              bg="bg-facebook"
-              desc="페이스북"
-              onClick={() => handleShare(shareToFacebook)}
+              bg={SNS.FACEBOOK.bg}
+              desc={SNS.FACEBOOK.name}
+              onClick={() => handleShare('FACEBOOK')}
             />
           </Section>
           <div className="mb-5 flex w-[calc(100%-20px)] flex-col gap-5">

src/app/board/create/_components/BoardNameForm.tsx

@@ -5,6 +5,8 @@ import TextInput from '@/components/TextInput'
 import { ReactNode } from 'react'
 import { useBoardName } from '@/hooks/useBoardName'
 import { useRouter } from 'next/navigation'
+import { sendGTMEvent } from '@next/third-parties/google'
+import { GTM_EVENT } from '@/lib/constants'
 
 interface BoardNameFormProps {
   children: ReactNode
@@ -22,6 +24,11 @@ const BoardNameForm = ({ children }: BoardNameFormProps) => {
 
   const router = useRouter()
 
+  const handleNext = () => {
+    sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_NEXT })
+    router.push(`/board/create/theme?title=${boardName}`)
+  }
+
   return (
     <>
       <div>
@@ -42,7 +49,7 @@ const BoardNameForm = ({ children }: BoardNameFormProps) => {
         size="lg"
         className="mb-12"
         disabled={isInvalid}
-        onClick={() => router.push(`/board/create/theme?title=${boardName}`)}
+        onClick={handleNext}
       >
         다음
       </Button>

src/app/board/create/theme/_components/ThemaSelect.tsx

@@ -1,8 +1,9 @@
 'use client'
 
 import Button from '@/components/Button'
-import { BOARDTHEMAS, ORDERED_BOARDTHEMAS } from '@/lib/constants/boardConfig'
+import { BOARDTHEMAS, GTM_EVENT, ORDERED_BOARDTHEMAS } from '@/lib/constants'
 import { BoardThemaKeyType } from '@/types'
+import { sendGTMEvent } from '@next/third-parties/google'
 import Image from 'next/image'
 import CheckIcon from 'public/icons/check.svg'
 import { useState } from 'react'
@@ -18,41 +19,47 @@ const ThemaSelectItem = ({
   themaType,
   isCurrentThema,
   setCurrentThema,
-}: ThemaSelectItemProps) => (
-  <div
-    className={twMerge(
-      'relative flex flex-col items-center justify-center gap-2.5',
-    )}
-  >
-    {isCurrentThema && (
-      <CheckIcon className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-[calc(50%+15px)] scale-[3] text-gray-950" />
-    )}
-
+}: ThemaSelectItemProps) => {
+  const handleClick = () => {
+    sendGTMEvent({ event: GTM_EVENT.CLICK_THEME(themaType) })
+    setCurrentThema(themaType)
+  }
+  return (
     <div
       className={twMerge(
-        'h-[178px] w-[140px] max-w-full overflow-hidden rounded-lg border-2',
-        isCurrentThema ? 'border-gray-950' : 'border-gray-300',
+        'relative flex flex-col items-center justify-center gap-2.5',
       )}
     >
-      <Image
-        src={`/images/boardThemas/${themaType}.png`}
-        alt="polabo"
-        width={140}
-        height={178}
-        onClick={() => setCurrentThema(themaType)}
-        className="object-contain"
-      />
-    </div>
-    <span
-      className={twMerge(
-        'text-md font-semiBold',
-        isCurrentThema ? 'text-gray-950' : 'text-gray-400',
+      {isCurrentThema && (
+        <CheckIcon className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-[calc(50%+15px)] scale-[3] text-gray-950" />
       )}
-    >
-      {BOARDTHEMAS[themaType].title}
-    </span>
-  </div>
-)
+
+      <div
+        className={twMerge(
+          'h-[178px] w-[140px] max-w-full overflow-hidden rounded-lg border-2',
+          isCurrentThema ? 'border-gray-950' : 'border-gray-300',
+        )}
+      >
+        <Image
+          src={`/images/boardThemas/${themaType}.png`}
+          alt="polabo"
+          width={140}
+          height={178}
+          onClick={handleClick}
+          className="object-contain"
+        />
+      </div>
+      <span
+        className={twMerge(
+          'text-md font-semiBold',
+          isCurrentThema ? 'text-gray-950' : 'text-gray-400',
+        )}
+      >
+        {BOARDTHEMAS[themaType].title}
+      </span>
+    </div>
+  )
+}
 
 interface ThemaSelectProps {
   boardName: string
@@ -79,7 +86,10 @@ const ThemaSelect = ({ createBoard, boardName }: ThemaSelectProps) => {
       <Button
         size="lg"
         className="mx-auto mb-12"
-        onClick={() => createBoard(boardName, currentThema)}
+        onClick={() => {
+          sendGTMEvent({ event: GTM_EVENT.CLICK_BTN_DONE })
+          createBoard(boardName, currentThema)
+        }}
       >
         완료
       </Button>