diff --git a/components/Cakes/CakesPay.tsx b/components/Cakes/CakesPay.tsx
index 681e3eeb..6a122f9a 100644
--- 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} 보내기`}
>
diff --git a/components/Cakes/SelectCakes.tsx b/components/Cakes/SelectCakes.tsx
index 67f05f99..690ce2b0 100644
--- 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}
>
diff --git a/components/Common/Button/SnsBox.tsx b/components/Common/Button/SnsBox.tsx
deleted file mode 100644
index ebd387b2..00000000
--- a/components/Common/Button/SnsBox.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-
-interface SNSBoxProps {
- children: React.ReactNode;
- handleClick?: () => void;
-}
-
-export default function SNSBox(props: SNSBoxProps) {
- const { children, handleClick } = props;
-
- return {children};
-}
-
-const Styled = {
- Box: styled.div`
- margin: 0 0.5rem 0;
- cursor: pointer;
- `,
-};
diff --git a/components/Common/Button/index.tsx b/components/Common/Button/index.tsx
index 7b467b26..335eb508 100644
--- a/components/Common/Button/index.tsx
+++ b/components/Common/Button/index.tsx
@@ -9,11 +9,12 @@ 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 (
{children}
diff --git a/components/Common/Modal/MainShareModal.tsx b/components/Common/Modal/MainShareModal.tsx
index b552a399..49a25b32 100644
--- 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) {
{'예상 케이크 금액\n'}
{`총 ${convertMoneyText(
- wishesProgressData?.price.toString() || '0',
+ progressData?.price.toString() || '0',
)}원`}
diff --git a/components/Common/Modal/ModalForm/ConfirmCancleModal.tsx b/components/Common/Modal/ModalForm/ConfirmCancleModal.tsx
index e6dba25b..8ae5a07c 100644
--- 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) {
- const { handleToggle, handleConfirmFn, leftText, rightText, children } = props;
+ const { handleToggle, handleConfirmFn, leftText, rightText, gaTagId, children } = props;
return (
@@ -34,6 +35,7 @@ export default function ConfirmCancleModal(props: PropsWithChildren
{rightText || '확인'}
diff --git a/components/Common/Modal/ShareContent.tsx b/components/Common/Modal/ShareContent.tsx
index 74fd6b53..39167d92 100644
--- 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() {
{SNS_LIST.map((sns) => (
- handleShareSNS(sns.name)}>
+ handleShareSNS(sns.name)} id={sns.name}>
-
+
))}
@@ -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
index f03cd8c4..40be30bc 100644
--- 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 ? '다음' : '링크 생성 완료!'}
diff --git a/constant/snsList.ts b/constant/snsList.ts
index c34e8162..79348961 100644
--- 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,
},
-];
\ No newline at end of file
+];