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

SHOPTIME-1933 [Shoptime 고도화] TV 앱 테스트 (시스템 운영팀) / [SHOPTIME-2666] Reminder / 알림 팝업을 클릭 했지만 Live로 이동하지 않음

Browse Source 
SHOPTIME-1933 [Shoptime 고도화] TV 앱 테스트 (시스템 운영팀) / [SHOPTIME-3305] Upcoming / Alert > yes로 진입 시 포커싱 이슈

changed files:
1. TabLayout.jsx
2. FeaturedBrandsPanel.jsx
3. QuickMenuItem.jsx
4. RandomUnit.jsx
5. RollingUnit.jsx
6. mainView.jsx
7. WelcomeEventPanel.jsx

detail note:
 - 원인: 해당 경로 진입 시, live channels에 대한 focus logic 부재
 - 대책: 해당 경로에 대한 focus logic 추가
This commit is contained in:
younghoon100.park
2024-10-24 18:29:12 +09:00
parent 86bb667a72
commit 0afb36618b
7 changed files with 244 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
View File

@@ -211,7 +211,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
target: [
{
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: { patnrId: item.patnrId },
panelInfo: { from: "gnb", patnrId: item.patnrId },
},
],
}));
@@ -749,7 +749,10 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
}
return (
<div className={classNames(css.tabLayoutWrap, !tabActivated && css.hide)} id={SpotlightIds.TAB_LAYOUT}>
<div
className={classNames(css.tabLayoutWrap, !tabActivated && css.hide)}
id={SpotlightIds.TAB_LAYOUT}
>
{data && (
<>
{

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

@@ -242,7 +242,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
const [isInitialRendered, setIsInitialRendered] = useState(true);
const [isMounted, setIsMounted] = useState(false);
const [isLogGNBSent, setIsLogGNBSent] = useState(false);
const [spotlightDisabled, setSpotlightDisabled] = useState(true);
const [selectedPatncNm, setSelectedPatncNm] = useState(null);
const [selectedPatnrId, setSelectedPatnrId] = useState(null);
const [selectedCatCd, setSelectedCatCd] = useState(null);
@@ -270,12 +270,10 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
const fromDeepLink = Object.entries(panelInfo) //
.some(([key, value]) => key === "linkTpCd" && value);
const fromDetail = panelInfo?.lastFocusedTargetId;
const fromGNB =
Object.keys(panelInfo).length === 1 &&
Object.prototype.hasOwnProperty.call(panelInfo, "patnrId");
const fromQuickMenu =
panelInfo?.from && panelInfo.from === LOG_MENU.FEATURED_BRANDS_QUICK_MENU;
const fromDetail = panelInfo?.from && panelInfo.from === "detail";
const fromGNB = panelInfo?.from && panelInfo.from === "gnb";
const fromUpcoming = panelInfo?.from && panelInfo.from === "upcoming";
const fromQuickMenu = panelInfo?.from && panelInfo.from === "menu";
const hasQuickMenu = useMemo(
() => brandInfo && brandInfo.length > 1,
@@ -300,24 +298,42 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
}, [dispatch, panelInfo?.patnrId, panelInfo?.noResetFlag]);
useEffect(() => {
if ((fromGNB || fromQuickMenu || fromDeepLink) && panelInfo?.patnrId) {
if (
(fromDeepLink || fromGNB || fromQuickMenu || fromUpcoming) &&
panelInfo?.patnrId
) {
dispatch(getBrandList());
dispatch({ type: types.RESET_BRAND_LAYOUT_INFO });
dispatch(getBrandLayoutInfo({ patnrId: panelInfo?.patnrId }));
setIsInitialRendered(true);
setIsInitialFocusOccurred(false);
}
}, [dispatch, fromDeepLink, fromGNB, fromQuickMenu, panelInfo?.patnrId]);
}, [
dispatch,
fromDeepLink,
fromGNB,
fromQuickMenu,
fromUpcoming,
panelInfo?.from,
panelInfo?.patnrId,
]);
useEffect(() => {
if (brandInfo && isInitialRendered) {
let menu;
if (fromGNB || fromQuickMenu || fromDeepLink) {
if (fromDeepLink || fromGNB || fromQuickMenu) {
const patncNm = //
findItemByValue(brandInfo, panelInfo?.patnrId)?.patncNm;
menu = `${LOG_MENU.FEATURED_BRANDS}/${patncNm} ${LOG_MENU.FEATURED_BRANDS_QUICK_MENU}`;
setSelectedPatncNm(patncNm);
setSelectedPatnrId(panelInfo?.patnrId);
} else if (fromUpcoming) {
const patncNm = //
findItemByValue(brandInfo, panelInfo?.patnrId)?.patncNm;
menu = `${LOG_MENU.FEATURED_BRANDS}/${patncNm} ${LOG_MENU.FEATURED_BRANDS_LIVE_CHANNELS}`;
setSelectedPatncNm(patncNm);
setSelectedPatnrId(panelInfo?.patnrId);
}
@@ -345,6 +361,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromDetail,
fromGNB,
fromQuickMenu,
fromUpcoming,
isInitialRendered,
panelInfo?.brandInfo,
panelInfo?.lastMenu,
@@ -377,7 +394,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
setSelectedCatCdLv1(null);
setSelectedCatCdLv2(null);
}
}, [sortedBrandLayoutInfo, dispatch, selectedPatnrId]);
}, [sortedBrandLayoutInfo, selectedPatnrId]);
useEffect(() => {
if (panelInfo?.displayTopButton) {
@@ -393,8 +410,8 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
const observer = new window.MutationObserver((mutations) => {
let shouldDisplayTopButton = false;
for (let index = mutations.length; index--; ) {
if (mutations[index].type === "childList") {
for (let idx = mutations.length; idx--; ) {
if (mutations[idx].type === "childList") {
renderedShelfCountRef.current =
orderableFlexContainerRef.current?.children.length || 0;
}
@@ -421,55 +438,62 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
}, [panelInfo?.displayTopButton, sortedBrandLayoutInfo]);
useEffect(() => {
if (
isMounted &&
!isInitialFocusOccurred &&
isOnTop &&
sortedBrandLayoutInfo
) {
if (!isInitialFocusOccurred && isMounted && isOnTop) {
let targetId = "spotlightId-" + panelInfo?.patnrId;
if (fromDetail) {
if (panelInfo?.catCdLv1) {
setSelectedCatCdLv1(panelInfo.catCdLv1);
}
if (panelInfo?.catCdLv2) {
setSelectedCatCdLv2(panelInfo.catCdLv2);
}
if (panelInfo?.seriesId) {
setSelectedSeriesId(panelInfo.seriesId);
}
targetId = panelInfo?.lastFocusedTargetId;
if (panelInfo?.catCdLv1) setSelectedCatCdLv1(panelInfo.catCdLv1);
if (panelInfo?.catCdLv2) setSelectedCatCdLv2(panelInfo.catCdLv2);
if (panelInfo?.seriesId) setSelectedSeriesId(panelInfo.seriesId);
}
if (fromUpcoming || panelInfo?.linkTpCd === "8002") {
targetId = TEMPLATE_CODE_CONF.LIVE_CHANNELS;
if (typeof window === "object" && window.MutationObserver) {
const observer = new window.MutationObserver((mutations) => {
for (let idx = mutations.length; idx--; ) {
if (mutations[idx].addedNodes.length) {
for (let node of mutations[idx].addedNodes) {
if (node.getAttribute("data-spotlight-id") === targetId) {
if (cbChangePageRef.current) {
cbChangePageRef.current(targetId, false);
}
Spotlight.focus(node);
break;
}
}
}
}
});
if (orderableFlexContainerRef.current)
observer.observe(orderableFlexContainerRef.current, {
childList: true,
});
return () => observer.disconnect();
}
}
initialFocusTimeoutJob.current.start(() => {
const initialFocusTarget = //
findSelector(`[data-spotlight-id="${targetId}"]`);
console.log(
"👉 ~ initialFocusTimeoutJob.current.start ~ '여기 타냐': ",
"여기 타냐"
);
const focusTarget = findSelector(`[data-spotlight-id="${targetId}"]`);
setSpotlightDisabled(false);
if (initialFocusTarget) {
Spotlight.focus(initialFocusTarget);
} else {
findAndFocusFirstContainer(noneTargetTimer);
}
if (focusTarget) Spotlight.focus(focusTarget);
else findAndFocusFirstContainer(noneTargetTimer);
setIsInitialFocusOccurred(true);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
});
}
}, [
dispatch,
fromDetail,
isMounted,
isInitialFocusOccurred,
isOnTop,
panelInfo,
sortedBrandLayoutInfo,
]);
}, [fromDetail, fromUpcoming, isInitialFocusOccurred, isMounted, isOnTop]);
useEffect(() => {
if (
@@ -554,7 +578,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
brandInfo: brandInfoRef.current,
displayTopButton: displayTopButtonRef.current,
focusedContainerId: focusedContainerIdRef.current,
from: null,
from: "detail",
lastMenu: lastMenuRef.current,
noResetFlag: true,
},
@@ -585,9 +609,9 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
if (hasQuickMenu) {
target = document.querySelector(`[data-menu-index="${0}"]`);
} else {
const pagenatorItem = document.querySelector(`[data-wheel-point]`);
const spottableItem = pagenatorItem?.querySelector(`[data-spotlight-id]`);
target = spottableItem?.querySelector(`[tabindex="${-1}"]`);
const paginatorItem = document.querySelector(`[data-wheel-point]`);
const spotlightItem = paginatorItem?.querySelector(`[data-spotlight-id]`);
target = spotlightItem?.querySelector(`[tabindex="${-1}"]`);
}
if (target) {
@@ -897,7 +921,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
<TBody
className={css.tBody}
scrollable={false}
spotlightDisabled={spotlightDisabled || !isOnTop}
spotlightDisabled={!isOnTop}
>
<TVerticalPagenator
cbChangePageRef={cbChangePageRef}

37
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.jsx
View File

@@ -1,30 +1,17 @@
import React, {
memo,
useCallback,
} from 'react';
import React, { memo, useCallback } from "react";
import classNames from 'classnames';
import {
useDispatch,
useSelector,
} from 'react-redux';
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import Spottable from '@enact/spotlight/Spottable';
import Spottable from "@enact/spotlight/Spottable";
import IcPartnersDefault
from '../../../../../assets/images/ic-tab-partners-default@3x.png';
import {
resetPanels,
updatePanel,
} from '../../../../actions/panelActions';
import CustomImage from '../../../../components/CustomImage/CustomImage';
import useScrollReset from '../../../../hooks/useScrollReset';
import {
LOG_MENU,
panel_names,
} from '../../../../utils/Config';
import { $L } from '../../../../utils/helperMethods';
import css from './QuickMenuItem.module.less';
import IcPartnersDefault from "../../../../../assets/images/ic-tab-partners-default@3x.png";
import { resetPanels, updatePanel } from "../../../../actions/panelActions";
import CustomImage from "../../../../components/CustomImage/CustomImage";
import useScrollReset from "../../../../hooks/useScrollReset";
import { panel_names } from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
import css from "./QuickMenuItem.module.less";
const SpottableComponent = Spottable("li");
@@ -67,7 +54,7 @@ export default memo(function QuickMenuItem({
return;
}
const from = LOG_MENU.FEATURED_BRANDS_QUICK_MENU;
const from = "menu";
const name = panel_names.FEATURED_BRANDS_PANEL;
dispatch(resetPanels([{ name }]));

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

@@ -4,47 +4,32 @@ import React, {
useMemo,
useRef,
useState,
} from 'react';
} from "react";
import classNames from 'classnames';
import {
useDispatch,
useSelector,
} from 'react-redux';
import classNames from "classnames";
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 btnPlay from '../../../../assets/images/btn/btn-play-thumb-nor.png';
import defaultLogoImg
from '../../../../assets/images/ic-tab-partners-default@3x.png';
import emptyHorImage
from '../../../../assets/images/img-home-banner-empty-hor.png';
import emptyVerImage
from '../../../../assets/images/img-home-banner-empty-ver.png';
import defaultImageItem
from '../../../../assets/images/img-thumb-empty-product@3x.png';
import liveShow from '../../../../assets/images/tag-liveshow.png';
import { changeAppStatus } from '../../../actions/commonActions';
import { sendLogTopContents } from '../../../actions/logActions';
import { pushPanel } from '../../../actions/panelActions';
import btnPlay from "../../../../assets/images/btn/btn-play-thumb-nor.png";
import defaultLogoImg from "../../../../assets/images/ic-tab-partners-default@3x.png";
import emptyHorImage from "../../../../assets/images/img-home-banner-empty-hor.png";
import emptyVerImage from "../../../../assets/images/img-home-banner-empty-ver.png";
import defaultImageItem from "../../../../assets/images/img-thumb-empty-product@3x.png";
import liveShow from "../../../../assets/images/tag-liveshow.png";
import { changeAppStatus } from "../../../actions/commonActions";
import { sendLogTopContents } from "../../../actions/logActions";
import { pushPanel } from "../../../actions/panelActions";
import {
finishVideoPreview,
startVideoPlayer,
} from '../../../actions/playActions';
import CustomImage from '../../../components/CustomImage/CustomImage';
import usePriceInfo from '../../../hooks/usePriceInfo';
import {
LOG_MENU,
LOG_TP_NO,
panel_names,
} from '../../../utils/Config';
import {
$L,
formatGMTString,
} from '../../../utils/helperMethods';
import css from './RandomUnit.module.less';
} from "../../../actions/playActions";
import CustomImage from "../../../components/CustomImage/CustomImage";
import usePriceInfo from "../../../hooks/usePriceInfo";
import { LOG_MENU, LOG_TP_NO, panel_names } from "../../../utils/Config";
import { $L, formatGMTString } from "../../../utils/helperMethods";
import css from "./RandomUnit.module.less";
const SpottableComponent = Spottable("div");
@@ -164,7 +149,7 @@ export default function RandomUnit({
return dispatch(
pushPanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: { patnrId: randomData.patnrId },
panelInfo: { from: "gnb", patnrId: randomData.patnrId },
})
);
}, [randomData, dispatch]);
@@ -222,7 +207,7 @@ export default function RandomUnit({
case "DSP00501":
linkInfo = {
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: { patnrId: randomData.patnrId },
panelInfo: { from: "gnb", patnrId: randomData.patnrId },
};
break;

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

@@ -1,4 +1,10 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
@@ -25,7 +31,10 @@ import css from "./RollingUnit.module.less";
const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator({ enterTo: "last-focused" }, "div");
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
const LINK_TYPES = {
FEATURED_BRANDS: "DSP00501",
@@ -52,7 +61,12 @@ const createPanelInfo = (data, categoryData = {}) => ({
focusedContainerId: null,
});
export default function RollingUnit({ bannerData, spotlightId, isHorizontal, handleItemFocus }) {
export default function RollingUnit({
bannerData,
spotlightId,
isHorizontal,
handleItemFocus,
}) {
const rollingData = bannerData.bannerDetailInfos;
const rollingDataLength = bannerData.bannerDetailInfos.length;
@@ -60,17 +74,23 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
const curationId = useSelector((state) => state.home?.bannerData?.curationId);
const curtNm = useSelector((state) => state.home?.bannerData?.curtNm);
const shptmTmplCd = useSelector((state) => state.home?.bannerData?.shptmTmplCd);
const shptmTmplCd = useSelector(
(state) => state.home?.bannerData?.shptmTmplCd
);
const nowMenu = useSelector((state) => state.common.menu.nowMenu);
const entryMenu = useSelector((state) => state.common.menu.entryMenu);
const homeCategory = useSelector((state) => state.home.menuData?.data?.homeCategory);
const homeCategory = useSelector(
(state) => state.home.menuData?.data?.homeCategory
);
const countryCode = useSelector((state) => state.common.httpHeader.cntry_cd);
const bannerId = `banner-${bannerData.banrLctnNo}`;
const savedIndex = useSelector((state) => state.home.bannerIndices[bannerId]);
const [startIndex, setStartIndex] = useState(savedIndex !== undefined ? savedIndex : 0);
const [startIndex, setStartIndex] = useState(
savedIndex !== undefined ? savedIndex : 0
);
const lastIndexRef = useRef(rollingDataLength - 1);
const doRollingRef = useRef(false);
const [unitHasFocus, setUnitHasFocus] = useState(false);
@@ -120,7 +140,11 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
return {
banrNo: `${currentRollingData?.banrDpOrd}`,
banrTpNm: currentRollingData?.vtctpYn ? (currentRollingData.vtctpYn === "Y" ? "Vertical" : "Horizontal") : "",
banrTpNm: currentRollingData?.vtctpYn
? currentRollingData.vtctpYn === "Y"
? "Vertical"
: "Horizontal"
: "",
contId,
contNm,
contTpNm: currentRollingData?.shptmBanrTpNm ?? "",
@@ -147,7 +171,9 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
const deltaTime = time - previousTimeRef.current;
if (deltaTime >= 10000 && doRollingRef.current) {
setStartIndex((prevIndex) => (prevIndex === lastIndexRef.current ? 0 : prevIndex + 1));
setStartIndex((prevIndex) =>
prevIndex === lastIndexRef.current ? 0 : prevIndex + 1
);
previousTimeRef.current = time;
}
} else {
@@ -233,7 +259,9 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
rollingData[startIndex].shptmLnkTpCd === LINK_TYPES.CATEGORY
) {
if (homeCategory && homeCategory.length > 0) {
const foundCategory = homeCategory.find((data) => data.lgCatCd === rollingData[startIndex].lgCatCd);
const foundCategory = homeCategory.find(
(data) => data.lgCatCd === rollingData[startIndex].lgCatCd
);
if (foundCategory) {
return {
lgCatNm: foundCategory.lgCatNm,
@@ -285,16 +313,23 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
switch (linkType) {
case LINK_TYPES.FEATURED_BRANDS:
handlePushPanel(panel_names.FEATURED_BRANDS_PANEL, {
from: "gnb",
patnrId: currentData.patnrId,
});
break;
case LINK_TYPES.TRENDING_NOW:
handlePushPanel(panel_names.TRENDING_NOW_PANEL, createPanelInfo(currentData));
handlePushPanel(
panel_names.TRENDING_NOW_PANEL,
createPanelInfo(currentData)
);
break;
case LINK_TYPES.HOT_PICKS:
handlePushPanel(panel_names.HOT_PICKS_PANEL, createPanelInfo(currentData));
handlePushPanel(
panel_names.HOT_PICKS_PANEL,
createPanelInfo(currentData)
);
break;
case LINK_TYPES.ON_SALE:
@@ -305,7 +340,10 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
case LINK_TYPES.CATEGORY:
if (Object.keys(categoryData).length > 0) {
handlePushPanel(panel_names.CATEGORY_PANEL, createPanelInfo(currentData, categoryData));
handlePushPanel(
panel_names.CATEGORY_PANEL,
createPanelInfo(currentData, categoryData)
);
}
break;
@@ -337,7 +375,15 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
})
);
}, [rollingData, startIndex, bannerId, dispatch, categoryData, handlePushPanel, topContentsLogInfo]);
}, [
rollingData,
startIndex,
bannerId,
dispatch,
categoryData,
handlePushPanel,
topContentsLogInfo,
]);
const videoClick = useCallback(() => {
if (bannerId) {
@@ -365,7 +411,14 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
})
);
}, [rollingData, startIndex, bannerId, dispatch, handleStartVideoPlayer, topContentsLogInfo]);
}, [
rollingData,
startIndex,
bannerId,
dispatch,
handleStartVideoPlayer,
topContentsLogInfo,
]);
// 10초 롤링
useEffect(() => {
@@ -415,7 +468,12 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
}, [nowMenu]);
return (
<Container className={classNames(css.rollingWrap, isHorizontal && css.isHorizontalWrap)}>
<Container
className={classNames(
css.rollingWrap,
isHorizontal && css.isHorizontalWrap
)}
>
{rollingDataLength !== 1 ? (
<SpottableComponent
className={classNames(css.arrow, css.leftBtn)}
@@ -429,7 +487,8 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
/>
) : null}
{rollingData && rollingData[startIndex].shptmBanrTpNm === "Image Banner" ? (
{rollingData &&
rollingData[startIndex].shptmBanrTpNm === "Image Banner" ? (
<SpottableComponent
className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
onClick={imageBannerClick}
@@ -438,7 +497,9 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
spotlightId={spotlightId}
spotlightDisabled={contentsFocus}
aria-label={
rollingData[startIndex].prdtNm ? rollingData[startIndex].prdtNm : rollingData[startIndex].tmnlImgNm
rollingData[startIndex].prdtNm
? rollingData[startIndex].prdtNm
: rollingData[startIndex].tmnlImgNm
}
>
<div className={css.imgBanner}>
@@ -456,14 +517,28 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
aria-label={"LIVE " + rollingData[startIndex].showNm}
>
<p className={css.liveIcon}>
<CustomImage delay={0} src={liveShow} animationSpeed="fast" ariaLabel="LIVE icon" />
<CustomImage
delay={0}
src={liveShow}
animationSpeed="fast"
ariaLabel="LIVE icon"
/>
</p>
<div className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}>
<div
className={classNames(
css.itemBox,
isHorizontal && css.isHorizontal
)}
>
{rollingData[startIndex].tmnlImgPath == null ? (
<CustomImage
delay={0}
src={rollingData[startIndex].vtctpYn === "Y" ? emptyVerImage : emptyHorImage}
src={
rollingData[startIndex].vtctpYn === "Y"
? emptyVerImage
: emptyHorImage
}
ariaLabel={rollingData[startIndex].tmnlImgNm}
fallbackSrc={isHorizontal ? emptyHorImage : emptyVerImage}
/>
@@ -480,7 +555,11 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
{rollingData[startIndex].tmnlImgPath == null ? (
""
) : (
<CustomImage delay={0} src={btnPlay} ariaLabel="Play video Button" />
<CustomImage
delay={0}
src={btnPlay}
ariaLabel="Play video Button"
/>
)}
</div>
</div>
@@ -505,11 +584,20 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
spotlightDisabled={contentsFocus}
aria-label={rollingData[startIndex].showNm}
>
<div className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}>
<div
className={classNames(
css.itemBox,
isHorizontal && css.isHorizontal
)}
>
{rollingData[startIndex].tmnlImgPath == null ? (
<CustomImage
delay={0}
src={rollingData[startIndex].vtctpYn === "Y" ? emptyVerImage : emptyHorImage}
src={
rollingData[startIndex].vtctpYn === "Y"
? emptyVerImage
: emptyHorImage
}
ariaLabel={rollingData[startIndex].tmnlImgNm}
/>
) : (
@@ -524,7 +612,11 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
{rollingData[startIndex].tmnlImgPath == null ? (
""
) : (
<CustomImage delay={0} src={btnPlay} ariaLabel="Play video Button" />
<CustomImage
delay={0}
src={btnPlay}
ariaLabel="Play video Button"
/>
)}
</div>
@@ -556,7 +648,9 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
spotlightId={spotlightId}
spotlightDisabled={contentsFocus}
aria-label={
rollingData[startIndex].prdtNm ? rollingData[startIndex].prdtNm : rollingData[startIndex].tmnlImgNm
rollingData[startIndex].prdtNm
? rollingData[startIndex].prdtNm
: rollingData[startIndex].tmnlImgNm
}
>
<div className={css.productInfo}>
@@ -573,9 +667,13 @@ export default function RollingUnit({ bannerData, spotlightId, isHorizontal, han
: discountRate
? discountedPrice
: originalPrice}
{discountRate && !isHorizontal && <span className={css.saleAccBox}>{originalPrice}</span>}
{discountRate && !isHorizontal && (
<span className={css.saleAccBox}>{originalPrice}</span>
)}
</div>
{isHorizontal && <span className={css.saleAccBox}>{originalPrice}</span>}
{isHorizontal && (
<span className={css.saleAccBox}>{originalPrice}</span>
)}
</div>
<div className={css.itemImgBox}>

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

@@ -493,7 +493,7 @@ export default function MainView({ className }) {
dispatch(
pushPanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: { patnrId: patnrId.toString() },
panelInfo: { from: "upcoming", patnrId: patnrId.toString() },
})
);
dispatch(setHidePopup());

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

@@ -202,7 +202,7 @@ const WelcomeEventPanel = ({ spotlightId }) => {
dispatch(
pushPanel({
name: Config.panel_names.FEATURED_BRANDS_PANEL,
panelInfo: { patnrId: shptmLnkInfo?.lnkPatnrId },
panelInfo: { from: "gnb", patnrId: shptmLnkInfo?.lnkPatnrId },
})
);
break;