From e8cadc7c00c6d21799c13ebb4f54612524899135 Mon Sep 17 00:00:00 2001 From: NYeonK Date: Tue, 22 Aug 2023 00:49:56 +0900 Subject: [PATCH 01/10] [ feat ] add GTM className --- src/util/const/gtm.ts | 46 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/src/util/const/gtm.ts b/src/util/const/gtm.ts index 49b75050..7e04f5dd 100644 --- a/src/util/const/gtm.ts +++ b/src/util/const/gtm.ts @@ -1,11 +1,17 @@ type GtmClassName = { [key: string]: string; mainPiickleLogo: string; + mainBannerHot: string; + mainBannerNew: string; + mainBannerAddBtn: string; + mainBannerNotice: string; + mainTopicRequestBtn: string; mainBestPiickle1: string; mainBestPiickle2: string; mainBestPiickle3: string; mainBestPiickle4: string; mainBestPiickle5: string; + mainBestPiickleMore: string; mainMoodPiickleMore: string; main아이스브레이킹: string; main커플: string; @@ -36,6 +42,15 @@ type GtmClassName = { cardRecommendFilter: string; cardMoveBookmark: string; cardMoveHome: string; + cardMoveKeep: string; + cardMoveCategory: string; + cardMoveFeedback: string; + cardShare: string; + cardEtc: string; + cardEtcBad: string; + cardEtcBlock: string; + cardEtcCancelBlock: string; + cardEtcWonder: string; filterClose: string; filter남: string; filter여: string; @@ -85,15 +100,29 @@ type GtmClassName = { medleyPreviewClose여럿: string; medleyPreviewClose피클: string; medleyPreviewClose송강: string; + bestBookmark: string; + bestBookmarkMore: string; + bestRecentBookmark: string; + bestRecentBookmarkMore: string; + bestFemaleBookmark: string; + bestFemaleBookmarkMore: string; + bestMaleBookmark: string; + bestMaleBookmarkMore: string; }; export const GTM_CLASS_NAME: GtmClassName = { mainPiickleLogo: "click_main_logo", + mainBannerHot: "click_main_hotB", + mainBannerNew: "click_main_newB", + mainBannerAddBtn: "click_main_addB1", + mainBannerNotice: "click_main_notiB", + mainTopicRequestBtn: "click_main_addB2", mainBestPiickle1: "click_main_best_1", mainBestPiickle2: "click_main_best_2", mainBestPiickle3: "click_main_best_3", mainBestPiickle4: "click_main_best_4", mainBestPiickle5: "click_main_best_5", + mainBestPiickleMore: "click_main_best_plus", mainMoodPiickleMore: "click_main_mood_plus", main아이스브레이킹: "click_main_mood_ice", main커플: "click_main_mood_couple", @@ -124,6 +153,15 @@ export const GTM_CLASS_NAME: GtmClassName = { cardRecommendFilter: "click_card_filter", cardMoveBookmark: "click_card_movebookmark", cardMoveHome: "click_card_movehome", + cardMoveKeep: "click_card_keep", + cardMoveCategory: "click_card_gocategory", + cardMoveFeedback: "click_card_feedback", + cardShare: "click_card_share", + cardEtc: "click_card_etc", + cardEtcBad: "click_cardetc_bad", + cardEtcBlock: "click_cardetc_block", + cardEtcCancelBlock: "click_cardetc_cancelblock", + cardEtcWonder: "click_cardetc_wonder", filterClose: "click_filter_close", filter남: "click_filter_man", filter여: "click_filter_woman", @@ -173,4 +211,12 @@ export const GTM_CLASS_NAME: GtmClassName = { medleyPreviewClose여럿: "click_ice_preview_close", medleyPreviewClose피클: "click_self_preview_close", medleyPreviewClose송강: "click_vs_preview_close", + bestBookmark: "click_bestcard_bookmark", + bestBookmarkMore: "click_bestcard_more", + bestRecentBookmark: "click_recentcard_placed", + bestRecentBookmarkMore: "click_recentcard_more", + bestFemaleBookmark: "click_femalecard_placed", + bestFemaleBookmarkMore: "click_femalecard_more", + bestMaleBookmark: "click_malecard_placed", + bestMaleBookmarkMore: "click_malecard_more", }; From a31fb61e22cbd90abdaaa048d740ffc4f0e89306 Mon Sep 17 00:00:00 2001 From: NYeonK Date: Tue, 22 Aug 2023 01:37:13 +0900 Subject: [PATCH 02/10] [ feat ] add mainPage gtm className (1/2) --- .../@common/HeadingTitleContainer/index.tsx | 6 ++-- .../MainPage/Banner/SlideContent/index.tsx | 8 ++++- src/@components/MainPage/Banner/index.tsx | 3 ++ .../MainPage/BestPiickle/index.tsx | 2 ++ .../MainPage/MoodPiickle/index.tsx | 1 + .../MainPage/StripBanner/index.tsx | 13 ++++---- src/@components/MainPage/TopicLink/index.tsx | 5 +++- src/asset/icon/socialLoginLogos.svg | 30 +++++++++---------- src/util/main/banner.ts | 1 + 9 files changed, 44 insertions(+), 25 deletions(-) diff --git a/src/@components/@common/HeadingTitleContainer/index.tsx b/src/@components/@common/HeadingTitleContainer/index.tsx index 696e0b98..9445ec88 100644 --- a/src/@components/@common/HeadingTitleContainer/index.tsx +++ b/src/@components/@common/HeadingTitleContainer/index.tsx @@ -1,5 +1,4 @@ import { RoutePaths } from "../../../core/routes/path"; -import { GTM_CLASS_NAME } from "../../../util/const/gtm"; import { HeadingTitle } from "../../../util/main/headingTitles"; import { St } from "./style"; @@ -7,10 +6,11 @@ export interface HeadingTitleContainerProps { headingTitles: HeadingTitle; paddingVerticalValue?: number; routePath?: RoutePaths; + className?: string; } export default function HeadingTitleContainer(props: HeadingTitleContainerProps) { - const { headingTitles, paddingVerticalValue, routePath } = props; + const { headingTitles, paddingVerticalValue, routePath, className } = props; return ( @@ -19,7 +19,7 @@ export default function HeadingTitleContainer(props: HeadingTitleContainerProps) {headingTitles.content} {headingTitles && routePath && ( - + 더보기 )} diff --git a/src/@components/MainPage/Banner/SlideContent/index.tsx b/src/@components/MainPage/Banner/SlideContent/index.tsx index 9c353cf1..3ad66d85 100644 --- a/src/@components/MainPage/Banner/SlideContent/index.tsx +++ b/src/@components/MainPage/Banner/SlideContent/index.tsx @@ -1,5 +1,7 @@ +import { GTM_CLASS_NAME } from "../../../../util/const/gtm"; import { newBannerType } from "../../../../util/main/banner"; import * as St from "./style"; + const DATE_FORMAT = { START: 2, END: 10, @@ -14,7 +16,11 @@ export default function SlideContent(props: newBannerType) { const { isLast, date, isLightMode, cards, linkTo } = props; if (isLast) { - return 추가하러가기; + return ( + + 추가하러가기 + + ); } return ( diff --git a/src/@components/MainPage/Banner/index.tsx b/src/@components/MainPage/Banner/index.tsx index a4dd8ca2..dd5cb379 100644 --- a/src/@components/MainPage/Banner/index.tsx +++ b/src/@components/MainPage/Banner/index.tsx @@ -6,6 +6,7 @@ import { Swiper, SwiperSlide } from "swiper/react"; import { routePaths } from "../../../core/routes/path"; import { LocationType } from "../../../types/cardCollection"; import { externalLinks } from "../../../util/const/externalLinks"; +import { GTM_CLASS_NAME } from "../../../util/const/gtm"; import { newBannerImages, newBannerType } from "../../../util/main/banner"; import { useRecentlyBookmarked } from "../../@common/hooks/useRecentlyBookmarked"; import useBannerSwiper from "../hooks/useBannerSwiper"; @@ -27,6 +28,7 @@ export default function Banner() { cards: recentlyBookmarkedCards, linkTo: `${routePaths.CardCollection}?type=${LocationType.RECENT}`, isLightMode: false, + className: GTM_CLASS_NAME.mainBannerHot, }, { bannerImage: newBannerImages[1], @@ -36,6 +38,7 @@ export default function Banner() { cards: recentlyUpdatedCards, linkTo: `${routePaths.CardCollection}?type=${LocationType.UPDATE}`, isLightMode: true, + className: GTM_CLASS_NAME.mainBannerNew, }, { bannerImage: newBannerImages[2], diff --git a/src/@components/MainPage/BestPiickle/index.tsx b/src/@components/MainPage/BestPiickle/index.tsx index 84f61824..934bf7df 100644 --- a/src/@components/MainPage/BestPiickle/index.tsx +++ b/src/@components/MainPage/BestPiickle/index.tsx @@ -1,5 +1,6 @@ import { routePaths } from "../../../core/routes/path"; import { LocationType } from "../../../types/cardCollection"; +import { GTM_CLASS_NAME } from "../../../util/const/gtm"; import { headingTitles } from "../../../util/main/headingTitles"; import BestPiickleCard from "../../@common/BestPiickleCard"; import HeadingTitleContainer from "../../@common/HeadingTitleContainer"; @@ -17,6 +18,7 @@ export default function BestPiickle() { headingTitles={headingTitles[0]} paddingVerticalValue={4} routePath={routePaths.BestPiicklePage} + className={GTM_CLASS_NAME.mainBestPiickleMore} /> {bestPiickle && ( diff --git a/src/@components/MainPage/MoodPiickle/index.tsx b/src/@components/MainPage/MoodPiickle/index.tsx index 72aa5a17..c5a2621d 100644 --- a/src/@components/MainPage/MoodPiickle/index.tsx +++ b/src/@components/MainPage/MoodPiickle/index.tsx @@ -27,6 +27,7 @@ export default function MoodPiickle() { headingTitles={headingTitles[1]} paddingVerticalValue={4} routePath={routePaths.Category} + className={GTM_CLASS_NAME.mainMoodPiickleMore} /> {randomCategoryLists && diff --git a/src/@components/MainPage/StripBanner/index.tsx b/src/@components/MainPage/StripBanner/index.tsx index f3920c7e..08b2880b 100644 --- a/src/@components/MainPage/StripBanner/index.tsx +++ b/src/@components/MainPage/StripBanner/index.tsx @@ -1,15 +1,18 @@ import { IcSocialLoginLogos } from "../../../asset/icon"; import { routePaths } from "../../../core/routes/path"; +import { GTM_CLASS_NAME } from "../../../util/const/gtm"; import * as St from "./style"; export default function StripBanner() { return ( - - - 소셜로그인하고 북마크 기능을 확인해보세요! - 소셜로그인과 북마크 기능인 ‘마이피클’을 이용해 편하게 피클해요! + + + 소셜로그인하고 북마크 기능을 확인해보세요! + + 소셜로그인과 북마크 기능인 ‘마이피클’을 이용해 편하게 피클해요! + - + ); } diff --git a/src/@components/MainPage/TopicLink/index.tsx b/src/@components/MainPage/TopicLink/index.tsx index 494a00c4..2bdca7db 100644 --- a/src/@components/MainPage/TopicLink/index.tsx +++ b/src/@components/MainPage/TopicLink/index.tsx @@ -1,4 +1,5 @@ import { externalLinks } from "../../../util/const/externalLinks"; +import { GTM_CLASS_NAME } from "../../../util/const/gtm"; import * as St from "./style"; export default function TopicLink() { @@ -6,7 +7,9 @@ export default function TopicLink() { 대화주제를 주세요 제발요:0 - 도움주러 가기 + + 도움주러 가기 + diff --git a/src/asset/icon/socialLoginLogos.svg b/src/asset/icon/socialLoginLogos.svg index 23e70d68..014d19bb 100644 --- a/src/asset/icon/socialLoginLogos.svg +++ b/src/asset/icon/socialLoginLogos.svg @@ -1,38 +1,38 @@ - - - + + + - - + + - + - - + + - + - + - - + + - + - - + + diff --git a/src/util/main/banner.ts b/src/util/main/banner.ts index d7af8c5a..e58d2844 100644 --- a/src/util/main/banner.ts +++ b/src/util/main/banner.ts @@ -35,4 +35,5 @@ export interface newBannerType { linkTo: string; isLightMode: boolean; isLast?: boolean; + className?: string; } From 46f30b86ef0ad2f3277df5047ddaa1102e2d02c9 Mon Sep 17 00:00:00 2001 From: NYeonK Date: Tue, 22 Aug 2023 02:06:30 +0900 Subject: [PATCH 03/10] [ feat ] add card gtm className --- src/@components/@common/Toast/ToastProvider.tsx | 9 +++++++-- .../CardCollectionPage/Card/CardMenu/index.tsx | 12 ++++++------ .../CardCollectionPage/Card/LastCard/index.tsx | 13 ++++++++++--- .../CardCollectionPage/Card/MenuModal/index.tsx | 15 ++++++++++----- src/@components/CardCollectionPage/Card/index.tsx | 6 +++++- .../CardCollectionPage/CardSlider/index.tsx | 5 ++++- src/asset/icon/IcBookmarkCheck_23_28.tsx | 9 ++++++++- src/asset/icon/IcMenuBtn.tsx | 14 ++++++++++---- src/asset/icon/IcShareBtn.tsx | 9 ++++++++- 9 files changed, 68 insertions(+), 24 deletions(-) diff --git a/src/@components/@common/Toast/ToastProvider.tsx b/src/@components/@common/Toast/ToastProvider.tsx index 84dbd08f..813f22c9 100644 --- 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"; @@ -34,7 +35,11 @@ export default function ToastProvider({ children }: PropsWithChildren) { {toast.message} - {toast.handleClickCancel && 취소} + {toast.handleClickCancel && ( + + 취소 + + )} )} diff --git a/src/@components/CardCollectionPage/Card/CardMenu/index.tsx b/src/@components/CardCollectionPage/Card/CardMenu/index.tsx index cbe001d0..464bb65b 100644 --- a/src/@components/CardCollectionPage/Card/CardMenu/index.tsx +++ b/src/@components/CardCollectionPage/Card/CardMenu/index.tsx @@ -21,24 +21,24 @@ export default function CardMenu(props: CardMenuProps) { return ( - + - handleCopyClipBoard(_id)}> - + handleCopyClipBoard(_id)}> + - 공유하기 + 공유하기 handleClickBookmark(_id)} aria-label="북마크" role="dialog"> - + - 저장하기 + 저장하기 ); diff --git a/src/@components/CardCollectionPage/Card/LastCard/index.tsx b/src/@components/CardCollectionPage/Card/LastCard/index.tsx index 88b1a0f9..4c062ca0 100644 --- 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끊임없는 대화를 위해 버튼을 선택해주세요 - {isReplayBtnShow && 비슷한 주제 계속 보기} - 카테고리 보러 가기 + {isReplayBtnShow && ( + + 비슷한 주제 계속 보기 + + )} + + 카테고리 보러 가기 + ); diff --git a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx index 2d7fba98..c554865e 100644 --- a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx +++ b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx @@ -1,6 +1,5 @@ -import { useEffect, useState } from "react"; - 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"; @@ -21,6 +20,7 @@ type ModalItem = { title: string; isNeedLogin?: boolean; handleClickItem: () => void; + className: string; }; export default function MenuModal(props: MenuModalProps) { @@ -50,6 +50,7 @@ export default function MenuModal(props: MenuModalProps) { closeHandler(); showToast({ message: "🥰 소중한 의견 주셔서 감사해요", duration: 2.5 }); }, + className: GTM_CLASS_NAME.cardEtcBad, }, { emoji: "👀", @@ -61,6 +62,7 @@ export default function MenuModal(props: MenuModalProps) { onSuccess: onSuccessAddBlacklist, }); }, + className: GTM_CLASS_NAME.cardEtcBlock, }, { emoji: "❓", @@ -69,6 +71,7 @@ export default function MenuModal(props: MenuModalProps) { closeHandler(); showToast({ message: "📢 다른 사람들의 의견을 모아서 들려드릴게요", duration: 2.5 }); }, + className: GTM_CLASS_NAME.cardEtcWonder, }, ]; @@ -80,10 +83,12 @@ export default function MenuModal(props: MenuModalProps) { return null; } else { return ( - - {emoji} + + {emoji} {title} - {isNeedLogin && 로그인 시 사용가능 합니다} + {isNeedLogin && ( + 로그인 시 사용가능 합니다 + )} ); } diff --git a/src/@components/CardCollectionPage/Card/index.tsx b/src/@components/CardCollectionPage/Card/index.tsx index 79711a69..f97b6268 100644 --- a/src/@components/CardCollectionPage/Card/index.tsx +++ b/src/@components/CardCollectionPage/Card/index.tsx @@ -39,7 +39,11 @@ const Card = (props: LoginCheckProps) => { {getIsBlacklist(_id) && ( 다시 안보기를 설정한 주제입니다 - handleClickCancelBlacklist({ _id })}>취소하기 + handleClickCancelBlacklist({ _id })} + className={GTM_CLASS_NAME.cardEtcCancelBlock}> + 취소하기 + )} diff --git a/src/@components/CardCollectionPage/CardSlider/index.tsx b/src/@components/CardCollectionPage/CardSlider/index.tsx index b507fb80..d8262d72 100644 --- a/src/@components/CardCollectionPage/CardSlider/index.tsx +++ b/src/@components/CardCollectionPage/CardSlider/index.tsx @@ -4,6 +4,7 @@ import { Swiper, SwiperSlide } from "swiper/react"; import { CardList } from "../../../types/cardCollection"; import { externalLinks } from "../../../util/const/externalLinks"; +import { GTM_CLASS_NAME } from "../../../util/const/gtm"; import Card from "../Card"; import LastCard from "../Card/LastCard"; import useCardSwiper from "../hooks/useCardSwiper"; @@ -32,7 +33,9 @@ const CardSlider = (props: CardSliderProps) => { 피클에게 전할 말이 있다면 피드백을 남겨주세요 - 피드백 남기기 + + 피드백 남기기 + diff --git a/src/asset/icon/IcBookmarkCheck_23_28.tsx b/src/asset/icon/IcBookmarkCheck_23_28.tsx index b25f53ac..be097853 100644 --- a/src/asset/icon/IcBookmarkCheck_23_28.tsx +++ b/src/asset/icon/IcBookmarkCheck_23_28.tsx @@ -1,7 +1,14 @@ export default function IcBookmarkCheck_23_28({ isChecked }: { isChecked: boolean }) { return ( - + - - - + + + + ); } diff --git a/src/asset/icon/IcShareBtn.tsx b/src/asset/icon/IcShareBtn.tsx index 5c95d4da..18797971 100644 --- a/src/asset/icon/IcShareBtn.tsx +++ b/src/asset/icon/IcShareBtn.tsx @@ -1,7 +1,14 @@ export default function IcShareBtn({ isLighted }: { isLighted?: boolean }) { return ( - + Date: Wed, 23 Aug 2023 05:39:21 +0900 Subject: [PATCH 04/10] =?UTF-8?q?[=20feat=20]=20withCredentials=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20-=20=ED=88=AC=ED=91=9C=ED=95=98=EA=B8=B0?= =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=EC=97=90=EB=A7=8C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@components/MainPage/hooks/useBallotLists.ts | 6 +++++- src/@components/VotePage/hooks/useBallotTopic.ts | 10 +++++++--- src/core/api/common/axios.ts | 11 +++++------ src/core/api/vote.ts | 2 +- 4 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/@components/MainPage/hooks/useBallotLists.ts b/src/@components/MainPage/hooks/useBallotLists.ts index 222b85b7..d498b9bd 100644 --- a/src/@components/MainPage/hooks/useBallotLists.ts +++ b/src/@components/MainPage/hooks/useBallotLists.ts @@ -7,7 +7,11 @@ import { PiickleSWRResponse } from "../../../types/remote/swr"; export function useBallotLists(shoudOnSuspense = false) { const swrSetting = shoudOnSuspense ? { suspense: true } : { suspense: false }; - const { data } = useSWR>(`${PATH.BALLOTS}`, realReq.GET_SWR, swrSetting); + const { data } = useSWR>( + `${PATH.BALLOTS}`, + (url) => realReq.GET_SWR(url, { withCredentials: true }), + swrSetting, + ); return { ballotLists: data?.data, diff --git a/src/@components/VotePage/hooks/useBallotTopic.ts b/src/@components/VotePage/hooks/useBallotTopic.ts index bd92ff9a..ae7b4d9c 100644 --- a/src/@components/VotePage/hooks/useBallotTopic.ts +++ b/src/@components/VotePage/hooks/useBallotTopic.ts @@ -7,9 +7,13 @@ import { BallotTopicData } from "../../../types/ballots"; import { PiickleSWRResponse } from "../../../types/remote/swr"; export default function useBallotTopic(ballotId: string) { - const { data } = useSWR>(`${PATH.BALLOTS}/${ballotId}`, realReq.GET_SWR, { - suspense: true, - }); + const { data } = useSWR>( + `${PATH.BALLOTS}/${ballotId}`, + (url) => realReq.GET_SWR(url, { withCredentials: true }), + { + suspense: true, + }, + ); const { mutate } = useSWRConfig(); const [isBeforeVotingState, setIsBeforeVotingState] = useState(true); diff --git a/src/core/api/common/axios.ts b/src/core/api/common/axios.ts index 4385f72b..25d2d3d2 100644 --- a/src/core/api/common/axios.ts +++ b/src/core/api/common/axios.ts @@ -1,16 +1,15 @@ -import axios from "axios"; +import axios, { AxiosRequestConfig } from "axios"; export const axiosInstance = axios.create({ baseURL: import.meta.env.VITE_BASE_URL, headers: { "Content-Type": "application/json", }, - // withCredentials: true, }); export const realReq = { - GET_SWR(path: string) { - return axiosInstance.get(path); + GET_SWR(path: string, option?: AxiosRequestConfig) { + return axiosInstance.get(path, option); }, async GET(path: string, option?: { params: string }) { @@ -18,8 +17,8 @@ export const realReq = { return data.data; }, - async POST(path: string, body: T) { - const data = await axiosInstance.post(path, body); + async POST(path: string, body: T, option?: AxiosRequestConfig) { + const data = await axiosInstance.post(path, body, option); return data.data; }, diff --git a/src/core/api/vote.ts b/src/core/api/vote.ts index fbe20008..d5c683e1 100644 --- a/src/core/api/vote.ts +++ b/src/core/api/vote.ts @@ -3,7 +3,7 @@ import { realReq } from "./common/axios"; import { PATH } from "./common/constants"; function postVote(postingVote: PostingVote) { - return realReq.POST(PATH.BALLOTS, postingVote); + return realReq.POST(PATH.BALLOTS, postingVote, { withCredentials: true }); } export const voteApi = { From f3e8277d372359f08418fc6c80545a84cd2ceb76 Mon Sep 17 00:00:00 2001 From: NYeonK Date: Thu, 24 Aug 2023 01:26:47 +0900 Subject: [PATCH 05/10] =?UTF-8?q?[=20feat=20]=20=ED=88=AC=ED=91=9C=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=EC=97=90=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../VoteContent/BeforeVoteList/index.tsx | 33 +++---------------- 1 file changed, 4 insertions(+), 29 deletions(-) diff --git a/src/@components/VotePage/VoteContent/BeforeVoteList/index.tsx b/src/@components/VotePage/VoteContent/BeforeVoteList/index.tsx index 82531ff6..bf2bdad3 100644 --- a/src/@components/VotePage/VoteContent/BeforeVoteList/index.tsx +++ b/src/@components/VotePage/VoteContent/BeforeVoteList/index.tsx @@ -2,11 +2,8 @@ import { useState } from "react"; import { IcCheckWithNoBg } from "../../../../asset/icon"; import { voteApi } from "../../../../core/api/vote"; -import useAuth from "../../../../core/hooks/useAuth"; import { BallotTopicData } from "../../../../types/ballots"; import { GTM_CLASS_NAME } from "../../../../util/const/gtm"; -import useModal from "../../../@common/hooks/useModal"; -import LoginModal from "../../../@common/LoginModal"; import St from "./style"; interface BeforeVoteListProps { @@ -15,11 +12,8 @@ interface BeforeVoteListProps { } export default function BeforeVoteList(props: BeforeVoteListProps) { - const { isLogin } = useAuth(); const { ballotTopic, mutateBallotState } = props; - const { isModalOpen: isLoginModalOpen, toggleModal: toggleLoginModal } = useModal(); - const [currentIdx, setCurrentIdx] = useState(""); const handleClickItem = (key: string) => { @@ -29,20 +23,10 @@ export default function BeforeVoteList(props: BeforeVoteListProps) { }); }; - const handleClickVote = () => { - if (!isLogin) { - toggleLoginModal(); - return; - } - - if (currentIdx !== "") { - handlePost(); - mutateBallotState(); - } - }; - - const handlePost = () => { + const handlePostVote = () => { + if (currentIdx === "") return; voteApi.postVote({ ballotTopicId: ballotTopic.ballotTopic._id, ballotItemId: currentIdx }); + mutateBallotState(); }; return ( @@ -59,18 +43,9 @@ export default function BeforeVoteList(props: BeforeVoteListProps) { ))} - + 투표하기 - - {isLoginModalOpen && ( - - )} ); } From b3993fc76e15f50ff4e824cff49471d45f7bba3b Mon Sep 17 00:00:00 2001 From: NYeonK Date: Thu, 24 Aug 2023 02:20:04 +0900 Subject: [PATCH 06/10] [ feat ] add bestPiicklePage gtm className --- .../LastBestPiickleCard/index.tsx | 7 +++++-- .../@common/BestPiickleCard/index.tsx | 16 ++++++++-------- .../BestPiickleRank/RankItem/index.tsx | 6 +++--- .../BestPiicklePage/BestPiickleRank/index.tsx | 5 ++++- .../BestPiickleRecommend/RecommendItem/index.tsx | 1 + .../BestPiickleRecommend/index.tsx | 5 +++++ src/@components/MainPage/BestPiickle/index.tsx | 2 ++ src/asset/icon/IcBookmarkCheck_16_20.tsx | 11 +++++++++-- 8 files changed, 37 insertions(+), 16 deletions(-) diff --git a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx index ce0f31e1..463c6209 100644 --- 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; + className?: string; } export default function LastBestPiickleCard(props: LastCardProps) { - const { handleClickCard } = props; + const { handleClickCard, className } = props; return ( @@ -14,7 +15,9 @@ export default function LastBestPiickleCard(props: LastCardProps) {
보고 싶다면? - 나머지 보기 + + 나머지 보기 + ); } diff --git a/src/@components/@common/BestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/index.tsx index 825f6ef0..e04d205e 100644 --- a/src/@components/@common/BestPiickleCard/index.tsx +++ b/src/@components/@common/BestPiickleCard/index.tsx @@ -14,12 +14,12 @@ interface BestPiickleCardProps { canNavigate: boolean; isLast?: boolean; locationType: LocationType; + className?: string; } export default function BestPiickleCard(props: BestPiickleCardProps) { - const { bestPiickle, idx, canNavigate, isLast, locationType } = props; + const { bestPiickle, idx, canNavigate, isLast, locationType, className } = props; const { content, tags } = bestPiickle; - const GTM_IDX_KEY = `mainBestPiickle${idx + 1}`; const navigateCardCollection = useNavigateCardCollection(locationType) as NavigateRecentCollectionType; @@ -29,19 +29,19 @@ export default function BestPiickleCard(props: BestPiickleCardProps) { }; return ( - + {!isLast ? ( - - + + {tags.map((tag: string, i: number) => { return {tag.slice(1)}; })} - {content} - 카드 보기 + {content} + 카드 보기 ) : ( - + )} ); diff --git a/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx index 03ef6073..a8b2bf3a 100644 --- 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) { {rank + 1} navigateRankCollection(rank)}>{content} - handleClickBookmark(cardId)}> - + handleClickBookmark(cardId)}> + ); diff --git a/src/@components/BestPiicklePage/BestPiickleRank/index.tsx b/src/@components/BestPiicklePage/BestPiickleRank/index.tsx index 31e3d5f5..86ace5f5 100644 --- 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() { /> ))} - navigateRankCollection(8)}>이어서 베스트 피클 카드 보기 + navigateRankCollection(8)}> + 이어서 베스트 피클 카드 보기 + {isLoginModalOpen && } diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx index 683ef3e8..83261881 100644 --- 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} + className={recommendList.classname} /> ); })} diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx index 05d3734b..8b71d6fd 100644 --- 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; + classname: string; }; export default function BestPiickleRecommend() { @@ -27,16 +29,19 @@ export default function BestPiickleRecommend() { subtitle: "💖 유저들이 가장 최근에 북마크한 대화주제", cards: recentlyBookmarkedCards, locationType: LocationType.RECENT, + classname: GTM_CLASS_NAME.bestRecentBookmark, }, { subtitle: "👩 여성이 북마크한 대화주제들", cards: femaleBookmarkedCards, locationType: LocationType.FEMALE, + classname: GTM_CLASS_NAME.bestFemaleBookmark, }, { subtitle: "👱‍♂️ 남성이 북마크한 대화주제를 확인해보세요", cards: maleBookmarkedCards, locationType: LocationType.MALE, + classname: GTM_CLASS_NAME.bestMaleBookmark, }, ]; diff --git a/src/@components/MainPage/BestPiickle/index.tsx b/src/@components/MainPage/BestPiickle/index.tsx index 934bf7df..ddacfef0 100644 --- a/src/@components/MainPage/BestPiickle/index.tsx +++ b/src/@components/MainPage/BestPiickle/index.tsx @@ -25,6 +25,7 @@ export default function BestPiickle() { {bestPiickle && bestPiickle.data.slice(0, 5).map((bestPiickle, idx) => { + const GTM_IDX_KEY = `mainBestPiickle${idx + 1}`; return ( ); })} diff --git a/src/asset/icon/IcBookmarkCheck_16_20.tsx b/src/asset/icon/IcBookmarkCheck_16_20.tsx index 83b82367..22735c31 100644 --- a/src/asset/icon/IcBookmarkCheck_16_20.tsx +++ b/src/asset/icon/IcBookmarkCheck_16_20.tsx @@ -1,7 +1,14 @@ -export default function IcBookmarkCheck_16_20({ isChecked }: { isChecked: boolean }) { +export default function IcBookmarkCheck_16_20({ isChecked, className }: { isChecked: boolean; className: string }) { return ( - + Date: Thu, 24 Aug 2023 02:26:32 +0900 Subject: [PATCH 07/10] =?UTF-8?q?[=20refactor=20]=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20className=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@components/MainPage/StripBanner/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/@components/MainPage/StripBanner/index.tsx b/src/@components/MainPage/StripBanner/index.tsx index 08b2880b..26b992ad 100644 --- a/src/@components/MainPage/StripBanner/index.tsx +++ b/src/@components/MainPage/StripBanner/index.tsx @@ -12,7 +12,7 @@ export default function StripBanner() { 소셜로그인과 북마크 기능인 ‘마이피클’을 이용해 편하게 피클해요! - + ); } From dbae60d7665816251f6e0ebd0238ba2c603dafe4 Mon Sep 17 00:00:00 2001 From: NYeonK Date: Thu, 24 Aug 2023 02:36:54 +0900 Subject: [PATCH 08/10] [ feat ] add mainPage gtm className (2/2) --- src/@components/MainPage/Banner/Slide/index.tsx | 12 ++++++------ .../MainPage/Banner/SlideContent/index.tsx | 14 +++++++------- src/@components/MainPage/Banner/index.tsx | 2 +- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/@components/MainPage/Banner/Slide/index.tsx b/src/@components/MainPage/Banner/Slide/index.tsx index 614318be..c1a7ecf5 100644 --- 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, className } = props; return ( - - - - {phrase} - {topic} + + + + {phrase} + {topic} diff --git a/src/@components/MainPage/Banner/SlideContent/index.tsx b/src/@components/MainPage/Banner/SlideContent/index.tsx index 3ad66d85..8aecde28 100644 --- a/src/@components/MainPage/Banner/SlideContent/index.tsx +++ b/src/@components/MainPage/Banner/SlideContent/index.tsx @@ -13,7 +13,7 @@ const CARDS_LIMIT = { }; export default function SlideContent(props: newBannerType) { - const { isLast, date, isLightMode, cards, linkTo } = props; + const { isLast, date, isLightMode, cards, linkTo, className } = props; if (isLast) { return ( @@ -24,20 +24,20 @@ export default function SlideContent(props: newBannerType) { } return ( - - - + + + {date?.replace(/-/g, ".").substring(DATE_FORMAT.START, DATE_FORMAT.END)} - New + New {cards?.slice(CARDS_LIMIT.START, CARDS_LIMIT.END).map((card) => ( - + {card.content} ))} - + ); } diff --git a/src/@components/MainPage/Banner/index.tsx b/src/@components/MainPage/Banner/index.tsx index dd5cb379..627051d4 100644 --- a/src/@components/MainPage/Banner/index.tsx +++ b/src/@components/MainPage/Banner/index.tsx @@ -58,7 +58,7 @@ export default function Banner() { {newBanners.map((banner, idx) => ( - + ))} From 564c8f6b9d35aebab370c82f1f1cc6558543ad14 Mon Sep 17 00:00:00 2001 From: NYeonK Date: Fri, 25 Aug 2023 08:12:18 +0900 Subject: [PATCH 09/10] =?UTF-8?q?[=20refactor=20]=20props=20=EC=8B=9C?= =?UTF-8?q?=EC=97=90,=20className=EC=9D=84=20gtmClassName=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LastBestPiickleCard/index.tsx | 6 +++--- .../@common/BestPiickleCard/index.tsx | 17 ++++++++--------- .../@common/HeadingTitleContainer/index.tsx | 6 +++--- .../RecommendItem/index.tsx | 2 +- .../BestPiickleRecommend/index.tsx | 8 ++++---- .../CardCollectionPage/Card/MenuModal/index.tsx | 16 ++++++++-------- src/@components/MainPage/Banner/Slide/index.tsx | 12 ++++++------ .../MainPage/Banner/SlideContent/index.tsx | 14 +++++++------- src/@components/MainPage/Banner/index.tsx | 6 +++--- src/@components/MainPage/BestPiickle/index.tsx | 4 ++-- src/@components/MainPage/MoodPiickle/index.tsx | 2 +- src/util/main/banner.ts | 2 +- 12 files changed, 47 insertions(+), 48 deletions(-) diff --git a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx index 463c6209..b1506552 100644 --- a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx +++ b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx @@ -2,11 +2,11 @@ import * as St from "./style"; interface LastCardProps { handleClickCard: () => void; - className?: string; + gtmClassName?: string; } export default function LastBestPiickleCard(props: LastCardProps) { - const { handleClickCard, className } = props; + const { handleClickCard, gtmClassName } = props; return ( @@ -15,7 +15,7 @@ export default function LastBestPiickleCard(props: LastCardProps) {
보고 싶다면? - + 나머지 보기 diff --git a/src/@components/@common/BestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/index.tsx index e04d205e..251ecad6 100644 --- 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,11 +13,11 @@ interface BestPiickleCardProps { canNavigate: boolean; isLast?: boolean; locationType: LocationType; - className?: string; + gtmClassName?: string; } export default function BestPiickleCard(props: BestPiickleCardProps) { - const { bestPiickle, idx, canNavigate, isLast, locationType, className } = props; + const { bestPiickle, idx, canNavigate, isLast, locationType, gtmClassName } = props; const { content, tags } = bestPiickle; const navigateCardCollection = useNavigateCardCollection(locationType) as NavigateRecentCollectionType; @@ -29,19 +28,19 @@ export default function BestPiickleCard(props: BestPiickleCardProps) { }; return ( - + {!isLast ? ( - - + + {tags.map((tag: string, i: number) => { return {tag.slice(1)}; })} - {content} - 카드 보기 + {content} + 카드 보기 ) : ( - + )} ); diff --git a/src/@components/@common/HeadingTitleContainer/index.tsx b/src/@components/@common/HeadingTitleContainer/index.tsx index 9445ec88..143f383e 100644 --- a/src/@components/@common/HeadingTitleContainer/index.tsx +++ b/src/@components/@common/HeadingTitleContainer/index.tsx @@ -6,11 +6,11 @@ export interface HeadingTitleContainerProps { headingTitles: HeadingTitle; paddingVerticalValue?: number; routePath?: RoutePaths; - className?: string; + gtmClassName?: string; } export default function HeadingTitleContainer(props: HeadingTitleContainerProps) { - const { headingTitles, paddingVerticalValue, routePath, className } = props; + const { headingTitles, paddingVerticalValue, routePath, gtmClassName } = props; return ( @@ -19,7 +19,7 @@ export default function HeadingTitleContainer(props: HeadingTitleContainerProps) {headingTitles.content} {headingTitles && routePath && ( - + 더보기 )} diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx index 83261881..2faa4972 100644 --- a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx @@ -31,7 +31,7 @@ export default function RecommendItem(props: RecommendProps) { idx === (recommendList.cards.length > BEST_PIICKLE_TOTAL_COUNT && BEST_PIICKLE_TOTAL_COUNT - 1) } locationType={recommendList.locationType} - className={recommendList.classname} + gtmClassName={recommendList.gtmClassName} /> ); })} diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx index 8b71d6fd..3d3ffa5d 100644 --- a/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx @@ -16,7 +16,7 @@ export type recommendListType = { subtitle: string; cards?: CardList[]; locationType: LocationType; - classname: string; + gtmClassName: string; }; export default function BestPiickleRecommend() { @@ -29,19 +29,19 @@ export default function BestPiickleRecommend() { subtitle: "💖 유저들이 가장 최근에 북마크한 대화주제", cards: recentlyBookmarkedCards, locationType: LocationType.RECENT, - classname: GTM_CLASS_NAME.bestRecentBookmark, + gtmClassName: GTM_CLASS_NAME.bestRecentBookmark, }, { subtitle: "👩 여성이 북마크한 대화주제들", cards: femaleBookmarkedCards, locationType: LocationType.FEMALE, - classname: GTM_CLASS_NAME.bestFemaleBookmark, + gtmClassName: GTM_CLASS_NAME.bestFemaleBookmark, }, { subtitle: "👱‍♂️ 남성이 북마크한 대화주제를 확인해보세요", cards: maleBookmarkedCards, locationType: LocationType.MALE, - classname: GTM_CLASS_NAME.bestMaleBookmark, + gtmClassName: GTM_CLASS_NAME.bestMaleBookmark, }, ]; diff --git a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx index c554865e..776c1def 100644 --- a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx +++ b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx @@ -20,7 +20,7 @@ type ModalItem = { title: string; isNeedLogin?: boolean; handleClickItem: () => void; - className: string; + gtmClassName: string; }; export default function MenuModal(props: MenuModalProps) { @@ -50,7 +50,7 @@ export default function MenuModal(props: MenuModalProps) { closeHandler(); showToast({ message: "🥰 소중한 의견 주셔서 감사해요", duration: 2.5 }); }, - className: GTM_CLASS_NAME.cardEtcBad, + gtmClassName: GTM_CLASS_NAME.cardEtcBad, }, { emoji: "👀", @@ -62,7 +62,7 @@ export default function MenuModal(props: MenuModalProps) { onSuccess: onSuccessAddBlacklist, }); }, - className: GTM_CLASS_NAME.cardEtcBlock, + gtmClassName: GTM_CLASS_NAME.cardEtcBlock, }, { emoji: "❓", @@ -71,23 +71,23 @@ export default function MenuModal(props: MenuModalProps) { closeHandler(); showToast({ message: "📢 다른 사람들의 의견을 모아서 들려드릴게요", duration: 2.5 }); }, - className: GTM_CLASS_NAME.cardEtcWonder, + gtmClassName: GTM_CLASS_NAME.cardEtcWonder, }, ]; return ( - {ModalItems.map(({ emoji, title, isNeedLogin, handleClickItem }, idx) => { + {ModalItems.map(({ emoji, title, isNeedLogin, handleClickItem, gtmClassName }, idx) => { if (idx === 1 && !isBlockShow) { return null; } else { return ( - - {emoji} + + {emoji} {title} {isNeedLogin && ( - 로그인 시 사용가능 합니다 + 로그인 시 사용가능 합니다 )} ); diff --git a/src/@components/MainPage/Banner/Slide/index.tsx b/src/@components/MainPage/Banner/Slide/index.tsx index c1a7ecf5..9d74ddac 100644 --- 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, className } = props; + const { bannerImage, phrase, topic, isLightMode, isLast, gtmClassName } = props; return ( - - - - {phrase} - {topic} + + + + {phrase} + {topic} diff --git a/src/@components/MainPage/Banner/SlideContent/index.tsx b/src/@components/MainPage/Banner/SlideContent/index.tsx index 8aecde28..16a67a15 100644 --- a/src/@components/MainPage/Banner/SlideContent/index.tsx +++ b/src/@components/MainPage/Banner/SlideContent/index.tsx @@ -13,7 +13,7 @@ const CARDS_LIMIT = { }; export default function SlideContent(props: newBannerType) { - const { isLast, date, isLightMode, cards, linkTo, className } = props; + const { isLast, date, isLightMode, cards, linkTo, gtmClassName } = props; if (isLast) { return ( @@ -24,20 +24,20 @@ export default function SlideContent(props: newBannerType) { } return ( - - - + + + {date?.replace(/-/g, ".").substring(DATE_FORMAT.START, DATE_FORMAT.END)} - New + New {cards?.slice(CARDS_LIMIT.START, CARDS_LIMIT.END).map((card) => ( - + {card.content} ))} - + ); } diff --git a/src/@components/MainPage/Banner/index.tsx b/src/@components/MainPage/Banner/index.tsx index 627051d4..c58cfa88 100644 --- a/src/@components/MainPage/Banner/index.tsx +++ b/src/@components/MainPage/Banner/index.tsx @@ -28,7 +28,7 @@ export default function Banner() { cards: recentlyBookmarkedCards, linkTo: `${routePaths.CardCollection}?type=${LocationType.RECENT}`, isLightMode: false, - className: GTM_CLASS_NAME.mainBannerHot, + gtmClassName: GTM_CLASS_NAME.mainBannerHot, }, { bannerImage: newBannerImages[1], @@ -38,7 +38,7 @@ export default function Banner() { cards: recentlyUpdatedCards, linkTo: `${routePaths.CardCollection}?type=${LocationType.UPDATE}`, isLightMode: true, - className: GTM_CLASS_NAME.mainBannerNew, + gtmClassName: GTM_CLASS_NAME.mainBannerNew, }, { bannerImage: newBannerImages[2], @@ -58,7 +58,7 @@ export default function Banner() { {newBanners.map((banner, idx) => ( - + ))} diff --git a/src/@components/MainPage/BestPiickle/index.tsx b/src/@components/MainPage/BestPiickle/index.tsx index ddacfef0..c039b663 100644 --- a/src/@components/MainPage/BestPiickle/index.tsx +++ b/src/@components/MainPage/BestPiickle/index.tsx @@ -18,7 +18,7 @@ export default function BestPiickle() { headingTitles={headingTitles[0]} paddingVerticalValue={4} routePath={routePaths.BestPiicklePage} - className={GTM_CLASS_NAME.mainBestPiickleMore} + gtmClassName={GTM_CLASS_NAME.mainBestPiickleMore} /> {bestPiickle && ( @@ -33,7 +33,7 @@ export default function BestPiickle() { idx={idx} canNavigate={!isDragging} locationType={LocationType.BEST} - className={GTM_CLASS_NAME[GTM_IDX_KEY]} + gtmClassName={GTM_CLASS_NAME[GTM_IDX_KEY]} /> ); })} diff --git a/src/@components/MainPage/MoodPiickle/index.tsx b/src/@components/MainPage/MoodPiickle/index.tsx index c5a2621d..51fa476b 100644 --- a/src/@components/MainPage/MoodPiickle/index.tsx +++ b/src/@components/MainPage/MoodPiickle/index.tsx @@ -27,7 +27,7 @@ export default function MoodPiickle() { headingTitles={headingTitles[1]} paddingVerticalValue={4} routePath={routePaths.Category} - className={GTM_CLASS_NAME.mainMoodPiickleMore} + gtmClassName={GTM_CLASS_NAME.mainMoodPiickleMore} /> {randomCategoryLists && diff --git a/src/util/main/banner.ts b/src/util/main/banner.ts index e58d2844..47bb2123 100644 --- a/src/util/main/banner.ts +++ b/src/util/main/banner.ts @@ -35,5 +35,5 @@ export interface newBannerType { linkTo: string; isLightMode: boolean; isLast?: boolean; - className?: string; + gtmClassName?: string; } From 8dc9b850dc421f5a8f2f84343d8046d88d15c499 Mon Sep 17 00:00:00 2001 From: NYeonK Date: Fri, 25 Aug 2023 08:35:00 +0900 Subject: [PATCH 10/10] =?UTF-8?q?[=20fix=20]=20className=20type=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/asset/icon/IcBookmarkCheck_16_20.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/asset/icon/IcBookmarkCheck_16_20.tsx b/src/asset/icon/IcBookmarkCheck_16_20.tsx index 22735c31..8d48e805 100644 --- a/src/asset/icon/IcBookmarkCheck_16_20.tsx +++ b/src/asset/icon/IcBookmarkCheck_16_20.tsx @@ -1,4 +1,4 @@ -export default function IcBookmarkCheck_16_20({ isChecked, className }: { isChecked: boolean; className: string }) { +export default function IcBookmarkCheck_16_20({ isChecked, className }: { isChecked: boolean; className?: string }) { return (