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

[251123] fix: CategoryPanel webOS용 재시도 및 가드로직 추가

Browse Source 
🕐 커밋 시간: 2025. 11. 23. 22:14:06

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +44줄
  • 삭제: -17줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/mainActions.js
  ~ com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
  ~ com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/actions/mainActions.js (javascript):
    🔄 Modified: getMainCategoryShowDetail(), getTop20Show()

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • UI 컴포넌트 아키텍처 개선
This commit is contained in:
hyeon soo noh
2025-11-23 22:14:06 +09:00
parent 549f5caee7
commit 3b95810946
3 changed files with 188 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
com.twin.app.shoptime/src/actions/mainActions.js
View File

@@ -152,8 +152,10 @@ export const getMainCategoryShowDetail = (props) => (dispatch, getState) => {
// 서브카테고리 조회 IF-LGSP-051 // 서브카테고리 조회 IF-LGSP-051
let getSubCategoryKey = null; let getSubCategoryKey = null;
let lastSubCategoryParams = {}; let lastSubCategoryParams = {};
const SUB_CATEGORY_RETRY_LIMIT = 3;
const SUB_CATEGORY_RETRY_DELAY_MS = 400;
export const getSubCategory = export const getSubCategory =
(params, pageNo = 1, key = null, clear = false) => (params, pageNo = 1, key = null, clear = false, retryCount = 0) =>
(dispatch, getState) => { (dispatch, getState) => {
const { lgCatCd, patnrIdList, tabType, filterType, recommendIncFlag } = params; const { lgCatCd, patnrIdList, tabType, filterType, recommendIncFlag } = params;
let pageSize = params.pageSize || CATEGORY_DATA_MAX_RESULTS_LIMIT; let pageSize = params.pageSize || CATEGORY_DATA_MAX_RESULTS_LIMIT;
@@ -214,6 +216,22 @@ export const getSubCategory =
}; };
const onFail = (error) => { const onFail = (error) => {
const nextRetryCount = retryCount + 1;
const canRetry = nextRetryCount < SUB_CATEGORY_RETRY_LIMIT;
if (canRetry) {
console.warn('getSubCategory retry', {
lgCatCd,
pageNo,
retryCount: nextRetryCount,
});
setTimeout(() => {
dispatch(getSubCategory(params, pageNo, currentKey, clear, nextRetryCount));
}, SUB_CATEGORY_RETRY_DELAY_MS * nextRetryCount);
return;
}
console.error('getSubCategory onFail', error); console.error('getSubCategory onFail', error);
if (pageNo === 1) { if (pageNo === 1) {
lastSubCategoryParams = {}; lastSubCategoryParams = {};
@@ -234,23 +252,23 @@ export const getSubCategory =
export const continueGetSubCategory = (key, pageNo) => (dispatch, getState) => { export const continueGetSubCategory = (key, pageNo) => (dispatch, getState) => {
if (!lastSubCategoryParams) { if (!lastSubCategoryParams) {
// <<<<<<< HEAD // <<<<<<< HEAD
console.warn('No previous category parameters found'); console.warn('No previous category parameters found');
// ======= // =======
// console.warn("No previous category parameters found"); // console.warn("No previous category parameters found");
// >>>>>>> gitlab/develop // >>>>>>> gitlab/develop
return; return;
} }
const subCategoryData = getState().main.subCategoryData; const subCategoryData = getState().main.subCategoryData;
const targetData = const targetData =
// <<<<<<< HEAD // <<<<<<< HEAD
subCategoryData[key]?.subCatItemList || subCategoryData[key]?.subCatShowList || []; subCategoryData[key]?.subCatItemList || subCategoryData[key]?.subCatShowList || [];
// ======= // =======
// subCategoryData[key]?.subCatItemList || // subCategoryData[key]?.subCatItemList ||
// subCategoryData[key]?.subCatShowList || // subCategoryData[key]?.subCatShowList ||
// []; // [];
// >>>>>>> gitlab/develop // >>>>>>> gitlab/develop
const totalCount = subCategoryData[key]?.total ?? 0; const totalCount = subCategoryData[key]?.total ?? 0;
const startIndex = CATEGORY_DATA_MAX_RESULTS_LIMIT * (pageNo - 1); const startIndex = CATEGORY_DATA_MAX_RESULTS_LIMIT * (pageNo - 1);
if ( if (
@@ -261,13 +279,13 @@ export const continueGetSubCategory = (key, pageNo) => (dispatch, getState) => {
//ignore query //ignore query
return; return;
} }
// <<<<<<< HEAD // <<<<<<< HEAD
dispatch(getSubCategory({ ...lastSubCategoryParams }, pageNo, getSubCategoryKey)); dispatch(getSubCategory({ ...lastSubCategoryParams }, pageNo, getSubCategoryKey));
// ======= // =======
// dispatch( // dispatch(
// getSubCategory({ ...lastSubCategoryParams }, pageNo, getSubCategoryKey) // getSubCategory({ ...lastSubCategoryParams }, pageNo, getSubCategoryKey)
// ); // );
// >>>>>>> gitlab/develop // >>>>>>> gitlab/develop
}; };
const clearSubCategory = () => ({ const clearSubCategory = () => ({
@@ -341,11 +359,11 @@ export const getMainYouMayLike =
getState, getState,
'get', 'get',
URLS.GET_YOUMAYLIKE, URLS.GET_YOUMAYLIKE,
// <<<<<<< HEAD // <<<<<<< HEAD
{ lgCatCd, exclCurationId, exclPatnrId, exclPrdtId, catDpTh3, catDpTh4 }, { lgCatCd, exclCurationId, exclPatnrId, exclPrdtId, catDpTh3, catDpTh4 },
// ======= // =======
// { lgCatCd, catDpTh3, catDpTh4, exclCurationId, exclPatnrId, exclPrdtId }, // { lgCatCd, catDpTh3, catDpTh4, exclCurationId, exclPatnrId, exclPrdtId },
// >>>>>>> gitlab/develop // >>>>>>> gitlab/develop
{}, {},
onSuccess, onSuccess,
onFail onFail

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

@@ -1,42 +1,23 @@
import React, { import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { import { useDispatch, useSelector } from 'react-redux';
useDispatch,
useSelector,
} from 'react-redux';
//아이콘 //아이콘
import { Job } from '@enact/core/util'; import { Job } from '@enact/core/util';
//enact //enact
import Skinnable from '@enact/sandstone/Skinnable'; import Skinnable from '@enact/sandstone/Skinnable';
import Spotlight from '@enact/spotlight'; import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
from '@enact/spotlight/SpotlightContainerDecorator';
import { Cancelable } from '@enact/ui/Cancelable'; import { Cancelable } from '@enact/ui/Cancelable';
import shoptimeFullIconRuc import shoptimeFullIconRuc from '../../../assets/images/icons/ic-lnb-logo-shoptime-ruc-white.png';
from '../../../assets/images/icons/ic-lnb-logo-shoptime-ruc-white.png';
//이미지 //이미지
import shoptimeFullIcon import shoptimeFullIcon from '../../../assets/images/icons/ic-lnb-logo-shoptime@3x.png';
from '../../../assets/images/icons/ic-lnb-logo-shoptime@3x.png';
import { gnbOpened } from '../../actions/commonActions'; import { gnbOpened } from '../../actions/commonActions';
import { import { checkEnterThroughGNB, resetHomeInfo } from '../../actions/homeActions';
checkEnterThroughGNB,
resetHomeInfo,
} from '../../actions/homeActions';
import { resetPanels } from '../../actions/panelActions'; import { resetPanels } from '../../actions/panelActions';
import { import { clearShopperHouseData, resetSearch, resetVoiceSearch } from '../../actions/searchActions';
clearShopperHouseData,
resetSearch,
resetVoiceSearch,
} from '../../actions/searchActions';
import usePrevious from '../../hooks/usePrevious'; import usePrevious from '../../hooks/usePrevious';
import useScrollTo from '../../hooks/useScrollTo'; import useScrollTo from '../../hooks/useScrollTo';
import { panel_names } from '../../utils/Config'; import { panel_names } from '../../utils/Config';
@@ -55,32 +36,14 @@ import TabItem from './TabItem';
import TabItemSub from './TabItemSub'; import TabItemSub from './TabItemSub';
import css from './TabLayout.module.less'; import css from './TabLayout.module.less';
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator({ enterTo: 'default-element' }, 'div');
{ enterTo: "default-element" },
"div"
);
const MainContainer = SpotlightContainerDecorator( const MainContainer = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
{ enterTo: "last-focused" },
"div"
);
const CancelableDiv = Cancelable( const CancelableDiv = Cancelable({ modal: true, onCancel: 'handleCancel' }, Skinnable(Container));
{ modal: true, onCancel: "handleCancel" },
Skinnable(Container)
);
class TabMenuItem { class TabMenuItem {
constructor( constructor(icons = '', title = '', spotlightId, path, patncNm, target, id, children = []) {
icons = "",
title = "",
spotlightId,
path,
patncNm,
target,
id,
children = []
) {
this.icons = icons; this.icons = icons;
this.title = title; this.title = title;
this.spotlightId = spotlightId; this.spotlightId = spotlightId;
@@ -147,30 +110,26 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
const [mainSelectedIndex, setMainSelectedIndex] = useState(-1); const [mainSelectedIndex, setMainSelectedIndex] = useState(-1);
const [secondDepthReduce, setSecondDepthReduce] = useState(false); const [secondDepthReduce, setSecondDepthReduce] = useState(false);
const [lastFocusId, setLastFocusId] = useState(null); const [lastFocusId, setLastFocusId] = useState(null);
const [selectedTitle, setSelectedTitle] = useState(""); const [selectedTitle, setSelectedTitle] = useState('');
const [selectedSubItemId, setSelectedSubItemId] = useState(null); const [selectedSubItemId, setSelectedSubItemId] = useState(null);
const [selectedSubIndex, setSelectedSubIndex] = useState(-1); const [selectedSubIndex, setSelectedSubIndex] = useState(-1);
const [subTabLastFocusId, setSubTabLastFocusId] = useState(null); const [subTabLastFocusId, setSubTabLastFocusId] = useState(null);
const [tabs, setTabs] = useState([]); const [tabs, setTabs] = useState([]);
const [tabFocused, setTabFocused] = useState([false, false, false]); //COLLABSED_MAIN, ACTIVATED_MAIN, ACTIVATED_SUB const [tabFocused, setTabFocused] = useState([false, false, false]); //COLLABSED_MAIN, ACTIVATED_MAIN, ACTIVATED_SUB
const panelSwitching = useRef(null); const panelSwitching = useRef(null);
const cursorVisible = useSelector( const cursorVisible = useSelector((state) => state.common.appStatus.cursorVisible);
(state) => state.common.appStatus.cursorVisible
);
const cursorVisibleRef = usePrevious(cursorVisible); const cursorVisibleRef = usePrevious(cursorVisible);
const data = useSelector((state) => state.home.menuData?.data); const data = useSelector((state) => state.home.menuData?.data);
const panels = useSelector((state) => state.panels.panels); const panels = useSelector((state) => state.panels.panels);
const { loginUserData } = useSelector((state) => state.common.appStatus); const { loginUserData } = useSelector((state) => state.common.appStatus);
const menuItems = useSelector((state) => state.home.menuItems); const menuItems = useSelector((state) => state.home.menuItems);
const webOSVersion = useSelector( const webOSVersion = useSelector((state) => state.common.appStatus.webOSVersion);
(state) => state.common.appStatus.webOSVersion
);
const httpHeader = useSelector((state) => state.common.httpHeader); const httpHeader = useSelector((state) => state.common.httpHeader);
const broadcast = useSelector( const broadcast = useSelector(
(state) => state.common.broadcast, (state) => state.common.broadcast,
(newState) => newState?.type !== "deActivateTab" // 'deActivateTab'일 때만 리렌더링 허용 (newState) => newState?.type !== 'deActivateTab' // 'deActivateTab'일 때만 리렌더링 허용
); );
const deviceCountryCode = httpHeader["X-Device-Country"]; const deviceCountryCode = httpHeader['X-Device-Country'];
const mouseNavOpen = useRef(new Job((func) => func(), 1000)); const mouseNavOpen = useRef(new Job((func) => func(), 1000));
const mouseMainEntered = useRef(false); const mouseMainEntered = useRef(false);
const scrollTopJobRef = useRef(new Job((func) => func(), 0)); const scrollTopJobRef = useRef(new Job((func) => func(), 0));
@@ -179,23 +138,21 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
let result = []; let result = [];
switch (type) { switch (type) {
case "GNB": case 'GNB':
result = result =
data?.gnb && data?.gnb?.map((item) => ({
data.gnb.map((item) => ({
title: item.menuNm, title: item.menuNm,
})); })) || [];
break; break;
//카테고리 //카테고리
case 10500: case 10500:
result = result =
data?.homeCategory && data?.homeCategory?.map((item) => ({
data.homeCategory.map((item) => ({
icons: CategoryIcon, icons: CategoryIcon,
id: item.lgCatCd, id: item.lgCatCd,
title: item.lgCatNm, title: item.lgCatNm,
spotlightId: "spotlight_category", spotlightId: 'spotlight_category',
target: [ target: [
{ {
name: panel_names.CATEGORY_PANEL, name: panel_names.CATEGORY_PANEL,
@@ -211,34 +168,33 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
}, },
}, },
], ],
})); })) || [];
break; break;
//브랜드 //브랜드
case 10300: case 10300:
result = result =
data?.shortFeaturedBrands && data?.shortFeaturedBrands?.map((item) => ({
data.shortFeaturedBrands.map((item) => ({
icons: FeaturedBrandIcon, icons: FeaturedBrandIcon,
id: item.patnrId, id: item.patnrId,
path: item.patncLogoPath, path: item.patncLogoPath,
patncNm: item.patncNm, patncNm: item.patncNm,
spotlightId: "spotlight_featuredbrand", spotlightId: 'spotlight_featuredbrand',
target: [ target: [
{ {
name: panel_names.FEATURED_BRANDS_PANEL, name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: { from: "gnb", patnrId: item.patnrId }, panelInfo: { from: 'gnb', patnrId: item.patnrId },
}, },
], ],
})); })) || [];
break; break;
// //
case 10600: case 10600:
result = data.mypage result = (
.map((item) => ({ data?.mypage?.map((item) => ({
icons: MyPageIcon, icons: MyPageIcon,
id: item.menuId, id: item.menuId,
title: item.menuNm, title: item.menuNm,
spotlightId: "spotlight_mypage", spotlightId: 'spotlight_mypage',
target: [ target: [
{ {
name: panel_names.MY_PAGE_PANEL, name: panel_names.MY_PAGE_PANEL,
@@ -249,15 +205,12 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
}, },
}, },
], ],
})) })) || []
.filter((item) => { ).filter((item) => {
if (!loginUserData.userNumber && item.title === "My Orders") { if (!loginUserData.userNumber && item.title === 'My Orders') {
return false; return false;
} }
if ( if (webOSVersion < '6.0' && (item.title === 'My Orders' || item.title === 'My Info')) {
webOSVersion < "6.0" &&
(item.title === "My Orders" || item.title === "My Info")
) {
return false; return false;
} }
return true; return true;
@@ -268,7 +221,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
result = [ result = [
{ {
icons: SearchIcon, icons: SearchIcon,
spotlightId: "spotlight_search", spotlightId: 'spotlight_search',
target: [{ name: panel_names.SEARCH_PANEL }], target: [{ name: panel_names.SEARCH_PANEL }],
}, },
]; ];
@@ -278,7 +231,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
result = [ result = [
{ {
icons: HomeIcon, icons: HomeIcon,
spotlightId: "spotlight_home", spotlightId: 'spotlight_home',
target: [{ name: panel_names.HOME_PANEL }], target: [{ name: panel_names.HOME_PANEL }],
}, },
]; ];
@@ -288,7 +241,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
result = [ result = [
{ {
icons: OnSaleIcon, icons: OnSaleIcon,
spotlightId: "spotlight_onsale", spotlightId: 'spotlight_onsale',
target: [{ name: panel_names.ON_SALE_PANEL }], target: [{ name: panel_names.ON_SALE_PANEL }],
}, },
]; ];
@@ -298,7 +251,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
result = [ result = [
{ {
icons: TrendingNowIcon, icons: TrendingNowIcon,
spotlightId: "spotlight_trendingnow", spotlightId: 'spotlight_trendingnow',
target: [{ name: panel_names.TRENDING_NOW_PANEL }], target: [{ name: panel_names.TRENDING_NOW_PANEL }],
}, },
]; ];
@@ -308,7 +261,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
result = [ result = [
{ {
icons: HotPicksIcon, icons: HotPicksIcon,
spotlightId: "spotlight_hotpicks", spotlightId: 'spotlight_hotpicks',
target: [{ name: panel_names.HOT_PICKS_PANEL }], target: [{ name: panel_names.HOT_PICKS_PANEL }],
}, },
]; ];
@@ -317,7 +270,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
result = [ result = [
{ {
icons: CartIcon, icons: CartIcon,
spotlightId: "spotlight_cart", spotlightId: 'spotlight_cart',
target: [{ name: panel_names.CART_PANEL }], target: [{ name: panel_names.CART_PANEL }],
}, },
]; ];
@@ -331,7 +284,12 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
if (data) { if (data) {
for (let i = 0; i < menuItems.length; i++) { for (let i = 0; i < menuItems.length; i++) {
const currentKey = menuItems[i].menuId; const currentKey = menuItems[i].menuId;
const menuInfo = getMenuData(currentKey || "GNB"); const menuInfo = getMenuData(currentKey || 'GNB') || [];
if (!Array.isArray(menuInfo) || menuInfo.length === 0) {
menuItems[i].children = [];
continue;
}
for (let j = 0; j < menuInfo.length; j++) { for (let j = 0; j < menuInfo.length; j++) {
if (![10600, 10500, 10300].includes(currentKey)) { if (![10600, 10500, 10300].includes(currentKey)) {
@@ -595,7 +553,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
}, [mainExpanded, mainSelectedIndex]); }, [mainExpanded, mainSelectedIndex]);
const logoImg = useMemo(() => { const logoImg = useMemo(() => {
if (deviceCountryCode === "RU") { if (deviceCountryCode === 'RU') {
return shoptimeFullIconRuc; return shoptimeFullIconRuc;
} else return shoptimeFullIcon; } else return shoptimeFullIcon;
}, [deviceCountryCode]); }, [deviceCountryCode]);
@@ -608,11 +566,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
}, [topPanelName]); }, [topPanelName]);
const showSubTab = useMemo(() => { const showSubTab = useMemo(() => {
if ( if (tabActivated && tabs[mainSelectedIndex] && tabs[mainSelectedIndex].hasChildren()) {
tabActivated &&
tabs[mainSelectedIndex] &&
tabs[mainSelectedIndex].hasChildren()
) {
return true; // 서브 탭이 있는 경우 return true; // 서브 탭이 있는 경우
} }
return false; // 서브 탭이 없는 경우 return false; // 서브 탭이 없는 경우
@@ -640,7 +594,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
dispatch(gnbOpened(true)); dispatch(gnbOpened(true));
if (panels.length === 0) { if (panels.length === 0) {
Spotlight.focus("spotlight_home"); Spotlight.focus('spotlight_home');
return; return;
} }
@@ -650,7 +604,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
// //
else { else {
if (!subTabLastFocusId) { if (!subTabLastFocusId) {
Spotlight.focus("spotlight_home"); Spotlight.focus('spotlight_home');
} }
} }
} }
@@ -664,7 +618,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
useEffect(() => { useEffect(() => {
if (!panelInfo) { if (!panelInfo) {
setMainSelectedIndex(-1); setMainSelectedIndex(-1);
setLastFocusId("spotlight_home"); setLastFocusId('spotlight_home');
setSubTabLastFocusId(null); setSubTabLastFocusId(null);
return; return;
} }
@@ -681,17 +635,11 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
subTarget = panelInfo.lgCatCd; subTarget = panelInfo.lgCatCd;
} }
// case: Featured Brands 2depth // case: Featured Brands 2depth
else if ( else if (topPanelName === panel_names.FEATURED_BRANDS_PANEL && panelInfo?.patnrId) {
topPanelName === panel_names.FEATURED_BRANDS_PANEL &&
panelInfo?.patnrId
) {
subTarget = panelInfo.patnrId; subTarget = panelInfo.patnrId;
} }
// case: My Info 2depth // case: My Info 2depth
else if ( else if (topPanelName === panel_names.MY_PAGE_PANEL && panelInfo?.menuId) {
topPanelName === panel_names.MY_PAGE_PANEL &&
panelInfo?.menuId
) {
subTarget = panelInfo.menuId; subTarget = panelInfo.menuId;
} }
} }
@@ -716,8 +664,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
}, [tabActivated, subTabLastFocusId, mainSelectedIndex]); }, [tabActivated, subTabLastFocusId, mainSelectedIndex]);
useEffect(() => { useEffect(() => {
const hasFeaturedBrands = const hasFeaturedBrands = tabs[mainSelectedIndex]?.children[0]?.path !== undefined;
tabs[mainSelectedIndex]?.children[0]?.path !== undefined;
const SCROLL_OFFSET_INDEX = hasFeaturedBrands ? 8 : 9; const SCROLL_OFFSET_INDEX = hasFeaturedBrands ? 8 : 9;
@@ -735,9 +682,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
tabs[mainSelectedIndex]?.children.length - 1 >= selectedSubIndex tabs[mainSelectedIndex]?.children.length - 1 >= selectedSubIndex
) { ) {
const targetScrollIndex = selectedSubIndex - SCROLL_OFFSET_INDEX; const targetScrollIndex = selectedSubIndex - SCROLL_OFFSET_INDEX;
scrollTopJobRef.current.start(() => scrollTopJobRef.current.start(() => scrollTop({ y: y * targetScrollIndex }));
scrollTop({ y: y * targetScrollIndex })
);
return () => scrollTopJobRef.current.stop(); return () => scrollTopJobRef.current.stop();
} }
@@ -770,8 +715,8 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
}, [cursorVisible]); }, [cursorVisible]);
useEffect(() => { useEffect(() => {
if (broadcast?.type === "deActivateTab") { if (broadcast?.type === 'deActivateTab') {
console.log("TabLayout deactivateTab by broadcast"); console.log('TabLayout deactivateTab by broadcast');
deActivateTab(); deActivateTab();
} }
}, [broadcast]); }, [broadcast]);
@@ -803,7 +748,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
const moveFocusToMainTab = useCallback( const moveFocusToMainTab = useCallback(
(e) => { (e) => {
if (e.key === "ArrowLeft" && showSubTab && lastFocusId) { if (e.key === 'ArrowLeft' && showSubTab && lastFocusId) {
Spotlight.focus(lastFocusId); Spotlight.focus(lastFocusId);
} }
}, },
@@ -846,16 +791,14 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
<img <img
src={logoImg} src={logoImg}
alt="" alt=""
className={classNames( className={classNames(deviceCountryCode === 'RU' && css.rucLogo)}
deviceCountryCode === "RU" && css.rucLogo
)}
/> />
</h1> </h1>
{tabs.map((item, index) => ( {tabs.map((item, index) => (
<TabItem <TabItem
{...item} {...item}
key={"tabitemExpanded" + index} key={'tabitemExpanded' + index}
onFocus={onFocus} onFocus={onFocus}
spotlightId={item.spotlightId} spotlightId={item.spotlightId}
setLastFocusId={setLastFocusId} setLastFocusId={setLastFocusId}
@@ -865,11 +808,10 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
icons={item.icons} icons={item.icons}
expanded={mainExpanded} expanded={mainExpanded}
mainSelected={ mainSelected={
(panels.length === 0 && (panels.length === 0 && item.spotlightId === 'spotlight_home') ||
item.spotlightId === "spotlight_home") ||
(panels[0]?.name === panel_names.PLAYER_PANEL && (panels[0]?.name === panel_names.PLAYER_PANEL &&
panels.length === 1 && panels.length === 1 &&
item.spotlightId === "spotlight_home") || item.spotlightId === 'spotlight_home') ||
(Array.isArray(item.target) && (Array.isArray(item.target) &&
item.target[0]?.name && item.target[0]?.name &&
panels[0]?.name === item.target[0]?.name) panels[0]?.name === item.target[0]?.name)
@@ -906,19 +848,14 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
onMouseLeave={onTabBlur(ACTIVATED_SUB)} onMouseLeave={onTabBlur(ACTIVATED_SUB)}
onKeyDown={moveFocusToMainTab} onKeyDown={moveFocusToMainTab}
> >
<TScroller <TScroller cbScrollTo={getScrollTo} className={css.scrollWrap}>
cbScrollTo={getScrollTo}
className={css.scrollWrap}
>
{showSubTab && {showSubTab &&
tabs[mainSelectedIndex]?.children.map((item, index) => { tabs[mainSelectedIndex]?.children.map((item, index) => {
return ( return (
<TabItemSub <TabItemSub
{...item} {...item}
mainMenuTitle={ mainMenuTitle={tabs && tabs[mainSelectedIndex]?.title}
tabs && tabs[mainSelectedIndex]?.title key={'tabitemSubmenu' + index}
}
key={"tabitemSubmenu" + index}
spotlightId={item.spotlightId} spotlightId={item.spotlightId}
setLastFocusId={setSubTabLastFocusId} setLastFocusId={setSubTabLastFocusId}
onClick={onClickSubItem} onClick={onClickSubItem}
@@ -926,7 +863,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
index={index} index={index}
isSubItem={true} isSubItem={true}
deActivateTab={deActivateTab} deActivateTab={deActivateTab}
title={item.title + "-sub"} title={item.title + '-sub'}
itemId={item.id} itemId={item.id}
path={item.path} path={item.path}
patncNm={item.patncNm} patncNm={item.patncNm}
@@ -940,10 +877,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
panels[0]?.panelInfo === item.target[0]?.panelInfo panels[0]?.panelInfo === item.target[0]?.panelInfo
} }
label={ label={
index * 1 + index * 1 + 1 + ' of ' + tabs[mainSelectedIndex]?.children.length
1 +
" of " +
tabs[mainSelectedIndex]?.children.length
} }
/> />
); );

206
com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
View File

@@ -1,38 +1,25 @@
import React, { import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import classNames from "classnames"; import classNames from 'classnames';
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from 'react-redux';
import { Job } from "@enact/core/util"; import { Job } from '@enact/core/util';
import Spotlight from "@enact/spotlight"; import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
import { setContainerLastFocusedElement } from "@enact/spotlight/src/container"; import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
import { import { sendLogCuration, sendLogGNB, sendLogTotalRecommend } from '../../actions/logActions';
sendLogCuration, import { continueGetSubCategory, getSubCategory } from '../../actions/mainActions';
sendLogGNB, import { updatePanel } from '../../actions/panelActions';
sendLogTotalRecommend, import SectionTitle from '../../components/SectionTitle/SectionTitle';
} from "../../actions/logActions"; import TBody from '../../components/TBody/TBody';
import { import TButton, { TYPES } from '../../components/TButton/TButton';
continueGetSubCategory, import TButtonTab, { LIST_TYPE } from '../../components/TButtonTab/TButtonTab';
getSubCategory, import TDropDown from '../../components/TDropDown/TDropDown';
} from "../../actions/mainActions"; import THeader from '../../components/THeader/THeader';
import { updatePanel } from "../../actions/panelActions"; import TPanel from '../../components/TPanel/TPanel';
import SectionTitle from "../../components/SectionTitle/SectionTitle"; import TVerticalPagenator from '../../components/TVerticalPagenator/TVerticalPagenator';
import TBody from "../../components/TBody/TBody"; import usePrevious from '../../hooks/usePrevious';
import TButton, { TYPES } from "../../components/TButton/TButton";
import TButtonTab, { LIST_TYPE } from "../../components/TButtonTab/TButtonTab";
import TDropDown from "../../components/TDropDown/TDropDown";
import THeader from "../../components/THeader/THeader";
import TPanel from "../../components/TPanel/TPanel";
import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";
import usePrevious from "../../hooks/usePrevious";
import { import {
CATEGORY_DATA_MAX_RESULTS_LIMIT, CATEGORY_DATA_MAX_RESULTS_LIMIT,
LOG_CONTEXT_NAME, LOG_CONTEXT_NAME,
@@ -40,28 +27,21 @@ import {
LOG_MESSAGE_ID, LOG_MESSAGE_ID,
LOG_TP_NO, LOG_TP_NO,
panel_names, panel_names,
} from "../../utils/Config"; } from '../../utils/Config';
import { import { $L, getSpottableDescendants, isElementInContainer } from '../../utils/helperMethods';
$L, import { SpotlightIds } from '../../utils/SpotlightIds';
getSpottableDescendants, import ItemContents from './CategoryContents/ItemContents/ItemContents';
isElementInContainer, import ShowContents from './CategoryContents/ShowContents/ShowContents';
} from "../../utils/helperMethods"; import css from './CategoryPanel.module.less';
import { SpotlightIds } from "../../utils/SpotlightIds";
import ItemContents from "./CategoryContents/ItemContents/ItemContents";
import ShowContents from "./CategoryContents/ShowContents/ShowContents";
import css from "./CategoryPanel.module.less";
const Container = SpotlightContainerDecorator({ enterTo: null }, "div"); const Container = SpotlightContainerDecorator({ enterTo: null }, 'div');
const TabContainer = SpotlightContainerDecorator( const TabContainer = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
{ enterTo: "last-focused" },
"div"
);
const INDEX_ITEM = 0; const INDEX_ITEM = 0;
const INDEX_SHOWS = 1; const INDEX_SHOWS = 1;
const getButtonTabList = () => { const getButtonTabList = () => {
return [$L("ITEM"), $L("SHOWS")]; return [$L('ITEM'), $L('SHOWS')];
}; };
let buttonTabList = null; let buttonTabList = null;
@@ -93,9 +73,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
const [tab, setTab] = useState(panelInfo.tab ? panelInfo.tab : INDEX_ITEM); const [tab, setTab] = useState(panelInfo.tab ? panelInfo.tab : INDEX_ITEM);
const tabRef = usePrevious(tab); const tabRef = usePrevious(tab);
const categoryDatasRef = usePrevious(categoryDatas); const categoryDatasRef = usePrevious(categoryDatas);
const [dropDownTab, setDropDownTab] = useState( const [dropDownTab, setDropDownTab] = useState(panelInfo.dropDownTab ? panelInfo.dropDownTab : 0);
panelInfo.dropDownTab ? panelInfo.dropDownTab : 0
);
const dropDownTabRef = usePrevious(dropDownTab); const dropDownTabRef = usePrevious(dropDownTab);
const [filterMethods, setFilterMethods] = useState([]); const [filterMethods, setFilterMethods] = useState([]);
const [styleChange, setStyleChange] = useState(false); const [styleChange, setStyleChange] = useState(false);
@@ -143,19 +121,19 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
} }
logParamsRef.current = { logParamsRef.current = {
cnttTpNm: "", cnttTpNm: '',
expsOrd: `${panelInfo?.expsOrd}`, expsOrd: `${panelInfo?.expsOrd}`,
lgCatCd, lgCatCd,
lgCatNm, lgCatNm,
linkTpCd: panelInfo?.linkTpCd, linkTpCd: panelInfo?.linkTpCd,
logTpNo: LOG_TP_NO.CURATION.CATEGORY, logTpNo: LOG_TP_NO.CURATION.CATEGORY,
sortTpNm: "", sortTpNm: '',
}; };
}, [categoryItemInfos, categoryShowInfos, panelInfo?.expsOrd, tab]); }, [categoryItemInfos, categoryShowInfos, panelInfo?.expsOrd, tab]);
useEffect(() => { useEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
const cnttTpNm = tab === INDEX_SHOWS ? "Show" : "Item"; const cnttTpNm = tab === INDEX_SHOWS ? 'Show' : 'Item';
dispatch(sendLogCuration({ ...logParamsRef.current, cnttTpNm })); dispatch(sendLogCuration({ ...logParamsRef.current, cnttTpNm }));
}, 1000); }, 1000);
@@ -164,7 +142,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
useEffect(() => { useEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
const sortTpNm = dropDownTab === 0 ? "New" : "Popular"; const sortTpNm = dropDownTab === 0 ? 'New' : 'Popular';
dispatch(sendLogCuration({ ...logParamsRef.current, sortTpNm })); dispatch(sendLogCuration({ ...logParamsRef.current, sortTpNm }));
}, 1000); }, 1000);
@@ -172,15 +150,20 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
}, [dropDownTab, panelInfo?.expsOrd]); }, [dropDownTab, panelInfo?.expsOrd]);
const reload = useCallback(() => { const reload = useCallback(() => {
const tabType = tabRef.current === INDEX_SHOWS ? "CAT00101" : "CAT00102"; const tabType = tabRef.current === INDEX_SHOWS ? 'CAT00101' : 'CAT00102';
const filterType = dropDownTabRef.current === 0 ? "CAT00202" : "CAT00201"; const filterType = dropDownTabRef.current === 0 ? 'CAT00202' : 'CAT00201';
const pageSize = "20"; const pageSize = '20';
const hasCategoryData =
tabRef.current === INDEX_SHOWS
? !!categoryDatas?.categoryShowInfos
: !!categoryDatas?.categoryItemInfos;
if ( if (
categoryParams?.lgCatCd !== lgCatCd || categoryParams?.lgCatCd !== lgCatCd ||
categoryParams?.tabType !== tabType || categoryParams?.tabType !== tabType ||
categoryParams?.filterType !== filterType || categoryParams?.filterType !== filterType ||
categoryParams?.pageSize !== pageSize categoryParams?.pageSize !== pageSize ||
!hasCategoryData
) { ) {
dispatch( dispatch(
getSubCategory( getSubCategory(
@@ -196,7 +179,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
) )
); );
} }
}, [categoryParams, lgCatCd, tab, dropDownTab]); }, [categoryDatas, categoryParams, lgCatCd, tab, dropDownTab]);
//panelInfo changed //panelInfo changed
useEffect(() => { useEffect(() => {
@@ -207,9 +190,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
if (panelInfo.tab !== tab) { if (panelInfo.tab !== tab) {
setContainerLastFocusedElement(null, [SpotlightIds.SHOW_PRODUCTS_BOX]); setContainerLastFocusedElement(null, [SpotlightIds.SHOW_PRODUCTS_BOX]);
setContainerLastFocusedElement(null, [SpotlightIds.SHOW_CONTENTS_BOX]); setContainerLastFocusedElement(null, [SpotlightIds.SHOW_CONTENTS_BOX]);
setContainerLastFocusedElement(null, [ setContainerLastFocusedElement(null, [SpotlightIds.CATEGORY_CONTENTS_BOX]);
SpotlightIds.CATEGORY_CONTENTS_BOX,
]);
setTab(panelInfo.tab ? panelInfo.tab : INDEX_ITEM); setTab(panelInfo.tab ? panelInfo.tab : INDEX_ITEM);
} else if (panelInfo.currentSpot) { } else if (panelInfo.currentSpot) {
Spotlight.focus(panelInfo.currentSpot); Spotlight.focus(panelInfo.currentSpot);
@@ -217,7 +198,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
setTimeout(() => { setTimeout(() => {
if (tab === INDEX_ITEM) { if (tab === INDEX_ITEM) {
Spotlight.focus(`[data-spotlight-id="${"tab-" + tab}"]`); Spotlight.focus(`[data-spotlight-id="${'tab-' + tab}"]`);
} }
Spotlight.focus(SpotlightIds.TBODY); Spotlight.focus(SpotlightIds.TBODY);
if (panelInfo.currentSpot) { if (panelInfo.currentSpot) {
@@ -230,13 +211,9 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
useEffect(() => { useEffect(() => {
if (categoryDatas) { if (categoryDatas) {
const tabNode = document.querySelector( const tabNode = document.querySelector(`[data-spotlight-id="${'tab-' + tab}"]`);
`[data-spotlight-id="${"tab-" + tab}"]`
);
if (tabNode) { if (tabNode) {
setContainerLastFocusedElement(tabNode, [ setContainerLastFocusedElement(tabNode, [SpotlightIds.CATEGORY_TAB_CONTAINER]);
SpotlightIds.CATEGORY_TAB_CONTAINER,
]);
} }
} }
}, [tab, categoryDatas, panelInfo]); }, [tab, categoryDatas, panelInfo]);
@@ -247,9 +224,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
setContainerLastFocusedElement(null, [SpotlightIds.CATEGORY_CONTENTS_BOX]); setContainerLastFocusedElement(null, [SpotlightIds.CATEGORY_CONTENTS_BOX]);
reload(); reload();
if (categoryFilterCd) { if (categoryFilterCd) {
const detailCdNmValues = categoryFilterCd const detailCdNmValues = categoryFilterCd.map((item) => $L(item.detailCdNm)).reverse();
.map((item) => $L(item.detailCdNm))
.reverse();
setFilterMethods(detailCdNmValues); setFilterMethods(detailCdNmValues);
} }
@@ -274,7 +249,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
const target = ev.currentTarget; const target = ev.currentTarget;
let currentSpotId = null; let currentSpotId = null;
if (target) { if (target) {
currentSpotId = target.getAttribute("data-spotlight-id"); currentSpotId = target.getAttribute('data-spotlight-id');
} }
dispatch( dispatch(
updatePanel({ updatePanel({
@@ -293,43 +268,28 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
let clickedTopShow = null; let clickedTopShow = null;
let clickedTopShowPrd = null; let clickedTopShowPrd = null;
if ( if (categoryItemInfos?.subCatItemList && currentSpotId.includes('categoryItemContents')) {
categoryItemInfos?.subCatItemList && const clickedNumber = Number(currentSpotId.replace('categoryItemContents', ''));
currentSpotId.includes("categoryItemContents")
) {
const clickedNumber = Number(
currentSpotId.replace("categoryItemContents", "")
);
clickedItem = categoryItemInfos.subCatItemList[clickedNumber]; clickedItem = categoryItemInfos.subCatItemList[clickedNumber];
} }
if ( if (categoryShowInfos?.subCatShowList && currentSpotId.includes('categoryShowContents')) {
categoryShowInfos?.subCatShowList && const clickedNumber = Number(currentSpotId.replace('categoryShowContents', ''));
currentSpotId.includes("categoryShowContents")
) {
const clickedNumber = Number(
currentSpotId.replace("categoryShowContents", "")
);
clickedShow = categoryShowInfos.subCatShowList[clickedNumber]; clickedShow = categoryShowInfos.subCatShowList[clickedNumber];
} }
if (topShowInfo?.productInfos) { if (topShowInfo?.productInfos) {
if (currentSpotId.includes("showCategory-spotlightId")) { if (currentSpotId.includes('showCategory-spotlightId')) {
const clickedId = currentSpotId.replace( const clickedId = currentSpotId.replace('showCategory-spotlightId-', '');
"showCategory-spotlightId-", clickedTopShowPrd = topShowInfo.productInfos.find((item) => clickedId === item.prdtId);
"" } else if (currentSpotId.includes('category-topshow')) {
);
clickedTopShowPrd = topShowInfo.productInfos.find(
(item) => clickedId === item.prdtId
);
} else if (currentSpotId.includes("category-topshow")) {
clickedTopShow = topShowInfo; clickedTopShow = topShowInfo;
} }
} }
const params = { const params = {
tabTitle: tabRef.current === 0 ? "ITEM" : "SHOWS", tabTitle: tabRef.current === 0 ? 'ITEM' : 'SHOWS',
sortType: dropDownTabRef.current === 0 ? "NEW" : "MOST POPULAR", sortType: dropDownTabRef.current === 0 ? 'NEW' : 'MOST POPULAR',
contextName: LOG_CONTEXT_NAME.CATEGORY, contextName: LOG_CONTEXT_NAME.CATEGORY,
messageId: LOG_MESSAGE_ID.CONTENTCLICK, messageId: LOG_MESSAGE_ID.CONTENTCLICK,
}; };
@@ -359,8 +319,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
// 탑쇼 상품 로그 // 탑쇼 상품 로그
if (clickedTopShowPrd) { if (clickedTopShowPrd) {
const { prdtId, prdtNm, priceInfo } = clickedTopShowPrd; const { prdtId, prdtNm, priceInfo } = clickedTopShowPrd;
const [regularPrice, discountPrice, , , discountRate] = const [regularPrice, discountPrice, , , discountRate] = priceInfo?.split('|') || [];
priceInfo?.split("|") || [];
sendLog({ sendLog({
...params, ...params,
category: categoryShowInfos?.catNm, category: categoryShowInfos?.catNm,
@@ -387,8 +346,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
// 아이템 로그 // 아이템 로그
if (clickedItem) { if (clickedItem) {
const { prdtNm, priceInfo, brndNm, prdtId, patnrId } = clickedItem; const { prdtNm, priceInfo, brndNm, prdtId, patnrId } = clickedItem;
const [regularPrice, discountPrice, , , discountRate] = const [regularPrice, discountPrice, , , discountRate] = priceInfo?.split('|') || [];
priceInfo?.split("|") || [];
sendLog({ sendLog({
...params, ...params,
category: categoryItemInfos?.catNm, category: categoryItemInfos?.catNm,
@@ -428,7 +386,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
cbChangePageRef.current(0, true, false); cbChangePageRef.current(0, true, false);
} }
setContainerLastFocusedElement(null, [SpotlightIds.CATEGORY_CONTENTS_BOX]); setContainerLastFocusedElement(null, [SpotlightIds.CATEGORY_CONTENTS_BOX]);
Spotlight.focus("tab-" + tab); Spotlight.focus('tab-' + tab);
}, [tab]); }, [tab]);
//onScroll* event can't use Callback //onScroll* event can't use Callback
@@ -437,14 +395,9 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
tabRef.current === INDEX_SHOWS tabRef.current === INDEX_SHOWS
? SpotlightIds.SHOW_CONTENTS_BOX ? SpotlightIds.SHOW_CONTENTS_BOX
: SpotlightIds.CATEGORY_CONTENTS_BOX; : SpotlightIds.CATEGORY_CONTENTS_BOX;
const targetKey = const targetKey = tabRef.current === INDEX_SHOWS ? 'categoryShowInfos' : 'categoryItemInfos';
tabRef.current === INDEX_SHOWS
? "categoryShowInfos"
: "categoryItemInfos";
const targetData = categoryDatasRef.current[targetKey]; const targetData = categoryDatasRef.current[targetKey];
const subKey = targetData?.subCatItemList const subKey = targetData?.subCatItemList ? 'subCatItemList' : 'subCatShowList';
? "subCatItemList"
: "subCatShowList";
const spottableDescendants = getSpottableDescendants(targetContentsBoxId); const spottableDescendants = getSpottableDescendants(targetContentsBoxId);
const visibleIndexes = []; const visibleIndexes = [];
@@ -473,40 +426,33 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
}, []); }, []);
const showGotoTopButton = useMemo(() => { const showGotoTopButton = useMemo(() => {
const targetData = const targetData = tab === INDEX_SHOWS ? categoryShowInfos : categoryItemInfos;
tab === INDEX_SHOWS ? categoryShowInfos : categoryItemInfos; const subKey = targetData?.subCatItemList ? 'subCatItemList' : 'subCatShowList';
const subKey = targetData?.subCatItemList
? "subCatItemList"
: "subCatShowList";
if (!targetData || !targetData[subKey] || targetData.total < 5) { if (!targetData || !targetData[subKey] || targetData.total < 5) {
return false; return false;
} }
return subKey === "subCatShowList" return subKey === 'subCatShowList'
? targetData[subKey].length + 1 >= targetData.total ? targetData[subKey].length + 1 >= targetData.total
: targetData[subKey].length >= targetData.total; : targetData[subKey].length >= targetData.total;
}, [tab, categoryShowInfos, categoryItemInfos]); }, [tab, categoryShowInfos, categoryItemInfos]);
const itemCountNumbers = useMemo(() => { const itemCountNumbers = useMemo(() => {
if (categoryItemInfos && tab === INDEX_ITEM) { if (categoryItemInfos && tab === INDEX_ITEM) {
return categoryItemInfos.subCatItemList.length > 0 return categoryItemInfos.subCatItemList.length > 0 ? categoryItemInfos.total : '0';
? categoryItemInfos.total
: "0";
} else if (categoryShowInfos && tab === INDEX_SHOWS) { } else if (categoryShowInfos && tab === INDEX_SHOWS) {
return categoryShowInfos.subCatShowList.length > 0 return categoryShowInfos.subCatShowList.length > 0 ? categoryShowInfos.total : '0';
? categoryShowInfos.total
: "0";
} else { } else {
return; return;
} }
}, [categoryItemInfos, categoryShowInfos, tab]); }, [categoryItemInfos, categoryShowInfos, tab]);
useEffect(() => { useEffect(() => {
const c = document.getElementById("floatLayer"); const c = document.getElementById('floatLayer');
c.classList.add("category_dropdown"); c.classList.add('category_dropdown');
return () => { return () => {
c.classList.remove("category_dropdown"); c.classList.remove('category_dropdown');
}; };
}, []); }, []);
@@ -521,7 +467,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
<TBody className={css.tBody} scrollable={false}> <TBody className={css.tBody} scrollable={false}>
<TVerticalPagenator <TVerticalPagenator
className={css.tVerticalPagenator} className={css.tVerticalPagenator}
spotlightId={"category_verticalPagenator"} spotlightId={'category_verticalPagenator'}
defaultContainerId={panelInfo?.focusedContainerId} defaultContainerId={panelInfo?.focusedContainerId}
onScrollStop={onScrollStop} onScrollStop={onScrollStop}
onFocusedContainerId={onFocusedContainerId} onFocusedContainerId={onFocusedContainerId}
@@ -530,7 +476,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
deleteFocus={true} deleteFocus={true}
> >
<Container <Container
spotlightId={"categorypanel_top_point_area"} spotlightId={'categorypanel_top_point_area'}
data-wheel-point={true} data-wheel-point={true}
className={css.cateContainer} className={css.cateContainer}
> >
@@ -570,9 +516,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
</TabContainer> </TabContainer>
)} )}
{tab === INDEX_ITEM && <ItemContents onClick={handleItemClick} />} {tab === INDEX_ITEM && <ItemContents onClick={handleItemClick} />}
{tab === INDEX_SHOWS && ( {tab === INDEX_SHOWS && <ShowContents onClick={handleItemClick} />}
<ShowContents onClick={handleItemClick} />
)}
</Container> </Container>
{showGotoTopButton && ( {showGotoTopButton && (
<TButton <TButton