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

[FeaturedBrandsPanel] test, v5.0

Browse Source
This commit is contained in:
younghoon100.park
2024-07-25 16:56:51 +09:00
parent dcd81ea440
commit 646f74bb8e
9 changed files with 96 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSeller.jsx
View File

@@ -21,7 +21,6 @@ const Container = SpotlightContainerDecorator(
export default memo(function FeaturedBestSeller({
brandBestSellerInfo,
handleItemFocus,
order,
spotlightId,
selectedPatnrId,
}) {
@@ -63,7 +62,6 @@ export default memo(function FeaturedBestSeller({
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.BEST_SELLER)}

25
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
View File

@@ -139,8 +139,9 @@ const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => {
const findAndFocusFirstContainer = (timerRef) => {
if (typeof window === "object") {
const containers = document.querySelectorAll("[data-wheel-point]");
const firstContainer = Array.from(containers) //
.find((container) => container.getAttribute("data-shelf-order") === "1");
const firstContainer = Array.from(containers).find(
(container) => window.getComputedStyle(container)?.order === "1"
);
if (firstContainer) {
Spotlight.focus(firstContainer);
@@ -321,6 +322,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
dispatch(getBrandList());
dispatch({ type: types.RESET_BRAND_LAYOUT_INFO });
dispatch(getBrandLayoutInfo({ patnrId: panelInfo?.patnrId }));
// dispatch(getMyUpcomingAlertShow());
setIsInitialRendered(true);
setIsInitialFocusOccurred(false);
}
@@ -459,12 +461,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
]);
useEffect(() => {
if (
isMounted &&
!isInitialFocusOccurred &&
isOnTop &&
sortedBrandLayoutInfo
) {
if (isMounted && !isInitialFocusOccurred && isOnTop) {
let targetId;
if (fromDetail) {
@@ -529,7 +526,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
isInitialFocusOccurred,
isOnTop,
panelInfo,
sortedBrandLayoutInfo,
]);
useEffect(() => {
@@ -685,7 +681,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
const renderPageItem = useCallback(() => {
return (
<>
{sortedBrandLayoutInfo.map((el, idx) => {
{sortedBrandLayoutInfo.map((el) => {
switch (el.shptmBrndOptTpCd) {
case TEMPLATE_CODE_CONF.LIVE_CHANNELS: {
return (
@@ -699,7 +695,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
brandChanInfo={brandChanInfo}
brandChannelCnt={brandChannelCnt}
handleItemFocus={handleItemFocus}
order={idx + 1}
panelInfo={panelInfo}
spotlightId={TEMPLATE_CODE_CONF.LIVE_CHANNELS}
selectedPatnrId={selectedPatnrId}
@@ -720,7 +715,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
<UpComing
brandLiveChannelUpcoming={brandLiveChannelUpcoming}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.UP_COMING}
selectedPatnrId={selectedPatnrId}
/>
@@ -741,7 +735,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
brandTsvInfo={brandTsvInfo}
handleItemFocus={handleItemFocus}
hasQuickMenu={hasQuickMenu}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.TODAYS_DEALS}
/>
)}
@@ -760,7 +753,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
<FeaturedBestSeller
brandBestSellerInfo={brandBestSellerInfo}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.BEST_SELLER}
selectedPatnrId={selectedPatnrId}
/>
@@ -786,7 +778,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromGNB={fromGNB}
fromQuickMenu={fromQuickMenu}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.RECOMMENDED_SHOWS}
selectedCatCd={selectedCatCd}
selectedPatncNm={selectedPatncNm}
@@ -813,7 +804,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromGNB={fromGNB}
fromQuickMenu={fromQuickMenu}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.FEATURED_CREATORS}
selectedHstNm={selectedHstNm}
selectedPatncNm={selectedPatncNm}
@@ -840,7 +830,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromGNB={fromGNB}
fromQuickMenu={fromQuickMenu}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.SERIES}
selectedPatncNm={selectedPatncNm}
selectedPatnrId={selectedPatnrId}
@@ -866,7 +855,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
brandCategoryProductInfo={brandCategoryProductInfo}
fromGNB={fromGNB}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.CATEGORY}
selectedCatCdLv1={selectedCatCdLv1}
selectedCatCdLv2={selectedCatCdLv2}
@@ -893,7 +881,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromGNB={fromGNB}
fromQuickMenu={fromQuickMenu}
handleItemFocus={handleItemFocus}
order={idx + 1}
selectedPatnrId={selectedPatnrId}
selectedPatncNm={selectedPatncNm}
spotlightId={TEMPLATE_CODE_CONF.SHOWROOM}

94
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedCategory/FeaturedCategory.jsx
View File

@@ -25,7 +25,7 @@ export default memo(function FeaturedCategory({
fromGNB,
fromQuickMenu,
handleItemFocus,
order,
// order,
spotlightId,
selectedCatCdLv1,
selectedCatCdLv2,
@@ -34,21 +34,28 @@ export default memo(function FeaturedCategory({
setSelectedCatCdLv1,
setSelectedCatCdLv2,
}) {
// const [copiedBrandCategoryProductInfo, setCopiedBrandCategoryProductInfo] =
// useState([]);
const [
filteredBrandCategoryProductInfo,
setFilteredBrandCategoryProductInfo,
] = useState();
// const [isCopyFinished, setIsCopyFinished] = useState(false);
const [firstChk, setFirstChk] = useState(0);
const orderStyle = useMemo(
() => ({
// order,
height:
filteredBrandCategoryProductInfo &&
filteredBrandCategoryProductInfo.length === 0
? scaleH(1080) + "px"
: "auto",
}),
[filteredBrandCategoryProductInfo]
[
// order,
filteredBrandCategoryProductInfo,
]
);
const catCdLv1Array = useMemo(
@@ -71,6 +78,77 @@ export default memo(function FeaturedCategory({
[selectedCategoryLv2Infos]
);
// useEffect(() => {
// if (brandCategoryProductInfo) {
// setCopiedBrandCategoryProductInfo([...brandCategoryProductInfo]);
// setIsCopyFinished(true);
// }
// }, [brandCategoryProductInfo]);
// useEffect(() => {
// if (isCopyFinished) {
// if (!selectedCatCdLv1 && !selectedCatCdLv2) {
// setFilteredBrandCategoryProductInfo(
// copiedBrandCategoryProductInfo //
// .filter(({ catCd }) => catCdLv1Array.includes(catCd))
// );
// setIsCopyFinished(false);
// return;
// }
// if (
// selectedCatCdLv1 &&
// !selectedCatCdLv2 &&
// selectedCategoryLv2Infos?.length === 0
// ) {
// setFilteredBrandCategoryProductInfo(
// copiedBrandCategoryProductInfo //
// .filter(({ catCd }) => catCd === selectedCatCdLv1)
// );
// setIsCopyFinished(false);
// return;
// }
// if (
// selectedCatCdLv1 &&
// !selectedCatCdLv2 &&
// selectedCategoryLv2Infos?.length > 0
// ) {
// setFilteredBrandCategoryProductInfo(
// copiedBrandCategoryProductInfo //
// .filter(
// ({ catCd }) =>
// !catCdLv1Array.includes(catCd) &&
// selectedCatCdLv2Array.includes(catCd)
// )
// );
// setIsCopyFinished(false);
// return;
// }
// if (
// selectedCatCdLv1 &&
// selectedCatCdLv2 &&
// selectedCategoryLv2Infos?.length > 0
// ) {
// setFilteredBrandCategoryProductInfo(
// copiedBrandCategoryProductInfo //
// .filter(({ catCd }) => catCd === selectedCatCdLv2)
// );
// setIsCopyFinished(false);
// }
// }
// }, [
// copiedBrandCategoryProductInfo,
// catCdLv1Array,
// isCopyFinished,
// selectedCatCdLv1,
// selectedCatCdLv2,
// selectedCatCdLv2Array,
// selectedPatnrId,
// selectedCategoryLv2Infos?.length,
// ]);
useEffect(() => {
if (!selectedCatCdLv1 && !selectedCatCdLv2) {
setFilteredBrandCategoryProductInfo(
@@ -118,15 +196,7 @@ export default memo(function FeaturedCategory({
.filter(({ catCd }) => catCd === selectedCatCdLv2)
);
}
}, [
brandCategoryProductInfo,
catCdLv1Array,
selectedCatCdLv1,
selectedCatCdLv2,
selectedCatCdLv2Array,
selectedPatnrId,
selectedCategoryLv2Infos?.length,
]);
}, [brandCategoryProductInfo, catCdLv1Array, selectedCatCdLv1, selectedCatCdLv2, selectedCatCdLv2Array, selectedPatnrId, selectedCategoryLv2Infos?.length]);
const _handleItemFocus = useCallback(() => {
if (handleItemFocus) {
@@ -144,6 +214,7 @@ export default memo(function FeaturedCategory({
}
setFirstChk(1);
} else if (firstChk === 1) {
// const c = Spotlight.getCurrent();
if (c) {
let cAriaLabel = c.getAttribute("aria-label");
if (cAriaLabel) {
@@ -162,7 +233,6 @@ export default memo(function FeaturedCategory({
style={orderStyle}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.CATEGORY)}

2
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedCreators/FeaturedCreators.jsx
View File

@@ -24,7 +24,6 @@ export default memo(function FeaturedCreators({
fromGNB,
fromQuickMenu,
handleItemFocus,
order,
spotlightId,
selectedHstNm,
selectedPatncNm,
@@ -69,7 +68,6 @@ export default memo(function FeaturedCreators({
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.FEATURED_CREATORS)}

4
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx
View File

@@ -29,7 +29,6 @@ export default memo(function LiveChannels({
brandChannelCnt,
handleItemFocus,
panelInfo,
order,
selectedPatnrId,
spotlightId,
}) {
@@ -42,6 +41,8 @@ export default memo(function LiveChannels({
const intervalRef = useRef(null);
// const orderStyle = useMemo(() => ({ order }), [order]);
useEffect(() => {
dispatch(getMyUpcomingAlertShow());
}, []);
@@ -117,7 +118,6 @@ export default memo(function LiveChannels({
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.LIVE_CHANNELS)}

7
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.jsx
View File

@@ -27,7 +27,7 @@ export default memo(function RecommendedShows({
fromGNB,
fromQuickMenu,
handleItemFocus,
order,
// order,
spotlightId,
selectedCatCd,
selectedPatncNm,
@@ -38,6 +38,8 @@ export default memo(function RecommendedShows({
const [firstChk, setFirstChk] = useState(0);
// const orderStyle = useMemo(() => ({ order }), [order]);
const selectedCatNm = useMemo(
() =>
brandRecommendedShowCategoryInfo //
@@ -70,6 +72,7 @@ export default memo(function RecommendedShows({
}
setFirstChk(1);
} else if (firstChk === 1) {
// const c = Spotlight.getCurrent();
if (c) {
let cAriaLabel = c.getAttribute("aria-label");
if (cAriaLabel) {
@@ -88,9 +91,9 @@ export default memo(function RecommendedShows({
return (
<Container
className={css.container}
// style={orderStyle}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.RECOMMENDED_SHOWS)}

2
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Series/Series.jsx
View File

@@ -25,7 +25,6 @@ export default memo(function Series({
fromGNB,
fromQuickMenu,
handleItemFocus,
order,
spotlightId,
selectedPatncNm,
selectedPatnrId,
@@ -80,7 +79,6 @@ export default memo(function Series({
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle title={$L(STRING_CONF.SERIES)} data-title="series" />
<SeriesNav

2
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.jsx
View File

@@ -21,7 +21,6 @@ const Container = SpotlightContainerDecorator(
export default memo(function TodaysDeals({
brandTsvInfo,
handleItemFocus,
order,
spotlightId,
}) {
const [firstChk, setFirstChk] = useState(0);
@@ -59,7 +58,6 @@ export default memo(function TodaysDeals({
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.TODAYS_DEALS)}

3
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.jsx
View File

@@ -21,7 +21,6 @@ const STRING_CONF = {
export default memo(function UpComing({
brandLiveChannelUpcoming,
handleItemFocus,
order,
spotlightId,
selectedPatnrId,
}) {
@@ -42,6 +41,7 @@ export default memo(function UpComing({
}
setFirstChk(1);
} else if (firstChk === 1) {
// const c = Spotlight.getCurrent();
if (c) {
let cAriaLabel = c.getAttribute("aria-label");
if (cAriaLabel) {
@@ -59,7 +59,6 @@ export default memo(function UpComing({
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.UPCOMING)}