897 lines
29 KiB
JavaScript
897 lines
29 KiB
JavaScript
import React, {
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
} from 'react';
|
|
|
|
import classNames from 'classnames';
|
|
import {
|
|
useDispatch,
|
|
useSelector,
|
|
} from 'react-redux';
|
|
|
|
import Spotlight from '@enact/spotlight';
|
|
import SpotlightContainerDecorator
|
|
from '@enact/spotlight/SpotlightContainerDecorator';
|
|
import Spottable from '@enact/spotlight/Spottable';
|
|
import { getContainerId } from '@enact/spotlight/src/container';
|
|
|
|
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 {
|
|
setBannerIndex,
|
|
updateHomeInfo,
|
|
} from '../../../actions/homeActions';
|
|
import {
|
|
sendLogTopContents,
|
|
sendLogTotalRecommend,
|
|
} from '../../../actions/logActions';
|
|
import {
|
|
pushPanel,
|
|
SOURCE_MENUS,
|
|
} from '../../../actions/panelActions';
|
|
import {
|
|
finishVideoPreview,
|
|
startVideoPlayer,
|
|
} from '../../../actions/playActions';
|
|
import CustomImage from '../../../components/CustomImage/CustomImage';
|
|
import usePriceInfo from '../../../hooks/usePriceInfo';
|
|
import {
|
|
LOG_CONTEXT_NAME,
|
|
LOG_MENU,
|
|
LOG_MESSAGE_ID,
|
|
LOG_TP_NO,
|
|
panel_names,
|
|
} from '../../../utils/Config';
|
|
import {
|
|
$L,
|
|
formatGMTString,
|
|
} from '../../../utils/helperMethods';
|
|
import { TEMPLATE_CODE_CONF } from '../HomePanel';
|
|
import css from './RollingUnit.module.less';
|
|
|
|
const SpottableComponent = Spottable('div');
|
|
|
|
const Container = SpotlightContainerDecorator({ enterTo: 'last-focused', preserveId: true }, 'div');
|
|
|
|
const LINK_TYPES = {
|
|
FEATURED_BRANDS: 'DSP00501',
|
|
TRENDING_NOW: 'DSP00502',
|
|
HOT_PICKS: 'DSP00503',
|
|
ON_SALE: 'DSP00504',
|
|
CATEGORY: 'DSP00505',
|
|
PRODUCT_DETAIL: 'DSP00506',
|
|
VOD: 'DSP00507',
|
|
SHOW_DETAIL: 'DSP00508',
|
|
THEME: 'DSP00509',
|
|
JUSTFORYOU: 'DSP00510',
|
|
};
|
|
|
|
const createPanelInfo = (data, categoryData = {}) => ({
|
|
patnrId: data.patnrId,
|
|
prdtId: data.prdtId,
|
|
curationId: data.lnkCurationId,
|
|
lgCatCd: data.lgCatCd,
|
|
lgCatNm: categoryData.lgCatNm,
|
|
COUNT: categoryData.COUNT,
|
|
currentSpot: null,
|
|
dropDownTab: 0,
|
|
tab: 0,
|
|
focusedContainerId: null,
|
|
});
|
|
|
|
export default function RollingUnit({
|
|
bannerData,
|
|
spotlightId,
|
|
isHorizontal,
|
|
handleItemFocus,
|
|
handleShelfFocus,
|
|
videoPlayerable = false,
|
|
}) {
|
|
const rollingData = bannerData.bannerDetailInfos;
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const { curationId, curationTitle } = useSelector((state) => state.home);
|
|
const curtNm = useSelector((state) => state.home?.bannerData?.curtNm);
|
|
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 introTermsAgree = useSelector((state) => state.common.optionalTermsAgree);
|
|
const homeCategory = useSelector((state) => state.home.menuData?.data?.homeCategory);
|
|
const countryCode = useSelector((state) => state.common.httpHeader.cntry_cd);
|
|
const foryouInfos = useSelector((state) => state.foryou.recommendInfo.recommendProduct);
|
|
|
|
const { userNumber } = useSelector((state) => state.common.appStatus.loginUserData);
|
|
|
|
const playerPanelInfo = useSelector((state) => {
|
|
const playerPanel = state.panels.panels.find((p) => p.name === panel_names.PLAYER_PANEL);
|
|
return playerPanel?.panelInfo;
|
|
});
|
|
|
|
const bannerId = `banner-${bannerData.banrLctnNo}`;
|
|
const savedIndex = useSelector((state) => state.home.bannerIndices[bannerId]);
|
|
|
|
// 컴포넌트 상단에서 필터링
|
|
const filteredRollingData = useMemo(() => {
|
|
return rollingData.filter(
|
|
(item) =>
|
|
(introTermsAgree === true && userNumber !== undefined && userNumber !== '') ||
|
|
item.shptmLnkTpCd !== 'DSP00510'
|
|
);
|
|
}, [rollingData, introTermsAgree, userNumber]);
|
|
|
|
// 이후 filteredRollingData 사용
|
|
const rollingDataLength = filteredRollingData.length;
|
|
const [startIndex, setStartIndex] = useState(savedIndex !== undefined ? savedIndex : 0);
|
|
const lastIndexRef = useRef(rollingDataLength - 1);
|
|
const doRollingRef = useRef(false);
|
|
const [unitHasFocus, setUnitHasFocus] = useState(false);
|
|
const [contentsFocus, setContentsFocus] = useState(false);
|
|
const [prevFocus, setPrevFocus] = useState(false);
|
|
const [nextFocus, setNextFocus] = useState(false);
|
|
|
|
const requestRef = useRef();
|
|
const previousTimeRef = useRef();
|
|
const arrRef = useRef([]);
|
|
const bannerDataRef = useRef(bannerData);
|
|
const filteredRollingDataRef = useRef(filteredRollingData);
|
|
|
|
// filteredRollingDataRef 업데이트
|
|
useEffect(() => {
|
|
filteredRollingDataRef.current = filteredRollingData;
|
|
}, [filteredRollingData]);
|
|
|
|
const topContentsLogInfo = useMemo(() => {
|
|
if (filteredRollingDataRef.current && filteredRollingDataRef.current.length > 0) {
|
|
const currentRollingData = filteredRollingDataRef.current[startIndex];
|
|
|
|
let contId, contNm;
|
|
|
|
switch (currentRollingData?.shptmBanrTpCd) {
|
|
// case: "LIVE" or "VOD"
|
|
case 'DSP00301':
|
|
case 'DSP00302':
|
|
contId = currentRollingData?.showId;
|
|
contNm = currentRollingData?.showNm;
|
|
break;
|
|
|
|
// case: "Image Banner"
|
|
case 'DSP00303':
|
|
contId = currentRollingData?.shptmLnkTpCd;
|
|
contNm = currentRollingData?.shptmLnkTpNm;
|
|
break;
|
|
|
|
// case: "Today's Deals"
|
|
default:
|
|
contId = currentRollingData?.prdtId;
|
|
contNm = currentRollingData?.prdtNm;
|
|
break;
|
|
}
|
|
|
|
if (
|
|
currentRollingData?.shptmLnkTpCd === 'DSP00503' || // "Hot Picks"
|
|
currentRollingData?.shptmLnkTpCd === 'DSP00509' // "Theme"
|
|
) {
|
|
contNm = contNm + ' | ' + currentRollingData?.lnkCurationId;
|
|
}
|
|
|
|
return {
|
|
banrNo: `${currentRollingData?.banrDpOrd}`,
|
|
banrTpNm: currentRollingData?.vtctpYn
|
|
? currentRollingData.vtctpYn === 'Y'
|
|
? 'Vertical'
|
|
: 'Horizontal'
|
|
: '',
|
|
contId,
|
|
contNm,
|
|
contTpNm: currentRollingData?.shptmBanrTpNm ?? '',
|
|
dspyTpNm: bannerDataRef.current?.shptmDspyTpNm ?? '',
|
|
expsOrd: bannerDataRef.current?.banrLctnNo ?? '',
|
|
linkTpCd: '',
|
|
patncNm: currentRollingData?.patncNm ?? '',
|
|
patnrId: currentRollingData?.patnrId ?? '',
|
|
tmplCd: shptmTmplCd,
|
|
};
|
|
}
|
|
|
|
return {};
|
|
}, [shptmTmplCd, startIndex]);
|
|
|
|
const sendBannerLog = useCallback(
|
|
(bannerClick) => {
|
|
const data = filteredRollingDataRef.current[startIndex];
|
|
const newParams =
|
|
bannerData.banrLctnNo === '2'
|
|
? {
|
|
bannerType: 'Horizontal',
|
|
}
|
|
: {
|
|
bannerType: 'Vertical',
|
|
};
|
|
if (filteredRollingDataRef.current && nowMenu === LOG_MENU.HOME_TOP) {
|
|
const logParams = {
|
|
contextName: LOG_CONTEXT_NAME.HOME,
|
|
messageId: bannerClick ? LOG_MESSAGE_ID.BANNER_CLICK : LOG_MESSAGE_ID.BANNER,
|
|
curationId: curationId,
|
|
curationTitle: curationTitle,
|
|
contentType: data.shptmBanrTpNm,
|
|
contentId: data.showId,
|
|
contentTitle: data.showNm,
|
|
productId: data.prdtId,
|
|
productTitle: data.prdtNm,
|
|
displayType: 'button',
|
|
partner: data.patncNm,
|
|
brand: data.brndNm,
|
|
location: bannerData.banrLctnNo,
|
|
...newParams,
|
|
};
|
|
dispatch(sendLogTotalRecommend(logParams));
|
|
}
|
|
},
|
|
[dispatch, nowMenu, curationId, curationTitle]
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (savedIndex !== undefined) {
|
|
setStartIndex(savedIndex);
|
|
}
|
|
}, [savedIndex]);
|
|
|
|
const animate = useCallback((time) => {
|
|
if (previousTimeRef.current != undefined) {
|
|
const deltaTime = time - previousTimeRef.current;
|
|
|
|
if (deltaTime >= 10000 && doRollingRef.current) {
|
|
setStartIndex((prevIndex) => (prevIndex === lastIndexRef.current ? 0 : prevIndex + 1));
|
|
previousTimeRef.current = time;
|
|
}
|
|
} else {
|
|
previousTimeRef.current = time;
|
|
}
|
|
|
|
if (typeof window === 'object') {
|
|
requestRef.current = window.requestAnimationFrame(animate);
|
|
}
|
|
}, []);
|
|
|
|
// 롤링 이전 버튼
|
|
const handlePrev = useCallback(() => {
|
|
if (startIndex === 0) {
|
|
setStartIndex(lastIndexRef.current);
|
|
return;
|
|
}
|
|
setStartIndex(startIndex - 1);
|
|
}, [startIndex]);
|
|
|
|
// 롤링 다음 버튼
|
|
const handleNext = useCallback(() => {
|
|
if (lastIndexRef.current === startIndex) {
|
|
setStartIndex(0);
|
|
return;
|
|
}
|
|
setStartIndex(startIndex + 1);
|
|
}, [startIndex]);
|
|
|
|
// 베너 포커스 인
|
|
const onFocus = useCallback(() => {
|
|
if (handleItemFocus) {
|
|
handleItemFocus();
|
|
}
|
|
setUnitHasFocus(true);
|
|
}, [handleItemFocus]);
|
|
|
|
// 배너 포커스 아웃
|
|
const onBlur = useCallback(() => {
|
|
setUnitHasFocus(false);
|
|
}, []);
|
|
|
|
// 인디케이터 아래키 누를시 [<]
|
|
const prevKeyDown = (event) => {
|
|
if (event.key === 'ArrowDown') {
|
|
setNextFocus(true);
|
|
setContentsFocus(true);
|
|
}
|
|
};
|
|
|
|
// 인디케이터 아래키 누를시 [>]
|
|
const nextKeyDown = (event) => {
|
|
if (event.key === 'ArrowDown') {
|
|
setPrevFocus(true);
|
|
setContentsFocus(true);
|
|
}
|
|
};
|
|
|
|
// 인디케이터 포커스
|
|
const indicatorFocus = useCallback(() => {
|
|
if (handleItemFocus) {
|
|
handleItemFocus();
|
|
}
|
|
|
|
setNextFocus(false);
|
|
setContentsFocus(false);
|
|
setPrevFocus(false);
|
|
setUnitHasFocus(true);
|
|
}, [handleItemFocus]);
|
|
|
|
// 인디케이터 포커스 아웃
|
|
const indicatorBlur = useCallback(() => {
|
|
setUnitHasFocus(false);
|
|
setTimeout(() => {
|
|
setNextFocus(false);
|
|
setContentsFocus(false);
|
|
}, 300);
|
|
}, []);
|
|
|
|
const shelfFocus = useCallback(() => {
|
|
if (handleShelfFocus) {
|
|
handleShelfFocus();
|
|
}
|
|
}, [handleShelfFocus]);
|
|
|
|
const categoryData = useMemo(() => {
|
|
if (
|
|
filteredRollingData.length > 0 &&
|
|
Object.keys(filteredRollingData[startIndex]).length > 0 &&
|
|
filteredRollingData[startIndex].shptmLnkTpCd === LINK_TYPES.CATEGORY
|
|
) {
|
|
if (homeCategory && homeCategory.length > 0) {
|
|
const foundCategory = homeCategory.find(
|
|
(data) => data.lgCatCd === filteredRollingData[startIndex].lgCatCd
|
|
);
|
|
if (foundCategory) {
|
|
return {
|
|
lgCatNm: foundCategory.lgCatNm,
|
|
COUNT: foundCategory.COUNT,
|
|
};
|
|
}
|
|
}
|
|
}
|
|
return {};
|
|
}, [homeCategory, filteredRollingData, startIndex]);
|
|
|
|
const { originalPrice, discountedPrice, discountRate, offerInfo } =
|
|
usePriceInfo(filteredRollingData.length > 0 ? filteredRollingData[startIndex].priceInfo : {}) || {};
|
|
|
|
// Just For You 데이터에서 첫 번째 상품 추출
|
|
const justForYouProduct = useMemo(() => {
|
|
if (foryouInfos && foryouInfos.length > 0) {
|
|
const justForYouShelf = foryouInfos.find(
|
|
(shelf) => shelf.recommendTpCd === 'JUSTFORYOU'
|
|
);
|
|
if (justForYouShelf && justForYouShelf.productInfos && justForYouShelf.productInfos.length > 0) {
|
|
return justForYouShelf.productInfos[0];
|
|
}
|
|
}
|
|
return null;
|
|
}, [foryouInfos]);
|
|
|
|
// Just For You 상품의 가격 정보
|
|
const justForYouPriceInfo = usePriceInfo(
|
|
justForYouProduct && justForYouProduct.priceInfo ? justForYouProduct.priceInfo : ''
|
|
) || {
|
|
originalPrice: '',
|
|
discountedPrice: '',
|
|
discountRate: null,
|
|
offerInfo: '',
|
|
};
|
|
|
|
const handlePushPanel = useCallback(
|
|
(name, panelInfo) => {
|
|
const isDetailPanel = name === panel_names.DETAIL_PANEL;
|
|
const enrichedPanelInfo = isDetailPanel
|
|
? {
|
|
sourcePanel: panel_names.HOME_PANEL,
|
|
sourceMenu: SOURCE_MENUS.HOME_ROLLING_UNIT,
|
|
...panelInfo,
|
|
}
|
|
: panelInfo;
|
|
|
|
dispatch(pushPanel({ name, panelInfo: enrichedPanelInfo }));
|
|
},
|
|
[dispatch]
|
|
);
|
|
|
|
const handleStartVideoPlayer = useCallback(
|
|
(playerInfo) => {
|
|
dispatch(startVideoPlayer(playerInfo));
|
|
},
|
|
[dispatch]
|
|
);
|
|
|
|
const imageBannerClick = useCallback(() => {
|
|
// 필터링된 데이터가 비어있으면 return
|
|
if (!filteredRollingData || filteredRollingData.length === 0) {
|
|
return;
|
|
}
|
|
|
|
if (bannerId) {
|
|
dispatch(setBannerIndex(bannerId, startIndex));
|
|
}
|
|
|
|
const currentData = filteredRollingData[startIndex];
|
|
const linkType = currentData.shptmLnkTpCd;
|
|
const bannerType = currentData.shptmBanrTpNm;
|
|
|
|
if (bannerType === "Today's Deals") {
|
|
handlePushPanel(panel_names.DETAIL_PANEL, createPanelInfo(currentData));
|
|
sendBannerLog(true);
|
|
dispatch(
|
|
sendLogTopContents({
|
|
...topContentsLogInfo,
|
|
inDt: formatGMTString(new Date()) ?? '',
|
|
logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
|
|
})
|
|
);
|
|
return;
|
|
}
|
|
|
|
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));
|
|
break;
|
|
|
|
case LINK_TYPES.HOT_PICKS:
|
|
if (playerPanelInfo?.modal) {
|
|
dispatch(finishVideoPreview());
|
|
}
|
|
handlePushPanel(panel_names.HOT_PICKS_PANEL, createPanelInfo(currentData));
|
|
break;
|
|
|
|
case LINK_TYPES.ON_SALE:
|
|
handlePushPanel(panel_names.ON_SALE_PANEL, {
|
|
lgCatCd: currentData.lgCatCd,
|
|
});
|
|
break;
|
|
|
|
case LINK_TYPES.CATEGORY:
|
|
if (Object.keys(categoryData).length > 0) {
|
|
handlePushPanel(panel_names.CATEGORY_PANEL, createPanelInfo(currentData, categoryData));
|
|
}
|
|
break;
|
|
|
|
case LINK_TYPES.PRODUCT_DETAIL:
|
|
case LINK_TYPES.SHOW_DETAIL:
|
|
handlePushPanel(panel_names.DETAIL_PANEL, createPanelInfo(currentData));
|
|
break;
|
|
|
|
case LINK_TYPES.VOD:
|
|
handlePushPanel(panel_names.THEME_CURATION_PANEL, {
|
|
curationId: currentData.lnkCurationId,
|
|
});
|
|
break;
|
|
|
|
case LINK_TYPES.THEME:
|
|
handlePushPanel(panel_names.THEME_CURATION_PANEL, {
|
|
curationId: currentData.lnkCurationId,
|
|
});
|
|
break;
|
|
case LINK_TYPES.JUSTFORYOU:
|
|
handlePushPanel(panel_names.JUST_FOR_YOU_TEST_PANEL, createPanelInfo(currentData));
|
|
break;
|
|
default:
|
|
return;
|
|
}
|
|
sendBannerLog(true);
|
|
dispatch(
|
|
sendLogTopContents({
|
|
...topContentsLogInfo,
|
|
inDt: formatGMTString(new Date()) ?? '',
|
|
logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
|
|
})
|
|
);
|
|
}, [
|
|
filteredRollingData,
|
|
startIndex,
|
|
bannerId,
|
|
dispatch,
|
|
categoryData,
|
|
handlePushPanel,
|
|
sendBannerLog,
|
|
topContentsLogInfo,
|
|
]);
|
|
|
|
const videoClick = useCallback(() => {
|
|
// 필터링된 데이터가 비어있으면 return
|
|
if (!filteredRollingData || filteredRollingData.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const lastFocusedTargetId = getContainerId(Spotlight.getCurrent());
|
|
const currentSpot = Spotlight.getCurrent();
|
|
|
|
if (lastFocusedTargetId) {
|
|
dispatch(
|
|
updateHomeInfo({
|
|
name: panel_names.HOME_PANEL,
|
|
panelInfo: {
|
|
lastFocusedTargetId,
|
|
focusedContainerId: TEMPLATE_CODE_CONF.TOP,
|
|
currentSpot: currentSpot?.getAttribute('data-spotlight-id'),
|
|
},
|
|
})
|
|
);
|
|
}
|
|
|
|
if (bannerId) {
|
|
dispatch(setBannerIndex(bannerId, startIndex));
|
|
}
|
|
|
|
const currentData = filteredRollingData[startIndex];
|
|
|
|
handleStartVideoPlayer({
|
|
showUrl: currentData.showUrl,
|
|
patnrId: currentData.patnrId,
|
|
showId: currentData.showId,
|
|
shptmBanrTpNm: currentData.showId ? currentData.shptmBanrTpNm : 'MEDIA',
|
|
lgCatCd: currentData.lgCatCd,
|
|
chanId: currentData.brdcChnlId,
|
|
modal: false,
|
|
modalContainerId: null,
|
|
modalClassName: css.videoModal,
|
|
});
|
|
|
|
sendBannerLog();
|
|
dispatch(
|
|
sendLogTopContents({
|
|
...topContentsLogInfo,
|
|
inDt: formatGMTString(new Date()) ?? '',
|
|
logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
|
|
})
|
|
);
|
|
}, [filteredRollingData, startIndex, bannerId, dispatch, handleStartVideoPlayer, topContentsLogInfo]);
|
|
|
|
// 10초 롤링
|
|
useEffect(() => {
|
|
// 데이터가 1개인 경우 및 포커스 있는 경우 롤링 하지 않음
|
|
lastIndexRef.current = rollingDataLength - 1;
|
|
previousTimeRef.current = undefined;
|
|
if (rollingDataLength <= 1 || unitHasFocus) {
|
|
doRollingRef.current = false;
|
|
if (typeof window === 'object') {
|
|
window.cancelAnimationFrame(requestRef.current);
|
|
}
|
|
return;
|
|
}
|
|
|
|
doRollingRef.current = true;
|
|
if (typeof window === 'object') {
|
|
requestRef.current = window.requestAnimationFrame(animate);
|
|
}
|
|
|
|
return () => {
|
|
doRollingRef.current = false;
|
|
if (typeof window === 'object') {
|
|
window.cancelAnimationFrame(requestRef.current);
|
|
}
|
|
};
|
|
}, [rollingDataLength, unitHasFocus]);
|
|
|
|
useEffect(() => {
|
|
let _nowMenu = nowMenu;
|
|
let _entryMenu = entryMenu;
|
|
|
|
if (nowMenu === LOG_MENU.HOME_TOP) {
|
|
const params = {
|
|
...topContentsLogInfo,
|
|
entryMenu: _entryMenu,
|
|
inDt: formatGMTString(new Date()) ?? '',
|
|
logTpNo: LOG_TP_NO.TOP_CONTENTS.VIEW,
|
|
nowMenu: _nowMenu,
|
|
};
|
|
|
|
return () => {
|
|
if (arrRef.current.every((number) => number !== startIndex)) {
|
|
dispatch(sendLogTopContents(params));
|
|
arrRef.current.push(startIndex);
|
|
}
|
|
};
|
|
}
|
|
}, [dispatch, entryMenu, nowMenu, startIndex, topContentsLogInfo]);
|
|
|
|
useEffect(() => {
|
|
sendBannerLog();
|
|
}, [filteredRollingDataRef, nowMenu, startIndex]);
|
|
|
|
useEffect(() => {
|
|
if (nowMenu !== LOG_MENU.HOME_TOP) {
|
|
arrRef.current = [];
|
|
}
|
|
}, [nowMenu]);
|
|
|
|
return (
|
|
<Container
|
|
className={classNames(css.rollingWrap, isHorizontal && css.isHorizontalWrap)}
|
|
spotlightId={`container-${spotlightId}`}
|
|
onFocus={shelfFocus}
|
|
>
|
|
{filteredRollingData.length !== 1 ? (
|
|
<SpottableComponent
|
|
className={classNames(css.arrow, css.leftBtn)}
|
|
onClick={handlePrev}
|
|
onFocus={indicatorFocus}
|
|
onBlur={indicatorBlur}
|
|
spotlightId={spotlightId + 'Prev'}
|
|
spotlightDisabled={prevFocus}
|
|
onKeyDown={prevKeyDown}
|
|
aria-label="Move to left Button"
|
|
/>
|
|
) : null}
|
|
|
|
{/* 일반 Image Banner (Just For You, Today's Deals 제외) */}
|
|
{filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === 'Image Banner' && filteredRollingData[startIndex].shptmLnkTpNm !== 'Just For You' && filteredRollingData[startIndex].shptmLnkTpNm !== "Today's Deals" ? (
|
|
<SpottableComponent
|
|
className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
|
|
onClick={imageBannerClick}
|
|
onFocus={onFocus}
|
|
onBlur={onBlur}
|
|
spotlightId={spotlightId}
|
|
spotlightDisabled={contentsFocus}
|
|
aria-label={
|
|
filteredRollingData[startIndex].prdtNm
|
|
? filteredRollingData[startIndex].prdtNm
|
|
: filteredRollingData[startIndex].tmnlImgNm
|
|
}
|
|
>
|
|
<div className={css.imgBanner}>
|
|
<img src={filteredRollingData[startIndex].tmnlImgPath} />
|
|
</div>
|
|
</SpottableComponent>
|
|
) : filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === 'LIVE' ? (
|
|
<SpottableComponent
|
|
className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
|
|
onClick={videoClick}
|
|
onFocus={onFocus}
|
|
onBlur={onBlur}
|
|
spotlightId={spotlightId}
|
|
spotlightDisabled={contentsFocus}
|
|
aria-label={'LIVE ' + filteredRollingData[startIndex].showNm}
|
|
>
|
|
<p className={css.liveIcon}>
|
|
<CustomImage delay={0} src={liveShow} animationSpeed="fast" ariaLabel="LIVE icon" />
|
|
</p>
|
|
|
|
<div className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}>
|
|
{filteredRollingData[startIndex].tmnlImgPath == null ? (
|
|
<CustomImage
|
|
delay={0}
|
|
src={
|
|
filteredRollingData[startIndex].vtctpYn === 'Y' ? emptyVerImage : emptyHorImage
|
|
}
|
|
ariaLabel={filteredRollingData[startIndex].tmnlImgNm}
|
|
fallbackSrc={isHorizontal ? emptyHorImage : emptyVerImage}
|
|
/>
|
|
) : (
|
|
<CustomImage
|
|
delay={0}
|
|
src={filteredRollingData[startIndex].tmnlImgPath}
|
|
ariaLabel={filteredRollingData[startIndex].tmnlImgNm}
|
|
fallbackSrc={isHorizontal ? emptyHorImage : emptyVerImage}
|
|
/>
|
|
)}
|
|
|
|
<div className={css.btnPlay}>
|
|
{filteredRollingData[startIndex].tmnlImgPath == null ? (
|
|
''
|
|
) : (
|
|
<CustomImage delay={0} src={btnPlay} ariaLabel="Play video Button" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<p className={css.brandIcon}>
|
|
<CustomImage
|
|
delay={0}
|
|
src={filteredRollingData[startIndex].patncLogoPath}
|
|
fallbackSrc={defaultLogoImg}
|
|
animationSpeed="fast"
|
|
ariaLabel={filteredRollingData[startIndex].brdcChnlId}
|
|
/>
|
|
</p>
|
|
</SpottableComponent>
|
|
) : filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === 'VOD' ? (
|
|
<SpottableComponent
|
|
className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
|
|
onClick={videoClick}
|
|
onFocus={onFocus}
|
|
onBlur={onBlur}
|
|
spotlightId={spotlightId}
|
|
spotlightDisabled={contentsFocus}
|
|
aria-label={filteredRollingData[startIndex].showNm}
|
|
>
|
|
<div className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}>
|
|
{filteredRollingData[startIndex].tmnlImgPath == null ? (
|
|
<CustomImage
|
|
delay={0}
|
|
src={
|
|
filteredRollingData[startIndex].vtctpYn === 'Y' ? emptyVerImage : emptyHorImage
|
|
}
|
|
ariaLabel={filteredRollingData[startIndex].tmnlImgNm}
|
|
/>
|
|
) : (
|
|
<CustomImage
|
|
delay={0}
|
|
src={filteredRollingData[startIndex].tmnlImgPath}
|
|
ariaLabel={filteredRollingData[startIndex].tmnlImgNm}
|
|
/>
|
|
)}
|
|
|
|
<div className={css.btnPlay}>
|
|
{filteredRollingData[startIndex].tmnlImgPath == null ? (
|
|
''
|
|
) : (
|
|
<CustomImage delay={0} src={btnPlay} ariaLabel="Play video Button" />
|
|
)}
|
|
</div>
|
|
|
|
{filteredRollingData[startIndex]?.patncLogoPath && (
|
|
<p className={css.brandIcon}>
|
|
<CustomImage
|
|
delay={0}
|
|
src={filteredRollingData[startIndex].patncLogoPath}
|
|
fallbackSrc={defaultLogoImg}
|
|
animationSpeed="fast"
|
|
ariaLabel={filteredRollingData[startIndex].brdcChnlId}
|
|
/>
|
|
</p>
|
|
)}
|
|
</div>
|
|
</SpottableComponent>
|
|
) : filteredRollingData && filteredRollingData.length > 0 && (filteredRollingData[startIndex].shptmBanrTpNm === "Today's Deals" || filteredRollingData[startIndex].shptmLnkTpNm === "Today's Deals") ? (
|
|
<SpottableComponent
|
|
className={classNames(
|
|
css.itemBox,
|
|
css.todaysDeals,
|
|
countryCode === 'RU' ? css.ru : '',
|
|
countryCode === 'DE' ? css.de : '',
|
|
isHorizontal && css.isHorizontal
|
|
)}
|
|
onClick={imageBannerClick}
|
|
onFocus={onFocus}
|
|
onBlur={onBlur}
|
|
spotlightId={spotlightId}
|
|
spotlightDisabled={contentsFocus}
|
|
aria-label={
|
|
filteredRollingData[startIndex].prdtNm
|
|
? filteredRollingData[startIndex].prdtNm
|
|
: filteredRollingData[startIndex].tmnlImgNm
|
|
}
|
|
>
|
|
<div className={css.productInfo}>
|
|
<div className={css.todaysDealTitle}>{$L("TODAY's DEALS")}</div>
|
|
<div
|
|
className={css.textBox}
|
|
dangerouslySetInnerHTML={{
|
|
__html: `${filteredRollingData[startIndex].prdtNm}`,
|
|
}}
|
|
/>
|
|
<div className={css.accBox}>
|
|
{parseFloat(originalPrice?.replace('$', '')) === 0
|
|
? filteredRollingData[startIndex].offerInfo
|
|
: discountRate
|
|
? discountedPrice
|
|
: originalPrice}
|
|
{discountRate && !isHorizontal && (
|
|
<span className={css.saleAccBox}>{originalPrice}</span>
|
|
)}
|
|
</div>
|
|
{isHorizontal && parseFloat(originalPrice?.replace('$', '')) !== 0 && (
|
|
<span className={css.saleAccBox}>{originalPrice}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className={css.itemImgBox}>
|
|
<CustomImage
|
|
alt=""
|
|
delay={0}
|
|
animationSpeed="fast"
|
|
src={filteredRollingData[startIndex].tmnlImgPath}
|
|
fallbackSrc={defaultImageItem}
|
|
ariaLabel={filteredRollingData[startIndex].tmnlImgNm}
|
|
/>
|
|
</div>
|
|
</SpottableComponent>
|
|
) : filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmLnkTpNm === "Just For You" ? (
|
|
<SpottableComponent
|
|
className={classNames(
|
|
css.itemBox,
|
|
css.justforyou,
|
|
countryCode === 'RU' ? css.ru : '',
|
|
countryCode === 'DE' ? css.de : '',
|
|
isHorizontal && css.isHorizontal
|
|
)}
|
|
onClick={imageBannerClick}
|
|
onFocus={onFocus}
|
|
onBlur={onBlur}
|
|
spotlightId={spotlightId}
|
|
spotlightDisabled={contentsFocus}
|
|
aria-label={
|
|
justForYouProduct?.prdtNm
|
|
? justForYouProduct.prdtNm
|
|
: filteredRollingData[startIndex].tmnlImgNm
|
|
}
|
|
>
|
|
<div className={css.productInfo}>
|
|
<div className={css.justforyouTitle}>{$L("Just For You")}</div>
|
|
<div
|
|
className={css.textBox}
|
|
dangerouslySetInnerHTML={{
|
|
__html: `${justForYouProduct?.prdtNm || filteredRollingData[startIndex].prdtNm}`,
|
|
}}
|
|
/>
|
|
<div className={css.accBox}>
|
|
{justForYouProduct ? (
|
|
<>
|
|
{parseFloat(justForYouPriceInfo.originalPrice?.replace('$', '') || '0') === 0
|
|
? justForYouProduct.offerInfo
|
|
: justForYouPriceInfo.discountRate
|
|
? justForYouPriceInfo.discountedPrice
|
|
: justForYouPriceInfo.originalPrice}
|
|
{justForYouPriceInfo.discountRate && !isHorizontal && (
|
|
<span className={css.saleAccBox}>{justForYouPriceInfo.originalPrice}</span>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
{parseFloat(originalPrice?.replace('$', '') || '0') === 0
|
|
? filteredRollingData[startIndex]?.offerInfo
|
|
: discountRate
|
|
? discountedPrice
|
|
: originalPrice}
|
|
{discountRate && !isHorizontal && (
|
|
<span className={css.saleAccBox}>{originalPrice}</span>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
{isHorizontal && justForYouProduct && parseFloat(justForYouPriceInfo.originalPrice?.replace('$', '') || '0') !== 0 && (
|
|
<span className={css.saleAccBox}>{justForYouPriceInfo.originalPrice}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className={css.itemImgBox}>
|
|
<CustomImage
|
|
alt=""
|
|
delay={0}
|
|
animationSpeed="fast"
|
|
src={justForYouProduct?.imgUrl || filteredRollingData[startIndex]?.tmnlImgPath}
|
|
fallbackSrc={defaultImageItem}
|
|
ariaLabel={justForYouProduct?.prdtNm || filteredRollingData[startIndex]?.tmnlImgNm}
|
|
/>
|
|
</div>
|
|
</SpottableComponent>
|
|
) : null}
|
|
|
|
{filteredRollingData.length !== 1 ? (
|
|
<SpottableComponent
|
|
className={classNames(css.arrow, css.rightBtn)}
|
|
onClick={handleNext}
|
|
onFocus={indicatorFocus}
|
|
onBlur={indicatorBlur}
|
|
spotlightId={spotlightId + 'Next'}
|
|
spotlightDisabled={nextFocus}
|
|
onKeyDown={nextKeyDown}
|
|
aria-label="Move to right Button"
|
|
/>
|
|
) : null}
|
|
</Container>
|
|
);
|
|
}
|