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} > {`${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}> {`${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 +];