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

[foryou] 로그인, 비로그인시 노출 차이 수정

Browse Source 
- 포유 아이콘 관련 처리부분 비로그인시 노출안되도록 처리.
 - 픽포유는 홈패널에서 노출로 처리.
This commit is contained in:
junghoon86.park
2025-12-15 16:15:51 +09:00
parent cb3a4e9bc7
commit c540378cb5
4 changed files with 340 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,11 @@ import Spotlight from '@enact/spotlight';
import { SpotlightContainerDecorator } from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import { pushPanel, updatePanel, navigateFromBestSeller } from '../../../actions/panelActions';
import {
navigateFromBestSeller,
pushPanel,
updatePanel,
} from '../../../actions/panelActions';
import { navigateToDetailFromHome } from '../../../actions/panelNavigationActions';
import SectionTitle from '../../../components/SectionTitle/SectionTitle';
import Tag from '../../../components/TItemCard/Tag';
@@ -15,13 +19,20 @@ import TItemCardNew from '../../../components/TItemCard/TItemCard.new';
import TScroller from '../../../components/TScroller/TScroller';
import useScrollReset from '../../../hooks/useScrollReset';
import useScrollTo from '../../../hooks/useScrollTo';
import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID, panel_names } from '../../../utils/Config';
import {
LOG_CONTEXT_NAME,
LOG_MESSAGE_ID,
panel_names,
} from '../../../utils/Config';
import { $L, scaleW } from '../../../utils/helperMethods';
import { SpotlightIds } from '../../../utils/SpotlightIds';
import css from './BestSeller.module.less';
const SpottableComponent = Spottable('div');
const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
const Container = SpotlightContainerDecorator(
{ enterTo: 'last-focused' },
'div'
);
const BestSeller = ({
order,
@@ -33,15 +44,26 @@ const BestSeller = ({
shelfTitle,
}) => {
const { getScrollTo, scrollLeft } = useScrollTo();
const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollLeft, true);
const { handleScrollReset, handleStopScrolling } = useScrollReset(
scrollLeft,
true
);
const dispatch = useDispatch();
const { cursorVisible } = useSelector((state) => state.common.appStatus);
const bestSellerDatas = useSelector((state) => state.product.bestSellerData?.bestSeller);
const bestSellerDatas = useSelector(
(state) => state.product.bestSellerData?.bestSeller
);
const bestSellerNewDatas = useSelector((state) => state.foryou?.recommendInfo?.recommendProduct);
const bestSellerNewDatas = useSelector(
(state) => state.foryou?.recommendInfo?.recommendProduct
);
const { userNumber } = useSelector(
(state) => state.common.appStatus.loginUserData
);
const [drawChk, setDrawChk] = useState(false);
const [firstChk, setFirstChk] = useState(0);
@@ -51,11 +73,14 @@ const BestSeller = ({
useEffect(() => {
setBestInfos(
bestSellerNewDatas?.filter((item) => item.recommendTpCd === 'BESTSELLER') || [] // 기본값으로 빈 배열 설정
bestSellerNewDatas?.filter(
(item) => item.recommendTpCd === 'BESTSELLER'
) || [] // 기본값으로 빈 배열 설정
);
}, [bestSellerNewDatas]);
useEffect(() => {
if (userNumber) {
if (!bestInfos || bestInfos.length === 0) {
const baseData =
bestSellerDatas?.map((item) => ({
@@ -72,7 +97,9 @@ const BestSeller = ({
foryou: true,
})) || [];
const recommendedPrdtIds = new Set(recommendedData.map((item) => item.prdtId));
const recommendedPrdtIds = new Set(
recommendedData.map((item) => item.prdtId)
);
const baseData =
bestSellerDatas?.map((item) => ({
@@ -81,7 +108,10 @@ const BestSeller = ({
})) || [];
setBestItemNewData(baseData);
}, [bestSellerDatas, bestInfos]);
} else {
setBestItemNewData(bestSellerDatas);
}
}, [bestSellerDatas, bestInfos, userNumber]);
const orderStyle = useMemo(() => ({ order: order }), [order]);
@@ -144,7 +174,10 @@ const BestSeller = ({
if (c) {
let cAriaLabel = c.getAttribute('aria-label');
if (cAriaLabel) {
const newcAriaLabel = cAriaLabel.replace('Best Seller, Heading 1,', '');
const newcAriaLabel = cAriaLabel.replace(
'Best Seller, Heading 1,',
''
);
c.setAttribute('aria-label', newcAriaLabel);
}
}

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

@@ -7,10 +7,7 @@ import React, {
} from 'react';
import classNames from 'classnames';
import {
useDispatch,
useSelector,
} from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { applyMiddleware } from 'redux';
import Spotlight from '@enact/spotlight';
@@ -23,11 +20,11 @@ import {
import hsn from '../../../assets/images/bg/hsn_new.png';
import koreaKiosk from '../../../assets/images/bg/koreaKiosk_new.png';
import lgelectronics from '../../../assets/images/bg/lgelectronics_new.png';
import nbcu from '../../../assets/images/bg/nbcu_new.png';
import ontv4u from '../../../assets/images/bg/ontv4u_new.png';
import Pinkfong from '../../../assets/images/bg/Pinkfong_new.png';
import qvc from '../../../assets/images/bg/qvc_new.png';
import shoplc from '../../../assets/images/bg/shoplc_new.png';
import nbcu from '../../../assets/images/bg/nbcu_new.png';
import { types } from '../../actions/actionTypes';
import {
changeAppStatus,
@@ -45,14 +42,8 @@ import {
getHomeMainContents,
updateHomeInfo,
} from '../../actions/homeActions';
import {
sendLogGNB,
sendLogTotalRecommend,
} from '../../actions/logActions';
import {
getSubCategory,
getTop20Show,
} from '../../actions/mainActions';
import { sendLogGNB, sendLogTotalRecommend } from '../../actions/logActions';
import { getSubCategory, getTop20Show } from '../../actions/mainActions';
import { setMyPageTermsAgree } from '../../actions/myPageActions';
import { getHomeOnSaleInfo } from '../../actions/onSaleActions';
import { updatePanel } from '../../actions/panelActions';
@@ -69,8 +60,7 @@ import TButton, { TYPES } from '../../components/TButton/TButton';
import TPanel from '../../components/TPanel/TPanel';
import TNewPopUp from '../../components/TPopUp/TNewPopUp';
import TPopUp from '../../components/TPopUp/TPopUp';
import TVerticalPagenator
from '../../components/TVerticalPagenator/TVerticalPagenator';
import TVerticalPagenator from '../../components/TVerticalPagenator/TVerticalPagenator';
import useDebugKey from '../../hooks/useDebugKey';
import { useFocusHistory } from '../../hooks/useFocusHistory/useFocusHistory';
import usePrevious from '../../hooks/usePrevious';
@@ -178,68 +168,113 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
// });
const isGnbOpened = useSelector((state) => state.common.isGnbOpened);
const homeLayoutInfo = useSelector((state) => state.home.layoutData);
const panelInfo = useSelector((state) => state.home.homeInfo?.panelInfo ?? {});
const panelInfo = useSelector(
(state) => state.home.homeInfo?.panelInfo ?? {}
);
const panels = useSelector((state) => state.panels.panels);
const webOSVersion = useSelector((state) => state.common.appStatus?.webOSVersion);
const webOSVersion = useSelector(
(state) => state.common.appStatus?.webOSVersion
);
const enterThroughGNB = useSelector((state) => state.home.enterThroughGNB);
const defaultFocus = useSelector((state) => state.home.defaultFocus);
const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos);
const bannerDataList = useSelector(
(state) => state.home.bannerData?.bannerInfos
);
// ✅ PlayerPanel의 shouldShrinkTo1px 상태 추적
const playerPanelShouldShrink = useSelector((state) => {
const playerPanel = state.panels.panels.find((p) => p.name === panel_names.PLAYER_PANEL);
const playerPanel = state.panels.panels.find(
(p) => p.name === panel_names.PLAYER_PANEL
);
return playerPanel?.panelInfo?.shouldShrinkTo1px ?? false;
});
// ✅ PlayerPanel의 modal 상태 추적 (false → true 감지용)
const playerModalState = useSelector((state) => {
const playerPanel = state.panels.panels.find((p) => p.name === panel_names.PLAYER_PANEL);
const playerPanel = state.panels.panels.find(
(p) => p.name === panel_names.PLAYER_PANEL
);
return playerPanel?.panelInfo?.modal ?? false;
});
const prevPlayerModalStateRef = useRef(false);
const categoryInfos = useSelector((state) => state.onSale.homeOnSaleData?.data?.categoryInfos);
const categoryInfos = useSelector(
(state) => state.onSale.homeOnSaleData?.data?.categoryInfos
);
const categoryItemInfos = useSelector((state) => state.main.subCategoryData?.categoryItemInfos);
const categoryItemInfos = useSelector(
(state) => state.main.subCategoryData?.categoryItemInfos
);
const { popupVisible, activePopup } = useSelector((state) => state.common.popup);
const { popupVisible, activePopup } = useSelector(
(state) => state.common.popup
);
const eventPopInfosData = useSelector((state) => state.event.eventData.eventPopInfo);
const eventPopInfosData = useSelector(
(state) => state.event.eventData.eventPopInfo
);
const eventData = useSelector((state) => state.event.eventData);
const eventClickSuccess = useSelector((state) => state.event.eventClickSuccess);
const homeOnSaleInfos = useSelector((state) => state.onSale.homeOnSaleData?.data.homeOnSaleInfos);
const bestSellerDatas = useSelector((state) => state.product.bestSellerData?.bestSeller);
const eventClickSuccess = useSelector(
(state) => state.event.eventClickSuccess
);
const homeOnSaleInfos = useSelector(
(state) => state.onSale.homeOnSaleData?.data.homeOnSaleInfos
);
const bestSellerDatas = useSelector(
(state) => state.product.bestSellerData?.bestSeller
);
const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
const isDeepLink = useSelector((state) => state.common.deepLinkInfo.isDeepLink);
const isDeepLink = useSelector(
(state) => state.common.deepLinkInfo.isDeepLink
);
// 선택약관 관련 Redux 상태
const termsData = useSelector((state) => state.home.termsData);
const termsIdMap = useSelector((state) => state.home.termsIdMap);
const optionalTermsAvailable = useSelector((state) => state.home.optionalTermsAvailable);
const optionalTermsAvailable = useSelector(
(state) => state.home.optionalTermsAvailable
);
const optionalTermsData = useSelector((state) => {
if (state.home.termsData && state.home.termsData.data && state.home.termsData.data.terms) {
return state.home.termsData.data.terms.find((term) => term.trmsTpCd === 'MST00405');
if (
state.home.termsData &&
state.home.termsData.data &&
state.home.termsData.data.terms
) {
return state.home.termsData.data.terms.find(
(term) => term.trmsTpCd === 'MST00405'
);
}
return null;
});
const termsLoading = useSelector((state) => state.common.termsLoading);
const currentTermsFlag = useSelector((state) => state.common.termsFlag);
const optionalTermsPopupFlow = useSelector((state) => state.common.optionalTermsPopupFlow);
const optionalTermsPopupFlow = useSelector(
(state) => state.common.optionalTermsPopupFlow
);
const { userNumber } = useSelector(
(state) => state.common.appStatus.loginUserData
);
const [btnDisabled, setBtnDisabled] = useState(true);
const [arrowBottom, setArrowBottom] = useState(true);
const [firstSpot, setFirstSpot] = useState(false);
const [eventPopOpen, setEventPopOpen] = useState(false);
const [nowShelf, setNowShelf] = useState(panelInfo.nowShelf);
const [firstLgCatCd, setFirstLgCatCd] = useState(panelInfo.currentCatCd ?? null);
const [firstLgCatCd, setFirstLgCatCd] = useState(
panelInfo.currentCatCd ?? null
);
const [cateCd, setCateCd] = useState(panelInfo.currentCatCd ?? null);
const [cateNm, setCateNm] = useState(panelInfo.currentCateName ?? null);
// 선택약관 팝업 상태
const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] = useState(false);
const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] =
useState(false);
const [isOptionalTermsVisible, setIsOptionalTermsVisible] = useState(false);
const [optionalTermsAgreed, setOptionalTermsAgreed] = useState(false);
const { entryMenu, nowMenu } = useSelector((state) => state.common.menu);
const [focusedContainerId, setFocusedContainerId] = useState(panelInfo.focusedContainerId);
const [focusedContainerId, setFocusedContainerId] = useState(
panelInfo.focusedContainerId
);
// DetailPanel 진입 시 포커스 대상 저장
const lastFocusedTargetRef = useRef(panelInfo.lastFocusedTargetId || null);
@@ -254,7 +289,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
useEffect(() => {
if (prevIsOnTopRef.current && !isOnTop) {
const current = Spotlight.getCurrent();
const tBody = document.querySelector(`[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]`);
const tBody = document.querySelector(
`[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]`
);
if (current && tBody && tBody.contains(current)) {
const targetId = current.getAttribute('data-spotlight-id');
@@ -286,7 +323,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
ImagePreloader.preloadAllImages(BACKGROUND_IMAGES)
.then((results) => {
const successCount = results.filter((r) => r !== null).length;
dlog(`[HomePanel] Background images preloaded: ${successCount}/${results.length} images`);
dlog(
`[HomePanel] Background images preloaded: ${successCount}/${results.length} images`
);
// 프리로딩 통계 정보 로깅 (디버깅용)
const stats = ImagePreloader.getStats();
@@ -312,7 +351,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
const sortedHomeLayoutInfo = useMemo(() => {
if (homeLayoutInfo && homeLayoutInfo.homeLayoutInfo) {
const sorted = [...homeLayoutInfo.homeLayoutInfo].sort((x, y) => x.expsOrd - y.expsOrd);
const sorted = [...homeLayoutInfo.homeLayoutInfo].sort(
(x, y) => x.expsOrd - y.expsOrd
);
return sorted;
}
return [];
@@ -337,7 +378,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
const expandAttemptRef = useRef(0); // 복구 시도 횟수
const loadingComplete = useSelector((state) => state.common?.loadingComplete);
const isVideoTransitionLocked = useSelector((state) => state.home.videoTransitionLocked);
const isVideoTransitionLocked = useSelector(
(state) => state.home.videoTransitionLocked
);
// 선택약관 동의 핸들러
const handleOptionalAgree = useCallback(() => {
@@ -417,7 +460,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
});
setTimeout(() => {
Spotlight.focus('home_tbody');
},100)
}, 100);
}, [handleOptionalAgree, dispatch, currentTermsFlag]);
const handleOptionalDeclineClick = useCallback(() => {
@@ -428,7 +471,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
setIsOptionalConfirmVisible(false);
setTimeout(() => {
Spotlight.focus('home_tbody');
},100)
}, 100);
}, [dispatch]);
const handleTermsPopupClosed = useCallback(() => {
@@ -499,7 +542,12 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
return () => clearTimeout(timer);
}
}, [shouldShowOptionalTermsPopup, termsLoading, isOptionalConfirmVisible, dispatch]);
}, [
shouldShowOptionalTermsPopup,
termsLoading,
isOptionalConfirmVisible,
dispatch,
]);
const onCancel = useCallback(() => {
const currentSpot = Spotlight.getCurrent();
@@ -550,7 +598,8 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
const containerId = sortedHomeLayoutInfo[0].shptmApphmDspyOptCd;
const navigableEls = getContainerNavigableElements(containerId);
const navigableIds = navigableEls.filter((el) => typeof el === 'string');
const target = containerId === TEMPLATE_CODE_CONF.TOP ? 'banner0' : containerId;
const target =
containerId === TEMPLATE_CODE_CONF.TOP ? 'banner0' : containerId;
if (navigableIds.length > 0) {
setContainerLastFocusedElement(null, navigableIds);
@@ -626,7 +675,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
<HomeBanner
key={el.shptmApphmDspyOptCd}
spotlightId={el.shptmApphmDspyOptCd}
firstSpot={!panelInfo.focusedContainerId && !panelInfo.currentSpot}
firstSpot={
!panelInfo.focusedContainerId && !panelInfo.currentSpot
}
className={css.homeBannerWrap}
handleShelfFocus={handleItemFocus(
el.shptmApphmDspyOptCd,
@@ -718,7 +769,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
} else break;
}
case TEMPLATE_CODE_CONF.PICK_FOR_YOU: {
if (bestSellerDatas && bestSellerDatas.length > 0) {
if (userNumber) {
return (
<PickedForYou
key={el.shptmApphmDspyOptCd}
@@ -737,7 +788,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
}
}
})}
{loadingComplete && sortedHomeLayoutInfo && sortedHomeLayoutInfo.length > 0 && (
{loadingComplete &&
sortedHomeLayoutInfo &&
sortedHomeLayoutInfo.length > 0 && (
<TButton
className={css.tButton}
onClick={handleTopButtonClick}
@@ -914,7 +967,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
// console.log('[HomePanel] playVideo 호출 완료');
if (isDeepLink || (!panels.length && !panelInfo.focusedContainerId)) {
dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } }));
dispatch(
changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } })
);
dispatch(getHomeMainContents());
dispatch(getHomeLayout());
dispatch(
@@ -1084,7 +1139,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
// 🔽 videoPlayIntentRef가 null인 경우: 비디오 재생 가능한 첫 번째 배너 찾기
if (!videoPlayIntentRef.current && bannerDataList) {
dlog('[HomePanel] *** videoPlayIntentRef가 null - 첫 번째 비디오 배너 검색');
dlog(
'[HomePanel] *** videoPlayIntentRef가 null - 첫 번째 비디오 배너 검색'
);
// HomeBanner.jsx의 defaultFocus 계산 로직과 동일
let targetIndex = 0;
@@ -1138,7 +1195,10 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
};
lastPlayedBannerIdRef.current = bannerId;
dlog('[HomePanel] *** videoPlayIntentRef 설정 완료:', videoPlayIntentRef.current);
dlog(
'[HomePanel] *** videoPlayIntentRef 설정 완료:',
videoPlayIntentRef.current
);
} else {
dlog('[HomePanel] *** ⚠️ 비디오 재생 가능한 배너를 찾지 못함');
}
@@ -1181,7 +1241,8 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
// 🔽 DetailPanel에서 돌아온 뒤 포커스를 마지막 포커스 대상에 복원
dlog('[HomePanel] *** 🎯 Focus 복원 준비');
const targetFocusId = panelInfo.lastFocusedTargetId || lastFocusedTargetRef.current;
const targetFocusId =
panelInfo.lastFocusedTargetId || lastFocusedTargetRef.current;
dlog(
'[HomePanel] *** 📍 targetFocusId:',
targetFocusId,
@@ -1250,7 +1311,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
targetSpotlightCateNm = c.getAttribute('data-catcd-nm');
}
const tBody = document.querySelector(`[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]`);
const tBody = document.querySelector(
`[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]`
);
const currentSpot = c && tBody.contains(c) ? targetSpotlightId : null;
dispatch(checkEnterThroughGNB(false));
@@ -1263,7 +1326,8 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
currentCateName: targetSpotlightCateNm,
// <<<<<<< HEAD
focusedContainerId: focusedContainerIdRef.current,
lastFocusedTargetId: lastFocusedTargetRef.current || panelInfo.lastFocusedTargetId,
lastFocusedTargetId:
lastFocusedTargetRef.current || panelInfo.lastFocusedTargetId,
// =======
// focusedContainerId: focusedContainerId,
// >>>>>>> gitlab/develop
@@ -1339,7 +1403,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
<>
{/* HomePanel용 메모리 상주 그라데이션 배경 */}
<div
className={classNames(css.gradientBackground, { [css.visible]: showGradientBackground })}
className={classNames(css.gradientBackground, {
[css.visible]: showGradientBackground,
})}
aria-hidden="true"
/>
@@ -1369,7 +1435,10 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
)}
{arrowBottom && (
<p className={classNames(css.arrow, css.arrowBottom)} onClick={handleArrowClick} />
<p
className={classNames(css.arrow, css.arrowBottom)}
onClick={handleArrowClick}
/>
)}
{activePopup === ACTIVE_POPUP.exitPopup && (
@@ -1386,9 +1455,8 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
text={$L('Are you sure you want to exit Shop Time?')}
/>
)}
{(activePopup === ACTIVE_POPUP.eventPopup || activePopup === ACTIVE_POPUP.smsPopup) && (
<EventPopUpBanner />
)}
{(activePopup === ACTIVE_POPUP.eventPopup ||
activePopup === ACTIVE_POPUP.smsPopup) && <EventPopUpBanner />}
{/* 선택약관 동의 팝업 */}
<OptionalConfirm
open={isOptionalConfirmVisible}

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

@@ -1,24 +1,14 @@
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 Spotlight from '@enact/spotlight';
import {
SpotlightContainerDecorator,
} from '@enact/spotlight/SpotlightContainerDecorator';
import { SpotlightContainerDecorator } from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import { getContainerId } from '@enact/spotlight/src/container';
import { updateHomeInfo } from '../../../actions/homeActions';
import { pushPanel, popPanel } from '../../../actions/panelActions';
import { popPanel, pushPanel } from '../../../actions/panelActions';
import { startVideoPlayer } from '../../../actions/playActions';
import SectionTitle from '../../../components/SectionTitle/SectionTitle';
import Tag from '../../../components/TItemCard/Tag';
@@ -35,18 +25,15 @@ import {
LOG_MESSAGE_ID,
panel_names,
} from '../../../utils/Config';
import {
$L,
scaleW,
} from '../../../utils/helperMethods';
import { $L, scaleW } from '../../../utils/helperMethods';
import { SpotlightIds } from '../../../utils/SpotlightIds';
import { TEMPLATE_CODE_CONF } from '../HomePanel';
import css from '../PopularShow/PopularShow.module.less';
const SpottableComponent = Spottable("div");
const SpottableComponent = Spottable('div');
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
{ enterTo: 'last-focused' },
'div'
);
const PopularShow = ({
@@ -72,9 +59,13 @@ const PopularShow = ({
const panels = useSelector((state) => state.panels.panels);
const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
const recommendInfo = useSelector((state) => state.foryou?.recommendInfo?.recommendShow);
const recommendInfo = useSelector(
(state) => state.foryou?.recommendInfo?.recommendShow
);
const { userNumber } = useSelector(
(state) => state.common.appStatus.loginUserData
);
const orderStyle = useMemo(() => ({ order: order }), [order]);
const [drawChk, setDrawChk] = useState(false);
@@ -89,15 +80,16 @@ const PopularShow = ({
useEffect(() => {
setShowInfos(
recommendInfo?.filter(
(item) => item.recommendTpCd === "POPULARSHOW"
) || []
)
},[recommendInfo])
recommendInfo?.filter((item) => item.recommendTpCd === 'POPULARSHOW') ||
[]
);
}, [recommendInfo]);
useEffect(() => {
if (userNumber) {
if (!showInfos || showInfos.length === 0) {
const baseData = topInfos?.map((item) => ({
const baseData =
topInfos?.map((item) => ({
...item,
foryou: false,
})) || [];
@@ -105,23 +97,27 @@ const PopularShow = ({
return;
}
const recommendedData = showInfos[0].showInfos?.map((item) => ({
const recommendedData =
showInfos[0].showInfos?.map((item) => ({
...item,
foryou: true,
})) || [];
const recommendedPrdtIds = new Set(recommendedData?.map(item => item.showId));
const recommendedPrdtIds = new Set(
recommendedData?.map((item) => item.showId)
);
const baseData = topInfos?.map((item) => ({
const baseData =
topInfos?.map((item) => ({
...item,
foryou: recommendedPrdtIds.has(item.showId),
})) || [];
setShowNewInfos([...baseData]);
}, [topInfos, showInfos]);
} else {
setShowNewInfos(topInfos);
}
}, [topInfos, showInfos, userNumber]);
const handleCardClick = useCallback(
(patnrId, showId, catCd, showUrl) => () => {
@@ -135,7 +131,7 @@ const PopularShow = ({
startVideoPlayer({
showId,
patnrId,
shptmBanrTpNm: "VOD",
shptmBanrTpNm: 'VOD',
lgCatCd: catCd,
modal: false,
showUrl: showUrl,
@@ -151,7 +147,7 @@ const PopularShow = ({
{
name: panel_names.TRENDING_NOW_PANEL,
panelInfo: {
pageName: "PS",
pageName: 'PS',
focusedContainerId: SpotlightIds.TRENDING_NOW_POPULAR_SHOW,
},
},
@@ -179,23 +175,23 @@ const PopularShow = ({
if (firstChk === 0 && itemIndex === 0) {
const c = Spotlight.getCurrent();
const getAriaLabel = c.getAttribute("aria-label");
const getAriaLabel = c.getAttribute('aria-label');
if (c) {
let cAriaLabel = c.getAttribute("aria-label");
cAriaLabel = "POPULAR SHOW, Heading 1," + cAriaLabel;
c.setAttribute("aria-label", cAriaLabel);
let cAriaLabel = c.getAttribute('aria-label');
cAriaLabel = 'POPULAR SHOW, Heading 1,' + cAriaLabel;
c.setAttribute('aria-label', cAriaLabel);
}
setFirstChk(1);
} else if (firstChk === 1 && itemIndex === 0) {
const c = Spotlight.getCurrent();
if (c) {
let cAriaLabel = c.getAttribute("aria-label");
let cAriaLabel = c.getAttribute('aria-label');
if (cAriaLabel) {
const newcAriaLabel = cAriaLabel.replace(
"POPULAR SHOW, Heading 1,",
""
'POPULAR SHOW, Heading 1,',
''
);
c.setAttribute("aria-label", newcAriaLabel);
c.setAttribute('aria-label', newcAriaLabel);
}
}
} else {
@@ -246,7 +242,7 @@ const PopularShow = ({
>
<SectionTitle
className={css.subTitle}
title={$L("POPULAR SHOW")}
title={$L('POPULAR SHOW')}
data-title-index="homePopularShow"
label="POPULAR SHOW"
/>
@@ -293,8 +289,8 @@ const PopularShow = ({
showId={showId}
showTitle={showNm}
imageSource={
(thumbnailUrl && thumbnailUrl960) ?
thumbnailUrl !== thumbnailUrl960
thumbnailUrl && thumbnailUrl960
? thumbnailUrl !== thumbnailUrl960
? thumbnailUrl960
: thumbnailUrl
: thumbnailUrl
@@ -304,7 +300,7 @@ const PopularShow = ({
nonPosition={true}
type={TYPES.videoShow}
imgType={
vtctpYn !== "Y"
vtctpYn !== 'Y'
? IMAGETYPES.imgHorizontal
: IMAGETYPES.imgVertical
}
@@ -313,11 +309,11 @@ const PopularShow = ({
onFocus={handleFocus(itemIndex)}
onBlur={handleBlur(itemIndex)}
onClick={handleCardClick(patnrId, showId, catCd, showUrl)}
firstLabel={patncNm + " "}
label={itemIndex * 1 + 1 + " of " + showNewInfos.length}
firstLabel={patncNm + ' '}
label={itemIndex * 1 + 1 + ' of ' + showNewInfos.length}
lastLabel=" go to detail, button"
>
{foryou === true && <Tag text={"For You"} />}
{foryou === true && <Tag text={'For You'} />}
</TItemCardNew>
);
}
@@ -329,7 +325,7 @@ const PopularShow = ({
className={css.displayBox}
onClick={handleMoreCardClick}
onFocus={_handleItemFocus}
spotlightId={"home-popularshow-more-btn"}
spotlightId={'home-popularshow-more-btn'}
></SpottableComponent>
</div>
)}

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

@@ -8,21 +8,32 @@ import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
import { sendLogCuration } from '../../../actions/logActions';
import { getSubCategory } from '../../../actions/mainActions';
import { pushPanel, navigateFromSubCategory } from '../../../actions/panelActions';
import {
navigateFromSubCategory,
pushPanel,
} from '../../../actions/panelActions';
import Tag from '../../../components/TItemCard/Tag';
import TItemCardNew from '../../../components/TItemCard/TItemCard.new';
import TScroller from '../../../components/TScroller/TScroller';
import usePrevious from '../../../hooks/usePrevious';
import useScrollReset from '../../../hooks/useScrollReset';
import useScrollTo from '../../../hooks/useScrollTo';
import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID, LOG_TP_NO, panel_names } from '../../../utils/Config';
import {
LOG_CONTEXT_NAME,
LOG_MESSAGE_ID,
LOG_TP_NO,
panel_names,
} from '../../../utils/Config';
import { SpotlightIds } from '../../../utils/SpotlightIds';
import CategoryNav from '../../HomePanel/SubCategory/CategoryNav/CategoryNav';
import css from '../../HomePanel/SubCategory/SubCategory.module.less';
const SpottableComponent = Spottable('div');
const Container = SpotlightContainerDecorator({ enterTo: null }, 'div');
const ContainerBasic = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
const ContainerBasic = SpotlightContainerDecorator(
{ enterTo: 'last-focused' },
'div'
);
const getExpsOrdByLgCatCd = (array, value) => {
const expsOrd = array.findIndex(({ lgCatCd }) => value === lgCatCd) + 1;
@@ -40,12 +51,24 @@ export default memo(function SubCategory({
}) {
const dispatch = useDispatch();
const { getScrollTo, scrollLeft } = useScrollTo();
const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollLeft, false);
const { handleScrollReset, handleStopScrolling } = useScrollReset(
scrollLeft,
false
);
const categoryInfos = useSelector((state) => state.home.menuData?.data?.homeCategory);
const categoryItemInfos = useSelector((state) => state.main.subCategoryData?.categoryItemInfos);
const categoryInfos = useSelector(
(state) => state.home.menuData?.data?.homeCategory
);
const categoryItemInfos = useSelector(
(state) => state.main.subCategoryData?.categoryItemInfos
);
const foruItemInfos = useSelector((state) => state.main.recommendProduct[0]?.productInfos);
const foruItemInfos = useSelector(
(state) => state.main.recommendProduct[0]?.productInfos
);
const { userNumber } = useSelector(
(state) => state.common.appStatus.loginUserData
);
const nowMenu = useSelector((state) => state.common.menu.nowMenu);
@@ -207,6 +230,7 @@ export default memo(function SubCategory({
}, [handleShelfFocus]);
useEffect(() => {
if (userNumber) {
if (!foruItemInfos || foruItemInfos.length === 0) {
const baseData =
categoryItemInfos?.subCatItemList?.map((item) => ({
@@ -223,7 +247,9 @@ export default memo(function SubCategory({
foryou: true,
})) || [];
const recommendedPrdtIds = new Set(recommendedData.map((item) => item.prdtId));
const recommendedPrdtIds = new Set(
recommendedData.map((item) => item.prdtId)
);
const baseData =
categoryItemInfos?.subCatItemList?.map((item) => ({
@@ -232,10 +258,17 @@ export default memo(function SubCategory({
})) || [];
setCategoryItemNewData([...baseData]);
}, [categoryItemInfos?.subCatItemList, foruItemInfos]);
} else {
setCategoryItemNewData(categoryItemInfos?.subCatItemList);
}
}, [categoryItemInfos?.subCatItemList, foruItemInfos, userNumber]);
return (
<Container spotlightId={spotlightId} data-wheel-point onFocus={_handleShelfFocus}>
<Container
spotlightId={spotlightId}
data-wheel-point
onFocus={_handleShelfFocus}
>
<CategoryNav
categoryInfos={categoryInfos}
currentCategoryCode={currentLgCatCd}
@@ -293,7 +326,12 @@ export default memo(function SubCategory({
offerInfo={offerInfo}
data-catcd-num={currentLgCatCd}
data-catcd-nm={currentLgCatNm}
label={itemIndex * 1 + 1 + ' of ' + (categoryItemNewData?.length || 0)}
label={
itemIndex * 1 +
1 +
' of ' +
(categoryItemNewData?.length || 0)
}
lastLabel=" go to detail, button"
euEnrgLblInfos={euEnrgLblInfos}
>