Merge pull request #198 from Make-A-Wish-Sopt/feature/193-GA-tag

Feature/193 ga tag
Make-A-Wish-Sopt · Feb 5, 2024 · f2a5279 · f2a5279
2 parents a6a2a32 + 5746b3f
commit f2a5279
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 37 deletions.
diff --git a/components/Cakes/CakesPay.tsx b/components/Cakes/CakesPay.tsx
@@ -101,6 +101,7 @@ export default function CakesPay(props: CakesPayProps) {
             handleConfirmFn={handleNextStep}
             leftText="송금 안했어요"
             rightText="송금했어요"
+            gaTagId={`${selectedCake.name} 보내기`}
           >
             <Image src={MainCakeImg} alt={'케이크'} width={60} height={60} />
             <Styled.DeleteText>

diff --git a/components/Cakes/SelectCakes.tsx b/components/Cakes/SelectCakes.tsx
@@ -27,6 +27,7 @@ export default function SelectCakes(props: SelectCakesProps) {
             index={index}
             selectedIndex={selectedIndex}
             key={cake.name}
+            id={cake.name}
           >
             <Image src={cake.cakeImage} alt={`${cake.name}이미지`} width={44} />
           </Styled.CakeBox>

diff --git a/components/Common/Button/SnsBox.tsx b/components/Common/Button/SnsBox.tsx
diff --git a/components/Common/Button/index.tsx b/components/Common/Button/index.tsx
@@ -9,18 +9,20 @@ interface ButtonProps {
   boxType?: BoxTypes;
   colorSystem: ColorSystemType;
   handleClickFn?: (parameter?: unknown) => void | unknown;
+  gaTagId?: string;
   children: ReactNode;
 }
 
 export default function Button(props: ButtonProps) {
-  const { width, boxType, colorSystem, handleClickFn, children } = props;
+  const { width, boxType, colorSystem, handleClickFn, gaTagId, children } = props;
 
   return (
     <StyledBtnBox
       as="button"
       width={width}
       className={`${boxType} ${colorSystem} `}
       onClick={handleClickFn}
+      id={gaTagId}
     >
       {children}
     </StyledBtnBox>

diff --git a/components/Common/Modal/MainShareModal.tsx b/components/Common/Modal/MainShareModal.tsx
@@ -1,7 +1,7 @@
 import theme from '@/styles/theme';
 import styled from 'styled-components';
 import ShareContent from './ShareContent';
-import { useGetWishesProgress } from '@/hooks/queries/wishes';
+import { useGetMainProgressData, useGetWishesProgress } from '@/hooks/queries/wishes';
 import Image from 'next/image';
 import { MainCakeImg, MainWishChatImg } from '@/public/assets/images';
 import { CloseWhiteIc } from '@/public/assets/icons';
@@ -14,6 +14,7 @@ interface MainShareModalProps {
 export default function MainShareModal(props: MainShareModalProps) {
   const { handleToggle } = props;
   const { wishesProgressData } = useGetWishesProgress();
+  const { progressData } = useGetMainProgressData();
 
   return (
     <>
@@ -28,7 +29,7 @@ export default function MainShareModal(props: MainShareModalProps) {
         <Styled.PriceTextWrapper>
           {'예상 케이크 금액\n'}
           <Styled.PriceText>{`총 ${convertMoneyText(
-            wishesProgressData?.price.toString() || '0',
+            progressData?.price.toString() || '0',
           )}원`}</Styled.PriceText>
         </Styled.PriceTextWrapper>
 

diff --git a/components/Common/Modal/ModalForm/ConfirmCancleModal.tsx b/components/Common/Modal/ModalForm/ConfirmCancleModal.tsx
@@ -11,10 +11,11 @@ interface ConfirmCancleModalPrpos {
   handleConfirmFn: () => void;
   leftText?: string;
   rightText?: string;
+  gaTagId?: string;
 }
 
 export default function ConfirmCancleModal(props: PropsWithChildren<ConfirmCancleModalPrpos>) {
-  const { handleToggle, handleConfirmFn, leftText, rightText, children } = props;
+  const { handleToggle, handleConfirmFn, leftText, rightText, gaTagId, children } = props;
   return (
     <Styled.Container>
       <Styled.IconContainer>
@@ -34,6 +35,7 @@ export default function ConfirmCancleModal(props: PropsWithChildren<ConfirmCancl
             handleConfirmFn();
             handleToggle();
           }}
+          gaTagId={gaTagId}
         >
           {rightText || '확인'}
         </Button>

diff --git a/components/Common/Modal/ShareContent.tsx b/components/Common/Modal/ShareContent.tsx
@@ -8,7 +8,6 @@ import { useEffect, useState } from 'react';
 import useKakaoShare from '@/hooks/common/useKakaoShare';
 import { useRecoilValue } from 'recoil';
 import { LoginUserInfo } from '@/recoil/auth/loginUserInfo';
-import SNSBox from '../Button/SnsBox';
 import InputLink from '../Input/InputLink';
 import { useGetMainProgressData } from '@/hooks/queries/wishes';
 
@@ -32,11 +31,11 @@ export default function ShareContent() {
     if (name === 'KakaoTalk') {
       useKakaoShare(loginUserInfo.nickName, wishesLink);
     } else if (name === 'FaceBook') {
-      if (name === 'FaceBook') {
-        window.open(`http://www.facebook.com/sharer/sharer.php?u=${link}&hashtag=${hashtag}`);
-      }
+      window.open(`http://www.facebook.com/sharer/sharer.php?u=${link}&hashtag=${hashtag}`);
     } else if (name === 'Twitter') {
       window.open(`https://twitter.com/intent/tweet?text=${text + link}`);
+    } else if (name === 'Instagram') {
+      window.open(`https://instagram.com`);
     }
   };
 
@@ -65,9 +64,9 @@ export default function ShareContent() {
     <Styled.ContentWrapper>
       <Styled.SNSContainer>
         {SNS_LIST.map((sns) => (
-          <SNSBox key={sns.name} handleClick={() => handleShareSNS(sns.name)}>
+          <Styled.SNSBox key={sns.name} onClick={() => handleShareSNS(sns.name)} id={sns.name}>
             <Image src={sns.logo} alt={`${sns.name}`} />
-          </SNSBox>
+          </Styled.SNSBox>
         ))}
       </Styled.SNSContainer>
 
@@ -98,4 +97,9 @@ const Styled = {
     color: ${theme.colors.white};
     width: 100%;
   `,
+
+  SNSBox: styled.div`
+    margin: 0 0.5rem 0;
+    cursor: pointer;
+  `,
 };
diff --git a/components/Wishes/Common/WishesStepBtn.tsx b/components/Wishes/Common/WishesStepBtn.tsx
@@ -40,6 +40,7 @@ export default function WishesStepBtn(props: WishesStepBtnProps) {
         boxType="half"
         colorSystem={wishesStep.getNextBtnColor(wishesStep.nextState)}
         handleClickFn={handleNextClickFn}
+        gaTagId={`step${wishesStep.stepIndex}`}
       >
         {wishesStep.stepIndex < 4 ? '다음' : '링크 생성 완료!'}
       </Button>

diff --git a/constant/snsList.ts b/constant/snsList.ts
@@ -1,17 +1,20 @@
-
-import { KaKaoLogoImg, InstaLogoImg, FacebookLogoImg, TwitterLogoImg } from '@/public/assets/images';
+import {
+  KaKaoLogoImg,
+  InstaLogoImg,
+  FacebookLogoImg,
+  TwitterLogoImg,
+} from '@/public/assets/images';
 import { SNSListType } from '@/types/snsListType';
 
-
 export const SNS_LIST: SNSListType[] = [
   {
     name: 'KakaoTalk',
     logo: KaKaoLogoImg,
   },
-  // {
-  //   name: 'Instagram',
-  //   logo: InstaLogoImg,
-  // },
+  {
+    name: 'Instagram',
+    logo: InstaLogoImg,
+  },
   {
     name: 'FaceBook',
     logo: FacebookLogoImg,
@@ -20,4 +23,4 @@ export const SNS_LIST: SNSListType[] = [
     name: 'Twitter',
     logo: TwitterLogoImg,
   },
-];
+];