Merge branch 'release/2.1.0' into feat/#325-event_product

TeamPiickle · Aug 26, 2023 · af809b1 · af809b1
2 parents e71751a + 8dc9b85
commit af809b1
Show file tree

Hide file tree

Showing 32 changed files with 231 additions and 118 deletions.
diff --git a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx
@@ -2,10 +2,11 @@ import * as St from "./style";
 
 interface LastCardProps {
   handleClickCard: () => void;
+  gtmClassName?: string;
 }
 
 export default function LastBestPiickleCard(props: LastCardProps) {
-  const { handleClickCard } = props;
+  const { handleClickCard, gtmClassName } = props;
 
   return (
     <St.LastCard>
@@ -14,7 +15,9 @@ export default function LastBestPiickleCard(props: LastCardProps) {
         <br />
         보고 싶다면?
       </St.LastCardContent>
-      <St.LastCardWButtonWrapper onClick={handleClickCard}>나머지 보기</St.LastCardWButtonWrapper>
+      <St.LastCardWButtonWrapper className={`${gtmClassName}More`} onClick={handleClickCard}>
+        나머지 보기
+      </St.LastCardWButtonWrapper>
     </St.LastCard>
   );
 }
diff --git a/src/@components/@common/BestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/index.tsx
@@ -1,5 +1,4 @@
 import { LocationType } from "../../../types/cardCollection";
-import { GTM_CLASS_NAME } from "../../../util/const/gtm";
 import useNavigateCardCollection, { NavigateRecentCollectionType } from "../hooks/useNavigateCardCollection";
 import LastBestPiickleCard from "./LastBestPiickleCard";
 import * as St from "./style";
@@ -14,12 +13,12 @@ interface BestPiickleCardProps {
   canNavigate: boolean;
   isLast?: boolean;
   locationType: LocationType;
+  gtmClassName?: string;
 }
 
 export default function BestPiickleCard(props: BestPiickleCardProps) {
-  const { bestPiickle, idx, canNavigate, isLast, locationType } = props;
+  const { bestPiickle, idx, canNavigate, isLast, locationType, gtmClassName } = props;
   const { content, tags } = bestPiickle;
-  const GTM_IDX_KEY = `mainBestPiickle${idx + 1}`;
 
   const navigateCardCollection = useNavigateCardCollection(locationType) as NavigateRecentCollectionType;
 
@@ -29,19 +28,19 @@ export default function BestPiickleCard(props: BestPiickleCardProps) {
   };
 
   return (
-    <St.Container type="button" className={GTM_CLASS_NAME[GTM_IDX_KEY]}>
+    <St.Container type="button" className={gtmClassName}>
       {!isLast ? (
-        <St.BestPiickleCard className={GTM_CLASS_NAME[GTM_IDX_KEY]} onClick={handleClickCard}>
-          <St.TagsWrapper className={GTM_CLASS_NAME[GTM_IDX_KEY]}>
+        <St.BestPiickleCard className={gtmClassName} onClick={handleClickCard}>
+          <St.TagsWrapper className={gtmClassName}>
             {tags.map((tag: string, i: number) => {
               return <St.Tag key={i}>{tag.slice(1)}</St.Tag>;
             })}
           </St.TagsWrapper>
-          <St.Content className={GTM_CLASS_NAME[GTM_IDX_KEY]}>{content}</St.Content>
-          <St.PickButtonWrapper className={GTM_CLASS_NAME[GTM_IDX_KEY]}>카드 보기</St.PickButtonWrapper>
+          <St.Content className={gtmClassName}>{content}</St.Content>
+          <St.PickButtonWrapper className={gtmClassName}>카드 보기</St.PickButtonWrapper>
         </St.BestPiickleCard>
       ) : (
-        <LastBestPiickleCard handleClickCard={handleClickCard} />
+        <LastBestPiickleCard handleClickCard={handleClickCard} gtmClassName={gtmClassName} />
       )}
     </St.Container>
   );

diff --git a/src/@components/@common/HeadingTitleContainer/index.tsx b/src/@components/@common/HeadingTitleContainer/index.tsx
@@ -1,16 +1,16 @@
 import { RoutePaths } from "../../../core/routes/path";
-import { GTM_CLASS_NAME } from "../../../util/const/gtm";
 import { HeadingTitle } from "../../../util/main/headingTitles";
 import { St } from "./style";
 
 export interface HeadingTitleContainerProps {
   headingTitles: HeadingTitle;
   paddingVerticalValue?: number;
   routePath?: RoutePaths;
+  gtmClassName?: string;
 }
 
 export default function HeadingTitleContainer(props: HeadingTitleContainerProps) {
-  const { headingTitles, paddingVerticalValue, routePath } = props;
+  const { headingTitles, paddingVerticalValue, routePath, gtmClassName } = props;
 
   return (
     <St.Container paddingVerticalValue={paddingVerticalValue ?? 2.4}>
@@ -19,7 +19,7 @@ export default function HeadingTitleContainer(props: HeadingTitleContainerProps)
         <St.Content>{headingTitles.content}</St.Content>
       </St.Wrapper>
       {headingTitles && routePath && (
-        <St.Link to={routePath} className={GTM_CLASS_NAME.mainMoodPiickleMore}>
+        <St.Link to={routePath} className={gtmClassName}>
           더보기
         </St.Link>
       )}

diff --git a/src/@components/@common/Toast/ToastProvider.tsx b/src/@components/@common/Toast/ToastProvider.tsx
@@ -1,5 +1,6 @@
-import React, { PropsWithChildren, useCallback, useState } from "react";
+import { PropsWithChildren, useCallback, useState } from "react";
 
+import { GTM_CLASS_NAME } from "../../../util/const/gtm";
 import { ToastContext } from "./context";
 import useTimeout from "./hooks/useTimeout";
 import * as St from "./style";
@@ -35,7 +36,11 @@ export default function ToastProvider({ children }: PropsWithChildren) {
         <St.ToastContainer>
           <St.ToastMessage isdark={toast.isDark}>
             {toast.message}
-            {toast.handleClickCancel && <St.CancelButton onClick={toast.handleClickCancel}>취소</St.CancelButton>}
+            {toast.handleClickCancel && (
+              <St.CancelButton onClick={toast.handleClickCancel} className={GTM_CLASS_NAME.handleClickCancelBlacklist}>
+                취소
+              </St.CancelButton>
+            )}
           </St.ToastMessage>
         </St.ToastContainer>
       )}

diff --git a/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx
@@ -1,11 +1,11 @@
 import IcBookmarkCheck_16_20 from "../../../../asset/icon/IcBookmarkCheck_16_20";
 import { LocationType } from "../../../../types/cardCollection";
+import { GTM_CLASS_NAME } from "../../../../util/const/gtm";
 import useNavigateCardCollection, {
   NavigateCardCollectionBookMarkType,
 } from "../../../@common/hooks/useNavigateCardCollection";
 import useCardBookmark from "../../../CardCollectionPage/hooks/useCardBookmark";
 import * as St from "./style";
-
 interface RankItemProps {
   onClickLogoutBookmark: () => void;
   cardId: string;
@@ -27,8 +27,8 @@ export default function RankItem(props: RankItemProps) {
         <St.RankItemNumber idx={rank}>{rank + 1}</St.RankItemNumber>
         <St.RankItemText onClick={() => navigateRankCollection(rank)}>{content}</St.RankItemText>
       </St.RankItemContent>
-      <St.BookmarkWrapper onClick={() => handleClickBookmark(cardId)}>
-        <IcBookmarkCheck_16_20 isChecked={isBookmarked} />
+      <St.BookmarkWrapper className={GTM_CLASS_NAME.bestBookmark} onClick={() => handleClickBookmark(cardId)}>
+        <IcBookmarkCheck_16_20 className={GTM_CLASS_NAME.bestBookmark} isChecked={isBookmarked} />
       </St.BookmarkWrapper>
     </St.RankItemContainer>
   );

diff --git a/src/@components/BestPiicklePage/BestPiickleRank/index.tsx b/src/@components/BestPiicklePage/BestPiickleRank/index.tsx
@@ -1,4 +1,5 @@
 import { LocationType } from "../../../types/cardCollection";
+import { GTM_CLASS_NAME } from "../../../util/const/gtm";
 import { HeadingTitle } from "../../../util/main/headingTitles";
 import HeadingTitleContainer from "../../@common/HeadingTitleContainer";
 import useModal from "../../@common/hooks/useModal";
@@ -38,7 +39,9 @@ export default function BestPiickleRank() {
             />
           ))}
       <St.ButtonWrapper>
-        <St.ContinueButton onClick={() => navigateRankCollection(8)}>이어서 베스트 피클 카드 보기</St.ContinueButton>
+        <St.ContinueButton className={GTM_CLASS_NAME.bestBookmarkMore} onClick={() => navigateRankCollection(8)}>
+          이어서 베스트 피클 카드 보기
+        </St.ContinueButton>
       </St.ButtonWrapper>
 
       {isLoginModalOpen && <LoginModal closeHandler={toggleLoginModal} contents={"북마크 기능인 마이피클을"} />}

diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx
@@ -31,6 +31,7 @@ export default function RecommendItem(props: RecommendProps) {
                   idx === (recommendList.cards.length > BEST_PIICKLE_TOTAL_COUNT && BEST_PIICKLE_TOTAL_COUNT - 1)
                 }
                 locationType={recommendList.locationType}
+                gtmClassName={recommendList.gtmClassName}
               />
             );
           })}

diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx
@@ -1,4 +1,5 @@
 import { CardList, LocationType } from "../../../types/cardCollection";
+import { GTM_CLASS_NAME } from "../../../util/const/gtm";
 import { HeadingTitle } from "../../../util/main/headingTitles";
 import HeadingTitleContainer from "../../@common/HeadingTitleContainer";
 import { useRecentlyBookmarked } from "../../@common/hooks/useRecentlyBookmarked";
@@ -15,6 +16,7 @@ export type recommendListType = {
   subtitle: string;
   cards?: CardList[];
   locationType: LocationType;
+  gtmClassName: string;
 };
 
 export default function BestPiickleRecommend() {
@@ -27,16 +29,19 @@ export default function BestPiickleRecommend() {
       subtitle: "💖 유저들이 가장 최근에 북마크한 대화주제",
       cards: recentlyBookmarkedCards,
       locationType: LocationType.RECENT,
+      gtmClassName: GTM_CLASS_NAME.bestRecentBookmark,
     },
     {
       subtitle: "👩 여성이 북마크한 대화주제들",
       cards: femaleBookmarkedCards,
       locationType: LocationType.FEMALE,
+      gtmClassName: GTM_CLASS_NAME.bestFemaleBookmark,
     },
     {
       subtitle: "👱‍♂️ 남성이 북마크한 대화주제를 확인해보세요",
       cards: maleBookmarkedCards,
       locationType: LocationType.MALE,
+      gtmClassName: GTM_CLASS_NAME.bestMaleBookmark,
     },
   ];
 

diff --git a/src/@components/CardCollectionPage/Card/CardMenu/index.tsx b/src/@components/CardCollectionPage/Card/CardMenu/index.tsx
@@ -73,26 +73,26 @@ export default function CardMenu(props: CardMenuProps) {
 
   return (
     <St.MenuContainer>
-      <St.ButtonWrapper onClick={toggleMenuModal}>
+      <St.ButtonWrapper className={GTM_CLASS_NAME.cardEtc} onClick={toggleMenuModal}>
         <IcMenuBtn />
       </St.ButtonWrapper>
 
-      <St.ButtonWrapper onClick={() => handleCopyClipBoard(_id)}>
-        <St.IconWrapper>
+      <St.ButtonWrapper className={GTM_CLASS_NAME.cardShare} onClick={() => handleCopyClipBoard(_id)}>
+        <St.IconWrapper className={GTM_CLASS_NAME.cardShare}>
           <IcShareBtn />
         </St.IconWrapper>
-        <St.ButtonLabel>공유하기</St.ButtonLabel>
+        <St.ButtonLabel className={GTM_CLASS_NAME.cardShare}>공유하기</St.ButtonLabel>
       </St.ButtonWrapper>
 
       <St.ButtonWrapper
         className={GTM_CLASS_NAME.cardBookmark}
         onClick={() => handleClickBookmark(_id)}
         aria-label="북마크"
         role="dialog">
-        <St.IconWrapper>
+        <St.IconWrapper className={GTM_CLASS_NAME.cardBookmark}>
           <IcBookmarkCheck_23_28 isChecked={isBookmarked} />
         </St.IconWrapper>
-        <St.ButtonLabel>저장하기</St.ButtonLabel>
+        <St.ButtonLabel className={GTM_CLASS_NAME.cardBookmark}>저장하기</St.ButtonLabel>
       </St.ButtonWrapper>
     </St.MenuContainer>
   );

diff --git a/src/@components/CardCollectionPage/Card/LastCard/index.tsx b/src/@components/CardCollectionPage/Card/LastCard/index.tsx
@@ -1,9 +1,10 @@
 import React, { forwardRef, useEffect } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import { IcCongratPiickle } from "../../../../asset/icon";
 import { routePaths } from "../../../../core/routes/path";
 import { LocationType } from "../../../../types/cardCollection";
+import { GTM_CLASS_NAME } from "../../../../util/const/gtm";
 import useShowByCardType from "../../../@common/hooks/useShowByQuery";
 import useToast from "../../../@common/Toast/hooks/useToast";
 import * as St from "./style";
@@ -43,8 +44,14 @@ const LastCard = forwardRef(function LastCard(_, ref: React.ForwardedRef<HTMLDiv
       <St.Content>끊임없는 대화를 위해 버튼을 선택해주세요</St.Content>
       <IcCongratPiickle />
       <St.BtnContainer>
-        {isReplayBtnShow && <St.ReplayBtn onClick={reloadForSimilarTopic}>비슷한 주제 계속 보기</St.ReplayBtn>}
-        <St.CategoryBtn onClick={goToCategory}>카테고리 보러 가기</St.CategoryBtn>
+        {isReplayBtnShow && (
+          <St.ReplayBtn onClick={reloadForSimilarTopic} className={GTM_CLASS_NAME.cardMoveKeep}>
+            비슷한 주제 계속 보기
+          </St.ReplayBtn>
+        )}
+        <St.CategoryBtn onClick={goToCategory} className={GTM_CLASS_NAME.cardMoveCategory}>
+          카테고리 보러 가기
+        </St.CategoryBtn>
       </St.BtnContainer>
     </St.Card>
   );

diff --git a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx
@@ -1,4 +1,5 @@
 import { LocationType } from "../../../../types/cardCollection";
+import { GTM_CLASS_NAME } from "../../../../util/const/gtm";
 import useShowByCardType from "../../../@common/hooks/useShowByQuery";
 import Modal from "../../../@common/Modal";
 import useToast from "../../../@common/Toast/hooks/useToast";
@@ -19,6 +20,7 @@ type ModalItem = {
   title: string;
   isNeedLogin?: boolean;
   handleClickItem: () => void;
+  gtmClassName: string;
 };
 
 export default function MenuModal(props: MenuModalProps) {
@@ -48,6 +50,7 @@ export default function MenuModal(props: MenuModalProps) {
         closeHandler();
         showToast({ message: "🥰 소중한 의견 주셔서 감사해요", duration: 2.5 });
       },
+      gtmClassName: GTM_CLASS_NAME.cardEtcBad,
     },
     {
       emoji: "👀",
@@ -59,6 +62,7 @@ export default function MenuModal(props: MenuModalProps) {
           onSuccess: onSuccessAddBlacklist,
         });
       },
+      gtmClassName: GTM_CLASS_NAME.cardEtcBlock,
     },
     {
       emoji: "❓",
@@ -67,21 +71,24 @@ export default function MenuModal(props: MenuModalProps) {
         closeHandler();
         showToast({ message: "📢 다른 사람들의 의견을 모아서 들려드릴게요", duration: 2.5 });
       },
+      gtmClassName: GTM_CLASS_NAME.cardEtcWonder,
     },
   ];
 
   return (
     <Modal theme="WHITE_BOTTOM" closeHandler={closeHandler} isNoCloseBtn>
       <St.ModalContainer>
-        {ModalItems.map(({ emoji, title, isNeedLogin, handleClickItem }, idx) => {
+        {ModalItems.map(({ emoji, title, isNeedLogin, handleClickItem, gtmClassName }, idx) => {
           if (idx === 1 && !isBlockShow) {
             return null;
           } else {
             return (
-              <St.ModalItemWrapper key={idx} onClick={handleClickItem}>
-                <St.EmojiWrapper>{emoji}</St.EmojiWrapper>
+              <St.ModalItemWrapper key={idx} onClick={handleClickItem} className={gtmClassName}>
+                <St.EmojiWrapper className={gtmClassName}>{emoji}</St.EmojiWrapper>
                 {title}
-                {isNeedLogin && <St.MessageWrapper>로그인 시 사용가능 합니다</St.MessageWrapper>}
+                {isNeedLogin && (
+                  <St.MessageWrapper className={gtmClassName}>로그인 시 사용가능 합니다</St.MessageWrapper>
+                )}
               </St.ModalItemWrapper>
             );
           }

diff --git a/src/@components/CardCollectionPage/Card/index.tsx b/src/@components/CardCollectionPage/Card/index.tsx
@@ -52,7 +52,11 @@ const Card = (props: LoginCheckProps) => {
       {getIsBlacklist(_id) && (
         <St.BlockCardWrapper>
           <St.BlockCardText>다시 안보기를 설정한 주제입니다</St.BlockCardText>
-          <St.BlockCardButton onClick={() => handleClickCancelBlacklist({ _id })}>취소하기</St.BlockCardButton>
+          <St.BlockCardButton
+            onClick={() => handleClickCancelBlacklist({ _id })}
+            className={GTM_CLASS_NAME.cardEtcCancelBlock}>
+            취소하기
+          </St.BlockCardButton>
         </St.BlockCardWrapper>
       )}
 

diff --git a/src/@components/CardCollectionPage/CardSlider/index.tsx b/src/@components/CardCollectionPage/CardSlider/index.tsx
@@ -5,6 +5,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import { CardList, LocationType } from "../../../types/cardCollection";
 import { externalLinks } from "../../../util/const/externalLinks";
 import useCardType from "../../@common/hooks/useCardType";
+import { GTM_CLASS_NAME } from "../../../util/const/gtm";
 import Card from "../Card";
 import EventCard from "../Card/EventCard";
 import LastCard from "../Card/LastCard";
@@ -53,7 +54,9 @@ const CardSlider = (props: CardSliderProps) => {
         <SwiperSlide>
           <St.Footer>
             <St.Text>피클에게 전할 말이 있다면 피드백을 남겨주세요</St.Text>
-            <St.feedBackLink to={externalLinks.SERVICE_FEEDBACK}>피드백 남기기</St.feedBackLink>
+            <St.feedBackLink to={externalLinks.SERVICE_FEEDBACK} className={GTM_CLASS_NAME.cardMoveFeedback}>
+              피드백 남기기
+            </St.feedBackLink>
           </St.Footer>
         </SwiperSlide>
       </Swiper>

diff --git a/src/@components/MainPage/Banner/Slide/index.tsx b/src/@components/MainPage/Banner/Slide/index.tsx
@@ -5,13 +5,13 @@ import SlideContent from "../SlideContent";
 import * as St from "./style";
 
 export default function Slide(props: newBannerType) {
-  const { bannerImage, phrase, topic, isLightMode, isLast } = props;
+  const { bannerImage, phrase, topic, isLightMode, isLast, gtmClassName } = props;
   return (
-    <St.SlideContainer>
-      <St.SlideContentWrapper>
-        <St.SlideTitles islightmode={isLightMode} isLast={isLast ?? false}>
-          <St.SlideSubtitle>{phrase}</St.SlideSubtitle>
-          <St.SlideTitle>{topic}</St.SlideTitle>
+    <St.SlideContainer className={gtmClassName}>
+      <St.SlideContentWrapper className={gtmClassName}>
+        <St.SlideTitles islightmode={isLightMode} isLast={isLast ?? false} className={gtmClassName}>
+          <St.SlideSubtitle className={gtmClassName}>{phrase}</St.SlideSubtitle>
+          <St.SlideTitle className={gtmClassName}>{topic}</St.SlideTitle>
         </St.SlideTitles>
         <SlideContent {...props} />
       </St.SlideContentWrapper>