optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Home]

Browse Source 
Detail Notes :
 
1. 스크롤 시나리오 적용
> useScrollTopByDistance Hook 이용하여 스크롤 시나리오 적용
2. HomeBanner
> img 태그 -> CustomImage 컴포넌트로 변경하여 onError 처리 되도록 변경
3. 초기 Focus
> setTimeOut 이용하여 초기 진입시 Focus 추가
This commit is contained in:
jangheon Pyo
2024-04-12 19:18:12 +09:00
parent 8a20bf5545
commit b22288fb5d
9 changed files with 417 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
View File

@@ -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 (
<Container className={css.bestSellerWrap} style={orderStyle}>
<SectionTitle title={$L(`BEST SELLER`)} />
<SectionTitle
title={$L(`BEST SELLER`)}
data-title-index="homeBestSellerTitle"
/>
<TScroller
className={css.homeBestSeller}
@@ -68,21 +101,34 @@ const BestSeller = ({ order }) => {
noScrollByWheel
>
{bestSellerDatas &&
bestSellerDatas.map((item, index) => (
<TItemCard
key={item.prdtId}
imageAlt={item.prdtId}
imageSource={item.imgUrl}
priceInfo={item.priceInfo}
productName={item.prdtNm}
isBestSeller={true}
rank={item.rankOrd}
onFocus={index === 0 ? handleScrollReset : null}
onBlur={handleStopScrolling}
onClick={() => handleCardClick(item)}
offerInfo={item.offerInfo}
/>
))}
bestSellerDatas.map(
(
{
prdtId,
imgUrl,
priceInfo,
prdtNm,
rankOrd,
patnrId,
offerInfo,
},
itemIndex
) => (
<TItemCard
key={prdtId}
imageAlt={prdtId}
imageSource={imgUrl}
priceInfo={priceInfo}
productName={prdtNm}
isBestSeller={true}
rank={rankOrd}
onFocus={() => handleFocus(itemIndex)}
onBlur={() => handleBlur(itemIndex)}
onClick={(e) => handleCardClick(e, patnrId, prdtId)}
offerInfo={offerInfo}
/>
)
)}
{drawChk && (
<SpottableComponent

34
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useMemo } from "react";
import React, { useEffect, useMemo, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
@@ -26,10 +26,11 @@ const ContainerBasic = SpotlightContainerDecorator(
"div"
);
export default function HomeBanner({ scrollTop, selectTemplate, order }) {
export default function HomeBanner({ scrollTopBody, selectTemplate, order }) {
const dispatch = useDispatch();
const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
const { handleScrollReset, handleStopScrolling } =
useScrollReset(scrollTopBody);
const timerRef = useRef();
const homeMainContentsBannerInfos = useSelector(
(state) => 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" ? (
<Random
bannerData={firstBanner}
isHorizontal={true}
spotlightId={"banner01"}
scrollTop={scrollTop}
scrollTopBody={scrollTopBody}
/>
) : (
<SpottableComponent
@@ -219,14 +221,14 @@ export default function HomeBanner({ scrollTop, selectTemplate, order }) {
bannerData={secondBanner}
isHorizontal={true}
spotlightId={"banner02"}
scrollTop={scrollTop}
scrollTopBody={scrollTopBody}
/>
) : secondBanner && secondBanner.shptmDspyTpNm === "Random" ? (
<Random
bannerData={secondBanner}
isHorizontal={true}
spotlightId={"banner02"}
scrollTop={scrollTop}
scrollTopBody={scrollTopBody}
/>
) : (
<SpottableComponent
@@ -256,14 +258,14 @@ export default function HomeBanner({ scrollTop, selectTemplate, order }) {
bannerData={thirdBanner}
isHorizontal={false}
spotlightId={"banner03"}
scrollTop={scrollTop}
scrollTopBody={scrollTopBody}
/>
) : thirdBanner && thirdBanner.shptmDspyTpNm === "Random" ? (
<Random
bannerData={thirdBanner}
isHorizontal={false}
spotlightId={"banner03"}
scrollTop={scrollTop}
scrollTopBody={scrollTopBody}
/>
) : (
<SpottableComponent
@@ -292,14 +294,14 @@ export default function HomeBanner({ scrollTop, selectTemplate, order }) {
bannerData={forthBanner}
isHorizontal={false}
spotlightId={"banner04"}
scrollTop={scrollTop}
scrollTopBody={scrollTopBody}
/>
) : forthBanner && forthBanner.shptmDspyTpNm === "Random" ? (
<Random
bannerData={forthBanner}
isHorizontal={false}
spotlightId={"banner04"}
scrollTop={scrollTop}
scrollTopBody={scrollTopBody}
/>
) : (
<SpottableComponent

85
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
View File

@@ -1,29 +1,23 @@
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 TVideoPlayer from '../../../components/TVideoPlayer/TVideoPlayer';
import usePriceInfo from '../../../hooks/usePriceInfo';
import useScrollReset from '../../../hooks/useScrollReset';
import { panel_names } from '../../../utils/Config';
import css from './RandomUnit.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 TVideoPlayer from "../../../components/TVideoPlayer/TVideoPlayer";
import usePriceInfo from "../../../hooks/usePriceInfo";
import useScrollReset from "../../../hooks/useScrollReset";
import { panel_names } from "../../../utils/Config";
import css from "./RandomUnit.module.less";
import CustomImage from "../../../components/CustomImage/CustomImage";
const SpottableComponent = Spottable("div");
@@ -35,7 +29,7 @@ const Container = SpotlightContainerDecorator(
export default function RandomUnit({
bannerData,
spotlightId,
scrollTop,
scrollTopBody,
isHorizontal,
}) {
const bannerDetailInfos = bannerData.bannerDetailInfos;
@@ -47,7 +41,8 @@ export default function RandomUnit({
const [videoError, setVideoError] = useState(false);
const [randomNumber, setRandomNumber] = useState("");
const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
const { handleScrollReset, handleStopScrolling } =
useScrollReset(scrollTopBody);
const dispatch = useDispatch();
@@ -211,11 +206,19 @@ export default function RandomUnit({
spotlightId={spotlightId}
>
<div className={css.imgBanner}>
<img src={randomData.tmnlImgPath} />
<CustomImage
delay={0}
src={randomData.tmnlImgPath}
animationSpeed="fast"
/>
</div>
<p className={css.brandIcon}>
<img src={randomData.patncLogoPath} />
<CustomImage
delay={0}
src={randomData.patncLogoPath}
animationSpeed="fast"
/>
</p>
</SpottableComponent>
) : randomData.shptmBanrTpNm == "LIVE" ||
@@ -236,7 +239,7 @@ export default function RandomUnit({
>
{randomData.shptmBanrTpNm === "LIVE" && videoError === false ? (
<p className={css.liveIcon}>
<img src={liveShow} />
<CustomImage delay={0} src={liveShow} animationSpeed="fast" />
</p>
) : null}
@@ -246,9 +249,11 @@ export default function RandomUnit({
randomData.shptmBanrTpNm === "LIVE" ? (
<div className={css.errorContents}>
<div>
<img
<CustomImage
delay={0}
className={css.errorlogo}
src={randomData.patncLogoPath}
animationSpeed="fast"
/>
<p className={css.errorText}>
Click the screen to see more products!
@@ -268,13 +273,19 @@ export default function RandomUnit({
<img src={randomData.tmnlImgPath} />
) : null} */}
{randomData.tmnlImgPath == null ? (
<img
<CustomImage
delay={0}
src={
randomData.vtctpYn === "Y" ? emptyVerImage : emptyHorImage
}
animationSpeed="fast"
/>
) : (
<img src={randomData.tmnlImgPath} />
<CustomImage
delay={0}
src={randomData.tmnlImgPath}
animationSpeed="fast"
/>
)}
</div>
) : (
@@ -291,7 +302,11 @@ export default function RandomUnit({
{videoError === false ? (
<p className={css.brandIcon}>
<img src={randomData.patncLogoPath} />
<CustomImage
delay={0}
src={randomData.patncLogoPath}
animationSpeed="fast"
/>
</p>
) : null}
</SpottableComponent>
@@ -316,7 +331,11 @@ export default function RandomUnit({
</div>
<div className={css.itemImgBox}>
<img src={randomData.tmnlImgPath} />
<CustomImage
delay={0}
src={randomData.tmnlImgPath}
animationSpeed="fast"
/>
</div>
</SpottableComponent>
) : null}

93
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
View File

@@ -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}
>
<div className={css.imgBanner}>
<img src={rollingData[startIndex].tmnlImgPath} />
<CustomImage
delay={0}
src={rollingData[startIndex].tmnlImgPath}
animationSpeed="fast"
/>
</div>
<p className={css.brandIcon}>
<img src={rollingData[startIndex].patncLogoPath} />
<CustomImage
delay={0}
src={rollingData[startIndex].patncLogoPath}
animationSpeed="fast"
/>
</p>
</SpottableComponent>
) : rollingData[startIndex].shptmBanrTpNm === "LIVE" ? (
@@ -311,7 +314,7 @@ export default function RollingUnit({
spotlightDisabled={contentsFocus}
>
<p className={css.liveIcon}>
<img src={liveShow} />
<CustomImage delay={0} src={liveShow} animationSpeed="fast" />
</p>
<div
@@ -321,28 +324,38 @@ export default function RollingUnit({
)}
>
{rollingData[startIndex].tmnlImgPath == null ? (
<img
<CustomImage
delay={0}
src={
rollingData[startIndex].vtctpYn === "Y"
? emptyVerImage
: emptyHorImage
}
animationSpeed="fast"
/>
) : (
<img src={rollingData[startIndex].tmnlImgPath} />
<CustomImage
delay={0}
src={rollingData[startIndex].tmnlImgPath}
animationSpeed="fast"
/>
)}
<div className={css.btnPlay}>
{rollingData[startIndex].tmnlImgPath == null ? (
""
) : (
<img src={btnPlay} />
<CustomImage delay={0} src={btnPlay} animationSpeed="fast" />
)}
</div>
</div>
<p className={css.brandIcon}>
<img src={rollingData[startIndex].patncLogoPath} />
<CustomImage
delay={0}
src={rollingData[startIndex].patncLogoPath}
animationSpeed="fast"
/>
</p>
</SpottableComponent>
) : rollingData[startIndex].shptmBanrTpNm === "VOD" ? (
@@ -361,22 +374,28 @@ export default function RollingUnit({
)}
>
{rollingData[startIndex].tmnlImgPath == null ? (
<img
<CustomImage
delay={0}
src={
rollingData[startIndex].vtctpYn === "Y"
? emptyVerImage
: emptyHorImage
}
animationSpeed="fast"
/>
) : (
<img src={rollingData[startIndex].tmnlImgPath} />
<CustomImage
delay={0}
src={rollingData[startIndex].tmnlImgPath}
animationSpeed="fast"
/>
)}
<div className={css.btnPlay}>
{rollingData[startIndex].tmnlImgPath == null ? (
""
) : (
<img src={btnPlay} />
<CustomImage delay={0} src={btnPlay} animationSpeed="fast" />
)}
</div>
</div>
@@ -403,7 +422,11 @@ export default function RollingUnit({
</div>
<div className={css.itemImgBox}>
<img src={rollingData[startIndex].tmnlImgPath} />
<CustomImage
delay={0}
src={rollingData[startIndex].tmnlImgPath}
animationSpeed="fast"
/>
</div>
</SpottableComponent>
) : null}

35
com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
View File

@@ -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 (
<Container {...rest} className={css.container} style={orderStyle}>
<div className={css.onSaleWrap}>
<SectionTitle className={css.subTitle} title={$L(`ON SALE`)} />
<SectionTitle
className={css.subTitle}
title={$L(`ON SALE`)}
data-title-index="homeOnSale"
/>
<div className={css.onSaleItem}>
{homeOnSaleInfos && homeOnSaleInfos.length > 0 && (
<TVirtualGridList

16
com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
View File

@@ -88,7 +88,8 @@ export default function HomePanel({ isOnTop }) {
}
}, [dispatch, httpHeader]);
const { getScrollTo, scrollTop } = useScrollTo();
const { getScrollTo: getScrollToBody, scrollTop: scrollTopBody } =
useScrollTo();
useDebugKey({ isLandingPage: true });
const [selectTemplate, setSelectTemplate] = useState(null);
@@ -127,7 +128,7 @@ export default function HomePanel({ isOnTop }) {
if (Spotlight.focus("banner01")) {
spotId = "banner01";
}
scrollTop();
scrollTopBody();
return Spotlight.focus(spotId);
}
@@ -135,7 +136,7 @@ export default function HomePanel({ isOnTop }) {
if (Spotlight.focus("banner03")) {
spotId = "banner03";
}
scrollTop();
scrollTopBody();
return Spotlight.focus(spotId);
}
};
@@ -144,7 +145,8 @@ export default function HomePanel({ isOnTop }) {
<>
{homeLayoutInfo && homeTopDisplayInfos && (
<TPanel className={css.panel} onCancel={onCancel}>
<TBody className={css.tBody} cbScrollTo={getScrollTo}>
<TBody className={css.tBody} cbScrollTo={getScrollToBody}>
<div data-marker="scroll-marker" />
<div className={css.orderableFlexContainer}>
{hasTemplateCodeWithValue(
homeLayoutInfoDetail,
@@ -153,7 +155,7 @@ export default function HomePanel({ isOnTop }) {
selectTemplate && (
<HomeBanner
selectTemplate={selectTemplate}
scrollTop={scrollTop}
scrollTopBody={scrollTopBody}
order={getOrderByValue(
homeLayoutInfoDetail,
TEMPLATE_CODE_CONF.TOP
@@ -170,6 +172,7 @@ export default function HomePanel({ isOnTop }) {
homeLayoutInfoDetail,
TEMPLATE_CODE_CONF.CATEGORY_ITEM
)}
scrollTopBody={scrollTopBody}
/>
)}
{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}
/>
)}
</div>

154
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
View File

@@ -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 (
<Container className={css.popularShow} style={orderStyle}>
<SectionTitle className={css.subTitle} title={$L(`POPULAR SHOW`)} />
<SectionTitle
className={css.subTitle}
title={$L(`POPULAR SHOW`)}
data-title-index="homePopularShow"
/>
<TScroller
className={css.showList}
direction="horizontal"
@@ -87,34 +109,50 @@ const PopularShow = ({ homeChk = true, order, ...rest }) => {
noScrollByWheel
>
{topInfos &&
topInfos.map((item, index) => {
return (
<TItemCard
key={item.showId}
imageSource={
item.thumbnailUrl !== item.thumbnailUrl960
? item.thumbnailUrl960
: item.thumbnailUrl
}
imageAlt={item.showNm}
productName={item.showNm}
nonPosition={true}
type={TYPES.videoShow}
imgType={
item.vtctpYn !== "Y"
? IMAGETYPES.imgHorizontal
: IMAGETYPES.imgVertical
}
logo={item.patncLogoPath}
catNm={item.catNm}
onFocus={index === 0 ? handleScrollReset : null}
onBlur={handleStopScrolling}
onClick={() => {
handleCardClick(item);
}}
/>
);
})}
topInfos.map(
(
{
showId,
thumbnailUrl,
thumbnailUrl960,
showNm,
vtctpYn,
patncLogoPath,
catNm,
patnrId,
lgCatCd,
showUrl,
},
itemIndex
) => {
return (
<TItemCard
key={showId}
imageSource={
thumbnailUrl !== thumbnailUrl960
? thumbnailUrl960
: thumbnailUrl
}
imageAlt={showNm}
productName={showNm}
nonPosition={true}
type={TYPES.videoShow}
imgType={
vtctpYn !== "Y"
? IMAGETYPES.imgHorizontal
: IMAGETYPES.imgVertical
}
logo={patncLogoPath}
catNm={catNm}
onFocus={() => handleFocus(itemIndex)}
onBlur={() => handleBlur(itemIndex)}
onClick={() =>
handleCardClick(patnrId, showId, lgCatCd, showUrl)
}
/>
);
}
)}
{drawChk && homeChk === true && (
<SpottableComponent

30
com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.jsx
View File

@@ -5,6 +5,10 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import CategoryNavItem from "../CategoryNav/CategoryNavItem/CategoryNavItem";
import css from "./CategoryNav.module.less";
import { useSelector } from "react-redux";
import useScrollTopByDistance from "../../../../hooks/useScrollTopByDistance";
import useScrollReset from "../../../../hooks/useScrollReset";
import useScrollTo from "../../../../hooks/useScrollTo";
const Container = SpotlightContainerDecorator(
{ leaveFor: { right: "" }, enterTo: "last-focused" },
@@ -15,8 +19,33 @@ export default function CategoryNav({
categoryInfos,
currentCategoryCode,
onCategoryNavClick,
scrollTopBody,
...rest
}) {
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="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}
/>
);

76
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
View File

@@ -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 (
<Container style={orderStyle}>
@@ -154,6 +183,8 @@ const SubCategory = ({ order }) => {
currentCategoryCode={currentLgCatCd}
onCategoryNavClick={handleCategoryNav}
type="home"
scrollTopBody={scrollTopBody}
data-title-index="subCategoryNav"
/>
</ContainerBasic>
<ContainerBasic>
@@ -164,22 +195,27 @@ const SubCategory = ({ order }) => {
noScrollByWheel
>
{categoryItemInfos &&
categoryItemInfos.map((item, index) => {
return (
<TItemCard
key={item.prdtId}
imageAlt={item.prdtId}
imageSource={item.imgUrl}
priceInfo={item.priceInfo}
productName={item.prdtNm}
productId={item.prdtId}
onFocus={index === 0 ? handleScrollReset : null}
onBlur={handleStopScrolling}
onClick={() => handleCardClick(item)}
offerInfo={item.offerInfo}
/>
);
})}
categoryItemInfos.map(
(
{ prdtId, imgUrl, priceInfo, prdtNm, patnrId, offerInfo },
itemIndex
) => {
return (
<TItemCard
key={prdtId}
imageAlt={prdtId}
imageSource={imgUrl}
priceInfo={priceInfo}
productName={prdtNm}
productId={prdtId}
onFocus={() => handleFocus(itemIndex)}
onBlur={() => handleBlur(itemIndex)}
onClick={(e) => handleCardClick(e, patnrId, prdtId)}
offerInfo={offerInfo}
/>
);
}
)}
{drawChk && (
<SpottableComponent