From b22288fb5d510470f96312b7575914d88029e899 Mon Sep 17 00:00:00 2001 From: jangheon Pyo Date: Fri, 12 Apr 2024 19:18:12 +0900 Subject: [PATCH] =?UTF-8?q?[Home]=20=C2=A0=20Detail=20Notes=20:=20=C2=A0?= =?UTF-8?q?=201.=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=8B=9C=EB=82=98?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EC=A0=81=EC=9A=A9=E2=80=A8>=20useScrollTo?= =?UTF-8?q?pByDistance=20Hook=20=EC=9D=B4=EC=9A=A9=ED=95=98=EC=97=AC=20?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=8B=9C=EB=82=98=EB=A6=AC?= =?UTF-8?q?=EC=98=A4=20=EC=A0=81=EC=9A=A9=202.=20HomeBanner=E2=80=A8>=20im?= =?UTF-8?q?g=20=ED=83=9C=EA=B7=B8=20->=20CustomImage=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD=ED=95=98?= =?UTF-8?q?=EC=97=AC=20onError=20=EC=B2=98=EB=A6=AC=20=EB=90=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD=203.=20=EC=B4=88=EA=B8=B0=20Focu?= =?UTF-8?q?s=E2=80=A8>=20setTimeOut=20=EC=9D=B4=EC=9A=A9=ED=95=98=EC=97=AC?= =?UTF-8?q?=20=EC=B4=88=EA=B8=B0=20=EC=A7=84=EC=9E=85=EC=8B=9C=20Focus=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/HomePanel/BestSeller/BestSeller.jsx | 80 +++++++-- .../views/HomePanel/HomeBanner/HomeBanner.jsx | 34 ++-- .../views/HomePanel/HomeBanner/RandomUnit.jsx | 85 ++++++---- .../HomePanel/HomeBanner/RollingUnit.jsx | 93 +++++++---- .../views/HomePanel/HomeOnSale/HomeOnSale.jsx | 35 +++- .../src/views/HomePanel/HomePanel.jsx | 16 +- .../HomePanel/PopularShow/PopularShow.jsx | 154 +++++++++++------- .../SubCategory/CategoryNav/CategoryNav.jsx | 30 ++++ .../HomePanel/SubCategory/SubCategory.jsx | 76 ++++++--- 9 files changed, 417 insertions(+), 186 deletions(-) diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx index 330d19ab..029747cd 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx @@ -14,6 +14,7 @@ import useScrollTo from "../../../hooks/useScrollTo"; import { panel_names } from "../../../utils/Config"; import { $L } from "../../../utils/helperMethods"; import css from "./BestSeller.module.less"; +import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance"; const SpottableComponent = Spottable("div"); const Container = SpotlightContainerDecorator( @@ -21,7 +22,7 @@ const Container = SpotlightContainerDecorator( "div" ); -const BestSeller = ({ order }) => { +const BestSeller = ({ order, scrollTopBody }) => { const dispatch = useDispatch(); const bestSellerDatas = useSelector( (state) => state.product.bestSellerData.bestSeller @@ -32,6 +33,8 @@ const BestSeller = ({ order }) => { scrollLeft, true ); + const { scrollTopByDistance } = useScrollTopByDistance(); + const { cursorVisible } = useSelector((state) => state.common.appStatus); useEffect(() => { setDrawChk(true); }, [bestSellerDatas]); @@ -56,10 +59,40 @@ const BestSeller = ({ order }) => { ) ); }); + + const handleBlur = useCallback((itemIndex) => { + if (itemIndex === 0) { + handleStopScrolling(); + } + }, []); + + const handleFocus = useCallback( + (itemIndex) => { + if (itemIndex === 0) { + handleScrollReset(); + } + + if (cursorVisible) { + return; + } + + scrollTopByDistance( + `[data-marker="scroll-marker"]`, + `[data-title-index="homeBestSellerTitle"]`, + scrollTopBody, + 36 + ); + }, + [cursorVisible] + ); + const orderStyle = useMemo(() => ({ order: order }), [order]); return ( - + { noScrollByWheel > {bestSellerDatas && - bestSellerDatas.map((item, index) => ( - handleCardClick(item)} - offerInfo={item.offerInfo} - /> - ))} + bestSellerDatas.map( + ( + { + prdtId, + imgUrl, + priceInfo, + prdtNm, + rankOrd, + patnrId, + offerInfo, + }, + itemIndex + ) => ( + handleFocus(itemIndex)} + onBlur={() => handleBlur(itemIndex)} + onClick={(e) => handleCardClick(e, patnrId, prdtId)} + offerInfo={offerInfo} + /> + ) + )} {drawChk && ( state.home.mainContentsData.homeMainContentsBannerInfos ); @@ -121,7 +122,7 @@ export default function HomeBanner({ scrollTop, selectTemplate, order }) { } }; - // const isLoading = bannerDataList !== "fulfilled"; + // const isLoading = bannerDataList !== "fulfilled"; // loading // useEffect(() => { @@ -139,11 +140,12 @@ export default function HomeBanner({ scrollTop, selectTemplate, order }) { useEffect(() => { if (!homeMainContentsBannerInfos) { dispatch(getHomeMainContents); - scrollTop({ animate: false }); + scrollTopBody({ animate: false }); } - startFocus(); console.log(homeMainContentsBannerInfos, "메인"); - }, [homeMainContentsBannerInfos, dispatch, scrollTop, selectTemplate]); + timerRef.current = setTimeout(() => startFocus()); + return () => clearTimeout(timerRef.current); + }, [homeMainContentsBannerInfos, dispatch, scrollTopBody, selectTemplate]); const templateBanner = (index) => { switch (selectTemplate) { @@ -192,14 +194,14 @@ export default function HomeBanner({ scrollTop, selectTemplate, order }) { bannerData={firstBanner} isHorizontal={true} spotlightId={"banner01"} - scrollTop={scrollTop} + scrollTopBody={scrollTopBody} /> ) : firstBanner && firstBanner.shptmDspyTpNm === "Random" ? ( ) : ( ) : secondBanner && secondBanner.shptmDspyTpNm === "Random" ? ( ) : ( ) : thirdBanner && thirdBanner.shptmDspyTpNm === "Random" ? ( ) : ( ) : forthBanner && forthBanner.shptmDspyTpNm === "Random" ? ( ) : (
- +

- +

) : randomData.shptmBanrTpNm == "LIVE" || @@ -236,7 +239,7 @@ export default function RandomUnit({ > {randomData.shptmBanrTpNm === "LIVE" && videoError === false ? (

- +

) : null} @@ -246,9 +249,11 @@ export default function RandomUnit({ randomData.shptmBanrTpNm === "LIVE" ? (
-

Click the screen to see more products! @@ -268,13 +273,19 @@ export default function RandomUnit({ ) : null} */} {randomData.tmnlImgPath == null ? ( - ) : ( - + )}

) : ( @@ -291,7 +302,11 @@ export default function RandomUnit({ {videoError === false ? (

- +

) : null} @@ -316,7 +331,11 @@ export default function RandomUnit({
- +
) : null} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx index c27a8436..8637ebdf 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx @@ -1,28 +1,22 @@ -import React, { - useCallback, - useEffect, - useState, -} from 'react'; +import React, { useCallback, useEffect, useState } from "react"; -import classNames from 'classnames'; -import { useDispatch } from 'react-redux'; +import classNames from "classnames"; +import { useDispatch } from "react-redux"; -import Spotlight from '@enact/spotlight'; -import SpotlightContainerDecorator - from '@enact/spotlight/SpotlightContainerDecorator'; -import Spottable from '@enact/spotlight/Spottable'; +import Spotlight from "@enact/spotlight"; +import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; +import Spottable from "@enact/spotlight/Spottable"; -import btnPlay from '../../../../assets/images/btn/btn-play-thumb-nor.png'; -import emptyHorImage - from '../../../../assets/images/img-home-banner-empty-hor.png'; -import emptyVerImage - from '../../../../assets/images/img-home-banner-empty-ver.png'; -import liveShow from '../../../../assets/images/tag-liveshow.png'; -import { pushPanel } from '../../../actions/panelActions'; -import usePriceInfo from '../../../hooks/usePriceInfo'; -import useScrollReset from '../../../hooks/useScrollReset'; -import { panel_names } from '../../../utils/Config'; -import css from './RollingUnit.module.less'; +import btnPlay from "../../../../assets/images/btn/btn-play-thumb-nor.png"; +import emptyHorImage from "../../../../assets/images/img-home-banner-empty-hor.png"; +import emptyVerImage from "../../../../assets/images/img-home-banner-empty-ver.png"; +import liveShow from "../../../../assets/images/tag-liveshow.png"; +import { pushPanel } from "../../../actions/panelActions"; +import usePriceInfo from "../../../hooks/usePriceInfo"; +import useScrollReset from "../../../hooks/useScrollReset"; +import { panel_names } from "../../../utils/Config"; +import css from "./RollingUnit.module.less"; +import CustomImage from "../../../components/CustomImage/CustomImage"; const SpottableComponent = Spottable("div"); @@ -34,7 +28,7 @@ const Container = SpotlightContainerDecorator( export default function RollingUnit({ bannerData, spotlightId, - scrollTop, + scrollTopBody, isHorizontal, }) { const rollingData = bannerData.bannerDetailInfos; @@ -50,7 +44,8 @@ export default function RollingUnit({ const dispatch = useDispatch(); - const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop); + const { handleScrollReset, handleStopScrolling } = + useScrollReset(scrollTopBody); // 비디오 에러일시, 클릭 이동 const videoErrorClick = () => { @@ -294,11 +289,19 @@ export default function RollingUnit({ spotlightDisabled={contentsFocus} >
- +

- +

) : rollingData[startIndex].shptmBanrTpNm === "LIVE" ? ( @@ -311,7 +314,7 @@ export default function RollingUnit({ spotlightDisabled={contentsFocus} >

- +

{rollingData[startIndex].tmnlImgPath == null ? ( - ) : ( - + )}
{rollingData[startIndex].tmnlImgPath == null ? ( "" ) : ( - + )}

- +

) : rollingData[startIndex].shptmBanrTpNm === "VOD" ? ( @@ -361,22 +374,28 @@ export default function RollingUnit({ )} > {rollingData[startIndex].tmnlImgPath == null ? ( - ) : ( - + )}
{rollingData[startIndex].tmnlImgPath == null ? ( "" ) : ( - + )}
@@ -403,7 +422,11 @@ export default function RollingUnit({
- +
) : null} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx index ecd821a0..d4f8a1e5 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx @@ -9,16 +9,42 @@ import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridL import { $L } from "../../../utils/helperMethods"; import css from "./HomeOnSale.module.less"; import HomeOnSaleItem from "./HomeOnSaleItem/HomeOnSaleItem"; +import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance"; +import useScrollTo from "../../../hooks/useScrollTo"; +import useScrollReset from "../../../hooks/useScrollReset"; const Container = SpotlightContainerDecorator( { enterTo: "last-focused" }, "div" ); -const HomeOnSale = ({ order, ...rest }) => { +const HomeOnSale = ({ order, scrollTopBody, ...rest }) => { const homeOnSaleInfos = useSelector( (state) => state.onSale.onSaleData.data.homeOnSaleInfos ); + const { cursorVisible } = useSelector((state) => state.common.appStatus); + const { scrollLeft } = useScrollTo(); + const { handleScrollReset } = useScrollReset(scrollLeft, true); + const { scrollTopByDistance } = useScrollTopByDistance(); + const handleFocus = useCallback( + (index) => { + if (index === 0) { + handleScrollReset(); + } + + if (cursorVisible) { + return; + } + + scrollTopByDistance( + `[data-marker="scroll-marker"]`, + `[data-title-index="homeOnSale"]`, + scrollTopBody, + 36 + ); + }, + [cursorVisible] + ); const renderItem = useCallback( ({ index, ...rest }) => { const itemData = homeOnSaleInfos[index]; @@ -29,6 +55,7 @@ const HomeOnSale = ({ order, ...rest }) => { key={index} homeOnSaleInfos={homeOnSaleInfos} itemData={itemData} + onFocus={() => handleFocus(index)} /> ); }, @@ -39,7 +66,11 @@ const HomeOnSale = ({ order, ...rest }) => { return (
- +
{homeOnSaleInfos && homeOnSaleInfos.length > 0 && ( {homeLayoutInfo && homeTopDisplayInfos && ( - + +
{hasTemplateCodeWithValue( homeLayoutInfoDetail, @@ -153,7 +155,7 @@ export default function HomePanel({ isOnTop }) { selectTemplate && ( )} {hasTemplateCodeWithValue( @@ -181,6 +184,7 @@ export default function HomePanel({ isOnTop }) { homeLayoutInfoDetail, TEMPLATE_CODE_CONF.ON_SALE )} + scrollTopBody={scrollTopBody} /> )} {hasTemplateCodeWithValue( @@ -192,6 +196,7 @@ export default function HomePanel({ isOnTop }) { homeLayoutInfoDetail, TEMPLATE_CODE_CONF.POPULAR_SHOW )} + scrollTopBody={scrollTopBody} /> )} {hasTemplateCodeWithValue( @@ -203,6 +208,7 @@ export default function HomePanel({ isOnTop }) { homeLayoutInfoDetail, TEMPLATE_CODE_CONF.BEST_SELLER )} + scrollTopBody={scrollTopBody} /> )}
diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx index 8238116d..9af880b3 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx @@ -1,32 +1,23 @@ -import React, { - useCallback, - useEffect, - useMemo, - useState, -} from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { - useDispatch, - useSelector, -} from 'react-redux'; +import { useDispatch, useSelector } from "react-redux"; -import { - SpotlightContainerDecorator, -} from '@enact/spotlight/SpotlightContainerDecorator'; -import Spottable from '@enact/spotlight/Spottable'; +import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; +import Spottable from "@enact/spotlight/Spottable"; -import { pushPanel } from '../../../actions/panelActions'; -import SectionTitle from '../../../components/SectionTitle/SectionTitle'; +import { pushPanel } from "../../../actions/panelActions"; +import SectionTitle from "../../../components/SectionTitle/SectionTitle"; import TItemCard, { IMAGETYPES, TYPES, -} from '../../../components/TItemCard/TItemCard'; -import TScroller from '../../../components/TScroller/TScroller'; -import useScrollReset from '../../../hooks/useScrollReset'; -import useScrollTo from '../../../hooks/useScrollTo'; -import { panel_names } from '../../../utils/Config'; -import { $L } from '../../../utils/helperMethods'; -import css from '../PopularShow/PopularShow.module.less'; +} from "../../../components/TItemCard/TItemCard"; +import TScroller from "../../../components/TScroller/TScroller"; +import useScrollReset from "../../../hooks/useScrollReset"; +import useScrollTo from "../../../hooks/useScrollTo"; +import { panel_names } from "../../../utils/Config"; +import { $L } from "../../../utils/helperMethods"; +import css from "../PopularShow/PopularShow.module.less"; +import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance"; const SpottableComponent = Spottable("div"); const Container = SpotlightContainerDecorator( @@ -34,7 +25,7 @@ const Container = SpotlightContainerDecorator( "div" ); -const PopularShow = ({ homeChk = true, order, ...rest }) => { +const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => { const dispatch = useDispatch(); const topInfos = useSelector((state) => state.main.top20ShowData.topInfos); @@ -44,21 +35,23 @@ const PopularShow = ({ homeChk = true, order, ...rest }) => { scrollLeft, true ); + const { scrollTopByDistance } = useScrollTopByDistance(); + const { cursorVisible } = useSelector((state) => state.common.appStatus); useEffect(() => { setDrawChk(true); }, [topInfos]); - const handleCardClick = useCallback((item) => { + const handleCardClick = useCallback((patnrId, showId, lgCatCd, showUrl) => { dispatch( pushPanel( { name: panel_names.PLAYER_PANEL, panelInfo: { - patnrId: item.patnrId, - showId: item.showId, - lgCatCd: item.lgCatCd, + patnrId: patnrId, + showId: showId, + lgCatCd: lgCatCd, shptmBanrTpNm: "VOD", - showUrl: item.showUrl, + showUrl: showUrl, }, }, [dispatch] @@ -76,10 +69,39 @@ const PopularShow = ({ homeChk = true, order, ...rest }) => { ) ); }); + const handleBlur = useCallback((itemIndex) => { + if (itemIndex === 0) { + handleStopScrolling(); + } + }, []); + + const handleFocus = useCallback( + (itemIndex) => { + if (itemIndex === 0) { + handleScrollReset(); + } + + if (cursorVisible) { + return; + } + + scrollTopByDistance( + `[data-marker="scroll-marker"]`, + `[data-title-index="homePopularShow"]`, + scrollTopBody, + 36 + ); + }, + [cursorVisible] + ); const orderStyle = useMemo(() => ({ order: order }), [order]); return ( - + { noScrollByWheel > {topInfos && - topInfos.map((item, index) => { - return ( - { - handleCardClick(item); - }} - /> - ); - })} + topInfos.map( + ( + { + showId, + thumbnailUrl, + thumbnailUrl960, + showNm, + vtctpYn, + patncLogoPath, + catNm, + patnrId, + lgCatCd, + showUrl, + }, + itemIndex + ) => { + return ( + handleFocus(itemIndex)} + onBlur={() => handleBlur(itemIndex)} + onClick={() => + handleCardClick(patnrId, showId, lgCatCd, showUrl) + } + /> + ); + } + )} {drawChk && homeChk === true && ( state.common.appStatus); + const { scrollLeft } = useScrollTo(); + const { handleScrollReset } = useScrollReset(scrollLeft, true); + const { scrollTopByDistance } = useScrollTopByDistance(); + const handleFocus = useCallback( + (index) => { + if (index === 0) { + handleScrollReset(); + } + + if (cursorVisible) { + return; + } + + scrollTopByDistance( + `[data-marker="scroll-marker"]`, + `[data-title-index="subCategoryNav"]`, + scrollTopBody, + 36 + ); + }, + [cursorVisible] + ); + const renderItem = useCallback( ({ index, ...rest }) => { return ( @@ -25,6 +54,7 @@ export default function CategoryNav({ currentCategoryCode={currentCategoryCode} onCategoryNavClick={onCategoryNavClick} index={index} + onFocus={() => handleFocus(index)} {...rest} /> ); diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx index ea0a7823..719ccdde 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -23,6 +23,7 @@ import useScrollTo from "../../../hooks/useScrollTo"; import { panel_names } from "../../../utils/Config"; import CategoryNav from "../../HomePanel/SubCategory/CategoryNav/CategoryNav"; import css from "../../HomePanel/SubCategory/SubCategory.module.less"; +import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance"; const SpottableComponent = Spottable("div"); const Container = SpotlightContainerDecorator( @@ -38,7 +39,7 @@ const ContainerBasic = SpotlightContainerDecorator( "div" ); -const SubCategory = ({ order }) => { +const SubCategory = ({ order, scrollTopBody }) => { const dispatch = useDispatch(); const categoryInfos = useSelector( (state) => state.onSale.onSaleData.data.categoryInfos @@ -54,6 +55,8 @@ const SubCategory = ({ order }) => { const [drawChk, setDrawChk] = useState(false); const [firstChk, SetFirstChk] = useState(false); + const { scrollTopByDistance } = useScrollTopByDistance(); + const { cursorVisible } = useSelector((state) => state.common.appStatus); const handleCategoryNav = (lgCatCd, LgCatNm, COUNT) => { if (currentLgCatCd === lgCatCd) { return; @@ -64,14 +67,14 @@ const SubCategory = ({ order }) => { setCurrentCOUNT(COUNT); SetFirstChk(true); }; - const handleCardClick = useCallback((item) => { + const handleCardClick = useCallback((e, patnrId, prdtId) => { dispatch( pushPanel( { name: panel_names.DETAIL_PANEL, - panelInfo: { patnrId: item.patnrId, prdtId: item.prdtId }, + panelInfo: { patnrId: patnrId, prdtId: prdtId }, }, - [dispatch, item] + [dispatch, e] ) ); }); @@ -145,6 +148,32 @@ const SubCategory = ({ order }) => { } }, [targetId]); + const handleBlur = useCallback((itemIndex) => { + if (itemIndex === 0) { + handleStopScrolling(); + } + }, []); + + const handleFocus = useCallback( + (itemIndex) => { + if (itemIndex === 0) { + handleScrollReset(); + } + + if (cursorVisible) { + return; + } + + scrollTopByDistance( + `[data-marker="scroll-marker"]`, + `[data-title-index="subCategoryNav"]`, + scrollTopBody, + 36 + ); + }, + [cursorVisible] + ); + const orderStyle = useMemo(() => ({ order: order }), [order]); return ( @@ -154,6 +183,8 @@ const SubCategory = ({ order }) => { currentCategoryCode={currentLgCatCd} onCategoryNavClick={handleCategoryNav} type="home" + scrollTopBody={scrollTopBody} + data-title-index="subCategoryNav" /> @@ -164,22 +195,27 @@ const SubCategory = ({ order }) => { noScrollByWheel > {categoryItemInfos && - categoryItemInfos.map((item, index) => { - return ( - handleCardClick(item)} - offerInfo={item.offerInfo} - /> - ); - })} + categoryItemInfos.map( + ( + { prdtId, imgUrl, priceInfo, prdtNm, patnrId, offerInfo }, + itemIndex + ) => { + return ( + handleFocus(itemIndex)} + onBlur={() => handleBlur(itemIndex)} + onClick={(e) => handleCardClick(e, patnrId, prdtId)} + offerInfo={offerInfo} + /> + ); + } + )} {drawChk && (